@learningpool/ui 1.6.0 → 1.6.1

package/src/stories/Components/DataDisplay/Chip/AllCombinations.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import Avatar from '@mui/material/Avatar'
+import FaceIcon from '@mui/icons-material/Face'
+import { Stack } from '@mui/material'
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip'
+
+const ChipGrid = (args: any): JSX.Element => {
+  const handleClick = (): void => {
+    console.info('You clicked the Chip.')
+  }
+
+  const handleDelete = (): void => {
+    console.info('You clicked the delete icon.')
+  }
+
+  return (
+    <Stack direction="row" spacing={1} alignItems="center" mb={2}>
+      <Chip {...args} label="Default" />
+      <Chip {...args} label="With Avatar" avatar={<Avatar>LP</Avatar>} />
+      <Chip {...args} label="With Icon" icon={<FaceIcon />} />
+      <Chip {...args} label="Clickable" onClick={handleClick} disableRipple/>
+      <Chip {...args} label="Deletable" onDelete={handleDelete} />
+      <Chip {...args} label="Clickable Deletable" onClick={handleClick} onDelete={handleDelete} />
+      <Chip {...args} label="Clickable Link" component="a" href="#basic-chip" clickable disableRipple/>
+    </Stack>
+  )
+}
+
+export default function AllCombinations (): JSX.Element {
+  const combinations = [
+    { color: 'primary' },
+    { color: 'primary', variant: 'outlined' },
+    { color: 'primary', size: 'small' },
+    { color: 'secondary' },
+    { color: 'secondary', variant: 'outlined' },
+    { color: 'secondary', size: 'small' },
+    { color: 'error' },
+    { color: 'error', variant: 'outlined' },
+    { color: 'error', size: 'small' },
+    { color: 'success' },
+    { color: 'success', variant: 'outlined' },
+    { color: 'success', size: 'small' },
+    { color: 'info' },
+    { color: 'info', variant: 'outlined' },
+    { color: 'info', size: 'small' },
+    { color: 'warning' },
+    { color: 'warning', variant: 'outlined' },
+    { color: 'warning', size: 'small' }
+  ]
+
+  return (
+    <Stack>
+      {combinations.map(ChipConfig => (
+        <ChipGrid {...ChipConfig} />
+      ))}
+    </Stack>
+  )
+}

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

@@ -0,0 +1,21 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip'
+
+export default {
+  title: 'Components/Data Display/Chip/Properties',
+  component: Chip,
+  parameters: {
+    controls: {
+      sort: 'requiredFirst'
+    }
+  }
+} as ComponentMeta<typeof Chip>
+
+// 👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />
+
+export const Properties = Template.bind({})
+Properties.args = {
+  label: 'Chip'
+}

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

@@ -0,0 +1,126 @@
+import { Stack } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip'
+import Avatar from '@mui/material/Avatar'
+import FaceIcon from '@mui/icons-material/Face'
+import AllCombinations from './AllCombinations'
+
+export default {
+  title: 'Components/Data Display/Chip/Examples',
+  component: Chip
+} as ComponentMeta<typeof Chip>
+
+export const Default: ComponentStory<typeof Chip> = (args): JSX.Element => {
+  return (
+    <Stack direction="row" spacing={1}>
+      <Chip label="Chip Filled" />
+      <Chip label="Chip Outlined" variant="outlined" />
+    </Stack>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Chip.Default
+    }
+  }
+}
+
+export const Colors: ComponentStory<typeof Chip> = (args): JSX.Element => (
+  <Stack spacing={1} alignItems="center">
+    <Stack direction="row" spacing={1}>
+      <Chip label="primary" color="primary" />
+      <Chip label="secondary" color="secondary" />
+      <Chip label="error" color="error" />
+      <Chip label="warning" color="warning" />
+      <Chip label="success" color="success" />
+      <Chip label="info" color="info" />
+    </Stack>
+    <Stack direction="row" spacing={1}>
+      <Chip label="primary" color="primary" variant="outlined" />
+      <Chip label="secondary" color="secondary" variant="outlined" />
+      <Chip label="error" color="error" variant="outlined" />
+      <Chip label="warning" color="warning" variant="outlined" />
+      <Chip label="success" color="success" variant="outlined" />
+      <Chip label="info" color="info" variant="outlined" />
+    </Stack>
+  </Stack>
+)
+Colors.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Chip.Colors
+    }
+  }
+}
+
+export const Sizes: ComponentStory<typeof Chip> = (args): JSX.Element => (
+  <Stack direction="row" spacing={1}>
+    <Chip label="Small" size="small" />
+    <Chip label="Small" size="small" variant="outlined" />
+  </Stack>
+)
+Sizes.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Chip.Sizes
+    }
+  }
+}
+
+export const Adornments: ComponentStory<typeof Chip> = (args): JSX.Element => (
+  <Stack direction="row" spacing={1}>
+    <Chip avatar={<Avatar>LP</Avatar>} label="With Avatar" color="primary" />
+    <Chip avatar={<Avatar>LP</Avatar>} label="With Avatar" />
+    <Chip avatar={<Avatar>LP</Avatar>} label="With Avatar" variant="outlined"/>
+    <Chip icon={<FaceIcon />} label="With Icon" color="primary" />
+    <Chip icon={<FaceIcon />} label="With Icon" />
+    <Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />
+  </Stack>
+)
+Adornments.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Chip.Adornments
+    }
+  }
+}
+
+export const Actions: ComponentStory<typeof Chip> = (args): JSX.Element => {
+  const handleClick = (): void => {
+    console.info('You clicked the Chip.')
+  }
+
+  const handleDelete = (): void => {
+    console.info('You clicked the delete icon.')
+  }
+
+  return (
+    <Stack direction="row" spacing={1}>
+      <Chip label="Clickable" onClick={handleClick} />
+      <Chip label="Deletable" onDelete={handleDelete} />
+      <Chip label="Clickable Deletable" onClick={handleClick} onDelete={handleDelete} />
+      <Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
+    </Stack>
+  )
+}
+Actions.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Chip.Actions
+    }
+  }
+}
+
+export const All: ComponentStory<typeof AllCombinations> = (args): JSX.Element => (
+  <AllCombinations />
+)
+All.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Chip.All
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+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/Chip/Overview" component={Chip} />
+
+[](#component-overview)Chip 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?
+
+Chips are compact elements that represent an input, attribute, or action.
+
+<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?
+
+* Chips allow users to enter information, make selections, filter content, or trigger actions.
+* Chips can be used to visually label UI objects for quick recognition and navigation.
+
+### [](#how-to-implement-it)How to implement it?
+
+Below is basic example of the filled and outlined Chip variants.
+
+<Canvas isExpanded>
+<Stack direction="row" spacing={1}>
+  <Chip label="Chip Filled" />
+  <Chip label="Chip Outlined" variant="outlined" />
+</Stack>
+</Canvas>
+
+### [](#when-to-avoid-it)When to avoid it?
+
+* Do not use a chip when you need to communicate information that requires immediate attention.
+* Do not use a chip when you want to communicate longer strings of text.
+
+### [](#best-practices)Best practices
+
+* Chips are best for labels that contain small amounts of information.
+* Chips are often used together to add context to other information on a page.
+* Chips can increase the visual noise on a page, so use short labels for easy scanning.
+
+### [](#design-prototype)Design prototype
+<iframe
+  allowfullscreen
+  frameborder="0"
+  height="350"
+  width="100%"
+  src="https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1142%3A17936&amp;scaling=min-zoom&amp;page-id=1141%3A18763&amp;starting-point-node-id=1142%3A17936"
+/>

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

@@ -0,0 +1,54 @@
+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 Button from '../../../../lib/components/atoms/Button/Button';
+import {
+  ListItem, ListItemButton, ListItemIcon,
+  ListItemText, ListSubheader, ListItemAvatar } from '../../../../lib/';
+import { Box, Typography, IconButton} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+<Meta title="Components/Data Display/List/Accessibility" />
+
+[](#List-accessibility)List Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/DataDisplay/List/Accessibility.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+This component has been validated to meet the WCAG 2.1 AA and Section 508 accessibility guidelines; however, changes made by the developer can affect accessibility compliance.
+
+The List component handles the work necessary to make it accessible.
+
+## [](#guidelines)Guidelines
+Different types of lists are used to group information according to their purpose.
+* Unordered lists (`<ul>`) are used when the order of the items is not relevant and are marked with bullets.
+* Ordered lists (`<ol>`) are used when the order of the items is important and are automatically marked with numbers by the browser.
+
+By default the List component will render a `<ul>` element. You can customize this by specifying the `component` prop:
+
+<Canvas isExpanded>
+<List component="ol">
+  <ListItem>
+    <ListItemText primary="One" />
+  </ListItem>
+  <ListItem>
+    <ListItemText primary="Two" />
+  </ListItem>
+  <ListItem>
+    <ListItemText primary="Three" />
+  </ListItem>
+</List>
+</Canvas>
+
+You may also want to render the list as a `<nav>` element when used for navigation. Be sure *NOT* to use the `<ListItem>` component in this situation, since an `<li>` must only be contained in an `<ol>` or `<ul>` element.
+<Canvas isExpanded>
+<List component="nav">
+  <ListItemButton>
+    <ListItemText primary="One" />
+  </ListItemButton>
+  <ListItemButton>
+    <ListItemText primary="Two" />
+  </ListItemButton>
+  <ListItemButton>
+    <ListItemText primary="Three" />
+  </ListItemButton>
+</List>
+</Canvas>