@learningpool/ui 1.6.0-beta.9 → 1.6.1

package/src/stories/Components/DataDisplay/List/Examples.stories.tsx

@@ -0,0 +1,501 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import List from '../../../../lib/components/datadisplay/List/List'
+import Checkbox from '../../../../lib/components/atoms/Checkbox/Checkbox'
+import IconButton from '../../../../lib/components/atoms/IconButton/IconButton'
+import {
+  ListItem, ListItemButton, ListItemIcon,
+  ListItemText, ListSubheader, ListItemAvatar
+} from '../../../../lib/'
+import {
+  Stack, Box, Typography,
+  Avatar, Divider, Collapse
+} from '@mui/material'
+import InboxIcon from '@mui/icons-material/Inbox'
+import DraftsIcon from '@mui/icons-material/Drafts'
+import ImageIcon from '@mui/icons-material/Image'
+import WorkIcon from '@mui/icons-material/Work'
+import BeachAccessIcon from '@mui/icons-material/BeachAccess'
+import SendIcon from '@mui/icons-material/Send'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import StarBorder from '@mui/icons-material/StarBorder'
+import CommentIcon from '@mui/icons-material/Comment'
+import AllCombinations from './AllCombinations'
+
+export default {
+  title: 'Components/Data Display/List/Examples',
+  component: List
+} as ComponentMeta<typeof List>
+
+export const Default: ComponentStory<typeof List> = (args) => {
+  return (
+    <Box sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
+      <nav aria-label="Demo List">
+        <List>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemText primary="One" />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemText primary="Two" />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemText primary="Three" />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemText primary="Four" />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemText primary="Five" />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </nav>
+    </Box>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.List.Default
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const Basic: ComponentStory<typeof AllCombinations> = (args) => {
+  return (
+    <Box sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
+      <nav aria-label="main mailbox folders">
+        <List>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                <InboxIcon />
+              </ListItemIcon>
+              <ListItemText primary="Inbox" />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemIcon>
+                <DraftsIcon />
+              </ListItemIcon>
+              <ListItemText primary="Drafts" />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </nav>
+      <Divider />
+      <nav aria-label="secondary mailbox folders">
+        <List>
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemText primary="Trash" />
+            </ListItemButton>
+          </ListItem>
+          <ListItem disablePadding>
+            <ListItemButton component="a" href="#simple-list">
+              <ListItemText primary="Spam" />
+            </ListItemButton>
+          </ListItem>
+        </List>
+      </nav>
+    </Box>
+  )
+}
+Basic.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.Basic
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const Nested: ComponentStory<typeof AllCombinations> = (args) => {
+  const [open, setOpen] = React.useState(true)
+
+  const handleClick = (): void => {
+    setOpen(!open)
+  }
+
+  return (
+    <List
+      sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}
+      component="nav"
+      aria-labelledby="nested-list-subheader"
+      subheader={
+        <ListSubheader component="div" id="nested-list-subheader">
+          Nested List Items
+        </ListSubheader>
+      }
+    >
+      <ListItemButton>
+        <ListItemIcon>
+          <SendIcon />
+        </ListItemIcon>
+        <ListItemText primary="Sent mail" />
+      </ListItemButton>
+      <ListItemButton>
+        <ListItemIcon>
+          <DraftsIcon />
+        </ListItemIcon>
+        <ListItemText primary="Drafts" />
+      </ListItemButton>
+      <ListItemButton onClick={handleClick}>
+        <ListItemIcon>
+          <InboxIcon />
+        </ListItemIcon>
+        <ListItemText primary="Inbox" />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          <ListItemButton sx={{ pl: 4 }}>
+            <ListItemIcon>
+              <StarBorder />
+            </ListItemIcon>
+            <ListItemText primary="Starred" />
+          </ListItemButton>
+        </List>
+      </Collapse>
+    </List>
+  )
+}
+Nested.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.Nested
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const Folder: ComponentStory<typeof AllCombinations> = (args) => {
+  return (
+    <List sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar>
+            <ImageIcon />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary="Photos" secondary="Jan 9, 2022" />
+      </ListItem>
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar>
+            <WorkIcon />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary="Work" secondary="Jan 7, 2022" />
+      </ListItem>
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary="Vacation" secondary="July 20, 2021" />
+      </ListItem>
+    </List>
+  )
+}
+Folder.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.Folder
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const SelectedListItem: ComponentStory<typeof AllCombinations> = (args) => {
+  const [selectedIndex, setSelectedIndex] = React.useState(1)
+
+  const handleListItemClick = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    index: number
+  ): void => {
+    setSelectedIndex(index)
+  }
+
+  return (
+    <Box sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
+      <List component="nav" aria-label="main mailbox folders">
+        <ListItemButton
+          selected={selectedIndex === 0}
+          onClick={(event) => handleListItemClick(event, 0)}
+        >
+          <ListItemIcon>
+            <InboxIcon />
+          </ListItemIcon>
+          <ListItemText primary="Inbox" />
+        </ListItemButton>
+        <ListItemButton
+          selected={selectedIndex === 1}
+          onClick={(event) => handleListItemClick(event, 1)}
+        >
+          <ListItemIcon>
+            <DraftsIcon />
+          </ListItemIcon>
+          <ListItemText primary="Drafts" />
+        </ListItemButton>
+      </List>
+      <Divider />
+      <List component="nav" aria-label="secondary mailbox folder">
+        <ListItemButton
+          selected={selectedIndex === 2}
+          onClick={(event) => handleListItemClick(event, 2)}
+        >
+          <ListItemText primary="Trash" />
+        </ListItemButton>
+        <ListItemButton
+          selected={selectedIndex === 3}
+          onClick={(event) => handleListItemClick(event, 3)}
+        >
+          <ListItemText primary="Spam" />
+        </ListItemButton>
+      </List>
+    </Box>
+  )
+}
+SelectedListItem.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.SelectedListItem
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const AlignListItems: ComponentStory<typeof AllCombinations> = (args) => {
+  return (
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+          <Avatar alt="Remy Sharp" />
+        </ListItemAvatar>
+        <ListItemText
+          primary="Brunch this weekend?"
+          secondary={
+            <React.Fragment>
+              <Typography
+                sx={{ display: 'inline' }}
+                component="span"
+                variant="body2"
+                color="text.primary"
+              >
+                Ali Connors
+              </Typography>
+              {" — I'll be in your neighborhood doing errands this…"}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+          <Avatar alt="Travis Howard" />
+        </ListItemAvatar>
+        <ListItemText
+          primary="Summer BBQ"
+          secondary={
+            <React.Fragment>
+              <Typography
+                sx={{ display: 'inline' }}
+                component="span"
+                variant="body2"
+                color="text.primary"
+              >
+                to Scott, Alex, Jennifer
+              </Typography>
+              {" — Wish I could come, but I'm out of town this…"}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem alignItems="flex-start">
+        <ListItemAvatar>
+          <Avatar alt="Cindy Baker" />
+        </ListItemAvatar>
+        <ListItemText
+          primary="Oui Oui"
+          secondary={
+            <React.Fragment>
+              <Typography
+                sx={{ display: 'inline' }}
+                component="span"
+                variant="body2"
+                color="text.primary"
+              >
+                Sandra Adams
+              </Typography>
+              {' — Do you have Paris recommendations? Have you ever…'}
+            </React.Fragment>
+          }
+        />
+      </ListItem>
+    </List>
+  )
+}
+AlignListItems.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.AlignListItems
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const ListControls: ComponentStory<typeof AllCombinations> = (args) => {
+  const [checked, setChecked] = React.useState([0])
+
+  const handleToggle = (value: number) => () => {
+    const currentIndex = checked.indexOf(value)
+    const newChecked = [...checked]
+
+    if (currentIndex === -1) {
+      newChecked.push(value)
+    } else {
+      newChecked.splice(currentIndex, 1)
+    }
+
+    setChecked(newChecked)
+  }
+
+  return (
+    <Stack spacing={2}>
+
+      <List sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
+        {[0, 1, 2, 3].map((value) => {
+          const labelId = `checkbox-list-label-${value}`
+
+          return (
+            <ListItem
+              key={value}
+              secondaryAction={
+                <IconButton edge="end" aria-label="comments">
+                  <CommentIcon />
+                </IconButton>
+              }
+              disablePadding
+            >
+              <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
+                <ListItemIcon>
+                  <Checkbox
+                    edge="start"
+                    checked={checked.includes(value)}
+                    tabIndex={-1}
+                    disableRipple
+                    inputProps={{ 'aria-labelledby': labelId }}
+                  />
+                </ListItemIcon>
+                <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
+              </ListItemButton>
+            </ListItem>
+          )
+        })}
+      </List>
+
+      <List dense sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
+        {[0, 1, 2, 3].map((value) => {
+          const labelId = `checkbox-list-secondary-label-${value}`
+          return (
+            <ListItem
+              key={value}
+              secondaryAction={
+                <Checkbox
+                  edge="end"
+                  onChange={handleToggle(value)}
+                  checked={checked.includes(value)}
+                  inputProps={{ 'aria-labelledby': labelId }}
+                />
+              }
+              disablePadding
+            >
+              <ListItemButton>
+                <ListItemAvatar>
+                  <Avatar
+                    alt={`Avatar n°${value + 1}`}
+                    src={`/static/images/avatar/${value + 1}.jpg`}
+                  />
+                </ListItemAvatar>
+                <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
+              </ListItemButton>
+            </ListItem>
+          )
+        })}
+      </List>
+
+    </Stack>
+  )
+}
+ListControls.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.ListControls
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const StickySubheader: ComponentStory<typeof AllCombinations> = (args) => (
+  <List
+    sx={{
+      width: '100%',
+      minWidth: 360,
+      bgcolor: 'background.paper',
+      position: 'relative',
+      overflow: 'auto',
+      maxHeight: 300,
+      '& ul': { padding: 0 }
+    }}
+    subheader={<li />}
+  >
+    {[0, 1, 2, 3, 4].map((sectionId) => (
+      <li key={`section-${sectionId}`}>
+        <ul>
+          <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
+          {[0, 1, 2].map((item) => (
+            <ListItem key={`item-${sectionId}-${item}`}>
+              <ListItemText primary={`Item ${item}`} />
+            </ListItem>
+          ))}
+        </ul>
+      </li>
+    ))}
+  </List>
+)
+StickySubheader.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.StickySubheader
+    }
+  },
+  backgrounds: { default: 'light' }
+}
+
+export const All: ComponentStory<typeof AllCombinations> = (args) => (
+  <AllCombinations />
+)
+All.parameters = {
+  docs: {
+    description: {
+      story: DOCS.List.All
+    }
+  },
+  backgrounds: { default: 'light' }
+}

package/src/stories/Components/DataDisplay/List/List.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import List from '../../../../lib/components/datadisplay/List/List'
+import { ListItem, ListItemText } from '../../../../lib/'
+
+export default {
+  title: 'Components/Data Display/List/Properties',
+  component: List,
+  parameters: {
+    controls: {
+      sort: 'requiredFirst'
+    },
+    backgrounds: { default: 'light' }
+  }
+} as ComponentMeta<typeof List>
+
+// 👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof List> = (args) => {
+  return (
+    <List {...args} sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
+      <ListItem>
+        <ListItemText primary="One" />
+      </ListItem>
+      <ListItem>
+        <ListItemText primary="Two" />
+      </ListItem>
+      <ListItem>
+        <ListItemText primary="Three" />
+      </ListItem>
+    </List>
+  )
+}
+
+export const Properties = Template.bind({})
+Properties.args = {}

package/src/stories/Components/DataDisplay/List/Overview.stories.mdx

@@ -0,0 +1,69 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import List from '../../../../lib/components/datadisplay/List/List';
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
+import {
+  ListItem, ListItemButton, ListItemIcon,
+  ListItemText, ListSubheader, ListItemAvatar } from '../../../../lib/';
+import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
+import Stack from '@mui/material/Stack';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
+
+<Meta title="Components/Data Display/List/Overview" component={List} />
+
+[](#list-overview)List Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/DataDisplay/List/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+### [](#what-does-it-do)What does it do?
+
+Lists are continuous, vertical indexes of text or images.
+
+<Stack direction="row" spacing={1}>
+  <Chip clickable component="a" href="https://mui.com/components/radio-buttons/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
+  <Chip clickable component="a" href="https://material.io/components/selection-controls#radio-buttons" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
+  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#radiobutton" size="small" icon={<W3CIcon />} label="WAI-ARIA" variant="outlined" />
+  <Chip clickable component="a" href="https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1065%3A17356&scaling=min-zoom&page-id=1059%3A17709&starting-point-node-id=1065%3A17356" size="small" icon={<FigmaIcon />} label="Figma" variant="outlined" />
+  <Chip clickable component="a" href="https://github.com/HT2-Labs/design-system/tree/main/src/lib/components/atoms/Radio" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
+</Stack>
+
+### [](#why-use-it)Why use it?
+
+* Use a List component when you want to display a a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
+
+### [](#how-to-implement-it)How to implement it?
+
+Below is basic example of the List component:
+
+<Canvas isExpanded>
+<List>
+  <ListItem>
+    <ListItemButton>
+      <ListItemText primary="One" />
+    </ListItemButton>
+  </ListItem>
+  <ListItem>
+    <ListItemButton>
+      <ListItemText primary="Two" />
+    </ListItemButton>
+  </ListItem>
+  <ListItem>
+    <ListItemButton>
+      <ListItemText primary="Three" />
+    </ListItemButton>
+  </ListItem>
+</List>
+</Canvas>
+
+### [](#when-to-avoid-it)When to avoid it?
+
+* Do not use a List when you need to present large complex sets of data; use a data table instead.
+
+### [](#best-practices)Best practices
+
+* Generally, lists should be used to present simple sets of information.
+* When using nested lists, avoid nesting just a single item. Try to find other ways it can be expressed in the higher level layer
+* Use bulleted lists when you don't need to convey a specific order for list items.
+* Use numbered lists when you need to convey a priority, hierarchy, or sequence between list items.
+
+### [](#design-prototype)Design prototype
+TODO: Add design prototype

package/src/stories/Components/DataDisplay/Table/Overview.stories.mdx

@@ -0,0 +1,70 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '../../../../lib/index';
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
+import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
+import Stack from '@mui/material/Stack';
+
+<Meta title="Components/Data Display/Table/Overview" component={Table} />
+
+[](#component-overview)Table Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Guidelines/Templates/ComponentOverview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+### [](#what-does-it-do)What does it do?
+
+Tables display sets of data. They can be fully customized.
+
+<Stack direction="row" spacing={1}>
+  <Chip clickable component="a" href="https://mui.com/material-ui/react-table/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
+  <Chip clickable component="a" href="https://material.io/components/data-tables" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
+  <Chip clickable component="a" href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" size="small" icon={<W3CIcon />} label="WAI-ARIA" variant="outlined" />
+</Stack>
+
+### [](#why-use-it)Why use it?
+
+Tables display information in a way that's easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. They can include:
+
+* A corresponding visualization
+* Navigation
+* Tools to query and manipulate data
+
+### [](#how-to-implement-it)How to implement it?
+
+Below is basic example of the Table component:
+
+<Canvas isExpanded>
+<TableContainer component={Paper}>
+  <Table sx={{ minWidth: 650 }} aria-label="simple table">
+    <TableHead>
+      <TableRow>
+        <TableCell>Dessert (100g serving)</TableCell>
+        <TableCell align="right">Calories</TableCell>
+        <TableCell align="right">Fat&nbsp;(g)</TableCell>
+        <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+        <TableCell align="right">Protein&nbsp;(g)</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {[
+        { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
+        { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },
+        { name: 'Eclair', calories: 262, fat: 16.0, carbs: 24, protein: 6.0 },
+        { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
+        { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9 }
+      ].map((row) => (
+        <TableRow
+          key={row.name}
+          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+        >
+          <TableCell component="th" scope="row">
+            {row.name}
+          </TableCell>
+          <TableCell align="right">{row.calories}</TableCell>
+          <TableCell align="right">{row.fat}</TableCell>
+          <TableCell align="right">{row.carbs}</TableCell>
+          <TableCell align="right">{row.protein}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+</TableContainer>
+</Canvas>