Merge pull request #31 from CartoDB/feature/ch122277/list-component-m…

…eta-value Feature/ch122277/list component meta value
CartoDB · Dec 1, 2020 · 69e384d · 69e384d
2 parents b93c996 + 3c6d54c
commit 69e384d
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,7 @@
 # CHANGELOG
+## Not released
+- Added meta value version to List component [#31](https://github.com/CartoDB/carto-react-lib/pull/31)
+
 ## 1.0.0-beta6 (2020-11-27)
 - Fix CategoryWidgetUI displaying no data while loading [#26](https://github.com/CartoDB/carto-react-lib/pull/26)
 - Animate CategoryWidget values [#30](https://github.com/CartoDB/carto-react-lib/pull/30)
@@ -7,7 +10,6 @@
 - Fix CategoryWidgetUI keeping the order for blocked categories [#32](https://github.com/CartoDB/carto-react-lib/pull/32)
 - Fix bar size in CategoryWidget [#33](https://github.com/CartoDB/carto-react-lib/pull/33)
 
-
 ## 1.0.0-beta5 (2020-11-25)
 - Fix addSource keeping optional credentials property in the payload [#24](https://github.com/CartoDB/carto-react-lib/pull/24)
 

diff --git a/src/ui/stories/common/List.stories.js b/src/ui/stories/common/List.stories.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Avatar,
+  Box,
   Checkbox,
   Collapse,
   Divider,
@@ -12,6 +13,7 @@ import {
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
+  Typography,
   makeStyles,
   Switch,
   Paper,
@@ -154,6 +156,66 @@ const Template = ({ secondary, ...args }) => {
   );
 };
 
+const TemplateMetaValue = ({ secondary, ...args }) => {
+  const classes = useStyles();
+
+  const MetaValueLabel = ({ value }) => {
+    return (
+      <Box alignSelf='flex-start' marginY={0.75}>
+        <Typography variant='body2' align='right'>{value}</Typography>
+      </Box>
+    );
+  };
+
+  return (
+    <Grid container spacing={6} className={classes.root}>
+      <Grid container item spacing={2}>
+        <Grid item xs={3}>
+          <Paper>
+            <List component='nav' aria-label='main mailbox folders'>
+              <ListItem button>
+                <ListItemText primary='Home' />
+                <MetaValueLabel value={ args.metaValue }></MetaValueLabel>
+              </ListItem>
+              <Divider />
+              <ListItem button>
+                <ListItemText primary='Inbox' />
+                <MetaValueLabel value={ args.metaValue }></MetaValueLabel>
+              </ListItem>
+              <Divider />
+              <ListItem button>
+                <ListItemText primary='Drafts' />
+                <MetaValueLabel value={ args.metaValue }></MetaValueLabel>
+              </ListItem>
+            </List>
+          </Paper>
+        </Grid>
+
+        <Grid item xs={3}>
+          <Paper>
+            <List component='nav' aria-label='main mailbox folders'>
+              <ListItem button>
+                <ListItemText primary='Home' secondary={secondary} />
+                <MetaValueLabel value={ args.metaValue }></MetaValueLabel>
+              </ListItem>
+              <Divider />
+              <ListItem button>
+                <ListItemText primary='Inbox' secondary={secondary} />
+                <MetaValueLabel value={ args.metaValue }></MetaValueLabel>
+              </ListItem>
+              <Divider />
+              <ListItem button>
+                <ListItemText primary='Drafts' secondary={secondary} />
+                <MetaValueLabel value={ args.metaValue }></MetaValueLabel>
+              </ListItem>
+            </List>
+          </Paper>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
 const TemplateSecondaryActions = ({ ...args }) => {
   const classes = useStyles();
 
@@ -334,4 +396,7 @@ TwoLines.args = { secondary: 'Secondary text' };
 
 export const SecondaryActions = TemplateSecondaryActions.bind({});
 
+export const MetaValue = TemplateMetaValue.bind({});
+MetaValue.args = { secondary: 'Secondary text too long here', metaValue: '$1,234.87' };
+
 export const NestedOptions = TemplateNested.bind({});