diff --git a/CHANGELOG.md b/CHANGELOG.md index 6864a9b73..1994c8ee6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Chip component adapted to the new design system [#551](https://github.com/CartoDB/carto-react/pull/551/) - Design changes in UploadField component [#548](https://github.com/CartoDB/carto-react/pull/548/) - Divider component adapted to the new design system [#546](https://github.com/CartoDB/carto-react/pull/546/) - UploadField component created for the new design system [#545](https://github.com/CartoDB/carto-react/pull/545/) diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 9006ea580..22355ccf9 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -222,83 +222,173 @@ export const dataDisplayOverrides = { // Chip MuiChip: { + defaultProps: { + color: 'primary' + }, + styleOverrides: { root: { - backgroundColor: commonPalette.grey[100], - '&:hover': { - backgroundColor: commonPalette.grey[200] - }, + maxWidth: '192px', + padding: getSpacing(0, 0.5), + '& .MuiAvatar-root': { - backgroundColor: '#7f3c8d', - color: commonPalette.common.white - } - }, - colorPrimary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100], - color: commonPalette.text.primary + width: ICON_SIZE_M, + height: ICON_SIZE_M, + margin: 0, + color: commonPalette.secondary.contrastText, + backgroundColor: commonPalette.background.paper }, - '&:hover': { - backgroundColor: commonPalette.primary.dark + '& .MuiChip-icon': { + margin: 0, + marginLeft: getSpacing(0.5) + }, + '& img': { + width: ICON_SIZE_M, + height: ICON_SIZE_M + }, + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground, + + '& .MuiChip-deleteIcon, & .MuiChip-icon': { + color: commonPalette.action.disabled + } } }, - colorSecondary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100] - }, - '&:hover': { - backgroundColor: commonPalette.secondary.light + + // Variants + filled: { + border: 0, + backgroundColor: commonPalette.default.main, + + '& .MuiChip-iconColorPrimary': { + color: commonPalette.primary.contrastText } }, - label: { - fontFamily: '"Open Sans", sans-serif', - letterSpacing: 0.25 + filledPrimary: { + backgroundColor: commonPalette.primary.main }, - labelSmall: { - fontSize: themeTypography.caption.fontSize, - fontWeight: themeTypography.fontWeightLight + filledSecondary: { + backgroundColor: commonPalette.secondary.main }, outlined: { - transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, + borderColor: commonPalette.default.outlinedBorder, + '&.Mui-disabled': { + borderColor: commonPalette.default.outlinedBorder, backgroundColor: 'transparent' - }, - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.grey[200], - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } } }, outlinedPrimary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.primary.dark, - color: commonPalette.primary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } - } + borderColor: commonPalette.primary.main }, outlinedSecondary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.secondary.dark, - color: commonPalette.secondary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' + borderColor: commonPalette.secondary.main + }, + + // Sizes + sizeSmall: { + '& img': { + width: ICON_SIZE, + height: ICON_SIZE + }, + '& .MuiAvatar-root': { + width: ICON_SIZE, + height: ICON_SIZE + }, + '& .MuiChip-icon': { + marginLeft: getSpacing(0.25) + } + }, + + // Inner elements + label: { + ...themeTypography.button, + padding: getSpacing(0, 0.75) + }, + labelSmall: { + ...themeTypography.caption, + fontWeight: 500, + padding: getSpacing(0, 0.5) + }, + deleteIcon: { + width: ICON_SIZE, + height: ICON_SIZE, + margin: 0, + marginLeft: '2px', // Forced to a non-standard value to meet with design + marginRight: '3px', // Forced to a non-standard value to meet with design + transition: 'color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', + + '&.MuiChip-deleteIconColorDefault': { + color: commonPalette.text.secondary, + + '&:hover': { + color: commonPalette.text.primary } } }, + deleteIconSmall: { + width: getSpacing(2), + height: getSpacing(2), + marginRight: 0 + }, + clickable: { - '&:focus': { - webkitTapHighlightColor: 'none' + '&:active': { + boxShadow: 'none' + }, + '&:hover': { + '& .MuiChip-deleteIconColorDefault': { + color: commonPalette.text.primary + } + }, + + '&.MuiChip-outlined': { + transitionProperty: 'background, color, border-color', + transitionDuration: '300ms', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + + '&:hover': { + backgroundColor: 'transparent', + + '&.MuiChip-colorPrimary': { + color: commonPalette.primary.dark, + borderColor: commonPalette.primary.dark + }, + '&.MuiChip-colorSecondary': { + color: commonPalette.secondary.dark, + borderColor: commonPalette.secondary.dark + }, + '&.MuiChip-colorDefault': { + borderColor: commonPalette.default.dark + } + } + }, + '&.MuiChip-filled': { + '&:hover': { + '&.MuiChip-colorSecondary': { + backgroundColor: commonPalette.secondary.light + }, + '&.MuiChip-colorDefault': { + backgroundColor: commonPalette.default.dark + } + } } } } }, + // Avatar + MuiAvatar: { + styleOverrides: { + root: { + color: commonPalette.secondary.contrastText, + backgroundColor: commonPalette.secondary.main, + border: `1px solid ${commonPalette.action.hover}` + } + } + }, + // Skeleton MuiSkeleton: { defaultProps: { diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index bdb261c15..20bfdc493 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -6,5 +6,6 @@ module.exports = { 'storybook-addon-designs', '@storybook/addon-viewport', '@etchteam/storybook-addon-status' - ] + ], + staticDirs: ['../assets'] }; diff --git a/packages/react-ui/storybook/assets/avatar.jpeg b/packages/react-ui/storybook/assets/avatar.jpeg new file mode 100644 index 000000000..00e8755c8 Binary files /dev/null and b/packages/react-ui/storybook/assets/avatar.jpeg differ diff --git a/packages/react-ui/storybook/stories/molecules/Avatar.stories.js b/packages/react-ui/storybook/stories/molecules/Avatar.stories.js new file mode 100644 index 000000000..6335109ed --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/Avatar.stories.js @@ -0,0 +1,364 @@ +import React from 'react'; +import { Avatar, Grid, Box } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { Star } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; + +const options = { + title: 'Molecules/Avatar', + component: Avatar, + argTypes: { + sizes: { + control: { + type: 'select', + options: ['large', 'medium', 'small', 'xsmall'] + } + }, + variant: { + control: { + type: 'select', + options: ['circular', 'rounded', 'square'] + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1925%3A30532&t=Y3JoU7theewbWKOW-0' + }, + status: { + type: 'inDevelopment' + } + } +}; +export default options; + +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const Template = ({ ...args }) => { + return ; +}; + +const ShapeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Circular'} + + + + + + + + + + + + + {'Square'} + + + + + + + + + + + + + {'Rounded'} + + + + + + + + + + ); +}; + +const ContentTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Default'} + + + + + + + + + + + + + {'Image'} + + + + + + + + + + + + {'Initial'} + + + + M + + + + + + + + {'Icon'} + + + + + + + + + + + + ); +}; + +const ShapeSizeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Large'} + + + + + + + + + + + + + + + + + + + {'Medium'} + + + + + + + + + + + + + + + + + + + {'Small'} + + + + + + + + + + + + + + + + + + + {'Extra Small'} + + + + + + + + + + + + + + + + ); +}; + +const ContentSizeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Large'} + + + + + + + + + + + M + + + + + + + + + + + + + + + {'Medium'} + + + + + + + + + + M + + + + + + + + + + + + + + {'Small'} + + + + + + + + + + + M + + + + + + + + + + + + + + + {'Extra Small'} + + + + + + + + + + + M + + + + + + + + + + + + ); +}; + +export const Playground = Template.bind({}); + +export const Shape = ShapeTemplate.bind({}); + +export const Content = ContentTemplate.bind({}); + +export const ShapeSizes = ShapeSizeTemplate.bind({}); + +export const ContentSize = ContentSizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/molecules/Chip.stories.js b/packages/react-ui/storybook/stories/molecules/Chip.stories.js index d13dbd082..2c8f5ac5b 100644 --- a/packages/react-ui/storybook/stories/molecules/Chip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Chip.stories.js @@ -1,5 +1,8 @@ import React from 'react'; -import { Avatar, Chip, Grid } from '@mui/material'; +import { Avatar, Chip, Grid, Box, Tooltip } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { FileUploadOutlined } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Molecules/Chip', @@ -17,12 +20,9 @@ const options = { } }, color: { - defaultValue: 'default', - description: - 'The color of the component. It supports those theme colors that make sense for this component.', control: { type: 'select', - options: ['default', 'primary', 'secondary'] + options: ['primary', 'secondary', 'default'] } }, deleteIcon: { @@ -31,7 +31,6 @@ const options = { }, disabled: { defaultValue: false, - description: 'If `true`, the chip should be displayed in a disabled state.', control: { type: 'boolean' } @@ -41,7 +40,6 @@ const options = { }, label: { defaultValue: 'Chip content', - description: 'The content of the label.', control: { type: 'text' } @@ -52,16 +50,12 @@ const options = { defaultValue: null }, size: { - defaultValue: 'medium', - description: 'The size of the chip.', control: { type: 'select', options: ['small', 'medium'] } }, variant: { - defaultValue: 'filled', - description: 'The variant to use.', control: { type: 'select', options: ['filled', 'outlined'] @@ -74,59 +68,574 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -// const Template = ({ ...args }) => { -// return -// }; +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + }, + header: { + minWidth: '200px', + marginTop: theme.spacing(4) + } +})); + const Template = ({ ...args }) => { + return ; +}; + +const VariantsTemplate = ({ ...args }) => { + const classes = useStyles(); + return ( - - - + + + + + {'Filled'} + + + - - + + + + + {'Outlined'} + + + - - + + ); +}; + +const PrefixTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Primary'} + + + + M} /> + + + M} /> + + + } /> + + + } + /> + + + } /> + + + } /> + + + - - + + + + {'Secondary'} + + + + M} /> + + + M} + /> + + + } + /> + + + } + /> + + + } /> + + + } + /> + + + + + + + + + {'Default'} + + + + M} /> + + + M} + /> + + + } + /> + + + } + /> + + + } /> + + + } + /> + + + ); }; -export const Default = Template.bind({}); -Default.args = {}; +const RemovableTemplate = ({ ...args }) => { + const classes = useStyles(); -export const Removable = Template.bind({}); -Removable.args = { onDelete: () => {} }; + return ( + + + + + {'Primary'} + + + + + + + + + + + + + + + + {'Secondary'} + + + + + + + + + + + + + + + + {'Default'} + + + + + + + + + + + + + ); +}; + +const ColorsTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Primary'} + + + + + + + + + + + + + + + {'Secondary'} + + + + + + + + + + + + + + + {'Default'} + + + + + + + + + + + + + ); +}; -export const Thumbnail = Template.bind({}); -Thumbnail.args = { avatar: M }; +const SizeTemplate = ({ ...args }) => { + const classes = useStyles(); -export const ThumbnailRemovable = Template.bind({}); -ThumbnailRemovable.args = { avatar: M, onDelete: () => {} }; + return ( + + + + {'Primary'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + -export const SizeSmall = Template.bind({}); -SizeSmall.args = { size: 'small' }; + + + {'Secondary'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + -export const SizeSmallRemovable = Template.bind({}); -SizeSmallRemovable.args = { size: 'small', onDelete: () => {} }; + + + {'Default'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + + + ); +}; + +const BehaviorTemplate = ({ ...args }) => { + const classes = useStyles(); + const longLabel = 'felipegomezcases@cartodb.com'; + + return ( + + + + + {'Overflow'} + + + + M} + onDelete={() => {}} + /> + + + M} /> + + + + + + + -export const SizeSmallThumbnail = Template.bind({}); -SizeSmallThumbnail.args = { size: 'small', avatar: M }; + + + + {'Hover with Tooltip'} + + + + + M} + onDelete={() => {}} + clickable + /> + + + + + -export const SizeSmallThumbnailRemovable = Template.bind({}); -SizeSmallThumbnailRemovable.args = { - size: 'small', - avatar: M, - onDelete: () => {} + + + + {'Pairing (Grid 8px)'} + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const commonArgs = { + label: 'Chip content' }; +const SizeArgs = { + onDelete: () => {}, + avatar: M +}; +const disabledControlsCommonArgTypes = { + avatar: { table: { disable: true } }, + deleteIcon: { table: { disable: true } }, + icon: { table: { disable: true } }, + onDelete: { table: { disable: true } } +}; +const disabledControlsSizeArgTypes = { + ...disabledControlsCommonArgTypes, + variant: { table: { disable: true } } +}; + +export const Playground = Template.bind({}); +Playground.args = { ...commonArgs }; + +export const Variants = VariantsTemplate.bind({}); +Variants.argTypes = disabledControlsCommonArgTypes; + +export const Colors = ColorsTemplate.bind({}); +Colors.args = { ...commonArgs }; +Colors.argTypes = disabledControlsCommonArgTypes; + +export const Prefix = PrefixTemplate.bind({}); +Prefix.args = { ...commonArgs }; +Prefix.argTypes = disabledControlsCommonArgTypes; + +export const Removable = RemovableTemplate.bind({}); +Removable.args = { onDelete: () => {} }; +Removable.argTypes = disabledControlsCommonArgTypes; + +export const Medium = SizeTemplate.bind({}); +Medium.args = { ...commonArgs, ...SizeArgs }; +Medium.argTypes = disabledControlsSizeArgTypes; + +export const Small = SizeTemplate.bind({}); +Small.args = { ...commonArgs, ...SizeArgs, size: 'small' }; +Small.argTypes = disabledControlsSizeArgTypes; + +export const Behavior = BehaviorTemplate.bind({}); +Behavior.args = { ...commonArgs }; +Behavior.argTypes = disabledControlsCommonArgTypes; diff --git a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js index 4de33d7f0..3b020f67d 100644 --- a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js +++ b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js @@ -79,7 +79,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36997' }, status: { - type: 'readyToReview' + type: 'validated' } } };