diff --git a/platform/ui/.stylelintrc.json b/platform/ui/.stylelintrc.json index 40db42c66..6e90e0ed0 100644 --- a/platform/ui/.stylelintrc.json +++ b/platform/ui/.stylelintrc.json @@ -1,3 +1,6 @@ { - "extends": "stylelint-config-standard" + "extends": "stylelint-config-standard", + "rules": { + "declaration-empty-line-before": "never" + } } diff --git a/platform/ui/gatsby-config.js b/platform/ui/gatsby-config.js new file mode 100644 index 000000000..d95a569e1 --- /dev/null +++ b/platform/ui/gatsby-config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: ['gatsby-plugin-sass'], +}; diff --git a/platform/ui/package.json b/platform/ui/package.json index ef907d308..06ddfad9d 100644 --- a/platform/ui/package.json +++ b/platform/ui/package.json @@ -18,6 +18,7 @@ "README.md" ], "scripts": { + "start": "yarn run dev", "dev": "concurrently \"npm run watch:css\" \"docz dev\"", "build": "concurrently \"npm run build:css\" \"docz build\"", "serve": "docz serve", @@ -25,8 +26,13 @@ "watch:css": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css -w" }, "dependencies": { + "@emotion/core": "^10.0.27", + "@emotion/styled": "^10.0.27", + "classnames": "^2.2.6", "concurrently": "^5.1.0", - "docz": "latest", + "docz": "^2.2.0", + "gatsby-plugin-sass": "^2.1.28", + "node-sass": "^4.13.1", "prop-types": "^15.7.2", "react": "^16.11.0", "react-dom": "^16.11.0" diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx index 3333d5fba..2a2833340 100644 --- a/platform/ui/src/components/Button/Button.jsx +++ b/platform/ui/src/components/Button/Button.jsx @@ -1,79 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; - -const Button = ({ - children, - variant = defaults.variant, - color = defaults.color, - size = defaults.size, - radius = defaults.radius, - disabled = defaults.disabled, - elevation, - type = defaults.type, - startIcon: startIconProp, - endIcon: endIconProp, - className, - ...rest -}) => { - const hasIcon = startIconProp || endIconProp; - const getClasses = () => { - const classes = []; - let buttonElevation; - - if (variant === 'text') { - if (elevation) { - buttonElevation = elevation; - } else { - buttonElevation = false; - } - } else { - buttonElevation = defaults.elevation; - } - - classes.push(variantClasses[variant][color]); - classes.push(radiusClasses[radius]); - classes.push(sizeClasses[size]); - classes.push(disabledClasses[disabled]); - classes.push(elevationClasses[buttonElevation]); - classes.push(className); - - if (hasIcon) { - classes.push(baseIconClasses); - } - - return classes.join(' '); - }; - - const baseIconClasses = 'inline-flex items-center'; - const baseClasses = - 'outline-none transition duration-300 ease-in-out rounded font-bold focus:outline-none'; - - const startIcon = startIconProp && ( -
{startIconProp}
- ); - - const endIcon = endIconProp &&
{endIconProp}
; - - return ( - - ); -}; +import classnames from 'classnames'; const defaults = { - variant: 'outlined', + variant: 'contained', color: 'default', size: 'medium', radius: 'medium', disabled: false, - elevation: true, type: 'button', }; const radiusClasses = { + none: '', small: 'rounded-sm', medium: 'rounded-md', large: 'rounded-lg', @@ -85,11 +24,6 @@ const disabledClasses = { false: '', }; -const elevationClasses = { - true: 'shadow', - false: 'shadow-none', -}; - const variantClasses = { text: { default: 'hover:bg-gray-200 text-black', @@ -114,14 +48,55 @@ const sizeClasses = { large: 'py-3 px-6 text-lg', }; +const Button = ({ + children, + variant = defaults.variant, + color = defaults.color, + size = defaults.size, + radius = defaults.radius, + disabled = defaults.disabled, + type = defaults.type, + startIcon: startIconProp, + endIcon: endIconProp, + className, + ...rest +}) => { + const baseClasses = + 'inline-flex items-center outline-none transition duration-300 ease-in-out font-bold focus:outline-none'; + + const startIcon = startIconProp && ( +
{startIconProp}
+ ); + + const endIcon = endIconProp &&
{endIconProp}
; + + return ( + + ); +}; + Button.propTypes = { children: PropTypes.node, size: PropTypes.oneOf(['small', 'medium', 'large']), - radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']), + radius: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']), variant: PropTypes.oneOf(['text', 'outlined', 'contained']), color: PropTypes.oneOf(['default', 'primary', 'secondary']), disabled: PropTypes.bool, - elevation: PropTypes.bool, type: PropTypes.string, startIcon: PropTypes.node, endIcon: PropTypes.node, diff --git a/platform/ui/src/components/ButtonEmotion/ButtonEmotion.jsx b/platform/ui/src/components/ButtonEmotion/ButtonEmotion.jsx new file mode 100644 index 000000000..61a1b7881 --- /dev/null +++ b/platform/ui/src/components/ButtonEmotion/ButtonEmotion.jsx @@ -0,0 +1,318 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from '@emotion/styled'; +import { fade } from '../../utils/colorManipulator'; +import capitalize from '../../utils/capitalize'; +import theme from '../../styles/theme'; + +const styles = { + base: { + 'box-sizing': 'border-box', + 'min-width': '64px', + padding: '6px 16px', + 'border-radius': '20px', + color: theme.palette.primary.main, + transition: 'all 300ms ease', + '&:hover': { + 'text-decoration': 'none', + 'background-color': fade( + theme.palette.default.main, + theme.palette.action.hoverOpacity + ), + }, + '&:active': { + outline: 'none', + }, + '&:focus': { + outline: 'none', + }, + '&:disabled': { + color: theme.palette.action.disabled, + cursor: 'not-allowed', + }, + }, + /* Styles applied to the root element if `variant="text"`. */ + text: { + padding: '6px 8px', + }, + /* Styles applied to the root element if `variant="text"` and `color="primary"`. */ + textPrimary: { + color: theme.palette.primary.main, + '&:hover': { + 'background-color': fade( + theme.palette.primary.light, + theme.palette.action.hoverOpacity + ), + }, + }, + /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */ + textSecondary: { + color: theme.palette.secondary.main, + '&:hover': { + 'background-color': fade( + theme.palette.secondary.light, + theme.palette.action.hoverOpacity + ), + }, + }, + /* Styles applied to the root element if `variant="outlined"`. */ + outlined: { + padding: '5px 15px', + border: `1px solid ${ + theme.palette.type === 'light' + ? 'rgba(0, 0, 0, 0.23)' + : 'rgba(255, 255, 255, 0.23)' + }`, + '&:disabled': { + border: `1px solid ${theme.palette.default.main}`, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ + outlinedPrimary: { + color: theme.palette.primary.main, + border: `1px solid ${fade( + theme.palette.primary.light, + theme.palette.action.hoverOpacity + )}`, + '&:hover': { + border: `1px solid ${theme.palette.primary.main}`, + 'background-color': fade( + theme.palette.primary.light, + theme.palette.action.hoverOpacity + ), + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ + outlinedSecondary: { + color: theme.palette.secondary.main, + border: `1px solid ${fade( + theme.palette.secondary.main, + theme.palette.action.hoverOpacity + )}`, + '&:hover': { + border: `1px solid ${theme.palette.secondary.main}`, + 'background-color': fade( + theme.palette.secondary.light, + theme.palette.action.hoverOpacity + ), + }, + '&$disabled': { + border: `1px solid ${theme.palette.action.disabled}`, + }, + }, + /* Styles applied to the root element if `variant="contained"`. */ + contained: { + color: '#000', + 'background-color': theme.palette.default.light, + // 'box-shadow': theme.shadows[2], + '&:hover': { + 'background-color': theme.palette.default.light, + // 'box-shadow': theme.shadows[4], + + '&$disabled': { + 'background-color': theme.palette.action.disabledBackground, + }, + }, + '&:active': { + // 'box-shadow': typographyows[8], + }, + '&$disabled': { + color: theme.palette.action.disabled, + // 'box-shadow': theme.shadows[0], + 'background-color': theme.palette.action.disabledBackground, + }, + }, + /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */ + containedPrimary: { + color: 'white', + 'background-color': theme.palette.primary.main, + '&:hover': { + 'background-color': fade( + theme.palette.primary.light, + theme.palette.action.hoverOpacity + ), + }, + }, + /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ + containedSecondary: { + color: 'white', + 'background-color': theme.palette.secondary.main, + '&:hover': { + 'background-color': fade( + theme.palette.secondary.light, + theme.palette.action.hoverOpacity + ), + }, + }, + /* Styles applied to the root element if `size="small"` and `variant="text"`. */ + textSizeSmall: { + padding: '4px 5px', + fontSize: '13px', + }, + /* Styles applied to the root element if `size="medium"` and `variant="text"`. */ + textSizeMedium: { + padding: '6px 9px', + fontSize: '14px', + }, + /* Styles applied to the root element if `size="large"` and `variant="text"`. */ + textSizeLarge: { + padding: '8px 11px', + fontSize: '15px', + }, + /* Styles applied to the root element if `size="small"` and `variant="outlined"`. */ + outlinedSizeSmall: { + padding: '3px 9px', + fontSize: '13px', + }, + /* Styles applied to the root element if `size="medium"` and `variant="outlined"`. */ + outlinedSizeMedium: { + padding: '5px 15px', + fontSize: '14px', + }, + /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */ + outlinedSizeLarge: { + padding: '7px 21px', + fontSize: '15px', + }, + /* Styles applied to the root element if `size="small"` and `variant="contained"`. */ + containedSizeSmall: { + padding: '4px 10px', + fontSize: '13px', + }, + /* Styles applied to the root element if `size="medium"` and `variant="contained"`. */ + containedSizeMedium: { + padding: '6px 16px', + fontSize: '13px', + }, + /* Styles applied to the root element if `size="large"` and `variant="contained"`. */ + containedSizeLarge: { + padding: '8px 22px', + fontSize: '15px', + }, + /* Styles applied to the startIcon element if supplied. */ + startIcon: { + display: 'inherit', + 'margin-right': '8px', + 'margin-left': '-4px', + }, + /* Styles applied to the endIcon element if supplied. */ + endIcon: { + display: 'inherit', + 'margin-right': '-4px', + 'margin-left': '8px', + }, +}; + +const BaseButton = styled.button` + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + border-radius: 0; + padding: 0; + cursor: pointer; + user-select: none; + vertical-align: middle; + -moz-appearance: none; + appearance: none; + text-decoration: none; + color: inherit; +`; + +const ButtonIcon = styled.div` + ${props => ({ + ...styles[`${props.icon}`], + })} +`; + +const ButtonComponent = styled(BaseButton)` + /* base styles */ + ${props => ({ + ...styles.base, + })} + + /* variant styles */ + ${props => ({ + ...styles[`${props.variant}`], + })} + + /* color */ + ${props => ({ + ...styles[`${props.variant}${capitalize(props.color)}`], + })} + + /* size styles */ + ${props => ({ + ...styles[`${props.variant}Size${capitalize(props.size)}`], + })} +`; + +const Button = props => { + const { + children, + variant = defaults.variant, + color = defaults.color, + size = defaults.size, + radius = defaults.radius, + disabled = defaults.disabled, + elevation, + type = defaults.type, + startIcon: startIconProp, + endIcon: endIconProp, + className, + ...rest + } = props; + const startIcon = startIconProp && ( + {startIconProp} + ); + + const endIcon = endIconProp && ( + {endIconProp} + ); + + return ( + + {startIcon} + {children} + {endIcon} + + ); +}; + +const defaults = { + variant: 'outlined', + color: 'default', + size: 'large', + radius: 'medium', + disabled: false, + elevation: true, + type: 'button', +}; + +Button.propTypes = { + children: PropTypes.node, + size: PropTypes.oneOf(['small', 'medium', 'large']), + radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']), + variant: PropTypes.oneOf(['text', 'outlined', 'contained']), + color: PropTypes.oneOf(['default', 'primary', 'secondary']), + disabled: PropTypes.bool, + elevation: PropTypes.bool, + type: PropTypes.string, + startIcon: PropTypes.node, + endIcon: PropTypes.node, + className: PropTypes.node, +}; + +export default Button; diff --git a/platform/ui/src/components/ButtonEmotion/ButtonEmotion.mdx b/platform/ui/src/components/ButtonEmotion/ButtonEmotion.mdx new file mode 100644 index 000000000..cfde00df8 --- /dev/null +++ b/platform/ui/src/components/ButtonEmotion/ButtonEmotion.mdx @@ -0,0 +1,180 @@ +--- +name: ButtonEmotion +menu: Components +route: components/button-emotion +--- + +import { Playground, Props } from 'docz'; +import Button from './'; + +# ButtonEmotion + +Buttons are used to execute actions when users interacts with them. + +## Properties + + + +## Contained Buttons + + + <> + + + + + + +## Outlined Buttons + + + <> + + + + + + +## Text Buttons + + + <> + + + + + + +## Sizes + + + <> +
+ + + +
+
+ + + +
+
+ + + +
+ + + + + +## Buttons with icons + + +{() => { + return ( +
+ + +
+ ) + }} + + diff --git a/platform/ui/src/components/ButtonEmotion/index.js b/platform/ui/src/components/ButtonEmotion/index.js new file mode 100644 index 000000000..a09c493af --- /dev/null +++ b/platform/ui/src/components/ButtonEmotion/index.js @@ -0,0 +1,2 @@ +import ButtonEmotion from './ButtonEmotion'; +export default ButtonEmotion; diff --git a/platform/ui/src/components/ButtonModules/ButtonModules.jsx b/platform/ui/src/components/ButtonModules/ButtonModules.jsx new file mode 100644 index 000000000..264142e87 --- /dev/null +++ b/platform/ui/src/components/ButtonModules/ButtonModules.jsx @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import capitalize from '../../utils/capitalize'; +import styles from './ButtonModules.module.scss'; + +const Button = props => { + const { + children, + variant = defaults.variant, + color = defaults.color, + size = defaults.size, + type = defaults.type, + startIcon: startIconProp, + endIcon: endIconProp, + className, + ...rest + } = props; + const startIcon = startIconProp && ( +
{startIconProp}
+ ); + + const endIcon = endIconProp && ( +
{endIconProp}
+ ); + + return ( + + ); +}; + +const defaults = { + variant: 'outlined', + color: 'default', + size: 'large', + radius: 'medium', + disabled: false, + type: 'button', +}; + +Button.propTypes = { + children: PropTypes.node, + size: PropTypes.oneOf(['small', 'medium', 'large']), + radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']), + variant: PropTypes.oneOf(['text', 'outlined', 'contained']), + color: PropTypes.oneOf(['default', 'primary', 'secondary']), + disabled: PropTypes.bool, + type: PropTypes.string, + startIcon: PropTypes.node, + endIcon: PropTypes.node, + className: PropTypes.node, +}; + +export default Button; diff --git a/platform/ui/src/components/ButtonModules/ButtonModules.mdx b/platform/ui/src/components/ButtonModules/ButtonModules.mdx new file mode 100644 index 000000000..29fd1f099 --- /dev/null +++ b/platform/ui/src/components/ButtonModules/ButtonModules.mdx @@ -0,0 +1,180 @@ +--- +name: ButtonModules +menu: Components +route: components/button-modules +--- + +import { Playground, Props } from 'docz'; +import Button from './'; + +# ButtonModules + +Buttons are used to execute actions when users interacts with them. + +## Properties + + + +## Contained Buttons + + + <> + + + + + + +## Outlined Buttons + + + <> + + + + + + +## Text Buttons + + + <> + + + + + + +## Sizes + + + <> +
+ + + +
+
+ + + +
+
+ + + +
+ + + + + +## Buttons with icons + + +{() => { + return ( +
+ + +
+ ) + }} + + diff --git a/platform/ui/src/components/ButtonModules/ButtonModules.module.scss b/platform/ui/src/components/ButtonModules/ButtonModules.module.scss new file mode 100644 index 000000000..a95bcfa47 --- /dev/null +++ b/platform/ui/src/components/ButtonModules/ButtonModules.module.scss @@ -0,0 +1,213 @@ +$default: #aaa; +$primary: #00a; +$secondary: #a00; +$hoverOpacity: 40%; + +.baseButton { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + cursor: pointer; + user-select: none; + vertical-align: middle; + -moz-appearance: none; + appearance: none; + text-decoration: none; + box-sizing: border-box; + min-width: 64px; + padding: 6px 16px; + border-radius: 20px; + color: inherit; + transition: all 300ms ease; + + &:hover { + text-decoration: none; + background-color: lighten($default, $hoverOpacity / 2); + } + + &:active, + &:focus { + outline: none; + } + + &:disabled { + color: $default; + cursor: not-allowed; + } +} + +/* Styles applied to the root element if `variant="text"`. */ +.text { + padding: 6px 8px; + + &:hover { + background-color: lighten($default, $hoverOpacity / 2); + } +} + +/* Styles applied to the root element if `variant="text"` and `color="primary"`. */ +.textPrimary { + color: $primary; + + &:hover { + background-color: lighten($primary, $hoverOpacity); + } +} + +/* Styles applied to the root element if `variant="text"` and `color="secondary"`. */ +.textSecondary { + color: $secondary; + + &:hover { + background-color: lighten($secondary, $hoverOpacity); + } +} + +/* Styles applied to the root element if `variant="outlined"`. */ +.outlined { + padding: 5px 15px; + border: 1px solid $default; + + &:disabled { + border: 1px solid $default; + } +} + +/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ +.outlinedPrimary { + color: $primary; + border: 1px solid lighten($primary, $hoverOpacity); + + &:hover { + border: 1px solid $primary; + background-color: lighten($primary, $hoverOpacity); + } +} + +/* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ +.outlinedSecondary { + color: $secondary; + border: 1px solid lighten($secondary, $hoverOpacity); + + &:hover { + border: 1px solid $secondary; + background-color: lighten($secondary, $hoverOpacity); + } + + &:disabled { + border: 1px solid $default; + } +} + +/* Styles applied to the root element if `variant="contained"`. */ +.contained { + color: #fff; + background-color: $default; + + &:disabled { + color: lighten($default, $hoverOpacity); + background-color: $default; + } + + &:hover { + background-color: darken($default, $hoverOpacity / 2); + + &:disabled { + color: lighten($default, $hoverOpacity); + background-color: $default; + } + } +} + +/* Styles applied to the root element if `variant="contained"` and `color="primary"`. */ +.containedPrimary { + color: white; + background-color: $primary; + + &:hover { + background-color: darken($primary, $hoverOpacity / 2); + } +} + +/* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ +.containedSecondary { + color: white; + background-color: $secondary; + + &:hover { + background-color: darken($secondary, $hoverOpacity / 2); + } +} + +/* Styles applied to the root element if `size="small"` and `variant="text"`. */ +.textSizeSmall { + padding: 4px 5px; + font-size: 13px; +} + +/* Styles applied to the root element if `size="medium"` and `variant="text"`. */ +.textSizeMedium { + padding: 6px 9px; + font-size: 14px; +} + +/* Styles applied to the root element if `size="large"` and `variant="text"`. */ +.textSizeLarge { + padding: 8px 11px; + font-size: 15px; +} + +/* Styles applied to the root element if `size="small"` and `variant="outlined"`. */ +.outlinedSizeSmall { + padding: 3px 9px; + font-size: 13px; +} + +/* Styles applied to the root element if `size="medium"` and `variant="outlined"`. */ +.outlinedSizeMedium { + padding: 5px 15px; + font-size: 14px; +} + +/* Styles applied to the root element if `size="large"` and `variant="outlined"`. */ +.outlinedSizeLarge { + padding: 7px 21px; + font-size: 15px; +} + +/* Styles applied to the root element if `size="small"` and `variant="contained"`. */ +.containedSizeSmall { + padding: 4px 10px; + font-size: 13px; +} + +/* Styles applied to the root element if `size="medium"` and `variant="contained"`. */ +.containedSizeMedium { + padding: 6px 16px; + font-size: 13px; +} + +/* Styles applied to the root element if `size="large"` and `variant="contained"`. */ +.containedSizeLarge { + padding: 8px 22px; + font-size: 15px; +} + +/* Styles applied to the startIcon element if supplied. */ +.startIcon { + display: inherit; + margin-right: 8px; + margin-left: -4px; +} + +/* Styles applied to the endIcon element if supplied. */ +.endIcon { + display: inherit; + margin-right: -4px; + margin-left: 8px; +} diff --git a/platform/ui/src/components/ButtonModules/index.js b/platform/ui/src/components/ButtonModules/index.js new file mode 100644 index 000000000..142fdfc86 --- /dev/null +++ b/platform/ui/src/components/ButtonModules/index.js @@ -0,0 +1,2 @@ +import ButtonModules from './ButtonModules'; +export default ButtonModules; diff --git a/platform/ui/src/components/Label/Label.jsx b/platform/ui/src/components/Label/Label.jsx index dd23dfc38..7bcce9a73 100644 --- a/platform/ui/src/components/Label/Label.jsx +++ b/platform/ui/src/components/Label/Label.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import t from 'prop-types'; +import PropTypes from 'prop-types'; const Label = ({ children, spacing, className, text, ...rest }) => { const baseClasses = 'flex flex-1 flex-col text-gray-700 text-sm font-bold'; @@ -12,7 +12,7 @@ const Label = ({ children, spacing, className, text, ...rest }) => { }; return ( -