@learningpool/ui 1.6.0 → 1.6.1

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

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

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

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

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

@@ -0,0 +1,63 @@
+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>
+  )
+}