update status and stories

CartoDB · Jul 26, 2023 · 31292a8 · 31292a8
1 parent f3fd65d
commit 31292a8
Show file tree

Hide file tree

Showing 15 changed files with 322 additions and 149 deletions.
diff --git a/UPGRADE.md b/UPGRADE.md
@@ -139,6 +139,44 @@ We have a new component for building data structures within Tooltips, `TooltipDa
 
 # Components
 
+## Good practices
+
+### ListItem
+
+In order to be interactive, you need to use `MenuItem` component, or use `ListItemButton`instead.
+
+```
+<List>
+  <ListItemButton>
+    <ListItemIcon>
+      <Icon />
+    </ListItemIcon>
+    <ListItemText primary="List item text" />
+  </ListItemButton>
+<List>
+```
+
+```
+<MenuList>
+  <MenuItem>
+    <ListItemIcon>
+      <Icon />
+    </ListItemIcon>
+    <ListItemText primary="List item text" />
+  </MenuItem>
+<MenuList>
+```
+
+To render a link:
+
+```
+<ListItemButton component="a">
+  <ListItemText primary="List item text" />
+</ListItemButton>
+```
+
+Note that `<ListItem button />` is deprecated.
+
 ## Mui components replacement
 
 These components should be imported from carto-react library instead of Mui, as they replace the Mui components extending their functionality to meet with design criteria.

diff --git a/packages/react-ui/storybook/stories/atoms/Button.stories.js b/packages/react-ui/storybook/stories/atoms/Button.stories.js
@@ -4,7 +4,7 @@ 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';
-import { DocContainer, DocTextHighlight, DocLink } from '../../utils/storyStyles';
+import { DocContainer, DocHighlight, DocLink } from '../../utils/storyStyles';
 
 const options = {
   title: 'Atoms/Button',
@@ -213,17 +213,15 @@ const DocTemplate = () => {
       </DocLink>{' '}
       component that uses <i>Mui Button</i> and wraps its children in a <i>Typography</i>{' '}
       component to meet with the designed behavior (text overflow case).
-      <Typography variant='inherit' color='inherit' mt={2}>
+      <Typography mt={2}>
         So, instead of Mui Button, you should use this one:{' '}
-        <DocTextHighlight variant='inherit' component='span'>
-          react-ui/src/components/atoms/Button
-        </DocTextHighlight>
+        <DocHighlight component='span'>react-ui/src/components/atoms/Button</DocHighlight>
       </Typography>
-      <Typography variant='inherit' color='inherit' mt={2}>
+      <Typography mt={2}>
         For external use:{' '}
-        <DocTextHighlight variant='inherit' component='span'>
+        <DocHighlight component='span'>
           {'import { Button } from "@carto/react-ui";'}
-        </DocTextHighlight>
+        </DocHighlight>
         .
       </Typography>
     </DocContainer>

diff --git a/packages/react-ui/storybook/stories/atoms/Text-field.stories.js b/packages/react-ui/storybook/stories/atoms/Text-field.stories.js
@@ -3,12 +3,7 @@ import { Grid, InputAdornment, TextField } from '@mui/material';
 import React from 'react';
 import PasswordField from '../../../src/components/atoms/PasswordField';
 import Typography from '../../../src/components/atoms/Typography';
-import {
-  Container,
-  DocContainer,
-  DocTextHighlight,
-  Label
-} from '../../utils/storyStyles';
+import { Container, DocContainer, DocHighlight, Label } from '../../utils/storyStyles';
 
 const options = {
   title: 'Atoms/Text Field',
@@ -543,14 +538,9 @@ const PasswordFieldTemplate = ({
     <Grid container direction='column' spacing={6}>
       <Grid item>
         <DocContainer severity='warning'>
-          Use{' '}
-          <DocTextHighlight variant='inherit' component='span'>
-            {'<PasswordField />'}
-          </DocTextHighlight>{' '}
-          instead of{' '}
-          <DocTextHighlight variant='inherit' component='span'>
-            {'<TextField type="password" />'}
-          </DocTextHighlight>{' '}
+          Use <DocHighlight component='span'>{'<PasswordField />'}</DocHighlight> instead
+          of{' '}
+          <DocHighlight component='span'>{'<TextField type="password" />'}</DocHighlight>{' '}
           This component build the show / hide content logic on top of <i>TextField</i>{' '}
           Mui component.
         </DocContainer>

diff --git a/packages/react-ui/storybook/stories/foundations/Borders.stories.js b/packages/react-ui/storybook/stories/foundations/Borders.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, Grid } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import Typography from '../../../src/components/atoms/Typography';
-import { DocContainer, FilledContainer } from '../../utils/storyStyles';
+import { DocContainer, DocHighlight, FilledContainer } from '../../utils/storyStyles';
 
 const options = {
   title: 'Foundations/Borders',
@@ -64,9 +64,7 @@ const DocTemplate = () => {
   return (
     <DocContainer severity='warning'>
       Use is restringed to a few specific values, defined in the design system, which are:{' '}
-      <Typography variant='code3' weight='strong'>
-        0.5, 1, 1.5, 2
-      </Typography>
+      <DocHighlight component='span'>0.5, 1, 1.5, 2</DocHighlight>
     </DocContainer>
   );
 };

diff --git a/packages/react-ui/storybook/stories/foundations/Elevations.stories.js b/packages/react-ui/storybook/stories/foundations/Elevations.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Box, Grid } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import Typography from '../../../src/components/atoms/Typography';
-import { DocContainer, FilledContainer } from '../../utils/storyStyles';
+import { DocContainer, DocHighlight, FilledContainer } from '../../utils/storyStyles';
 
 const options = {
   title: 'Foundations/Elevations',
@@ -71,10 +71,7 @@ const DocTemplate = () => {
   return (
     <DocContainer severity='warning'>
       Use is restringed to a few specific values, defined in the design system, which are:{' '}
-      <Typography variant='code3' weight='strong'>
-        0, 1, 2, 4, 6, 8, 16, 24
-      </Typography>
-      .
+      <DocHighlight component='span'>0, 1, 2, 4, 6, 8, 16, 24</DocHighlight>.
     </DocContainer>
   );
 };

diff --git a/packages/react-ui/storybook/stories/foundations/Spacing.stories.js b/packages/react-ui/storybook/stories/foundations/Spacing.stories.js
@@ -3,7 +3,7 @@ import { Box, Grid } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import Typography from '../../../src/components/atoms/Typography';
 import Button from '../../../src/components/atoms/Button';
-import { DocContainer, DocTextHighlight, FilledContainer } from '../../utils/storyStyles';
+import { DocContainer, DocHighlight, FilledContainer } from '../../utils/storyStyles';
 
 const options = {
   title: 'Foundations/Spacing',
@@ -88,14 +88,8 @@ const DocTemplate = () => {
       }
     >
       Check the usage guide before using{' '}
-      <DocTextHighlight variant='inherit' component='span'>
-        spacing
-      </DocTextHighlight>{' '}
-      values, specially{' '}
-      <DocTextHighlight variant='inherit' component='span'>
-        theme.spacing
-      </DocTextHighlight>{' '}
-      function.
+      <DocHighlight component='span'>spacing</DocHighlight> values, specially{' '}
+      <DocHighlight component='span'>theme.spacing</DocHighlight> function.
     </DocContainer>
   );
 };

diff --git a/packages/react-ui/storybook/stories/foundations/Typography.stories.js b/packages/react-ui/storybook/stories/foundations/Typography.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Typography from '../../../src/components/atoms/Typography';
 import ButtonComp from '../../../src/components/atoms/Button';
-import { DocContainer, DocLink, DocTextHighlight } from '../../utils/storyStyles';
+import { DocContainer, DocLink, DocHighlight } from '../../utils/storyStyles';
 
 const options = {
   title: 'Foundations/Typography',
@@ -94,20 +94,20 @@ const DocTemplate = () => {
         Typography
       </DocLink>{' '}
       component that extends <i>Mui Typography</i> with some styling props.
-      <Typography variant='inherit' color='inherit' mt={2}>
+      <Typography mt={2}>
         So, instead of Mui Typography, you should use this one:{' '}
-        <DocTextHighlight variant='inherit' component='span'>
+        <DocHighlight component='span'>
           react-ui/src/components/atoms/Typography
-        </DocTextHighlight>
+        </DocHighlight>
       </Typography>
-      <Typography variant='inherit' color='inherit' mt={2}>
+      <Typography mt={2}>
         For external use:{' '}
-        <DocTextHighlight variant='inherit' component='span'>
+        <DocHighlight component='span'>
           {'import { Typography } from "@carto/react-ui";'}
-        </DocTextHighlight>
+        </DocHighlight>
         .
       </Typography>
-      <Typography variant='inherit' color='inherit' mt={2} mb={2}>
+      <Typography mt={2} mb={2}>
         For more details, check the usage guide before using CARTO Typography
       </Typography>
     </DocContainer>

diff --git a/packages/react-ui/storybook/stories/molecules/Accordion.stories.js b/packages/react-ui/storybook/stories/molecules/Accordion.stories.js
@@ -8,7 +8,12 @@ import {
   Grid
 } from '@mui/material';
 import { Typography } from '@carto/react-ui';
-import { BoxContent, TitleContent } from '../../utils/storyStyles';
+import {
+  BoxContent,
+  DocContainer,
+  DocHighlight,
+  TitleContent
+} from '../../utils/storyStyles';
 import AccordionGroup from '../../../src/components/molecules/AccordionGroup';
 
 const options = {
@@ -103,6 +108,25 @@ const GroupTemplate = ({ defaultExpanded, ...args }) => {
   return (
     <Grid container direction='column' spacing={3}>
       <Grid item>
+        <DocContainer severity='warning'>
+          Component used as a container of a group of `Mui Accordions`, that also adds a{' '}
+          <DocHighlight component='span'>variant</DocHighlight> prop to have different
+          styles in the group: <i>Standard (default)</i> and <i>Outlined</i>.
+          <Typography mt={2}>
+            Use <i>AccordionGroup</i> from:{' '}
+            <DocHighlight component='span'>
+              react-ui/src/components/molecules/AccordionGroup
+            </DocHighlight>
+          </Typography>
+          <Typography mt={2}>
+            For external use:{' '}
+            <DocHighlight component='span'>
+              {'import { AccordionGroup } from "@carto/react-ui";'}
+            </DocHighlight>
+            .
+          </Typography>
+        </DocContainer>
+
         <TitleContent variant='subtitle1'>
           {'AccordionGroup custom component'}
         </TitleContent>

diff --git a/packages/react-ui/storybook/stories/molecules/Avatar.stories.js b/packages/react-ui/storybook/stories/molecules/Avatar.stories.js
@@ -2,7 +2,14 @@ import React from 'react';
 import { Grid, useTheme } from '@mui/material';
 import { Star } from '@mui/icons-material';
 import { getCartoColorStylePropsForItem, Avatar } from '@carto/react-ui';
-import { BoxContent, TitleContent } from '../../utils/storyStyles';
+import {
+  BoxContent,
+  DocContainer,
+  DocLink,
+  DocHighlight,
+  TitleContent
+} from '../../utils/storyStyles';
+import Typography from '../../../src/components/atoms/Typography';
 
 const options = {
   title: 'Molecules/Avatar',
@@ -326,6 +333,37 @@ const ColorBackgroundTemplate = ({ ...args }) => {
   );
 };
 
+const DocTemplate = () => {
+  return (
+    <DocContainer severity='warning'>
+      We have our own{' '}
+      <DocLink href='https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/components/molecules/Avatar.js'>
+        Avatar
+      </DocLink>{' '}
+      component that uses <i>Mui Avatar</i> and extends it with a new styling prop,{' '}
+      <DocHighlight component='span'>size</DocHighlight>.
+      <Typography mt={2}>
+        This component normalize <i>size</i> and allow us to use only the 4 sizes defined
+        by the design system:{' '}
+        <DocHighlight component='span'>large, medium, small and xsmall</DocHighlight>
+      </Typography>
+      <Typography mt={2}>
+        Import it from{' '}
+        <DocHighlight component='span'>
+          react-ui/src/components/molecules/Avatar
+        </DocHighlight>
+      </Typography>
+      <Typography mt={2}>
+        For external use:{' '}
+        <DocHighlight component='span'>
+          {'import { Avatar } from "@carto/react-ui";'}
+        </DocHighlight>
+        .
+      </Typography>
+    </DocContainer>
+  );
+};
+
 const disabledVariantArgType = {
   variant: { table: { disable: true } }
 };
@@ -335,6 +373,8 @@ const disabledSizeArgType = {
 
 export const Playground = Template.bind({});
 
+export const Guide = DocTemplate.bind({});
+
 export const Shape = ShapeTemplate.bind({});
 Shape.argTypes = disabledVariantArgType;
 

diff --git a/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js b/packages/react-ui/storybook/stories/molecules/Tooltip.stories.js
@@ -7,7 +7,7 @@ import { commonPalette } from '../../../src/theme/sections/palette';
 import {
   Container,
   DocContainer,
-  DocTextHighlight,
+  DocHighlight,
   Label,
   Standalone
 } from '../../utils/storyStyles';
@@ -239,15 +239,9 @@ const TooltipBehaviorTemplate = (args) => {
 const DocTemplate = () => {
   return (
     <DocContainer severity='warning'>
-      By default a Tooltip is placed{' '}
-      <DocTextHighlight variant='inherit' component='span'>
-        top
-      </DocTextHighlight>{' '}
-      and has an{' '}
-      <DocTextHighlight variant='inherit' component='span'>
-        arrow
-      </DocTextHighlight>{' '}
-      indicator, so you don't need to specify these properties anymore.
+      By default a Tooltip is placed <DocHighlight component='span'>top</DocHighlight> and
+      has an <DocHighlight component='span'>arrow</DocHighlight> indicator, so you don't
+      need to specify these properties anymore.
     </DocContainer>
   );
 };

diff --git a/packages/react-ui/storybook/stories/organisms/AppBar.stories.js b/packages/react-ui/storybook/stories/organisms/AppBar.stories.js
@@ -3,7 +3,7 @@ import { Avatar, Chip, Grid, IconButton, Menu, MenuItem } from '@mui/material';
 import { CheckCircleOutline } from '@mui/icons-material';
 import AppBar from '../../../src/components/organisms/AppBar/AppBar';
 import Typography from '../../../src/components/atoms/Typography';
-import { DocContainer, DocLink, DocTextHighlight } from '../../utils/storyStyles';
+import { DocContainer, DocLink, DocHighlight } from '../../utils/storyStyles';
 
 const options = {
   title: 'Organisms/AppBar',
@@ -100,17 +100,17 @@ const DocTemplate = () => {
       to build the basic structure and styles on top of <i>Mui AppBar</i>. It normalizes
       the size and position of common elements like:{' '}
       <i>logo, texts, avatar and burger menu icon</i>.
-      <Typography variant='inherit' color='inherit' mt={2}>
+      <Typography mt={2}>
         So, instead of Mui AppBar, you should use this one:{' '}
-        <DocTextHighlight variant='inherit' component='span'>
+        <DocHighlight component='span'>
           react-ui/src/components/organisms/AppBar
-        </DocTextHighlight>
+        </DocHighlight>
       </Typography>
-      <Typography variant='inherit' color='inherit' mt={2}>
+      <Typography mt={2}>
         For external use:{' '}
-        <DocTextHighlight variant='inherit' component='span'>
+        <DocHighlight component='span'>
           {'import { AppBar } from "@carto/react-ui";'}
-        </DocTextHighlight>
+        </DocHighlight>
         .
       </Typography>
     </DocContainer>