@learningpool/ui 1.6.3 → 1.6.5

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

@@ -1,333 +0,0 @@
-import { FormControl, FormControlLabel, FormHelperText, FormLabel, RadioGroup } from '@mui/material'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import Radio from '../../../../lib/components/atoms/Radio/Radio'
-import Button from '../../../../lib/components/atoms/Button/Button'
-import AllCombinations from './AllCombinations'
-
-export default {
-  title: 'Components/Inputs/Radio/Examples',
-  component: Radio
-} as ComponentMeta<typeof Radio>
-
-export const Default: ComponentStory<typeof Radio> = (args): JSX.Element => (
-  <FormControl>
-    <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
-    <RadioGroup
-      aria-labelledby="demo-radio-buttons-group-label"
-      defaultValue="female"
-      name="radio-buttons-group"
-    >
-      <FormControlLabel value="female" control={<Radio />} label="Female" />
-      <FormControlLabel value="male" control={<Radio />} label="Male" />
-      <FormControlLabel value="other" control={<Radio />} label="Other" />
-    </RadioGroup>
-  </FormControl>
-)
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.Radio.Default
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const Direction: ComponentStory<typeof Radio> = (args): JSX.Element => {
-  return (
-    <FormControl>
-      <FormLabel id="demo-row-radio-buttons-direction">Gender</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-row-radio-buttons-direction"
-        name="row-radio-buttons-direction"
-      >
-        <FormControlLabel value="female" control={<Radio />} label="Female" />
-        <FormControlLabel value="male" control={<Radio />} label="Male" />
-        <FormControlLabel value="other" control={<Radio />} label="Other" />
-        <FormControlLabel
-          value="disabled"
-          disabled
-          control={<Radio />}
-          label="other"
-        />
-      </RadioGroup>
-    </FormControl>
-  )
-}
-Direction.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.Direction
-    }
-  }
-}
-
-export const Controlled: ComponentStory<typeof Radio> = (args): JSX.Element => {
-  const [value, setValue] = React.useState('female')
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setValue((event.target as HTMLInputElement).value)
-  }
-
-  return (
-    <FormControl>
-      <FormLabel id="demo-controlled-radio-buttons-controlled">Gender</FormLabel>
-      <RadioGroup
-        aria-labelledby="demo-controlled-radio-buttons-controlled"
-        name="controlled-radio-buttons-controlled"
-        value={value}
-        onChange={handleChange}
-      >
-        <FormControlLabel value="female" control={<Radio />} label="Female" />
-        <FormControlLabel value="male" control={<Radio />} label="Male" />
-      </RadioGroup>
-    </FormControl>
-  )
-}
-Controlled.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.Controlled
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const Standalone: ComponentStory<typeof Radio> = (args): JSX.Element => {
-  const [selectedValue, setSelectedValue] = React.useState('a')
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setSelectedValue(event.target.value)
-  }
-
-  return (
-    <div>
-      <Radio
-        checked={selectedValue === 'a'}
-        onChange={handleChange}
-        value="a"
-        name="radio-buttons"
-        inputProps={{ 'aria-label': 'A' }}
-      />
-      <Radio
-        checked={selectedValue === 'b'}
-        onChange={handleChange}
-        value="b"
-        name="radio-buttons"
-        inputProps={{ 'aria-label': 'B' }}
-      />
-    </div>
-  )
-}
-Standalone.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.Standalone
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const Sizes: ComponentStory<typeof Radio> = (args): JSX.Element => {
-  const [selectedValue, setSelectedValue] = React.useState('a')
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setSelectedValue(event.target.value)
-  }
-
-  const controlProps = (item: string): object => ({
-    checked: selectedValue === item,
-    onChange: handleChange,
-    value: item,
-    name: 'size-radio-button-demo',
-    inputProps: { 'aria-label': item }
-  })
-
-  return (
-    <div>
-      <Radio {...controlProps('a')} size="small" />
-      <Radio {...controlProps('b')} />
-      <Radio
-        {...controlProps('c')}
-        sx={{
-          '& .MuiSvgIcon-root': {
-            fontSize: 28
-          }
-        }}
-      />
-    </div>
-  )
-}
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.Sizes
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const Colors: ComponentStory<typeof Radio> = (args): JSX.Element => {
-  const [selectedValue, setSelectedValue] = React.useState('a')
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setSelectedValue(event.target.value)
-  }
-
-  const controlProps = (item: string): object => ({
-    checked: selectedValue === item,
-    onChange: handleChange,
-    value: item,
-    name: 'color-radio-button-demo',
-    inputProps: { 'aria-label': item }
-  })
-
-  return (
-    <div>
-      <Radio {...controlProps('a')} color="default" />
-      <Radio {...controlProps('b')} />
-      <Radio {...controlProps('d')} color="secondary" />
-      <Radio {...controlProps('e')} color="error" />
-      <Radio {...controlProps('f')} color="success" />
-      <Radio {...controlProps('g')} color="info" />
-      <Radio {...controlProps('h')} color="warning" />
-    </div>
-  )
-}
-Colors.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.Colors
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const LabelPosition: ComponentStory<typeof Radio> = (args): JSX.Element => (
-  <FormControl>
-    <FormLabel id="demo-form-control-label-placement">labelPlacement</FormLabel>
-    <RadioGroup
-      row
-      aria-labelledby="demo-form-control-label-placement"
-      name="position"
-      defaultValue="top"
-    >
-      <FormControlLabel
-        value="top"
-        control={<Radio />}
-        label="Top"
-        labelPlacement="top"
-      />
-      <FormControlLabel
-        value="start"
-        control={<Radio />}
-        label="Start"
-        labelPlacement="start"
-      />
-      <FormControlLabel
-        value="bottom"
-        control={<Radio />}
-        label="Bottom"
-        labelPlacement="bottom"
-      />
-      <FormControlLabel value="end" control={<Radio />} label="End" />
-    </RadioGroup>
-  </FormControl>
-)
-LabelPosition.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.LabelPosition
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const ShowError: ComponentStory<typeof Radio> = (args): JSX.Element => {
-  const [value, setValue] = React.useState('')
-  const [error, setError] = React.useState(false)
-  const [helperText, setHelperText] = React.useState('Choose wisely')
-
-  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setValue((event.target as HTMLInputElement).value)
-    setHelperText(' ')
-    setError(false)
-  }
-
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault()
-
-    if (value === 'best') {
-      setHelperText('You got it!')
-      setError(false)
-    } else if (value === 'worst') {
-      setHelperText('Sorry, wrong answer!')
-      setError(true)
-    } else {
-      setHelperText('Please select an option.')
-      setError(true)
-    }
-  }
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <FormControl sx={{ m: 3 }} error={error} variant="standard">
-        <FormLabel id="demo-error-radios">Pop quiz: MUI is...</FormLabel>
-        <RadioGroup
-          aria-labelledby="demo-error-radios"
-          name="quiz"
-          value={value}
-          onChange={handleRadioChange}
-        >
-          <FormControlLabel value="best" control={<Radio />} label="The best!" />
-          <FormControlLabel value="worst" control={<Radio />} label="The worst." />
-        </RadioGroup>
-        <FormHelperText>{helperText}</FormHelperText>
-        <Button sx={{ mt: 1, mr: 1 }} type="submit" variant="outlined">
-          Check Answer
-        </Button>
-      </FormControl>
-    </form>
-  )
-}
-ShowError.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.ShowError
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args) => (
-  <AllCombinations />
-)
-All.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Radio.All
-    }
-  }
-}

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

@@ -1,74 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Radio from '../../../../lib/components/atoms/Radio/Radio';
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-<Meta title="Components/Inputs/Radio/Overview" component={Radio} />
-
-[](#radio-overview)Radio Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Radio/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Radio buttons allow the user to select one item from a set of options. A radio button has an associated label that should clearly describe the option.
-
-<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?
-
-* Radio buttons are used for mutually exclusive choices, not for multiple choices.
-* Use radio buttons when the user needs to see all available options.
-* A radio button can also be used for changing settings in a menu or selecting a singular item in a data table.
-
-Understanding [Checkboxes vs Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is an overview of the baisc Radio button component that uses the `RadioGroup`, `FormControl` and `FormControlLabel` components. Thid makes it easy to group Radio components and provides an easier API with proper keyboard accessibility to the group.
-
-<Canvas isExpanded>
-<FormControl>
-  <FormLabel id="demo-radio-buttons-group-label">How many items?</FormLabel>
-  <RadioGroup
-    aria-labelledby="demo-radio-buttons-group-label"
-    defaultValue="none"
-    name="radio-buttons-group"
-  >
-    <FormControlLabel value="none" control={<Radio />} label="None" />
-    <FormControlLabel value="one" control={<Radio />} label="One" />
-    <FormControlLabel value="two" control={<Radio />} label="Two" />
-    <FormControlLabel value="three" control={<Radio />} label="Three" />
-  </RadioGroup>
-</FormControl>
-</Canvas>
-
-### [](#when-to-avoid-it)When to avoid it?
-
-* Do not use a radio button when a user can select more than one option from a list; use a checkbox instead.
-* Do not use a radio button to trigger an action based on a user's selection.
-
-### [](#best-practices)Best practices
-
-* Radio buttons should have the most commonly used option selected by default.
-* When grouping multiple radio buttons, use the [RadioGroup](https://mui.com/api/radio-group/) component.
-* Ensure that all radio buttons have a clear and concise label description.
-
-### [](#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=1065%3A17356&scaling=min-zoom&page-id=1059%3A17709&starting-point-node-id=1065%3A17356"
-/>

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

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

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

@@ -1,51 +0,0 @@
-import { Canvas, Meta, Story, Preview } from '@storybook/addon-docs';
-import Select from '../../../../lib/components/atoms/Select/Select';
-import NativeSelect from '@mui/material/NativeSelect';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Chip from '@mui/material/Chip';
-
-<Meta title="Components/Inputs/Select/Accessibility" />
-
-[](#select-accessibility)Select Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Select/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 Select](https://www.w3.org/TR/wai-aria-practices/#switch) for more information.
-
-## [](#guidelines)Guidelines
-* Use the label to provide a clear and concise description of the Select options.
-* Avoid long option names to make it easier to understand and increase usability.
-* If the select field is required include the `aria-required` property and clearly indicate that it is a required field.
-
-### [](#when-to-use-this-component)When to use this component
-Use the select component inside a form where users are selecting from a list of options and submitting data.
-
-### [](#screen-readers)Screen readers
-To properly label your `Select` input you need an extra element with an `id` that contains a `label`. That `id` needs to match the `labelId` of the `Select` e.g.
-<Canvas isExpanded>
-<InputLabel id="label">Age</InputLabel>
-<Select labelId="label" id="select" value="20">
-  <MenuItem value="10">Ten</MenuItem>
-  <MenuItem value="20">Twenty</MenuItem>
-</Select>
-</Canvas>
-
-Alternatively a `TextField` with an `id` and `label` creates the proper markup and ids for you:
-<Preview isExpanded>
-<TextField id="select" label="Age" value="20" select>
-  <MenuItem value="10">Ten</MenuItem>
-  <MenuItem value="20">Twenty</MenuItem>
-</TextField>
-</Preview>
-
-For a [native select](https://mui.com/components/selects/#native-select), you should mention a label by giving the value of the `id` attribute of the select element to the `InputLabel`'s `htmlFor` attribute:
-<Canvas isExpanded>
-<InputLabel htmlFor="select">Age</InputLabel>
-<NativeSelect id="select">
-  <option value="10">Ten</option>
-  <option value="20">Twenty</option>
-</NativeSelect>
-</Canvas>

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

@@ -1,63 +0,0 @@
-import * as React from 'react'
-import { Box, FormControl, FormHelperText, InputLabel, MenuItem } from '@mui/material'
-import Select, { SelectChangeEvent } from '../../../../lib/components/atoms/Select/Select'
-
-const SelectGrid = (args: any): JSX.Element => {
-  const [age, setAge] = React.useState('')
-
-  const handleChange = (event: SelectChangeEvent): void => {
-    setAge(event.target.value)
-  }
-
-  return (
-    <Box>
-      {[
-        { },
-        { error: true },
-        { disabled: true },
-        { withLabel: true },
-        { withoutLabel: true }
-      ].map(selectItem => {
-        const { error, disabled, withLabel, withoutLabel } = selectItem
-
-        return (
-          <FormControl sx={{ m: 1, minWidth: 120 }} error={error}>
-            {withoutLabel ? null : <InputLabel id="demo-simple-select-label">Age</InputLabel>}
-            <Select
-              labelId="demo-simple-select-label"
-              id="demo-simple-select"
-              value={age}
-              label="Age"
-              onChange={handleChange}
-              disabled={disabled}
-              displayEmpty={withoutLabel}
-              {...args}
-            >
-              <MenuItem value={10}>Ten</MenuItem>
-              <MenuItem value={20}>Twenty</MenuItem>
-              <MenuItem value={30}>Thirty</MenuItem>
-            </Select>
-            {withLabel ? <FormHelperText>With label + helper text</FormHelperText> : null}
-            {withoutLabel ? <FormHelperText>Without label</FormHelperText> : null}
-          </FormControl>
-        )
-      })}
-    </Box>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { variant: 'standard' },
-    { variant: 'outlined' },
-    { variant: 'filled' }
-  ]
-
-  return (
-    <Box>
-      {combinations.map(selectConfig => (
-        <SelectGrid {...selectConfig} />
-      ))}
-    </Box>
-  )
-}