@learningpool/ui 1.6.2 → 1.6.5

package/src/stories/Components/Inputs/Select/Overview.stories.mdx

@@ -1,73 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Select from '../../../../lib/components/atoms/Select/Select';
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-<Meta title="Components/Inputs/Select/Overview" component={Select} />
-
-[](#select-overview)Select Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Select/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Select components are used for collecting user provided data from a list of options. Select components are often used within forms to allow users to select from the list of options.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/select/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/select" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#select" 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=487%3A14431&amp;scaling=min-zoom&amp;page-id=310%3A35254&amp;starting-point-node-id=487%3A14431" 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/Select" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Use a select component when the user is required to make a single selection out of a list of options.
-* The select component is meant to be interchangeable with a native `<select>` element.
-* For more advanced features, see the [`Autocomplete`](https://mui.com/components/autocomplete/) component.
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is an overview of the baisc Select component:
-
-<Canvas isExpanded>
-<FormControl sx={{ m: 1, minWidth: 140 }}>
-  <InputLabel id="demo-simple-select-label">Size</InputLabel>
-  <Select
-    labelId="demo-simple-select-label"
-    id="demo-simple-select"
-    label="Size"
-    autoWidth
-  >
-    <MenuItem value="small">Small</MenuItem>
-    <MenuItem value="medium">Medium</MenuItem>
-    <MenuItem value="large">Large</MenuItem>
-    <MenuItem value="xlarge">X-Large</MenuItem>
-  </Select>
-</FormControl>
-</Canvas>
-
-### [](#when-to-avoid-it)When to avoid it?
-
-* Do not use a select component when presenting just two options in a list. Instead, use the [`Radio`](/story/components-atoms-radio-overview--page) component.
-* Do not use a select component when users can select more than one option. Instead, use the [`Checkbox`](/story/components-atoms-checkbox-overview--page) component.
-
-### [](#best-practices)Best practices
-
-* Use the label to provide clear and concise description of the select component.
-* Use the select component inside a form where users are selecting from a list of options and submitting data.
-* The order of the select list should be based on the frequency of use when possible.
-
-### [](#design-prototype)Design prototype
-<iframe
-  allowfullscreen
-  frameborder="0"
-  height="350"
-  width="100%"
-  src="https://www.figma.com/embed?embed_host=share&amp;url=https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1198%3A22823&scaling=min-zoom&page-id=1198%3A19130&starting-point-node-id=1198%3A22823"
-/>

package/src/stories/Components/Inputs/Select/Select.stories.tsx

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

package/src/stories/Components/Inputs/Slider/Accessibility.stories.mdx

@@ -1,43 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Slider from '../../../../lib/components/atoms/Slider/Slider';
-import { Box, Typography} from '@mui/material';
-import Chip from '@mui/material/Chip';
-
-<Meta title="Components/Inputs/Slider/Accessibility" />
-
-[](#slider-accessibility)Slider Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Slider/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.
-
-Please follow the guidance in this section and see [WAI-ARIA Slider](https://www.w3.org/TR/wai-aria-practices/#slider) for more information.
-
-## [](#guidelines)Guidelines
-The component handles most of the work necessary to make it accessible. However, you need to make sure that:
-
-* A Slider must have a clear and concise description provided by a `<label>` element or `aria-label` attribute.
-* Each Slider thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
-* Each Slider thumb has user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
-
-### [](#when-to-use-this-component)When to use this component
-Use a slider when you want to allow users to make selections from a range of values, where the user can increase or decrease the value by moving the handle along a track.
-
-### [](#screen-readers)Screen readers
-Sliders need to have unique labels to identify their usage to assistive technologies. The easiest way to do this is with the `aria-label` or `aria-labelledby` props.
-<Canvas>
-<Box width={300}>
-  <Slider
-    defaultValue={50}
-    valueLabelDisplay="auto"
-    aria-label="Slider description here"
-  />
-  <Slider
-    defaultValue={50}
-    valueLabelDisplay="auto"
-    aria-labelledby="slider-description"
-  />
-  <Typography id="slider-description">
-    Slider description here
-  </Typography>
-</Box>
-</Canvas>

package/src/stories/Components/Inputs/Slider/AllCombinations.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { Box } from '@mui/material'
-import Slider from '../../../../lib/components/atoms/Slider/Slider'
-
-const SliderGrid = (args: any): JSX.Element => {
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider {...args} aria-label="label" defaultValue={50} disabled />
-      <Slider {...args} aria-label="label" defaultValue={50} color="primary" />
-      <Slider {...args} aria-label="label" defaultValue={50} color="secondary" />
-      <Slider {...args} aria-label="label" defaultValue={50} size="small" />
-    </Box>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { },
-    { marks: true, step: 10 },
-    { value: [25, 50] }
-  ]
-
-  return (
-    <Box>
-      {combinations.map(sliderConfig => (
-        <SliderGrid {...sliderConfig} />
-      ))}
-    </Box>
-  )
-}

package/src/stories/Components/Inputs/Slider/Examples.stories.tsx

@@ -1,146 +0,0 @@
-import { Box, Stack } from '@mui/material'
-import Icon from '@mui/material/Icon'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import Slider from '../../../../lib/components/atoms/Slider/Slider'
-import AllCombinations from './AllCombinations'
-
-export default {
-  title: 'Components/Inputs/Slider/Examples',
-  component: Slider
-} as ComponentMeta<typeof Slider>
-
-export const Default: ComponentStory<typeof Slider> = (args): JSX.Element => {
-  const [value, setValue] = React.useState<number>(30)
-
-  const handleChange = (event: Event, newValue: number | number[]): void => {
-    setValue(newValue as number)
-  }
-
-  return (
-    <Box sx={{ width: 300 }}>
-      <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
-        <Icon>volume_up</Icon>
-        <Slider aria-label="Volume" value={value} onChange={handleChange} />
-        <Icon>add_circle</Icon>
-      </Stack>
-      <Slider disabled defaultValue={30} aria-label="Disabled slider" />
-    </Box>
-  )
-}
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.Slider.Default
-    }
-  }
-}
-
-export const Sizes: ComponentStory<typeof Slider> = (args): JSX.Element => (
-  <Box width={300}>
-    <Slider
-      size="small"
-      defaultValue={50}
-      aria-label="Small"
-      valueLabelDisplay="auto"
-    />
-    <Slider
-      defaultValue={50}
-      aria-label="Default"
-      valueLabelDisplay="auto"
-    />
-  </Box>
-)
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Slider.Sizes
-    }
-  }
-}
-
-export const Colors: ComponentStory<typeof Slider> = (args): JSX.Element => (
-  <Box sx={{ width: 300 }}>
-    <Slider color="primary" defaultValue={30} aria-label="description" />
-    <Slider color="secondary" defaultValue={30} aria-label="description" />
-  </Box>
-)
-Colors.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Slider.Colors
-    }
-  }
-}
-
-export const Range: ComponentStory<typeof Slider> = (args): JSX.Element => {
-  const [value, setValue] = React.useState<number[]>([20, 37])
-
-  function valuetext (value: number): string {
-    return `${value}°C`
-  }
-
-  const handleChange = (event: Event, newValue: number | number[]): void => {
-    setValue(newValue as number[])
-  }
-
-  return (
-    <Box sx={{ width: 300 }}>
-      <Slider
-        getAriaLabel={() => 'Temperature range'}
-        value={value}
-        onChange={handleChange}
-        valueLabelDisplay="auto"
-        getAriaValueText={valuetext}
-      />
-    </Box>
-  )
-}
-Range.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Slider.Range
-    }
-  }
-}
-
-export const Discrete: ComponentStory<typeof Slider> = (args): JSX.Element => (
-  <Box sx={{ width: 300 }}>
-    <Slider
-      aria-label="Temperature"
-      defaultValue={30}
-      valueLabelDisplay="auto"
-      step={10}
-      marks
-      min={10}
-      max={110}
-    />
-    <Slider
-      defaultValue={30}
-      step={10}
-      marks
-      min={10}
-      max={110}
-      disabled
-    />
-  </Box>
-)
-Discrete.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Slider.Discrete
-    }
-  }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args): JSX.Element => (
-  <AllCombinations />
-)
-All.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Slider.All
-    }
-  }
-}

package/src/stories/Components/Inputs/Slider/Overview.stories.mdx

@@ -1,59 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Slider from '../../../../lib/components/atoms/Slider/Slider';
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-<Meta title="Components/Inputs/Slider/Overview" component={Slider} />
-
-[](#slider-overview)Slider Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Select/Slider.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Sliders allow users to make selections from a range of values. Values for selection on the slider scale can be communicated numerically or with an associated text label.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/slider/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/sliders" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#slider" 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=1085%3A17787&scaling=min-zoom&page-id=547%3A16434&starting-point-node-id=1085%3A17787" 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/Slider" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Sliders are ideal for adjusting settings such as volume, brightness, or applying image filters.
-* Use a slider when a user can select and option with a range of values.
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is an overview of the basic Slider component:
-
-<Canvas isExpanded>
-<Box sx={{ width: 200 }}>
-  <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
-    <Slider aria-label="Volume" value="50" />
-  </Stack>
-  <Slider disabled defaultValue={30} aria-label="Disabled slider" />
-</Box>
-</Canvas>
-
-### [](#when-to-avoid-it)When to avoid it?
-
-* Do not use a slider when capturing user data in a form (ex. Age); use a TextField component instead.
-
-### [](#best-practices)Best practices
-
-* A slider should always have a label that informs the user what the control's value is for.
-* The value label should be used to show the user's current selected value or values.
-* Do not use ranges values that are extremely large or too small (ex. 1-3 or 1-1000)
-
-### [](#design-prototype)Design prototype
-<iframe
-  allowfullscreen
-  frameborder="0"
-  height="350"
-  width="100%"
-  src="https://www.figma.com/embed?embed_host=share&amp;url=https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1085%3A17787&scaling=min-zoom&page-id=547%3A16434&starting-point-node-id=1085%3A17787"
-/>

package/src/stories/Components/Inputs/Slider/Slider.stories.tsx

@@ -1,27 +0,0 @@
-import { Box } from '@mui/material'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import Slider from '../../../../lib/components/atoms/Slider/Slider'
-
-export default {
-  title: 'Components/Inputs/Slider/Properties',
-  component: Slider,
-  parameters: {
-    controls: {
-      sort: 'requiredFirst'
-    }
-  },
-  addons: {
-    panelPosition: 'right'
-  }
-} as ComponentMeta<typeof Slider>
-
-// 👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Slider> = (args) => (
-  <Box sx={{ width: 200 }}>
-    <Slider {...args} />
-  </Box>
-)
-
-export const Properties = Template.bind({})
-Properties.args = {}

package/src/stories/Components/Inputs/Switch/Accessibility.stories.mdx

@@ -1,34 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Switch from '../../../../lib/components/atoms/Switch/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Chip from '@mui/material/Chip';
-
-<Meta title="Components/Inputs/Switch/Accessibility" />
-
-[](#switch-accessibility)Switch Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Switch/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.
-
-Please follow the guidance in this section and see [WAI-ARIA Switch](https://www.w3.org/TR/wai-aria-practices/#switch) for more information.
-
-## [](#guidelines)Guidelines
-* A switch should have a clear and concise label that describes it's purpose.
-* If the switch is required, include the `aria-required` property to indicate that it'a a required field.
-* It renders an element with the checkbox role instead of the switch role since this role isn't widely supported yet. Please test first if assistive technology of your target audience supports this role properly. Then you can change the role with `<Switch inputProps={{ role: 'switch' }}>`.
-
-### [](#when-to-use-this-component)When to use this component
-There can be some confusion around when to use a switch and when to use a checkbox. When deciding between a checkbox and a switch, it is better to focus on the usage context instead of their function. If a setting should have an immediate effect, then consider a switch. If a user needs to check their settings before applying them, then consider a checkbox.
-
-See [switch vs checkbox](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) for more details.
-
-### [](#screen-readers)Screen readers
-All switches should have a label. In most cases, this is done by using `FormControlLabel`:
-<Canvas isExpanded>
-  <FormControlLabel control={<Switch defaultChecked />} label="Switch description" />
-</Canvas>
-
-When a label element can't be used, it's necessary to add an attribute directly to the component to provide information to assistive technologies. In this case, you can apply the additional attribute (e.g. `aria-label`, `aria-labelledby`, `title`) via the `inputProps` prop:
-<Canvas isExpanded>
-  <Switch value="checked" inputProps={{ 'aria-label': 'Switch description' }} />
-</Canvas>

package/src/stories/Components/Inputs/Switch/AllCombinations.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react'
-import { Box, FormControlLabel, FormGroup } from '@mui/material'
-import Switch from '../../../../lib/components/atoms/Switch/Switch'
-
-const SwitchGrid = (args: any): JSX.Element => {
-  const label = { inputProps: { 'aria-label': 'Switch demo' } }
-
-  return (
-    <Box>
-      <Switch {...label} {...args} />
-      <Switch {...label} {...args} color="primary" />
-      <Switch {...label} {...args} color="secondary" />
-      <Switch {...label} {...args} color="error" />
-      <Switch {...label} {...args} color="success" />
-      <Switch {...label} {...args} color="info" />
-      <Switch {...label} {...args} color="warning" />
-      <FormGroup row>
-        <FormControlLabel control={<Switch {...label} {...args} />} label="Label"/>
-        <FormControlLabel control={<Switch {...label} {...args} color="primary" />} label="Primary"/>
-        <FormControlLabel control={<Switch {...label} {...args} color="secondary" />} label="Secondary"/>
-        <FormControlLabel control={<Switch {...label} {...args} color="error" />} label="Error"/>
-        <FormControlLabel control={<Switch {...label} {...args} color="success" />} label="Success"/>
-        <FormControlLabel control={<Switch {...label} {...args} color="info" />} label="Info"/>
-        <FormControlLabel control={<Switch {...label} {...args} color="warning" />} label="Warning"/>
-      </FormGroup>
-    </Box>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { defaultChecked: true },
-    { },
-    { disabled: true, defaultChecked: true },
-    { disabled: true }
-  ]
-
-  return (
-    <Box>
-      {combinations.map(switchConfig => (
-        <SwitchGrid {...switchConfig} />
-      ))}
-    </Box>
-  )
-}