@learningpool/ui 1.6.3 → 1.6.6

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

@@ -1,58 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,126 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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>