diff --git a/CHANGELOG.md b/CHANGELOG.md index 410554f95..d66eb62ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- New design system in priority 1 components [#523](https://github.com/CartoDB/carto-react/pull/523) - Breaking changes in Mui v5: components [#518](https://github.com/CartoDB/carto-react/pull/518) - Breaking changes in Mui v5: styles and theme [#514](https://github.com/CartoDB/carto-react/pull/514/) - Add final Figma links into Storybook [#515](https://github.com/CartoDB/carto-react/pull/515) diff --git a/UPGRADE.md b/UPGRADE.md index e01485a7f..2ed6297e2 100644 --- a/UPGRADE.md +++ b/UPGRADE.md @@ -1,13 +1,13 @@ # Upgrade to the new design system -## Breaking changes in Mui v5 +# Breaking changes in Mui v5 Please, follow the Mui guides related to breaking changes in components and styles: - [Styles](https://mui.com/material-ui/migration/v5-style-changes/) - [Components](https://mui.com/material-ui/migration/v5-component-changes/) -## MUI theme +# MUI theme [carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections: @@ -36,7 +36,7 @@ Added a few custom variants to the typography set: - code2 - code3 -`Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. +For external use: `Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file. We have a `Typography` component that uses `Mui Typography` and extends it with some useful props: @@ -48,7 +48,7 @@ This way we can be more flexible regarding text styles without adding too many v In short, instead of Mui Typography, the component you should use to add text is this one: `react-ui/src/atoms/Typography` -So `import { Typography } from '@carto/react-ui';`. +For external use: `import { Typography } from '@carto/react-ui';`. ## Colors @@ -93,3 +93,14 @@ Use: `borderRadius: theme.spacing(x)` Design is restringed to a few specific values for shadows, which are: `0, 1, 2, 4, 6, 8, 16, 24`. + +# Components + +## Button + +We have a `Button` component that uses `Mui Button` and wraps its children in `Typography` to meet with the designed behavior (text overflow case). + +So, instead of Mui Button, the component you should use to create buttons is this one: +`react-ui/src/atoms/Button` + +For external use: `import { Button } from '@carto/react-ui';`. diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js index 2f619e61f..ca2a0e7ec 100644 --- a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '../../src/atoms/Typography'; +import Typography from '../../src/components/atoms/Typography'; import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI'; import { fireEvent, render, screen } from '../widgets/utils/testUtils'; diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index aab3093b3..97fdda106 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -47,6 +47,7 @@ "@storybook/addon-essentials": "^6.5.12", "@storybook/addon-links": "^6.5.12", "@storybook/addon-viewport": "^6.5.12", + "@etchteam/storybook-addon-status": "^4.2.2", "@storybook/react": "^6.5.12", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", diff --git a/packages/react-ui/src/components/atoms/Button.js b/packages/react-ui/src/components/atoms/Button.js new file mode 100644 index 000000000..af4b56f29 --- /dev/null +++ b/packages/react-ui/src/components/atoms/Button.js @@ -0,0 +1,23 @@ +import React, { forwardRef } from 'react'; +import PropTypes from 'prop-types'; +import { Button as MuiButton } from '@mui/material'; +import Typography from './Typography'; + +const Button = forwardRef(({ style, children, ...otherProps }, ref) => { + // forwardRef needed to be able to hold a reference, in this way it can be a child for some Mui components, like Tooltip + // https://mui.com/material-ui/guides/composition/#caveat-with-refs + + return ( + + + {children} + + + ); +}); + +Button.propTypes = { + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) +}; + +export default Button; diff --git a/packages/react-ui/src/atoms/Typography.js b/packages/react-ui/src/components/atoms/Typography.js similarity index 100% rename from packages/react-ui/src/atoms/Typography.js rename to packages/react-ui/src/components/atoms/Typography.js diff --git a/packages/react-ui/src/custom-components/InputFile.js b/packages/react-ui/src/components/organisms/InputFile.js similarity index 100% rename from packages/react-ui/src/custom-components/InputFile.js rename to packages/react-ui/src/components/organisms/InputFile.js diff --git a/packages/react-ui/src/index.d.ts b/packages/react-ui/src/index.d.ts index b6faed108..993a2220e 100644 --- a/packages/react-ui/src/index.d.ts +++ b/packages/react-ui/src/index.d.ts @@ -22,7 +22,8 @@ import { CHART_TYPES } from './widgets/TimeSeriesWidgetUI/utils/constants'; import TableWidgetUI from './widgets/TableWidgetUI/TableWidgetUI'; import NoDataAlert from './widgets/NoDataAlert'; import FeatureSelectionWidgetUI from './widgets/FeatureSelectionWidgetUI'; -import Typography from './atoms/Typography'; +import Typography from './components/atoms/Typography'; +import Button from './components/atoms/Button'; export { theme, @@ -50,5 +51,6 @@ export { LegendIcon, LegendProportion, LegendRamp, - Typography + Typography, + Button }; diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js index 0eb003dd7..c82ab0ca1 100644 --- a/packages/react-ui/src/index.js +++ b/packages/react-ui/src/index.js @@ -22,7 +22,8 @@ import PolygonIcon from './assets/PolygonIcon'; import RectangleIcon from './assets/RectangleIcon'; import LassoIcon from './assets/LassoIcon'; import CircleIcon from './assets/CircleIcon'; -import Typography from './atoms/Typography'; +import Typography from './components/atoms/Typography'; +import Button from './components/atoms/Button'; const featureSelectionIcons = { CursorIcon, @@ -55,5 +56,6 @@ export { LegendIcon, LegendProportion, LegendRamp, - Typography + Typography, + Button }; diff --git a/packages/react-ui/src/theme/carto-theme.d.ts b/packages/react-ui/src/theme/carto-theme.d.ts index 8b51966aa..881935807 100644 --- a/packages/react-ui/src/theme/carto-theme.d.ts +++ b/packages/react-ui/src/theme/carto-theme.d.ts @@ -1,7 +1,6 @@ import { Theme, ThemeOptions, TypeText } from '@mui/material'; import { Palette, PaletteColor } from '@mui/material'; - export const cartoThemeOptions: ThemeOptions; export const theme: CartoTheme; @@ -123,3 +122,10 @@ declare module '@mui/material/Typography' { code3: true; } } + +// Update the Buttons's color prop options +declare module '@mui/material/Button' { + interface ButtonPropsColorOverrides { + default: true; + } +} diff --git a/packages/react-ui/src/theme/sections/components/buttons.js b/packages/react-ui/src/theme/sections/components/buttons.js index 7be93add4..48988ab03 100644 --- a/packages/react-ui/src/theme/sections/components/buttons.js +++ b/packages/react-ui/src/theme/sections/components/buttons.js @@ -1,126 +1,279 @@ -import { getPixelToRem, getSpacing } from '../../themeUtils'; +import { getSpacing } from '../../themeUtils'; import { commonPalette } from '../palette'; +import { themeTypography } from '../typography'; +import { themeShadows } from '../shadows'; + +const sizeSmall = getSpacing(3); +const sizeMedium = getSpacing(4); +const sizeLarge = getSpacing(6); +const iconSize = getSpacing(2.25); export const buttonsOverrides = { - // Button - MuiButton: { + // Button Base + MuiButtonBase: { defaultProps: { + disableRipple: true, disableElevation: true - }, + } + }, + // Button + MuiButton: { styleOverrides: { + root: ({ ownerState }) => ({ + maxWidth: '192px', + + '&:hover, &:focus-visible': { + ...(ownerState.variant !== 'contained' && { + ...(ownerState.color === 'primary' && { + backgroundColor: commonPalette.primary.background + }), + ...(ownerState.color === 'secondary' && { + backgroundColor: commonPalette.secondary.background + }), + + ...(ownerState.color === 'error' && { + background: commonPalette.error.relatedLight + }) + }), + ...(ownerState.variant === 'contained' && + ownerState.color === 'secondary' && { + backgroundColor: commonPalette.secondary.light + }) + }, + // Pairing buttons separation + '& + &': { + marginLeft: getSpacing(1) + }, + '& .MuiSvgIcon-root': { + display: 'flex', + fontSize: iconSize + } + }), + contained: { - boxShadow: 'none' + boxShadow: 'none', + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground + } }, outlined: { - border: `2px solid ${commonPalette.text.primary}`, - padding: '4px 14px', - '&:hover': { - borderWidth: '2px' - }, '&.Mui-disabled': { - borderWidth: '2px' + color: commonPalette.text.disabled, + borderColor: commonPalette.default.outlinedBorder } }, outlinedPrimary: { - border: `2px solid ${commonPalette.primary.main}`, - '&:hover': { - borderWidth: '2px' - } + borderColor: commonPalette.primary.main }, outlinedSecondary: { - border: `2px solid ${commonPalette.secondary.main}`, - '&:hover': { - borderWidth: '2px' - }, - '&.Mui-disabled': { - borderWidth: '2px' - } - }, - containedSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) + borderColor: commonPalette.secondary.main }, - outlinedSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) - }, - textSizeSmall: { - padding: '2px 12px', - fontSize: getPixelToRem(12) - }, - containedSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) - }, - containedSecondary: { - '&:hover': { - backgroundColor: commonPalette.secondary.light - } - }, - outlinedSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) - }, - textSizeLarge: { - padding: '16px 24px', - fontSize: getPixelToRem(16) + outlinedError: { + borderColor: commonPalette.error.main }, + startIcon: { - marginRight: 6, - marginLeft: -4, - '&.MuiButton-iconSizeSmall': { - marginLeft: -4 + marginRight: getSpacing(0.75), + + '& .MuiSvgIcon-root': { + fontSize: iconSize }, - '&.MuiButton-iconSizeLarge': { - marginRight: 8 + '&.MuiButton-iconSizeSmall': { + marginRight: getSpacing(0.5), + marginLeft: getSpacing(-0.5) } }, endIcon: { - marginRight: -4, - marginLeft: 6, - '&.MuiButton-iconSizeSmall': { - marginRight: -4 + marginLeft: getSpacing(0.75), + + '& .MuiSvgIcon-root': { + fontSize: iconSize }, - '&.MuiButton-iconSizeLarge': { - marginLeft: 8 + '&.MuiButton-iconSizeSmall': { + marginLeft: getSpacing(0.5), + marginRight: getSpacing(-0.5) } }, - iconSizeSmall: { - '& > *:first-child': { - fontSize: 20 + + sizeSmall: { + height: sizeSmall, + padding: getSpacing(0, 1.5), + ...themeTypography.caption, + lineHeight: sizeSmall, + fontWeight: 500, + letterSpacing: '0.4px' + }, + sizeMedium: { + height: sizeMedium, + padding: getSpacing(0, 2), + lineHeight: sizeMedium + }, + sizeLarge: { + height: sizeLarge, + padding: getSpacing(0, 2.5), + ...themeTypography.body1, + lineHeight: sizeLarge, + fontWeight: 500, + letterSpacing: '0.25px' + } + }, + + variants: [ + // Custom color and its variants + { + props: { variant: 'contained', color: 'default' }, + style: { + color: commonPalette.text.primary, + backgroundColor: commonPalette.default.main, + borderColor: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground + }, + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.default.dark + } } }, - iconSizeMedium: { - '& > *:first-child': { - fontSize: 24 + { + props: { variant: 'outlined', color: 'default' }, + style: { + color: commonPalette.text.primary, + borderColor: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled, + borderColor: commonPalette.default.outlinedBorder + }, + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.action.hover, + borderColor: commonPalette.text.primary + } } }, - iconSizeLarge: { - '& > *:first-child': { - fontSize: 24 + { + props: { variant: 'text', color: 'default' }, + style: { + color: commonPalette.text.primary, + + '&.Mui-disabled': { + color: commonPalette.text.disabled + }, + '&:hover, &:focus-visible': { + backgroundColor: commonPalette.action.hover + } } } - } + ] }, - // Button Base - MuiButtonBase: { + // Mui Button Group + MuiButtonGroup: { defaultProps: { - disableRipple: true + disableRipple: true, + disableElevation: true + }, + + styleOverrides: { + root: ({ ownerState }) => ({ + '& .MuiButton-root + .MuiButton-root': { + marginLeft: 0 + }, + + ...(ownerState.variant === 'text' && { + boxShadow: themeShadows[1], + borderColor: commonPalette.default.dark, + + '& .MuiButtonGroup-grouped:not(:last-of-type)': { + borderColor: commonPalette.default.dark + } + }), + ...(ownerState.variant === 'outlined' && { + ...(ownerState.color === 'default' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.text.primary + } + }), + ...(ownerState.color === 'primary' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.primary.main + } + }), + ...(ownerState.color === 'secondary' && { + '& .MuiButtonBase-root.Mui-disabled': { + borderColor: commonPalette.secondary.main + } + }), + ...(ownerState.orientation !== 'vertical' && { + '& .MuiButtonGroup-grouped:not(:last-of-type):hover, & .Mui-disabled:not(:last-of-type)': + { + borderRightColor: 'transparent' + } + }) + }), + ...(ownerState.variant === 'contained' && { + ...(ownerState.color === 'default' && { + '& .MuiButtonGroup-grouped:not(:last-of-type)': { + borderRightColor: commonPalette.default.dark, + + '&.Mui-disabled': { + ...(ownerState.color === 'default' && { + borderColor: commonPalette.default.dark + }), + ...(ownerState.color === 'primary' && { + borderColor: commonPalette.primary.dark + }), + ...(ownerState.color === 'secondary' && { + borderColor: commonPalette.secondary.dark + }) + } + } + }) + }) + }) } }, // Icon Button MuiIconButton: { styleOverrides: { - root: { - padding: getSpacing(0.75), + root: ({ ownerState }) => ({ borderRadius: getSpacing(0.5), - color: commonPalette.text.primary - }, + + ...(ownerState.color === 'default' && { + color: commonPalette.text.secondary + }), + '& .MuiSvgIcon-root': { + fontSize: iconSize + }, + '&:hover, &:focus-visible': { + ...(ownerState.color === 'default' && { + backgroundColor: commonPalette.action.hover + }), + ...(ownerState.color === 'primary' && { + backgroundColor: commonPalette.primary.background + }), + ...(ownerState.color === 'secondary' && { + backgroundColor: commonPalette.secondary.background + }) + } + }), + sizeSmall: { - padding: getSpacing(0.25) + width: sizeSmall, + height: sizeSmall + }, + sizeMedium: { + width: sizeMedium, + height: sizeMedium + }, + sizeLarge: { + width: sizeLarge, + height: sizeLarge } } }, @@ -134,9 +287,11 @@ export const buttonsOverrides = { border: 'none', borderRadius: getSpacing(0.5), color: commonPalette.grey[500], + '&.Mui-selected': { color: commonPalette.primary.main, backgroundColor: commonPalette.primary.background, + '&:hover': { backgroundColor: commonPalette.primary.background } @@ -145,6 +300,7 @@ export const buttonsOverrides = { sizeSmall: { width: getSpacing(3), height: getSpacing(3), + '& .MuiSvgIcon-root': { maxWidth: getSpacing(2.5), maxHeight: getSpacing(2.5) @@ -190,5 +346,64 @@ export const buttonsOverrides = { } } } + }, + + // FAB button + MuiFab: { + styleOverrides: { + root: { + '& .MuiSvgIcon-root': { + width: getSpacing(3), + height: getSpacing(3) + }, + '&.MuiFab-extended': { + ...themeTypography.body1, + fontWeight: 500, + width: 'auto', + height: getSpacing(7), + paddingRight: getSpacing(3), + borderRadius: getSpacing(8), + + '& .MuiSvgIcon-root': { + marginRight: getSpacing(1.5) + } + } + }, + + sizeSmall: { + width: getSpacing(4), + height: getSpacing(4), + minHeight: getSpacing(4), + + '& .MuiSvgIcon-root': { + width: iconSize, + height: iconSize + }, + '&.MuiFab-extended': { + ...themeTypography.body2, + fontWeight: 600, + width: 'auto', + height: getSpacing(4), + paddingRight: getSpacing(2), + + '& .MuiSvgIcon-root': { + marginRight: getSpacing(1) + } + } + }, + sizeMedium: { + '&.MuiFab-extended': { + ...themeTypography.body2, + fontWeight: 600, + height: getSpacing(6) + } + }, + + secondary: { + '&:hover': { + backgroundColor: commonPalette.secondary.light + } + } + } } }; diff --git a/packages/react-ui/src/theme/sections/palette.js b/packages/react-ui/src/theme/sections/palette.js index 18bfbfe37..ee1c94f79 100644 --- a/packages/react-ui/src/theme/sections/palette.js +++ b/packages/react-ui/src/theme/sections/palette.js @@ -1,5 +1,4 @@ import { alpha } from '@mui/material'; -import { getMixedColor } from '../themeUtils'; const COLOR_BLACK = '#2C3032'; const COLOR_WHITE = '#FFFFFF'; @@ -105,7 +104,7 @@ export const commonPalette = { light: baseColors.blue[300], contrastText: baseColors.common.white, background: alpha(baseColors.blue[400], 0.08), - relatedLight: getMixedColor(baseColors.blue[400], baseColors.common.white, 0.9) + relatedLight: '#EAF2FC' }, secondary: { main: baseColors.green[400], @@ -113,7 +112,7 @@ export const commonPalette = { light: baseColors.green[300], contrastText: baseColors.common.black, background: alpha(baseColors.green[400], 0.08), - relatedLight: getMixedColor(baseColors.green[400], baseColors.common.white, 0.9) + relatedLight: '#EFFCF5' }, text: { primary: baseColors.common.black, @@ -138,32 +137,32 @@ export const commonPalette = { dark: baseColors.indigo[500], light: baseColors.indigo[300], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.indigo[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.indigo[400], baseColors.common.white, 0.9) + relatedDark: '#0d2b4a', + relatedLight: '#E9EEF4' }, success: { main: baseColors.lightGreen[400], dark: baseColors.lightGreen[500], light: baseColors.lightGreen[300], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.lightGreen[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.lightGreen[400], baseColors.common.white, 0.9) + relatedDark: '#3D541A', + relatedLight: '#F2F5EB' }, warning: { main: baseColors.orange[400], dark: baseColors.orange[500], light: baseColors.orange[300], contrastText: baseColors.common.black, - relatedDark: getMixedColor(baseColors.orange[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.orange[400], baseColors.common.white, 0.9) + relatedDark: '#78540F', + relatedLight: '#FEF6EA' }, error: { main: baseColors.red[400], light: baseColors.red[300], dark: baseColors.red[500], contrastText: baseColors.common.white, - relatedDark: getMixedColor(baseColors.red[400], baseColors.neutral.A700, 0.6), - relatedLight: getMixedColor(baseColors.red[400], baseColors.common.white, 0.9) + relatedDark: '#622215', + relatedLight: '#F9EDEA' }, grey: { ...baseColors.neutral diff --git a/packages/react-ui/src/theme/sections/typography.js b/packages/react-ui/src/theme/sections/typography.js index 4801705ac..288e4c0df 100644 --- a/packages/react-ui/src/theme/sections/typography.js +++ b/packages/react-ui/src/theme/sections/typography.js @@ -106,55 +106,11 @@ const baseTypography = { }; const customTypography = { - // TODO: Create a wrapper for the Typography component to reduce the number of variants https://app.shortcut.com/cartoteam/story/265549/ - body1Italic: { - ...baseTypography.body1, - fontStyle: 'italic' - }, - body1Medium: { - ...baseTypography.body1, - fontWeight: 500 - }, - body1Strong: { - ...baseTypography.body1, - fontWeight: 600 - }, - body1StrongItalic: { - ...baseTypography.body1, - fontWeight: 600, - fontStyle: 'italic' - }, - body2Italic: { - ...baseTypography.body2, - fontStyle: 'italic' - }, - body2Strong: { - ...baseTypography.body2, - fontWeight: 600 - }, - body2StrongItalic: { - ...baseTypography.body2, - fontWeight: 600, - fontStyle: 'italic' - }, - captionItalic: { - ...baseTypography.caption, - fontStyle: 'italic' - }, captionMedium: { ...baseTypography.caption, fontWeight: 500, letterSpacing: '0.4px' }, - captionStrong: { - ...baseTypography.caption, - fontWeight: 500 - }, - captionStrongItalic: { - ...baseTypography.caption, - fontWeight: 500, - fontStyle: 'italic' - }, overlineDelicate: { ...baseTypography.overline, fontWeight: 400, @@ -167,13 +123,6 @@ const customTypography = { lineHeight: 1.5, letterSpacing: 0 }, - code1Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(16), - lineHeight: 1.5, - letterSpacing: 0 - }, code2: { fontFamily: '"Overpass Mono", monospace', fontWeight: 400, @@ -181,26 +130,12 @@ const customTypography = { lineHeight: 1.428, letterSpacing: 0 }, - code2Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(14), - lineHeight: 1.428, - letterSpacing: 0 - }, code3: { fontFamily: '"Overpass Mono", monospace', fontWeight: 400, fontSize: getPixelToRem(12), lineHeight: 1.333, letterSpacing: 0 - }, - code3Strong: { - fontFamily: '"Overpass Mono", monospace', - fontWeight: 600, - fontSize: getPixelToRem(12), - lineHeight: 1.333, - letterSpacing: 0 } }; diff --git a/packages/react-ui/src/theme/themeUtils.js b/packages/react-ui/src/theme/themeUtils.js index dc7b64cca..9675338ff 100644 --- a/packages/react-ui/src/theme/themeUtils.js +++ b/packages/react-ui/src/theme/themeUtils.js @@ -11,16 +11,3 @@ export function getPixelToRem(px) { return rem; } - -// Lighten and darken color design formula. -// The Mui lighten / darken function doesn't get the same color as designers use -export function getMixedColor(color, baseColor, alpha) { - const getRgbaBaseColor = (baseColor, alpha = 1) => { - const [r, g, b] = baseColor.match(/\w\w/g).map((x) => parseInt(x, 16)); - return `rgba(${r},${g},${b},${alpha})`; - }; - const rgbaBaseColorValue = getRgbaBaseColor(baseColor, alpha); - const colorResult = `linear-gradient(0deg, ${rgbaBaseColorValue}, ${rgbaBaseColorValue}), ${color}`; - - return colorResult; -} diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index 0b7ed4283..f055f9848 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -1,5 +1,8 @@ import { GroupDateTypes } from '@carto/react-core'; -import { TypographyProps as MuiTypographyProps } from '@mui/material'; +import { + ButtonProps as MuiButtonProps, + TypographyProps as MuiTypographyProps +} from '@mui/material'; import { CSSProperties } from 'react'; export type WrapperWidgetUI = { @@ -197,3 +200,8 @@ export interface TypographyProps extends MuiTypographyProps { italic?: boolean; style?: CSSProperties; } + +// Button +export interface ButtonProps extends MuiButtonProps { + style?: CSSProperties; +} diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js index dc5d344ce..d31c3cb10 100644 --- a/packages/react-ui/src/widgets/BarWidgetUI.js +++ b/packages/react-ui/src/widgets/BarWidgetUI.js @@ -5,7 +5,7 @@ import { Grid, Link, useTheme, darken } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import detectTouchScreen from './utils/detectTouchScreen'; import { processFormatterRes } from './utils/formatterUtils'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchScreen(); diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js index 554378546..1292bb160 100644 --- a/packages/react-ui/src/widgets/CategoryWidgetUI.js +++ b/packages/react-ui/src/widgets/CategoryWidgetUI.js @@ -15,7 +15,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { Skeleton } from '@mui/material'; import { animateValues } from './utils/animations'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ root: { diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js index d67f23561..23d27db96 100644 --- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js +++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js @@ -14,7 +14,7 @@ import { import makeStyles from '@mui/styles/makeStyles'; import { ArrowDropDown } from '@mui/icons-material'; import PropTypes from 'prop-types'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; function FeatureSelectionWidgetUI({ className, diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js index cdfef2f93..6aa463ccd 100644 --- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js +++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js @@ -7,7 +7,7 @@ import makeStyles from '@mui/styles/makeStyles'; import { processFormatterRes } from '../utils/formatterUtils'; import detectTouchscreen from '../utils/detectTouchScreen'; import useHistogramInteractivity from './useHistogramInteractivity'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const IS_TOUCH_SCREEN = detectTouchscreen(); diff --git a/packages/react-ui/src/widgets/NoDataAlert.js b/packages/react-ui/src/widgets/NoDataAlert.js index 90fd96c4e..d8a9bacb8 100644 --- a/packages/react-ui/src/widgets/NoDataAlert.js +++ b/packages/react-ui/src/widgets/NoDataAlert.js @@ -1,7 +1,7 @@ import React from 'react'; import { Alert, AlertTitle } from '@mui/material'; import { Box } from '@mui/material'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; function AlertBody({ color = undefined, children }) { return children ? ( diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index d961a5ace..5442713b9 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -15,7 +15,7 @@ import { TimeSeriesProvider, useTimeSeriesContext } from './hooks/TimeSeriesCont import { CHART_TYPES } from './utils/constants'; import { PropTypes } from 'prop-types'; import { GroupDateTypes, getMonday } from '@carto/react-core'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const FORMAT_DATE_BY_STEP_SIZE = { [GroupDateTypes.YEARS]: yearCurrentDateRange, diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index 5eba03158..84a42586a 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -14,7 +14,7 @@ import { Tooltip } from '@mui/material'; import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material'; -import Typography from '../atoms/Typography'; +import Typography from '../components/atoms/Typography'; /* Options props must have this format: diff --git a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js index 44602c430..36e4c5f58 100644 --- a/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js +++ b/packages/react-ui/src/widgets/legend/LayerOptionWrapper.js @@ -1,6 +1,6 @@ import React from 'react'; import { Box } from '@mui/material'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; export default function LayerOptionWrapper({ className = '', label, children }) { return ( diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index f3e602e85..896efe457 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -3,7 +3,7 @@ import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; function LegendCategories({ legend }) { const { diff --git a/packages/react-ui/src/widgets/legend/LegendIcon.js b/packages/react-ui/src/widgets/legend/LegendIcon.js index 81842a85a..616570e05 100644 --- a/packages/react-ui/src/widgets/legend/LegendIcon.js +++ b/packages/react-ui/src/widgets/legend/LegendIcon.js @@ -1,7 +1,7 @@ import React from 'react'; import { Box, Grid } from '@mui/material'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const ICON_SIZE = 16; diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index 82c96a3af..b97982ff9 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -2,7 +2,7 @@ import React from 'react'; import { Box, Grid } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ circles: { diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index a6b24fda9..d62e7afe3 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -5,7 +5,7 @@ import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import { getMinMax } from './LegendProportion'; import LegendProportion from './LegendProportion'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles(() => ({ errorContainer: { diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js index 6b19ca8ce..6d2c42584 100644 --- a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js +++ b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js @@ -7,7 +7,7 @@ import LegendIcon from './LegendIcon'; import LegendRamp from './LegendRamp'; import LegendProportion from './LegendProportion'; import PropTypes from 'prop-types'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const LayersIcon = () => ( diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index 64c18a4f6..3457f1bd1 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -6,7 +6,7 @@ import Note from './Note'; import LayerIcon from '../../assets/LayerIcon'; import { ToggleButton } from '@mui/material'; import OpacityControl from '../OpacityControl'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useStyles = makeStyles((theme) => ({ legendWrapper: { diff --git a/packages/react-ui/src/widgets/legend/Note.js b/packages/react-ui/src/widgets/legend/Note.js index f937e1e7e..57b9e1fce 100644 --- a/packages/react-ui/src/widgets/legend/Note.js +++ b/packages/react-ui/src/widgets/legend/Note.js @@ -1,7 +1,7 @@ import { Box } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import React from 'react'; -import Typography from '../../atoms/Typography'; +import Typography from '../../components/atoms/Typography'; const useNoteStyles = makeStyles(() => ({ note: { diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index a277e5933..bdb261c15 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -4,6 +4,7 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', 'storybook-addon-designs', - '@storybook/addon-viewport' + '@storybook/addon-viewport', + '@etchteam/storybook-addon-status' ] }; diff --git a/packages/react-ui/storybook/.storybook/preview.js b/packages/react-ui/storybook/.storybook/preview.js index d6e56fd3a..edef164fb 100644 --- a/packages/react-ui/storybook/.storybook/preview.js +++ b/packages/react-ui/storybook/.storybook/preview.js @@ -4,18 +4,12 @@ import { createTheme, responsiveFontSizes, ThemeProvider, - StyledEngineProvider + StyledEngineProvider, + CssBaseline } from '@mui/material'; -import { cartoThemeOptions } from '../../src/theme/carto-theme'; +import { cartoThemeOptions, theme } from '../../src/theme/carto-theme'; import { BREAKPOINTS } from '../../src/theme/themeConstants'; -let theme = createTheme(cartoThemeOptions); -theme = responsiveFontSizes(theme, { - breakpoints: ['sm'], - disableAlign: false, - factor: 2 -}); - const customViewports = { xs: { name: 'xs', @@ -54,10 +48,39 @@ const customViewports = { } }; +const componentsStatus = { + deprecated: { + background: '#C1300B', // Error/Main + color: '#ffffff', + description: 'Do not use' + }, + inDevelopment: { + background: '#F29E02', // Warning/Main + color: '#ffffff', + description: 'Work in progress' + }, + readyToReview: { + background: '#024388', // Info/Main + color: '#ffffff', + description: 'Ready to review and validation' + }, + validated: { + background: '#709F1D', // Success/Main + color: '#ffffff', + description: 'Validated and ready to use' + }, + needUpdate: { + background: '#E1E3E4', // Default/Main + color: '#2C3032', + description: 'Need an update, but can be used in this state' + } +}; + export const decorators = [ (Story) => ( + @@ -74,29 +97,22 @@ export const parameters = { }, options: { storySort: { + method: 'alphabetical', order: [ 'Introduction', 'Foundations', ['Palette', 'Typography', 'Spacing', 'Borders', 'Elevations', 'Breakpoints'], 'Atoms', 'Molecules', - 'Organisms', - ['InputFile'], - 'Common', - 'Custom Components', - [ - 'CategoryWidgetUI', - 'FormulaWidgetUI', - 'HistogramWidgetUI', - 'BarWidgetUI', - 'PieWidgetUI', - 'WrapperWidgetUI' - ] + 'Organisms' ] } }, decorators: [withDesign], viewport: { viewports: customViewports + }, + status: { + statuses: componentsStatus } }; diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js new file mode 100644 index 000000000..b85f58c55 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/Button.stories.js @@ -0,0 +1,226 @@ +import React from 'react'; +import { Grid, Tooltip } from '@mui/material'; +import { Add, Close } from '@mui/icons-material'; +import LoadingButton from '@mui/lab/LoadingButton'; +import Typography from '../../../src/components/atoms/Typography'; +import Button from '../../../src/components/atoms/Button'; + +const options = { + title: 'Atoms/Button', + component: Button, + argTypes: { + variant: { + defaultValue: 'contained', + control: { + type: 'select', + options: ['text', 'contained', 'outlined'] + } + }, + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['default', 'primary', 'secondary', 'error'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const Buttons = ({ label, size, disabled, variant, ...rest }) => ( + + + + + + + + + + + +); + +const PlaygroundTemplate = ({ label, size, ...rest }) => ( + + + +); + +const VariantTemplate = ({ label, icon, ...rest }) => { + const smallLabel = label ? label : 'Small button'; + const mediumLabel = label ? label : 'Medium button'; + const largeLabel = label ? label : 'Large button'; + const disabledLabel = label ? label : 'Disabled button'; + + return ( + + + + + + + ); +}; + +const ColorTemplate = ({ label, icon, ...rest }) => { + const containedLabel = label ? label : 'Contained button'; + const outlinedLabel = label ? label : 'Outlined button'; + const textLabel = label ? label : 'Text button'; + + return ( + + + + + + ); +}; + +const BehaviorTemplate = ({ label, icon, ...rest }) => { + const overflowLabel = 'Text Button with overflow'; + + return ( + + + + {'Overflow + optional tooltip'} + + + + + + + + + + + + + + + + + + + {'Pairing buttons'} + + + + + + + + + + + + {'Loading'} + + + + + {'Disabled'} + + + + } + > + {'Import data'} + + + + } + > + {'Send email'} + + + + + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Button' }; + +export const Contained = VariantTemplate.bind({}); +Contained.args = { variant: 'contained' }; + +export const Outlined = VariantTemplate.bind({}); +Outlined.args = { variant: 'outlined' }; + +export const Text = VariantTemplate.bind({}); +Text.args = { variant: 'text' }; + +export const PrimaryColor = ColorTemplate.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = ColorTemplate.bind({}); +SecondaryColor.args = { color: 'secondary' }; + +export const ErrorColor = ColorTemplate.bind({}); +ErrorColor.args = { color: 'error' }; + +export const DefaultColor = ColorTemplate.bind({}); +DefaultColor.args = { color: 'default' }; + +export const Behavior = BehaviorTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/common/Checkbox.stories.js b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Checkbox.stories.js rename to packages/react-ui/storybook/stories/atoms/Checkbox.stories.js index 0bb635b68..ac89b8a49 100644 --- a/packages/react-ui/storybook/stories/common/Checkbox.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Checkbox.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { Checkbox, FormControlLabel, Grid } from '@mui/material'; const options = { - title: 'Common/Checkbox', + title: 'Atoms/Checkbox', component: Checkbox, argTypes: { color: { @@ -31,6 +31,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28751' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Divider.stories.js b/packages/react-ui/storybook/stories/atoms/Divider.stories.js similarity index 95% rename from packages/react-ui/storybook/stories/common/Divider.stories.js rename to packages/react-ui/storybook/stories/atoms/Divider.stories.js index 9a3f9a518..d421b58e3 100644 --- a/packages/react-ui/storybook/stories/common/Divider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Divider.stories.js @@ -10,12 +10,15 @@ import { } from '@mui/icons-material'; const options = { - title: 'Common/Divider', + title: 'Atoms/Divider', component: Divider, parameters: { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28897' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/atoms/IconButton.stories.js b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js new file mode 100644 index 000000000..b1e6b1b99 --- /dev/null +++ b/packages/react-ui/storybook/stories/atoms/IconButton.stories.js @@ -0,0 +1,96 @@ +import React from 'react'; +import { IconButton, Grid } from '@mui/material'; +import { Delete } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; + +const options = { + title: 'Atoms/IconButton', + component: IconButton, + argTypes: { + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['default', 'primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1761%3A30090' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const IconButtons = ({ color, label, size, disabled, title, ...rest }) => ( + + + {title && {title}} + + + + + +); + +const PlaygroundTemplate = ({ label, size, color, ...rest }) => ( + + + +); + +const ButtonTemplate = ({ label, ...rest }) => { + const smallLabel = label ? label : 'Small icon button'; + const mediumLabel = label ? label : 'Medium icon button'; + const largeLabel = label ? label : 'Large icon button'; + const disabledLabel = label ? label : 'Disabled icon button'; + + return ( + + + + + + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Icon Button' }; + +export const PrimaryColor = ButtonTemplate.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = ButtonTemplate.bind({}); +SecondaryColor.args = { color: 'secondary' }; + +export const DefaultColor = ButtonTemplate.bind({}); +DefaultColor.args = { color: 'default' }; diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/atoms/Paper.stories.js similarity index 95% rename from packages/react-ui/storybook/stories/common/Paper.stories.js rename to packages/react-ui/storybook/stories/atoms/Paper.stories.js index 03e411fde..f5a17be37 100644 --- a/packages/react-ui/storybook/stories/common/Paper.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Paper.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Grid, Paper } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Paper', + title: 'Atoms/Paper', component: Paper, argTypes: { elevation: { @@ -19,6 +19,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1447%3A38722' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Progress.stories.js b/packages/react-ui/storybook/stories/atoms/Progress.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Progress.stories.js rename to packages/react-ui/storybook/stories/atoms/Progress.stories.js index 7f5c39b11..f7510fd55 100644 --- a/packages/react-ui/storybook/stories/common/Progress.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Progress.stories.js @@ -3,7 +3,7 @@ import { Box, Button, CircularProgress, Grid, LinearProgress } from '@mui/materi import CheckIcon from '@mui/icons-material/Check'; const options = { - title: 'Common/Progress', + title: 'Atoms/Progress', component: CircularProgress, argTypes: { color: { @@ -42,6 +42,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29703' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Radio.stories.js b/packages/react-ui/storybook/stories/atoms/Radio.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Radio.stories.js rename to packages/react-ui/storybook/stories/atoms/Radio.stories.js index 35400dae7..a0496df47 100644 --- a/packages/react-ui/storybook/stories/common/Radio.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Radio.stories.js @@ -9,7 +9,7 @@ import { } from '@mui/material'; const options = { - title: 'Common/Radio', + title: 'Atoms/Radio', component: Radio, argTypes: { color: { @@ -33,6 +33,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29704' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Select.stories.js b/packages/react-ui/storybook/stories/atoms/Select.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Select.stories.js rename to packages/react-ui/storybook/stories/atoms/Select.stories.js index 5c5d6feb4..8d9bed6ae 100644 --- a/packages/react-ui/storybook/stories/common/Select.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Select.stories.js @@ -9,10 +9,10 @@ import { Select } from '@mui/material'; import { Visibility } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Select', + title: 'Atoms/Select', component: Select, argTypes: { variant: { @@ -48,6 +48,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29965' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Slider.stories.js b/packages/react-ui/storybook/stories/atoms/Slider.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/Slider.stories.js rename to packages/react-ui/storybook/stories/atoms/Slider.stories.js index 6ed3fbb0b..bf5501f52 100644 --- a/packages/react-ui/storybook/stories/common/Slider.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Slider.stories.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Grid, Slider, TextField, Tooltip } from '@mui/material'; const options = { - title: 'Common/Slider', + title: 'Atoms/Slider', component: Slider, argTypes: { color: { @@ -133,6 +133,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A32732' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Switch.stories.js b/packages/react-ui/storybook/stories/atoms/Switch.stories.js similarity index 96% rename from packages/react-ui/storybook/stories/common/Switch.stories.js rename to packages/react-ui/storybook/stories/atoms/Switch.stories.js index a3ec9241f..18d7c981f 100644 --- a/packages/react-ui/storybook/stories/common/Switch.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Switch.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { FormControlLabel, Grid, Switch } from '@mui/material'; const options = { - title: 'Common/Switch', + title: 'Atoms/Switch', component: Switch, argTypes: { color: { @@ -26,6 +26,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33096' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Text-field.stories.js rename to packages/react-ui/storybook/stories/atoms/Text-field.stories.js index b0a60e1ce..6ba5b561f 100644 --- a/packages/react-ui/storybook/stories/common/Text-field.stories.js +++ b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Grid, InputAdornment, TextField } from '@mui/material'; import { Visibility } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Text Field', + title: 'Atoms/Text Field', component: TextField, argTypes: { variant: { @@ -59,6 +59,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33807' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Button.stories.js b/packages/react-ui/storybook/stories/common/Button.stories.js deleted file mode 100644 index 8b5f106b8..000000000 --- a/packages/react-ui/storybook/stories/common/Button.stories.js +++ /dev/null @@ -1,203 +0,0 @@ -import React from 'react'; -import { Button, IconButton, Grid, SvgIcon } from '@mui/material'; - -const options = { - title: 'Common/Button', - component: Button, - argTypes: { - variant: { - control: { - type: 'select', - options: ['text', 'contained', 'outlined'] - } - }, - color: { - control: { - type: 'select', - options: ['default', 'primary', 'secondary'] - } - }, - size: { - control: { - type: 'select', - options: ['small', 'medium', 'large'] - } - }, - disabled: { - control: { - type: 'boolean' - } - }, - label: { - control: { - type: 'text' - } - } - }, - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26509' - } - } -}; -export default options; - -const Icon = (props) => ( - - - -); -const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - - - - - - - - - - - - - - - - -); -const ButtonTemplate = ({ label, icon, ...rest }) => { - const smallLabel = label ? label : 'Small button'; - const mediumLabel = label ? label : 'Normal button'; - const largeLabel = label ? label : 'Large button'; - const disabledLabel = label ? label : 'Disabled button'; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; -const disabledControlsArgTypes = { - variant: { table: { disable: true } }, - size: { table: { disable: true } }, - disabled: { table: { disable: true } } -}; - -export const Default = PlaygroundTemplate.bind({}); -Default.args = { label: 'Button' }; - -export const Contained = ButtonTemplate.bind({}); -Contained.args = { variant: 'contained' }; -Contained.argTypes = disabledControlsArgTypes; - -export const Outlined = ButtonTemplate.bind({}); -Outlined.args = { variant: 'outlined' }; -Outlined.argTypes = disabledControlsArgTypes; - -export const Base = ButtonTemplate.bind({}); -Base.args = { variant: 'text' }; -Base.argTypes = disabledControlsArgTypes; - -export const ContainedPrimary = ButtonTemplate.bind({}); -ContainedPrimary.args = { variant: 'contained', color: 'primary' }; -ContainedPrimary.argTypes = disabledControlsArgTypes; - -export const OutlinedPrimary = ButtonTemplate.bind({}); -OutlinedPrimary.args = { variant: 'outlined', color: 'primary' }; -OutlinedPrimary.argTypes = disabledControlsArgTypes; - -export const BasePrimary = ButtonTemplate.bind({}); -BasePrimary.args = { variant: 'text', color: 'primary' }; -BasePrimary.argTypes = disabledControlsArgTypes; diff --git a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js deleted file mode 100644 index 4e5613f56..000000000 --- a/packages/react-ui/storybook/stories/common/ButtonGroup.stories.js +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react'; -import { Button, Grid, ButtonGroup } from '@mui/material'; - -const options = { - title: 'Common/Button Group', - component: ButtonGroup, - argTypes: { - variant: { - control: { - type: 'select', - options: ['text', 'contained', 'outlined'] - } - }, - orientation: { - control: { - type: 'select', - options: ['horizontal', 'vertical'] - } - }, - color: { - control: { - type: 'select', - options: ['default', 'primary', 'secondary'] - } - }, - size: { - control: { - type: 'select', - options: ['small', 'medium', 'large'] - } - }, - disabled: { - control: { - type: 'boolean' - } - }, - label: { - control: { - type: 'text' - } - } - }, - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' - } - } -}; -export default options; - -const PlaygroundTemplate = ({ label, icon, ...rest }) => ( - - - - - - - -); -const ButtonTemplate = ({ label, icon, ...rest }) => { - const smallLabel = label ? label : 'Small button'; - const mediumLabel = label ? label : 'Normal button'; - const largeLabel = label ? label : 'Large button'; - const disabledLabel = label ? label : 'Disabled button'; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; -const disabledControlsArgTypes = { - variant: { table: { disable: true } }, - size: { table: { disable: true } }, - disabled: { table: { disable: true } } -}; - -export const Default = PlaygroundTemplate.bind({}); -Default.args = { label: 'Button' }; - -export const Contained = ButtonTemplate.bind({}); -Contained.args = { variant: 'contained' }; -Contained.argTypes = disabledControlsArgTypes; - -export const Outlined = ButtonTemplate.bind({}); -Outlined.args = { variant: 'outlined' }; -Outlined.argTypes = disabledControlsArgTypes; - -export const Base = ButtonTemplate.bind({}); -Base.args = { variant: 'text' }; -Base.argTypes = disabledControlsArgTypes; - -export const ContainedPrimary = ButtonTemplate.bind({}); -ContainedPrimary.args = { variant: 'contained', color: 'primary' }; -ContainedPrimary.argTypes = disabledControlsArgTypes; - -export const OutlinedPrimary = ButtonTemplate.bind({}); -OutlinedPrimary.args = { variant: 'outlined', color: 'primary' }; -OutlinedPrimary.argTypes = disabledControlsArgTypes; - -export const BasePrimary = ButtonTemplate.bind({}); -BasePrimary.args = { variant: 'text', color: 'primary' }; -BasePrimary.argTypes = disabledControlsArgTypes; diff --git a/packages/react-ui/storybook/stories/foundations/Borders.stories.js b/packages/react-ui/storybook/stories/foundations/Borders.stories.js index 94416ad6c..dda8e7b4e 100644 --- a/packages/react-ui/storybook/stories/foundations/Borders.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Borders.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Borders', @@ -20,7 +21,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=9787%3A4001' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js index f0536d40b..6fbf1e598 100644 --- a/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Breakpoints.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Typography } from '@mui/material'; +import { Box } from '@mui/material'; import { makeStyles } from '@mui/styles'; import { BREAKPOINTS } from '../../../src/theme/themeConstants'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Breakpoints', @@ -19,7 +20,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=10472%3A3871' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js index 15bd91bf1..91ab490cb 100644 --- a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Elevations', @@ -21,7 +22,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8990%3A7615' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Palette.stories.js b/packages/react-ui/storybook/stories/foundations/Palette.stories.js index b1eabd555..ddf7474ea 100644 --- a/packages/react-ui/storybook/stories/foundations/Palette.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Palette.stories.js @@ -2,7 +2,7 @@ import React, { useRef } from 'react'; import { Box, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import { useTheme } from '@mui/material/styles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Palette', @@ -28,7 +28,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8775%3A71615' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js index ad61a043d..de65a0cd1 100644 --- a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js @@ -1,7 +1,8 @@ import React from 'react'; -import { Box, Grid, Typography } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import { useTheme } from '@mui/material/styles'; import { makeStyles } from '@mui/styles'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Spacing', @@ -20,7 +21,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=8776%3A64661' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/foundations/Typography.stories.js b/packages/react-ui/storybook/stories/foundations/Typography.stories.js index 0fbfb4fad..d3a1a114b 100644 --- a/packages/react-ui/storybook/stories/foundations/Typography.stories.js +++ b/packages/react-ui/storybook/stories/foundations/Typography.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Foundations/Typography', @@ -62,7 +62,9 @@ const options = { type: 'figma', url: 'https://www.figma.com/file/lVrTKiHj5zFUmCjjHF6Rc4/CARTO-Foundations?node-id=4662%3A14' }, - viewMode: 'docs' + status: { + type: 'validated' + } } }; export default options; diff --git a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Autocomplete.stories.js rename to packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js index c4aaaa79e..5dc00c6e7 100644 --- a/packages/react-ui/storybook/stories/common/Autocomplete.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Autocomplete.stories.js @@ -3,7 +3,7 @@ import Autocomplete from '@mui/material/Autocomplete'; import { Grid, TextField } from '@mui/material'; const options = { - title: 'Common/Autocomplete', + title: 'Molecules/Autocomplete', component: Autocomplete, argTypes: { variant: { @@ -33,6 +33,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26505' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js b/packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js similarity index 91% rename from packages/react-ui/storybook/stories/common/Breadcrumb.stories.js rename to packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js index 1051cfd65..6714da148 100644 --- a/packages/react-ui/storybook/stories/common/Breadcrumb.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Breadcrumb.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Breadcrumbs, Link } from '@mui/material'; import { NavigateNext, CloudCircle, Home, Style } from '@mui/icons-material'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Breadcrumbs', + title: 'Molecules/Breadcrumbs', component: Breadcrumbs, argTypes: { maxItems: { @@ -17,6 +17,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A26153' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js new file mode 100644 index 000000000..a05880d04 --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/ButtonGroup.stories.js @@ -0,0 +1,192 @@ +import React from 'react'; +import { Grid, ButtonGroup } from '@mui/material'; +import { ArrowDropDown } from '@mui/icons-material'; +import Button from '../../../src/components/atoms/Button'; + +const options = { + title: 'Molecules/Button Group', + component: ButtonGroup, + argTypes: { + variant: { + control: { + type: 'select', + options: ['text', 'contained', 'outlined'] + } + }, + orientation: { + control: { + type: 'select', + options: ['horizontal', 'vertical'] + } + }, + color: { + control: { + type: 'select', + options: ['default', 'primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A27945' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const ButtonRow = ({ label, icon, size, disabled, variant, ...rest }) => { + return ( + + + + + + + + ); +}; + +const PlaygroundTemplate = ({ label, icon, ...rest }) => ( + + + + + + + +); + +const ButtonTemplate = ({ label, icon, ...rest }) => { + const smallLabel = label ? label : 'Small button'; + const mediumLabel = label ? label : 'Normal button'; + const largeLabel = label ? label : 'Large button'; + const disabledLabel = label ? label : 'Disabled button'; + + return ( + + + + + + + ); +}; + +const ColorTemplate = ({ label, icon, ...rest }) => { + const containedLabel = label ? label : 'Contained button'; + const outlinedLabel = label ? label : 'Outlined button'; + const textLabel = label ? label : 'Text button'; + + return ( + + + + + + ); +}; + +const SplitTemplate = ({ ...rest }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const VerticalTemplate = ({ ...rest }) => { + return ( + + + + + + ); +}; + +export const Playground = PlaygroundTemplate.bind({}); +Playground.args = { label: 'Button' }; + +export const Contained = ButtonTemplate.bind({}); +Contained.args = { variant: 'contained' }; + +export const Outlined = ButtonTemplate.bind({}); +Outlined.args = { variant: 'outlined' }; + +export const Text = ButtonTemplate.bind({}); +Text.args = { variant: 'text' }; + +export const Primary = ColorTemplate.bind({}); +Primary.args = { color: 'primary' }; + +export const Secondary = ColorTemplate.bind({}); +Secondary.args = { color: 'secondary' }; + +export const Default = ColorTemplate.bind({}); +Default.args = { color: 'default' }; + +export const Vertical = VerticalTemplate.bind({}); +Vertical.args = { color: 'primary', orientation: 'vertical' }; + +export const Split = SplitTemplate.bind({}); +Split.args = { variant: 'outlined', color: 'primary' }; diff --git a/packages/react-ui/storybook/stories/common/Chip.stories.js b/packages/react-ui/storybook/stories/molecules/Chip.stories.js similarity index 96% rename from packages/react-ui/storybook/stories/common/Chip.stories.js rename to packages/react-ui/storybook/stories/molecules/Chip.stories.js index 0b6a9feb6..d13dbd082 100644 --- a/packages/react-ui/storybook/stories/common/Chip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Chip.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { Avatar, Chip, Grid } from '@mui/material'; const options = { - title: 'Common/Chip', + title: 'Molecules/Chip', component: Chip, argTypes: { avatar: { @@ -60,11 +60,11 @@ const options = { } }, variant: { - defaultValue: 'default', + defaultValue: 'filled', description: 'The variant to use.', control: { type: 'select', - options: ['default', 'outlined'] + options: ['filled', 'outlined'] } } }, @@ -72,6 +72,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/molecules/FAB.stories.js b/packages/react-ui/storybook/stories/molecules/FAB.stories.js new file mode 100644 index 000000000..1b87e34d4 --- /dev/null +++ b/packages/react-ui/storybook/stories/molecules/FAB.stories.js @@ -0,0 +1,130 @@ +import React from 'react'; +import { Fab, Grid } from '@mui/material'; +import { Add, Close, Edit } from '@mui/icons-material'; + +const options = { + title: 'Molecules/FAB Button', + component: Fab, + argTypes: { + variant: { + defaultValue: 'contained', + control: { + type: 'select', + options: ['default', 'extended'] + } + }, + color: { + defaultValue: 'primary', + control: { + type: 'select', + options: ['primary', 'secondary'] + } + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'] + } + }, + disabled: { + defaultValue: false, + control: { + type: 'boolean' + } + }, + label: { + control: { + type: 'text' + } + } + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28899' + }, + status: { + type: 'readyToReview' + } + } +}; +export default options; + +const FABButtons = ({ label, size, disabled, variant, ...rest }) => { + const customLabel = label ? label : 'Label'; + + return ( + <> + + + + + + + + + + + + + + {customLabel} + + + + + + + + + + + + + + + + {customLabel} + + + + ); +}; + +const Template = ({ label, size, color, ...rest }) => ( + + + +); + +const SizeTemplate = ({ label, color, ...rest }) => ( + + + + + + + + + + + + + +); + +export const Playground = Template.bind({}); + +export const PrimaryColor = Template.bind({}); +PrimaryColor.args = { color: 'primary' }; + +export const SecondaryColor = Template.bind({}); +SecondaryColor.args = { color: 'secondary' }; + +export const Sizes = SizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/ToggleButton.stories.js rename to packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index 3f7267071..289e6ff9c 100644 --- a/packages/react-ui/storybook/stories/common/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -6,7 +6,7 @@ import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive'; import TrainIcon from '@mui/icons-material/Train'; const options = { - title: 'Common/Toggle Button', + title: 'Molecules/Toggle Button', component: ToggleButtonGroup, argTypes: { size: { @@ -34,6 +34,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36258' + }, + status: { + type: 'inDevelopment' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tooltip.stories.js b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js similarity index 95% rename from packages/react-ui/storybook/stories/common/Tooltip.stories.js rename to packages/react-ui/storybook/stories/molecules/Tooltip.stories.js index 547a7bfea..8800348be 100644 --- a/packages/react-ui/storybook/stories/common/Tooltip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js @@ -1,10 +1,10 @@ import React from 'react'; import { Button, Grid, Tooltip } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Common/Tooltip', + title: 'Molecules/Tooltip', component: Tooltip, argTypes: { title: { @@ -47,6 +47,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36257' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Dialog.stories.js b/packages/react-ui/storybook/stories/organisms/Dialog.stories.js similarity index 98% rename from packages/react-ui/storybook/stories/common/Dialog.stories.js rename to packages/react-ui/storybook/stories/organisms/Dialog.stories.js index 30d5c2781..46645f893 100644 --- a/packages/react-ui/storybook/stories/common/Dialog.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Dialog.stories.js @@ -13,7 +13,7 @@ import { } from '@mui/material'; const options = { - title: 'Common/Dialog', + title: 'Organisms/Dialog', component: Dialog, argTypes: { disableEscapeKeyDown: { @@ -52,6 +52,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28896' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js index 94e80796e..33456982c 100644 --- a/packages/react-ui/storybook/stories/organisms/InputFile.stories.js +++ b/packages/react-ui/storybook/stories/organisms/InputFile.stories.js @@ -1,9 +1,9 @@ import { Box, Button, CircularProgress, FormControl, InputLabel } from '@mui/material'; import React, { useState } from 'react'; -import InputFile from '../../../src/custom-components/InputFile'; +import InputFile from '../../../src/components/organisms/InputFile'; import { Alert } from '@mui/material'; import UploadIcon from '../../../src/assets/UploadIcon'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Organisms/InputFile', diff --git a/packages/react-ui/storybook/stories/common/List.stories.js b/packages/react-ui/storybook/stories/organisms/List.stories.js similarity index 99% rename from packages/react-ui/storybook/stories/common/List.stories.js rename to packages/react-ui/storybook/stories/organisms/List.stories.js index a7ad83267..66e6240d6 100644 --- a/packages/react-ui/storybook/stories/common/List.stories.js +++ b/packages/react-ui/storybook/stories/organisms/List.stories.js @@ -29,12 +29,15 @@ import { } from '@mui/icons-material'; const options = { - title: 'Common/List', + title: 'Organisms/List', component: List, parameters: { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A29228' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/common/Tabs.stories.js b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js similarity index 97% rename from packages/react-ui/storybook/stories/common/Tabs.stories.js rename to packages/react-ui/storybook/stories/organisms/Tabs.stories.js index f0d3b7844..695097d55 100644 --- a/packages/react-ui/storybook/stories/common/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js @@ -3,7 +3,7 @@ import { Tab, Tabs } from '@mui/material'; import { Layers, LocalOffer, Map, Place, Store } from '@mui/icons-material'; const options = { - title: 'Common/Tabs', + title: 'Organisms/Tabs', component: Tabs, argTypes: { variant: { @@ -36,6 +36,9 @@ const options = { design: { type: 'figma', url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A33239' + }, + status: { + type: 'needUpdate' } } }; diff --git a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js index 39f657033..c0c95efa5 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/BarWidgetUI.stories.js @@ -3,7 +3,7 @@ import BarWidgetUI from '../../../src/widgets/BarWidgetUI'; import { buildReactPropsAsString } from '../../utils'; const options = { - title: 'Custom Components/BarWidgetUI', + title: 'Organisms/Widgets/BarWidgetUI', component: BarWidgetUI }; diff --git a/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js index 8dfb4610b..f210a76b3 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/CategoryWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import CategoryWidgetUI from '../../../src/widgets/CategoryWidgetUI'; const options = { - title: 'Custom Components/CategoryWidgetUI', + title: 'Organisms/Widgets/CategoryWidgetUI', component: CategoryWidgetUI, argTypes: { selectedCategories: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js index 79d9c0264..5fe81da5b 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FeatureSelectionWidgetUI.stories.js @@ -6,7 +6,7 @@ import PolygonIcon from '../../../src/assets/PolygonIcon'; import RectangleIcon from '../../../src/assets/RectangleIcon'; const options = { - title: 'Custom Components/FeatureSelectionWidgetUI', + title: 'Organisms/Widgets/FeatureSelectionWidgetUI', component: FeatureSelectionWidgetUI, argTypes: { enabled: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js index 5fe3d3e38..1a0a055d6 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/FormulaWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import FormulaWidgetUI from '../../../src/widgets/FormulaWidgetUI'; const options = { - title: 'Custom Components/FormulaWidgetUI', + title: 'Organisms/Widgets/FormulaWidgetUI', component: FormulaWidgetUI, argTypes: { formatter: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js index 8c6b20475..cd352208a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/HistogramWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import HistogramWidgetUI from '../../../src/widgets/HistogramWidgetUI/HistogramWidgetUI'; const options = { - title: 'Custom Components/HistogramWidgetUI', + title: 'Organisms/Widgets/HistogramWidgetUI', component: HistogramWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js index 313c6b206..96c87ae36 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI'; const options = { - title: 'Custom Components/LegendWidgetUI', + title: 'Organisms/Widgets/LegendWidgetUI', component: LegendWidgetUI, argTypes: { className: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js b/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js index bb321efb2..ac68e74aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/NoDataAlert.stories.js @@ -3,7 +3,7 @@ import React from 'react'; import { buildReactPropsAsString } from '../../utils'; const options = { - title: 'Custom Components/NoDataAlert', + title: 'Organisms/Widgets/NoDataAlert', component: NoDataAlert, argTypes: { title: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js index 971783477..32e9ac671 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/PieWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import PieWidgetUI from '../../../src/widgets/PieWidgetUI'; const options = { - title: 'Custom Components/PieWidgetUI', + title: 'Organisms/Widgets/PieWidgetUI', component: PieWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js index c128e9861..12cc7fd9c 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/RangeWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import RangeWidgetUI from '../../../src/widgets/RangeWidgetUI'; const options = { - title: 'Custom Components/RangeWidgetUI', + title: 'Organisms/Widgets/RangeWidgetUI', component: RangeWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js index d52df8a49..581d54588 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/ScatterPlotWidgetUI.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import ScatterPlotWidgetUI from '../../../src/widgets/ScatterPlotWidgetUI'; const options = { - title: 'Custom Components/ScatterPlotWidgetUI', + title: 'Organisms/Widgets/ScatterPlotWidgetUI', component: ScatterPlotWidgetUI, parameters: { docs: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js index 8ede930f0..521ad734a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TableWidgetUI.stories.js @@ -3,10 +3,10 @@ import TableWidgetUI from '../../../src/widgets/TableWidgetUI/TableWidgetUI'; import { Box } from '@mui/material'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import { columns, rows } from '../../../src/widgets/TableWidgetUI/mockData'; -import Typography from '../../../src/atoms/Typography'; +import Typography from '../../../src/components/atoms/Typography'; const options = { - title: 'Custom Components/TableWidgetUI', + title: 'Organisms/Widgets/TableWidgetUI', component: TableWidgetUI, argTypes: {}, parameters: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js index ac88d7915..d2031a481 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/TimeSeriesWidgetUI.stories.js @@ -66,7 +66,7 @@ const data = [ ]; const options = { - title: 'Custom Components/TimeSeriesWidgetUI', + title: 'Organisms/Widgets/TimeSeriesWidgetUI', component: TimeSeriesWidgetUI, argTypes: { data: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js index 626d5231e..e09fd5eaf 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js @@ -5,7 +5,7 @@ import AddLocationIcon from '@mui/icons-material/AddLocation'; import WrapperWidgetUI from '.../../../src/widgets/WrapperWidgetUI'; const options = { - title: 'Custom Components/WrapperWidgetUI', + title: 'Organisms/Widgets/WrapperWidgetUI', component: WrapperWidgetUI, argTypes: { actions: { diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js index 92bb9da9c..ea331bd6a 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendCategories.stories.js @@ -9,7 +9,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendCategories', + title: 'Organisms/Widgets/Legends/LegendCategories', component: LegendCategories, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js index b70ad775d..f3daad7aa 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendIcon.stories.js @@ -11,7 +11,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendIcon', + title: 'Organisms/Widgets/Legends/LegendIcon', component: LegendIcon, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js index 9d97af797..74a87c7d2 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendProportion.stories.js @@ -8,7 +8,7 @@ const DEFAULT_LEGEND = { }; const options = { - title: 'Custom Components/Legends/LegendProportion', + title: 'Organisms/Widgets/Legends/LegendProportion', component: LegendProportion, argTypes: { legend: {} diff --git a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js index 95d8466c4..c46e5b996 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/legend/LegendRamp.stories.js @@ -20,7 +20,7 @@ const DEFAULT_LEGEND_WITH_FORMATTED_LABELS = { }; const options = { - title: 'Custom Components/Legends/LegendRamp', + title: 'Organisms/Widgets/Legends/LegendRamp', component: LegendRamp, argTypes: { legend: {} diff --git a/yarn.lock b/yarn.lock index c8f5e10d0..5efd883f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1601,6 +1601,22 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@etchteam/storybook-addon-status@^4.2.2": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@etchteam/storybook-addon-status/-/storybook-addon-status-4.2.2.tgz#27501aa1ece063284ac7e1c0ef6e2221c789a649" + integrity sha512-iCOoA0+Izu/SixxjjJ9BB4YBVT2reCJ/80dXHBiCqoGSPTAvYGeeoQKexC913eSFv/0u3u4lv5fRZN/KMPAurw== + dependencies: + "@storybook/addons" "^6.2.9" + "@storybook/api" "^6.2.9" + "@storybook/client-logger" "^6.2.9" + "@storybook/components" "^6.2.9" + "@storybook/core-events" "^6.2.9" + "@storybook/theming" "^6.2.9" + core-js "^3.0.1" + lodash "^4.17.21" + memoizerific "^1.11.3" + util-deprecate "^1.0.2" + "@figspec/components@^1.0.0": version "1.0.1" resolved "https://registry.yarnpkg.com/@figspec/components/-/components-1.0.1.tgz#47d7e24999974b18c6daa810299624d4370fc7da" @@ -3773,7 +3789,7 @@ global "^4.4.0" regenerator-runtime "^0.13.7" -"@storybook/addons@6.5.13": +"@storybook/addons@6.5.13", "@storybook/addons@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.13.tgz#61ec5eab07879400d423d60bb397880d10ee5e73" integrity sha512-18CqzNnrGMfeZtiKz+R/3rHtSNnfNwz6y6prIQIbWseK16jY8ELTfIFGviwO5V2OqpbHDQi5+xQQ63QAIb89YA== @@ -3813,7 +3829,7 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/api@6.5.13": +"@storybook/api@6.5.13", "@storybook/api@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.13.tgz#8671e580721ff68d209fcde2975f967ae79b7d64" integrity sha512-xVSmB7/IuFd6G7eiJjbI2MuS7SZunoUM6d+YCWpjiehfMeX47MXt1gZtOwFrgJC1ShZlefXFahq/dvxwtmWs+w== @@ -3965,7 +3981,7 @@ core-js "^3.8.2" global "^4.4.0" -"@storybook/client-logger@6.5.13": +"@storybook/client-logger@6.5.13", "@storybook/client-logger@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.13.tgz#83f332dd9bb4ff1696d16b0cc24561df90905264" integrity sha512-F2SMW3LWFGXLm2ENTwTitrLWJgmMXRf3CWQXdN2EbkNCIBHy5Zcbt+91K4OX8e2e5h9gjGfrdYbyYDYOoUCEfA== @@ -3987,7 +4003,7 @@ regenerator-runtime "^0.13.7" util-deprecate "^1.0.2" -"@storybook/components@6.5.13": +"@storybook/components@6.5.13", "@storybook/components@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.13.tgz#a05fc969458760b348d640f26c2cad310ab35030" integrity sha512-6Hhx70JK5pGfKCkqMU4yq/BBH+vRTmzj7tZKfPwba+f8VmTMoOr/2ysTQFRtXryiHB6Z15xBYgfq5x2pIwQzLQ== @@ -4090,7 +4106,7 @@ dependencies: core-js "^3.8.2" -"@storybook/core-events@6.5.13": +"@storybook/core-events@6.5.13", "@storybook/core-events@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.13.tgz#a8c0cc92694f09981ca6501d5c5ef328db18db8a" integrity sha512-kL745tPpRKejzHToA3/CoBNbI+NPRVk186vGxXBmk95OEg0TlwgQExP8BnqEtLlRZMbW08e4+6kilc1M1M4N5w== @@ -4443,7 +4459,7 @@ memoizerific "^1.11.3" regenerator-runtime "^0.13.7" -"@storybook/theming@6.5.13": +"@storybook/theming@6.5.13", "@storybook/theming@^6.2.9": version "6.5.13" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.13.tgz#3f905eb9f72ddc28d096384290999057987f3083" integrity sha512-oif5NGFAUQhizo50r+ctw2hZNLWV4dPHai+L/gFvbaSeRBeHSNkIcMoZ2FlrO566HdGZTDutYXcR+xus8rI28g== @@ -7784,6 +7800,11 @@ core-js-pure@^3.23.3: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.25.5.tgz#79716ba54240c6aa9ceba6eee08cf79471ba184d" integrity sha512-oml3M22pHM+igfWHDfdLVq2ShWmjM2V4L+dQEBs0DWVIqEm9WHCwGAlZ6BmyBQGy5sFrJmcx+856D9lVKyGWYg== +core-js@^3.0.1: + version "3.26.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.0.tgz#a516db0ed0811be10eac5d94f3b8463d03faccfe" + integrity sha512-+DkDrhoR4Y0PxDz6rurahuB+I45OsEUv8E1maPTB6OuHRohMMcznBq9TMpdpDMm/hUPob/mJJS3PqgbHpMTQgw== + core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2: version "3.20.1" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.1.tgz#eb1598047b7813572f1dc24b7c6a95528c99eef3"