From 04d99b95b1e0469a57b2c77593edf73367babc6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Mon, 10 Apr 2023 17:00:41 +0200 Subject: [PATCH] Storybook documentation and fixes (#629) --- CHANGELOG.md | 4 ++- .../storybook/assets/carto-symbol.svg | 4 +++ .../stories/Introduction.stories.mdx | 21 +++++++++++++- .../stories/molecules/ToggleButton.stories.js | 29 ++++++++++++------- .../stories/organisms/Tabs.stories.js | 14 ++++----- .../widgetsUI/LegendWidgetUI.stories.js | 7 +++-- 6 files changed, 56 insertions(+), 23 deletions(-) create mode 100644 packages/react-ui/storybook/assets/carto-symbol.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 50549fbec..7a7f3d285 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,12 +2,14 @@ ## Not released +- Storybook documentation and fixes [#629](https://github.com/CartoDB/carto-react/pull/629) + ## 2.0 ### 2.0.0 (2023-04-05) - Bump to latest @deck.gl 8.9.6, @emotion and @mui packages [#626](https://github.com/CartoDB/carto-react/pull/626) -- Add missing form stories [#627](https://github.com/CartoDB/carto-react/pull/627/files) +- Add missing form stories [#627](https://github.com/CartoDB/carto-react/pull/627) ### 2.0.0-beta.8 (2023-04-04) diff --git a/packages/react-ui/storybook/assets/carto-symbol.svg b/packages/react-ui/storybook/assets/carto-symbol.svg new file mode 100644 index 000000000..898c7b83e --- /dev/null +++ b/packages/react-ui/storybook/assets/carto-symbol.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/react-ui/storybook/stories/Introduction.stories.mdx b/packages/react-ui/storybook/stories/Introduction.stories.mdx index 9df794767..8d17b83bf 100644 --- a/packages/react-ui/storybook/stories/Introduction.stories.mdx +++ b/packages/react-ui/storybook/stories/Introduction.stories.mdx @@ -11,12 +11,31 @@ import Storybook from '../assets/storybook.svg'; # CARTO for React - Widgets and UI Components This storybook includes the UI Components (@carto/react-ui) for CARTO for React. -They are based on [Mui](https://mui.com/), and they include a CARTO theme + custom widgets. + +## Tech stack + +The components are based on [Mui v5](https://mui.com/), and they include a CARTO theme + custom components and widgets. + +We have currently support for `React` 17 (and we're working on having it for v18 asap) ## Library version

{version}

+## Development state + +We have a label in the story of each component that indicates its maturity and recommended use: + +**Recommended use** +- `Validated`: Fully validated and ready-to-use implementation of a component +- `Needs update`: Needs an update due to some design changes, but it can be used in this state +- `Deprecated`: Legacy component that might be currently in use, but it shouldn't be used in new projects + +**Not supported** +- `In development`: Work in progress or experimental. Not ready to use in production yet +- `Ready to review`: Ready to review and validation by CARTO design team and other stakeholders, prior to be consider fully done (it can be considered as a 2nd phase of `In development`). + + ## Resources
diff --git a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js index b0a948e86..9de133081 100644 --- a/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js +++ b/packages/react-ui/storybook/stories/molecules/ToggleButton.stories.js @@ -63,7 +63,7 @@ const options = { }; export default options; -const Toggle = ({ label, ...rest }) => { +const Toggle = ({ label, exclusive, ...rest }) => { const [selected, setSelected] = React.useState(false); return ( @@ -81,7 +81,7 @@ const Toggle = ({ label, ...rest }) => { ); }; -const ToggleRow = ({ label, divider, fullWidth, ...rest }) => { +const ToggleRow = ({ label, divider, fullWidth, exclusive, ...rest }) => { const [selected, setSelected] = React.useState(() => ['AlignLeft']); const handleAlignment = (event, newAlignment) => { @@ -94,6 +94,7 @@ const ToggleRow = ({ label, divider, fullWidth, ...rest }) => { value={selected} onChange={handleAlignment} fullWidth={fullWidth} + exclusive={exclusive} aria-label='text alignment' > @@ -113,7 +114,7 @@ const ToggleRow = ({ label, divider, fullWidth, ...rest }) => { ); }; -const IconTemplate = (args) => { +const IconTemplate = ({ exclusive, ...args }) => { return ( @@ -129,7 +130,7 @@ const IconTemplate = (args) => { ); }; -const TextTemplate = (args) => { +const TextTemplate = ({ exclusive, ...args }) => { return ( @@ -142,7 +143,7 @@ const TextTemplate = (args) => { ); }; -const GroupTemplate = (args) => { +const GroupTemplate = ({ exclusive, ...args }) => { return ( @@ -155,7 +156,7 @@ const GroupTemplate = (args) => { ); }; -const VerticalGroupTemplate = (args) => { +const VerticalGroupTemplate = ({ exclusive, ...args }) => { return ( @@ -168,20 +169,20 @@ const VerticalGroupTemplate = (args) => { ); }; -const DividedTemplate = (args) => { +const DividedTemplate = ({ exclusive, ...args }) => { return ( - + - + ); }; -const BehaviorTemplate = (args) => { +const BehaviorTemplate = ({ exclusive, ...args }) => { const [selected, setSelected] = React.useState(() => ['opt1']); const [selected2, setSelected2] = React.useState(() => ['opt1']); @@ -198,7 +199,12 @@ const BehaviorTemplate = (args) => { {'Hug Text'} {'Default behavior'} - + {'Opt 1'} {'Opt 2'} {'Option 3'} @@ -214,6 +220,7 @@ const BehaviorTemplate = (args) => { value={selected2} onChange={handleAlignment2} fullWidth + exclusive={exclusive} style={{ width: '496px' }} > {'Opt 1'} diff --git a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js index a71108ce1..3fe8d33c5 100644 --- a/packages/react-ui/storybook/stories/organisms/Tabs.stories.js +++ b/packages/react-ui/storybook/stories/organisms/Tabs.stories.js @@ -235,7 +235,7 @@ const TemplateVertical = ({ label, wrapped, disabled, ...args }) => { ); }; -const BehaviorTemplate = (args) => { +const BehaviorTemplate = ({ wrapped, ...args }) => { const [value, setValue] = React.useState(0); const [value2, setValue2] = React.useState(0); @@ -253,9 +253,9 @@ const BehaviorTemplate = (args) => { {'Default behavior'} - } /> - } /> - } /> + } wrapped={wrapped} /> + } wrapped={wrapped} /> + } wrapped={wrapped} /> @@ -274,9 +274,9 @@ const BehaviorTemplate = (args) => { aria-label='tabs example' variant='fullWidth' > - } /> - } /> - } /> + } wrapped={wrapped} /> + } wrapped={wrapped} /> + } wrapped={wrapped} /> diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js index 96c87ae36..d781d09cb 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI'; +import CartoIcon from '../../assets/carto-symbol.svg'; const options = { title: 'Organisms/Widgets/LegendWidgetUI', @@ -181,9 +182,9 @@ const LegendIconTemplate = () => { type: 'icon', labels: ['Icon 1', 'Icon 2', 'Icon 3'], icons: [ - 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1', - 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1', - 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmaxcdn.icons8.com%2FShare%2Ficon%2Fnolan%2FMaps%2Fmarker1600.png&f=1&nofb=1' + '/static/media/storybook/assets/carto-symbol.svg', + '/static/media/storybook/assets/carto-symbol.svg', + '/static/media/storybook/assets/carto-symbol.svg' ] } }