From 49386e17b2bd17c334a7ebda1607eeec0e659907 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Wed, 19 Aug 2020 17:06:51 -0700 Subject: [PATCH] Add Icons and ToolbarButtons --- .storybook/main.js | 29 +- package-lock.json | 12 +- package.json | 1 + src/react-components/icons/Audio.svg | 4 + src/react-components/icons/Avatar.svg | 11 + src/react-components/icons/Camera.svg | 5 + src/react-components/icons/CaretDown.svg | 3 + src/react-components/icons/Chat.svg | 3 + src/react-components/icons/ChevronBack.svg | 3 + src/react-components/icons/Close.svg | 4 + src/react-components/icons/Delete.svg | 8 + src/react-components/icons/Desktop.svg | 6 + src/react-components/icons/Discord.svg | 4 + src/react-components/icons/Document.svg | 4 + src/react-components/icons/Enter.svg | 5 + src/react-components/icons/GIF.svg | 3 + src/react-components/icons/GoTo.svg | 7 + src/react-components/icons/Help.svg | 5 + src/react-components/icons/Hide.svg | 7 + src/react-components/icons/Icon.stories.js | 105 ++++ src/react-components/icons/IconTemplate.js | 46 ++ src/react-components/icons/Image.svg | 6 + src/react-components/icons/Invite.svg | 4 + src/react-components/icons/Leave.svg | 5 + src/react-components/icons/Link.svg | 3 + src/react-components/icons/Microphone.svg | 6 + .../icons/MicrophoneMuted.svg | 7 + src/react-components/icons/More.svg | 5 + src/react-components/icons/Object.svg | 5 + src/react-components/icons/Objects.svg | 3 + src/react-components/icons/Pen.svg | 4 + src/react-components/icons/People.svg | 6 + src/react-components/icons/Phone.svg | 11 + src/react-components/icons/Pin.svg | 3 + src/react-components/icons/Reaction.svg | 6 + src/react-components/icons/Scene.svg | 8 + src/react-components/icons/Settings.svg | 3 + src/react-components/icons/Share.svg | 6 + src/react-components/icons/Show.svg | 4 + src/react-components/icons/Star.svg | 3 + src/react-components/icons/Text.svg | 6 + src/react-components/icons/Upload.svg | 12 + src/react-components/icons/VR.svg | 3 + src/react-components/icons/Video.svg | 4 + src/react-components/icons/VolumeHigh.svg | 6 + src/react-components/icons/VolumeMuted.svg | 8 + src/react-components/icons/VolumeOff.svg | 3 + src/react-components/icons/Wand.svg | 9 + src/react-components/input/Button.js | 4 +- src/react-components/input/Button.scss | 4 +- src/react-components/input/Button.stories.js | 59 +-- src/react-components/styles/global.scss | 7 + src/react-components/styles/theme.scss | 3 + .../toolbar/Toolbar.stories.js | 26 + src/react-components/toolbar/ToolbarButton.js | 30 ++ .../toolbar/ToolbarButton.scss | 481 ++++++++++++++++++ webpack.config.js | 14 + 57 files changed, 994 insertions(+), 58 deletions(-) create mode 100644 src/react-components/icons/Audio.svg create mode 100644 src/react-components/icons/Avatar.svg create mode 100644 src/react-components/icons/Camera.svg create mode 100644 src/react-components/icons/CaretDown.svg create mode 100644 src/react-components/icons/Chat.svg create mode 100644 src/react-components/icons/ChevronBack.svg create mode 100644 src/react-components/icons/Close.svg create mode 100644 src/react-components/icons/Delete.svg create mode 100644 src/react-components/icons/Desktop.svg create mode 100644 src/react-components/icons/Discord.svg create mode 100644 src/react-components/icons/Document.svg create mode 100644 src/react-components/icons/Enter.svg create mode 100644 src/react-components/icons/GIF.svg create mode 100644 src/react-components/icons/GoTo.svg create mode 100644 src/react-components/icons/Help.svg create mode 100644 src/react-components/icons/Hide.svg create mode 100644 src/react-components/icons/Icon.stories.js create mode 100644 src/react-components/icons/IconTemplate.js create mode 100644 src/react-components/icons/Image.svg create mode 100644 src/react-components/icons/Invite.svg create mode 100644 src/react-components/icons/Leave.svg create mode 100644 src/react-components/icons/Link.svg create mode 100644 src/react-components/icons/Microphone.svg create mode 100644 src/react-components/icons/MicrophoneMuted.svg create mode 100644 src/react-components/icons/More.svg create mode 100644 src/react-components/icons/Object.svg create mode 100644 src/react-components/icons/Objects.svg create mode 100644 src/react-components/icons/Pen.svg create mode 100644 src/react-components/icons/People.svg create mode 100644 src/react-components/icons/Phone.svg create mode 100644 src/react-components/icons/Pin.svg create mode 100644 src/react-components/icons/Reaction.svg create mode 100644 src/react-components/icons/Scene.svg create mode 100644 src/react-components/icons/Settings.svg create mode 100644 src/react-components/icons/Share.svg create mode 100644 src/react-components/icons/Show.svg create mode 100644 src/react-components/icons/Star.svg create mode 100644 src/react-components/icons/Text.svg create mode 100644 src/react-components/icons/Upload.svg create mode 100644 src/react-components/icons/VR.svg create mode 100644 src/react-components/icons/Video.svg create mode 100644 src/react-components/icons/VolumeHigh.svg create mode 100644 src/react-components/icons/VolumeMuted.svg create mode 100644 src/react-components/icons/VolumeOff.svg create mode 100644 src/react-components/icons/Wand.svg create mode 100644 src/react-components/toolbar/Toolbar.stories.js create mode 100644 src/react-components/toolbar/ToolbarButton.js create mode 100644 src/react-components/toolbar/ToolbarButton.scss diff --git a/.storybook/main.js b/.storybook/main.js index 3620dda29..c77e117ad 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -6,10 +6,37 @@ module.exports = { webpackFinal: async config => { config.module.rules.push({ test: /\.scss$/, - use: ["style-loader", "css-loader", "sass-loader"], + use: [ + "style-loader", + { + loader: "css-loader", + options: { + importLoaders: "1", + localIdentName: "[name]__[local]___[hash:base64:5]", + modules: true + } + }, + "sass-loader" + ], include: path.resolve(__dirname, "..", "src") }); + const fileLoaderRule = config.module.rules.find(rule => rule.test.test(".svg")); + fileLoaderRule.exclude = /\.svg$/; + config.module.rules.push({ + test: /\.svg$/, + use: [ + { + loader: "@svgr/webpack", + options: { + replaceAttrValues: { "#000": "{props.color}" }, + template: require("../src/react-components/icons/IconTemplate") + } + }, + "url-loader" + ] + }); + return config; } }; diff --git a/package-lock.json b/package-lock.json index 6eceeb9c4..e12395b4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12979,9 +12979,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001114", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001114.tgz", - "integrity": "sha512-ml/zTsfNBM+T1+mjglWRPgVsu2L76GAaADKX5f4t0pbhttEp0WMawJsHDYlFkVZkoA+89uvBRrVrEE4oqenzXQ==", + "version": "1.0.30001116", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001116.tgz", + "integrity": "sha512-f2lcYnmAI5Mst9+g0nkMIznFGsArRmZ0qU+dnq8l91hymdc2J3SFbiPhOJEeDqC1vtE8nc1qNQyklzB8veJefQ==", "dev": true }, "convert-source-map": { @@ -13003,9 +13003,9 @@ } }, "electron-to-chromium": { - "version": "1.3.533", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.533.tgz", - "integrity": "sha512-YqAL+NXOzjBnpY+dcOKDlZybJDCOzgsq4koW3fvyty/ldTmsb4QazZpOWmVvZ2m0t5jbBf7L0lIGU3BUipwG+A==", + "version": "1.3.536", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.536.tgz", + "integrity": "sha512-aU16nvH8/zNNeFIQ7H2SKRQlJ/srw7mCn/JDj2ImWUA7Lk2+3zJFpDGJNP2qRxPAZsC+qgnlgNTYIvT6EOdJFQ==", "dev": true }, "emojis-list": { diff --git a/package.json b/package.json index 2e1d2dfdb..54570bee5 100644 --- a/package.json +++ b/package.json @@ -128,6 +128,7 @@ "@storybook/addon-essentials": "^6.0.12", "@storybook/addon-links": "^6.0.12", "@storybook/react": "^6.0.12", + "@svgr/webpack": "^5.4.0", "acorn": "^6.4.1", "ava": "^1.4.1", "babel-eslint": "^10.0.1", diff --git a/src/react-components/icons/Audio.svg b/src/react-components/icons/Audio.svg new file mode 100644 index 000000000..e8cdc3eec --- /dev/null +++ b/src/react-components/icons/Audio.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/Avatar.svg b/src/react-components/icons/Avatar.svg new file mode 100644 index 000000000..eee72c514 --- /dev/null +++ b/src/react-components/icons/Avatar.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/react-components/icons/Camera.svg b/src/react-components/icons/Camera.svg new file mode 100644 index 000000000..f98159aff --- /dev/null +++ b/src/react-components/icons/Camera.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/react-components/icons/CaretDown.svg b/src/react-components/icons/CaretDown.svg new file mode 100644 index 000000000..07dd1fd50 --- /dev/null +++ b/src/react-components/icons/CaretDown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Chat.svg b/src/react-components/icons/Chat.svg new file mode 100644 index 000000000..32ec6bbaf --- /dev/null +++ b/src/react-components/icons/Chat.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/ChevronBack.svg b/src/react-components/icons/ChevronBack.svg new file mode 100644 index 000000000..c14c8e50c --- /dev/null +++ b/src/react-components/icons/ChevronBack.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Close.svg b/src/react-components/icons/Close.svg new file mode 100644 index 000000000..2450879e0 --- /dev/null +++ b/src/react-components/icons/Close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/Delete.svg b/src/react-components/icons/Delete.svg new file mode 100644 index 000000000..28c7d063d --- /dev/null +++ b/src/react-components/icons/Delete.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/react-components/icons/Desktop.svg b/src/react-components/icons/Desktop.svg new file mode 100644 index 000000000..9588032b5 --- /dev/null +++ b/src/react-components/icons/Desktop.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/Discord.svg b/src/react-components/icons/Discord.svg new file mode 100644 index 000000000..f37ae9dc5 --- /dev/null +++ b/src/react-components/icons/Discord.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/Document.svg b/src/react-components/icons/Document.svg new file mode 100644 index 000000000..4bbf4979b --- /dev/null +++ b/src/react-components/icons/Document.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/Enter.svg b/src/react-components/icons/Enter.svg new file mode 100644 index 000000000..35b027498 --- /dev/null +++ b/src/react-components/icons/Enter.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/react-components/icons/GIF.svg b/src/react-components/icons/GIF.svg new file mode 100644 index 000000000..2865675dc --- /dev/null +++ b/src/react-components/icons/GIF.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/GoTo.svg b/src/react-components/icons/GoTo.svg new file mode 100644 index 000000000..bd04f5e01 --- /dev/null +++ b/src/react-components/icons/GoTo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/react-components/icons/Help.svg b/src/react-components/icons/Help.svg new file mode 100644 index 000000000..ebd603231 --- /dev/null +++ b/src/react-components/icons/Help.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/react-components/icons/Hide.svg b/src/react-components/icons/Hide.svg new file mode 100644 index 000000000..425bc8d6a --- /dev/null +++ b/src/react-components/icons/Hide.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/react-components/icons/Icon.stories.js b/src/react-components/icons/Icon.stories.js new file mode 100644 index 000000000..c7d232f2e --- /dev/null +++ b/src/react-components/icons/Icon.stories.js @@ -0,0 +1,105 @@ +import React from "react"; +import { withDesign } from "storybook-addon-designs"; +import { ReactComponent as AudioIcon } from "./Audio.svg"; +import { ReactComponent as AvatarIcon } from "./Avatar.svg"; +import { ReactComponent as CameraIcon } from "./Camera.svg"; +import { ReactComponent as CaretDownIcon } from "./CaretDown.svg"; +import { ReactComponent as ChatIcon } from "./Chat.svg"; +import { ReactComponent as ChevronBackIcon } from "./ChevronBack.svg"; +import { ReactComponent as CloseIcon } from "./Close.svg"; +import { ReactComponent as DeleteIcon } from "./Delete.svg"; +import { ReactComponent as DesktopIcon } from "./Desktop.svg"; +import { ReactComponent as DiscordIcon } from "./Discord.svg"; +import { ReactComponent as DocumentIcon } from "./Document.svg"; +import { ReactComponent as EnterIcon } from "./Enter.svg"; +import { ReactComponent as GIFIcon } from "./GIF.svg"; +import { ReactComponent as GoToIcon } from "./GoTo.svg"; +import { ReactComponent as HelpIcon } from "./Help.svg"; +import { ReactComponent as HideIcon } from "./Hide.svg"; +import { ReactComponent as ImageIcon } from "./Image.svg"; +import { ReactComponent as InviteIcon } from "./Invite.svg"; +import { ReactComponent as LeaveIcon } from "./Leave.svg"; +import { ReactComponent as LinkIcon } from "./Link.svg"; +import { ReactComponent as MicrophoneIcon } from "./Microphone.svg"; +import { ReactComponent as MicrophoneMutedIcon } from "./MicrophoneMuted.svg"; +import { ReactComponent as MoreIcon } from "./More.svg"; +import { ReactComponent as ObjectIcon } from "./Object.svg"; +import { ReactComponent as ObjectsIcon } from "./Objects.svg"; +import { ReactComponent as PenIcon } from "./Pen.svg"; +import { ReactComponent as PeopleIcon } from "./People.svg"; +import { ReactComponent as PhoneIcon } from "./Phone.svg"; +import { ReactComponent as PinIcon } from "./Pin.svg"; +import { ReactComponent as ReactionIcon } from "./Reaction.svg"; +import { ReactComponent as SceneIcon } from "./Scene.svg"; +import { ReactComponent as SettingsIcon } from "./Settings.svg"; +import { ReactComponent as ShareIcon } from "./Share.svg"; +import { ReactComponent as ShowIcon } from "./Show.svg"; +import { ReactComponent as StarIcon } from "./Star.svg"; +import { ReactComponent as TextIcon } from "./Text.svg"; +import { ReactComponent as UploadIcon } from "./Upload.svg"; +import { ReactComponent as VideoIcon } from "./Video.svg"; +import { ReactComponent as VolumeHighIcon } from "./VolumeHigh.svg"; +import { ReactComponent as VolumeMutedIcon } from "./VolumeMuted.svg"; +import { ReactComponent as VolumeOffIcon } from "./VolumeOff.svg"; +import { ReactComponent as VRIcon } from "./VR.svg"; +import { ReactComponent as WandIcon } from "./Wand.svg"; + +export default { + title: "Icon", + decorators: [withDesign], + argTypes: { + color: { control: "color" } + } +}; + +export const AllIcons = args => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +AllIcons.parameters = { + color: "#000" +}; diff --git a/src/react-components/icons/IconTemplate.js b/src/react-components/icons/IconTemplate.js new file mode 100644 index 000000000..c776de1fb --- /dev/null +++ b/src/react-components/icons/IconTemplate.js @@ -0,0 +1,46 @@ +/** + * https://react-svgr.com/docs/custom-templates/ + * + * This template is used in both the Storybook Webpack Config and app Webpack Config. + * + * Set the default icon color to #000 so we can set icon fill/stroke via CSS or via props. + * + * Set Color via CSS for any icon: + * + * svg { + * *[stroke=\#000] { + * stroke: white; + * } + * + * *[fill=\#000] { + * fill: white; + * } + * } + * + * + * Set Color Via React Props: + * + * + * + */ +function defaultTemplate({ template }, opts, { imports, interfaces, componentName, props, jsx, exports }) { + const plugins = ["jsx"]; + if (opts.typescript) { + plugins.push("typescript"); + } + const typeScriptTpl = template.smart({ plugins }); + return typeScriptTpl.ast`${imports} +${interfaces} +function ${componentName}(${props}) { + return ${jsx}; +} + +${componentName}.defaultProps = { + color: "#000" +}; + +${exports} + `; +} + +module.exports = defaultTemplate; diff --git a/src/react-components/icons/Image.svg b/src/react-components/icons/Image.svg new file mode 100644 index 000000000..39f23e33a --- /dev/null +++ b/src/react-components/icons/Image.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/Invite.svg b/src/react-components/icons/Invite.svg new file mode 100644 index 000000000..0feaf0e55 --- /dev/null +++ b/src/react-components/icons/Invite.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/Leave.svg b/src/react-components/icons/Leave.svg new file mode 100644 index 000000000..ea584c06c --- /dev/null +++ b/src/react-components/icons/Leave.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/react-components/icons/Link.svg b/src/react-components/icons/Link.svg new file mode 100644 index 000000000..809dfac10 --- /dev/null +++ b/src/react-components/icons/Link.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Microphone.svg b/src/react-components/icons/Microphone.svg new file mode 100644 index 000000000..3c19ecdae --- /dev/null +++ b/src/react-components/icons/Microphone.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/MicrophoneMuted.svg b/src/react-components/icons/MicrophoneMuted.svg new file mode 100644 index 000000000..8bb2e5a17 --- /dev/null +++ b/src/react-components/icons/MicrophoneMuted.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/react-components/icons/More.svg b/src/react-components/icons/More.svg new file mode 100644 index 000000000..6b7a1bbd6 --- /dev/null +++ b/src/react-components/icons/More.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/react-components/icons/Object.svg b/src/react-components/icons/Object.svg new file mode 100644 index 000000000..cb07af816 --- /dev/null +++ b/src/react-components/icons/Object.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/react-components/icons/Objects.svg b/src/react-components/icons/Objects.svg new file mode 100644 index 000000000..3ecc8d7f3 --- /dev/null +++ b/src/react-components/icons/Objects.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Pen.svg b/src/react-components/icons/Pen.svg new file mode 100644 index 000000000..213322d59 --- /dev/null +++ b/src/react-components/icons/Pen.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/People.svg b/src/react-components/icons/People.svg new file mode 100644 index 000000000..4eb03aca1 --- /dev/null +++ b/src/react-components/icons/People.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/Phone.svg b/src/react-components/icons/Phone.svg new file mode 100644 index 000000000..9ee8d2f2e --- /dev/null +++ b/src/react-components/icons/Phone.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/react-components/icons/Pin.svg b/src/react-components/icons/Pin.svg new file mode 100644 index 000000000..37dec3760 --- /dev/null +++ b/src/react-components/icons/Pin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Reaction.svg b/src/react-components/icons/Reaction.svg new file mode 100644 index 000000000..60bdb8928 --- /dev/null +++ b/src/react-components/icons/Reaction.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/Scene.svg b/src/react-components/icons/Scene.svg new file mode 100644 index 000000000..0dea73076 --- /dev/null +++ b/src/react-components/icons/Scene.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/react-components/icons/Settings.svg b/src/react-components/icons/Settings.svg new file mode 100644 index 000000000..b45d64ab4 --- /dev/null +++ b/src/react-components/icons/Settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Share.svg b/src/react-components/icons/Share.svg new file mode 100644 index 000000000..8b005556e --- /dev/null +++ b/src/react-components/icons/Share.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/Show.svg b/src/react-components/icons/Show.svg new file mode 100644 index 000000000..f89a76b59 --- /dev/null +++ b/src/react-components/icons/Show.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/Star.svg b/src/react-components/icons/Star.svg new file mode 100644 index 000000000..b694731fe --- /dev/null +++ b/src/react-components/icons/Star.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Text.svg b/src/react-components/icons/Text.svg new file mode 100644 index 000000000..e2ba09772 --- /dev/null +++ b/src/react-components/icons/Text.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/Upload.svg b/src/react-components/icons/Upload.svg new file mode 100644 index 000000000..6d6e2e136 --- /dev/null +++ b/src/react-components/icons/Upload.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/react-components/icons/VR.svg b/src/react-components/icons/VR.svg new file mode 100644 index 000000000..2d9f6e50b --- /dev/null +++ b/src/react-components/icons/VR.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Video.svg b/src/react-components/icons/Video.svg new file mode 100644 index 000000000..2c6ee441d --- /dev/null +++ b/src/react-components/icons/Video.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/react-components/icons/VolumeHigh.svg b/src/react-components/icons/VolumeHigh.svg new file mode 100644 index 000000000..b2f1f4971 --- /dev/null +++ b/src/react-components/icons/VolumeHigh.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/react-components/icons/VolumeMuted.svg b/src/react-components/icons/VolumeMuted.svg new file mode 100644 index 000000000..317802574 --- /dev/null +++ b/src/react-components/icons/VolumeMuted.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/react-components/icons/VolumeOff.svg b/src/react-components/icons/VolumeOff.svg new file mode 100644 index 000000000..e1ecdd6a6 --- /dev/null +++ b/src/react-components/icons/VolumeOff.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/react-components/icons/Wand.svg b/src/react-components/icons/Wand.svg new file mode 100644 index 000000000..b38572847 --- /dev/null +++ b/src/react-components/icons/Wand.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/react-components/input/Button.js b/src/react-components/input/Button.js index 5f194b253..013d1d359 100644 --- a/src/react-components/input/Button.js +++ b/src/react-components/input/Button.js @@ -3,6 +3,8 @@ import PropTypes from "prop-types"; import classNames from "classnames"; import styles from "./Button.scss"; +export const presets = ["basic", "accept", "cancel", "red", "orange", "green", "blue", "purple"]; + export function Button({ preset, className, children, ...rest }) { return ( ; +export const AllButtons = ({ selected }) => ( + <> + {presets.map(preset => ( + + ))} + +); -Basic.parameters = { +AllButtons.parameters = { design: { type: "figma", url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2186" } }; - -export const Accept = () => ; - -Accept.parameters = { - design: { - type: "figma", - url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=69%3A4742" - } -}; - -export const Cancel = () => ; - -Cancel.parameters = { - design: { - type: "figma", - url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134" - } -}; - -export const Blue = () => ; - -Blue.parameters = { - design: { - type: "figma", - url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134" - } -}; - -export const Orange = () => ; - -Orange.parameters = { - design: { - type: "figma", - url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134" - } -}; - -export const Purple = () => ; - -Purple.parameters = { - design: { - type: "figma", - url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134" - } -}; diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss index b207bf156..46beea937 100644 --- a/src/react-components/styles/global.scss +++ b/src/react-components/styles/global.scss @@ -1,11 +1,13 @@ @import "~normalize.css"; +@import "./theme.scss"; /** * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ html { box-sizing: border-box; + line-height: 1; } *, *:before, *:after { @@ -158,3 +160,8 @@ video { max-width: 100%; height: auto; } + +label { + font-size: $font-size-small; + font-weight: $font-weight-bold; +} \ No newline at end of file diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss index 8cdb7c63d..5bb7ea388 100644 --- a/src/react-components/styles/theme.scss +++ b/src/react-components/styles/theme.scss @@ -41,3 +41,6 @@ $blue-pressed: #1094D5; $purple: #7854F6; $purple-hover: #8C6EF7; $purple-pressed: #663DF5; + +$font-size-small: 12px; +$font-weight-bold: 700; diff --git a/src/react-components/toolbar/Toolbar.stories.js b/src/react-components/toolbar/Toolbar.stories.js new file mode 100644 index 000000000..910fc0ba6 --- /dev/null +++ b/src/react-components/toolbar/Toolbar.stories.js @@ -0,0 +1,26 @@ +import React from "react"; +import { withDesign } from "storybook-addon-designs"; +import { ReactComponent as ShareIcon } from "../icons/Share.svg"; +import { ToolbarButton, presets } from "./ToolbarButton"; + +export default { + title: "Toolbar", + decorators: [withDesign], + argTypes: { + selected: { control: "boolean" } + } +}; + +export const AllButtons = ({ selected }) => ( + <> + {presets.map(preset => } label={preset} preset={preset} selected={selected} />)} + +); + +AllButtons.parameters = { + design: { + type: "figma", + url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=17%3A725" + }, + selected: false +}; diff --git a/src/react-components/toolbar/ToolbarButton.js b/src/react-components/toolbar/ToolbarButton.js new file mode 100644 index 000000000..e534707f0 --- /dev/null +++ b/src/react-components/toolbar/ToolbarButton.js @@ -0,0 +1,30 @@ +import React from "react"; +import PropTypes from "prop-types"; +import classNames from "classnames"; +import styles from "./ToolbarButton.scss"; + +export const presets = ["basic", "accept", "cancel", "red", "orange", "green", "blue", "purple"]; + +export function ToolbarButton({ preset, className, icon, label, selected, ...rest }) { + return ( + + ); +} + +ToolbarButton.propTypes = { + icon: PropTypes.node, + label: PropTypes.string, + selected: PropTypes.bool, + preset: PropTypes.oneOf(presets), + className: PropTypes.string +}; + +ToolbarButton.defaultProps = { + preset: "basic" +}; diff --git a/src/react-components/toolbar/ToolbarButton.scss b/src/react-components/toolbar/ToolbarButton.scss new file mode 100644 index 000000000..3558a7afe --- /dev/null +++ b/src/react-components/toolbar/ToolbarButton.scss @@ -0,0 +1,481 @@ +@import '../styles/theme'; + +:local(.toolbarButton) { + border: none; + background-color: transparent; + display: flex; + flex-direction: column; + align-items: center; + + label { + color: black; + margin-top: 8px; + margin-bottom: 3px; + } + + &:hover { + label { + color: $black-hover; + } + } + + &:active { + label { + color: $black-pressed; + } + } +} + +:local(.iconContainer) { + border-radius: 9999px; + width: 48px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid $transparent; + background-color: $transparent; + + svg { + *[stroke=\#000] { + stroke: white; + } + + *[fill=\#000] { + fill: white; + } + } +} + +:local(.basic) { + :local(.iconContainer) { + border-color: $darkgrey; + + svg { + *[stroke=\#000] { + stroke: #000; + } + + *[fill=\#000] { + fill: #000; + } + } + } + + &:hover :local(.iconContainer) { + border-color: transparent; + background-color: $white-hover; + } + + &:active :local(.iconContainer) { + border-color: transparent; + background-color: $white-pressed; + } + + &:local(.selected) { + :local(.iconContainer) { + border-color: transparent; + background-color: $lightgrey; + } + + label { + color: $darkgrey; + } + + &:hover { + :local(.iconContainer) { + background-color: $lightgrey-hover; + } + + label { + color: $darkgrey-hover; + } + } + + &:active { + :local(.iconContainer) { + background-color: $lightgrey-pressed; + } + + label { + color: $darkgrey-pressed; + } + } + } +} + +:local(.accept), :local(.green) { + :local(.iconContainer) { + background-color: $green; + } + + &:hover :local(.iconContainer) { + background-color: $green-hover; + } + + &:active :local(.iconContainer) { + background-color: $green-pressed; + } + + &:local(.selected) { + :local(.iconContainer) { + border-color: $green; + background-color: transparent; + + svg { + *[stroke=\#000] { + stroke: $green; + } + + *[fill=\#000] { + fill: $green; + } + } + } + + label { + color: $green; + } + + &:hover { + :local(.iconContainer) { + border-color: $green-hover; + + svg { + *[stroke=\#000] { + stroke: $green-hover; + } + + *[fill=\#000] { + fill: $green-hover; + } + } + } + + label { + color: $green-hover; + } + } + + &:active { + :local(.iconContainer) { + border-color: $green-pressed; + + svg { + *[stroke=\#000] { + stroke: $green-pressed; + } + + *[fill=\#000] { + fill: $green-pressed; + } + } + } + + label { + color: $green-pressed; + } + } + } +} + +:local(.cancel), :local(.red) { + :local(.iconContainer) { + background-color: $red; + } + + &:hover :local(.iconContainer) { + background-color: $red-hover; + } + + &:active :local(.iconContainer) { + background-color: $red-pressed; + } + + &:local(.selected) { + :local(.iconContainer) { + border-color: $red; + background-color: transparent; + + svg { + *[stroke=\#000] { + stroke: $red; + } + + *[fill=\#000] { + fill: $red; + } + } + } + + label { + color: $red; + } + + &:hover { + :local(.iconContainer) { + border-color: $red-hover; + + svg { + *[stroke=\#000] { + stroke: $red-hover; + } + + *[fill=\#000] { + fill: $red-hover; + } + } + } + + label { + color: $red-hover; + } + } + + &:active { + :local(.iconContainer) { + border-color: $red-pressed; + + svg { + *[stroke=\#000] { + stroke: $red-pressed; + } + + *[fill=\#000] { + fill: $red-pressed; + } + } + } + + label { + color: $red-pressed; + } + } + } +} + +:local(.blue) { + :local(.iconContainer) { + background-color: $blue; + } + + &:hover :local(.iconContainer) { + background-color: $blue-hover; + } + + &:active :local(.iconContainer) { + background-color: $blue-pressed; + } + + &:local(.selected) { + :local(.iconContainer) { + border-color: $blue; + background-color: transparent; + + svg { + *[stroke=\#000] { + stroke: $blue; + } + + *[fill=\#000] { + fill: $blue; + } + } + } + + label { + color: $blue; + } + + &:hover { + :local(.iconContainer) { + border-color: $blue-hover; + + svg { + *[stroke=\#000] { + stroke: $blue-hover; + } + + *[fill=\#000] { + fill: $blue-hover; + } + } + } + + label { + color: $blue-hover; + } + } + + &:active { + :local(.iconContainer) { + border-color: $blue-pressed; + + svg { + *[stroke=\#000] { + stroke: $blue-pressed; + } + + *[fill=\#000] { + fill: $blue-pressed; + } + } + } + + label { + color: $blue-pressed; + } + } + } +} + + +:local(.orange) { + :local(.iconContainer) { + background-color: $orange; + } + + &:hover :local(.iconContainer) { + background-color: $orange-hover; + } + + &:active :local(.iconContainer) { + background-color: $orange-pressed; + } + + &:local(.selected) { + :local(.iconContainer) { + border-color: $orange; + background-color: transparent; + + svg { + *[stroke=\#000] { + stroke: $orange; + } + + *[fill=\#000] { + fill: $orange; + } + } + } + + label { + color: $orange; + } + + &:hover { + :local(.iconContainer) { + border-color: $orange-hover; + + svg { + *[stroke=\#000] { + stroke: $orange-hover; + } + + *[fill=\#000] { + fill: $orange-hover; + } + } + } + + label { + color: $orange-hover; + } + } + + &:active { + :local(.iconContainer) { + border-color: $orange-pressed; + + svg { + *[stroke=\#000] { + stroke: $orange-pressed; + } + + *[fill=\#000] { + fill: $orange-pressed; + } + } + } + + label { + color: $orange-pressed; + } + } + } +} + +:local(.purple) { + :local(.iconContainer) { + background-color: $purple; + } + + &:hover :local(.iconContainer) { + background-color: $purple-hover; + } + + &:active :local(.iconContainer) { + background-color: $purple-pressed; + } + + &:local(.selected) { + :local(.iconContainer) { + border-color: $purple; + background-color: transparent; + + svg { + *[stroke=\#000] { + stroke: $purple; + } + + *[fill=\#000] { + fill: $purple; + } + } + } + + label { + color: $purple; + } + + &:hover { + :local(.iconContainer) { + border-color: $purple-hover; + + svg { + *[stroke=\#000] { + stroke: $purple-hover; + } + + *[fill=\#000] { + fill: $purple-hover; + } + } + } + + label { + color: $purple-hover; + } + } + + &:active { + :local(.iconContainer) { + border-color: $purple-pressed; + + svg { + *[stroke=\#000] { + stroke: $purple-pressed; + } + + *[fill=\#000] { + fill: $purple-pressed; + } + } + } + + label { + color: $purple-pressed; + } + } + } +} diff --git a/webpack.config.js b/webpack.config.js index 53b27f665..68960b694 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -382,6 +382,20 @@ module.exports = async (env, argv) => { "sass-loader" ] }, + { + test: /\.svg$/, + include: [path.resolve(__dirname, "src", "react-components")], + use: [ + { + loader: "@svgr/webpack", + options: { + replaceAttrValues: { "#000": "{props.color}" }, + template: require("./src/react-components/icons/IconTemplate") + } + }, + "url-loader" + ] + }, { test: /\.(png|jpg|gif|glb|ogg|mp3|mp4|wav|woff2|svg|webm)$/, use: {