@learningpool/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1,363 @@
+import FavoriteIcon from '@mui/icons-material/Favorite'
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'
+import BookmarkIcon from '@mui/icons-material/Bookmark'
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'
+import { Box, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Stack } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import Checkbox from '../../../../lib/components/atoms/Checkbox/Checkbox'
+import AllCombinations from './AllCombinations'
+
+export default {
+  title: 'Components/Inputs/Checkbox/Examples',
+  component: Checkbox
+} as ComponentMeta<typeof Checkbox>
+
+export const Default: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
+
+  return (
+    <Stack spacing={2} direction="row">
+      <Checkbox {...label} defaultChecked />
+      <Checkbox {...label} />
+      <Checkbox {...label} disabled />
+      <Checkbox {...label} disabled checked />
+    </Stack>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Checkbox.Default
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const Label: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
+
+  return (
+    <FormGroup>
+      <FormControlLabel control={<Checkbox {...label} defaultChecked />} label="Label checked"/>
+      <FormControlLabel control={<Checkbox {...label} />} label="Label"/>
+      <FormControlLabel control={<Checkbox {...label} disabled />} label="Disabled"/>
+      <FormControlLabel control={<Checkbox {...label} disabled checked />} label="Disabled checked"/>
+    </FormGroup>
+  )
+}
+Label.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.Label
+    }
+  }
+}
+
+export const Colors: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
+
+  return (
+    <Box>
+      <Checkbox {...label} defaultChecked color="default" />
+      <Checkbox {...label} defaultChecked />
+      <Checkbox {...label} defaultChecked color="secondary" />
+      <Checkbox {...label} defaultChecked color="error" />
+      <Checkbox {...label} defaultChecked color="success" />
+      <Checkbox {...label} defaultChecked color="info" />
+      <Checkbox {...label} defaultChecked color="warning" />
+    </Box>
+  )
+}
+Colors.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.Colors
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const Sizes: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
+
+  return (
+    <Box>
+      <Checkbox {...label} defaultChecked size="small" />
+      <Checkbox {...label} defaultChecked />
+      <Checkbox
+        {...label}
+        defaultChecked
+        sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
+      />
+    </Box>
+  )
+}
+Sizes.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.Sizes
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const Icon: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
+
+  return (
+    <Box>
+      <Checkbox {...label} icon={<FavoriteBorderIcon />} checkedIcon={<FavoriteIcon />} />
+      <Checkbox {...label} icon={<BookmarkBorderIcon />} checkedIcon={<BookmarkIcon />} />
+    </Box>
+  )
+}
+Icon.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.Icon
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const Controlled: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'controlled' } }
+  const [checked, setChecked] = React.useState(true)
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setChecked(event.target.checked)
+  }
+
+  return (
+    <Checkbox
+      {...label}
+      checked={checked}
+      onChange={handleChange}
+    />
+  )
+}
+Controlled.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.Controlled
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const Indeterminate: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'indeterminate' } }
+  const [checked, setChecked] = React.useState([true, false])
+
+  const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setChecked([event.target.checked, event.target.checked])
+  }
+
+  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setChecked([event.target.checked, checked[1]])
+  }
+
+  const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setChecked([checked[0], event.target.checked])
+  }
+
+  const children = (
+    <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
+      <FormControlLabel
+        label="Child 1"
+        control={<Checkbox {...label} checked={checked[0]} onChange={handleChange2} />}
+      />
+      <FormControlLabel
+        label="Child 2"
+        control={<Checkbox {...label} checked={checked[1]} onChange={handleChange3} />}
+      />
+    </Box>
+  )
+
+  return (
+    <div>
+      <FormControlLabel
+        label="Parent"
+        control={
+          <Checkbox
+            {...label}
+            checked={checked[0] && checked[1]}
+            indeterminate={checked[0] !== checked[1]}
+            onChange={handleChange1}
+          />
+        }
+      />
+      {children}
+    </div>
+  )
+}
+Indeterminate.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.Indeterminate
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const CheckboxesGroup: ComponentStory<typeof Checkbox> = (args): JSX.Element => {
+  const label = { inputProps: { 'aria-label': 'checkboxes group' } }
+  const [state, setState] = React.useState({
+    gilad: true,
+    jason: false,
+    antoine: false
+  })
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setState({
+      ...state,
+      [event.target.name]: event.target.checked
+    })
+  }
+
+  const { gilad, jason, antoine } = state
+  const error = [gilad, jason, antoine].filter((v) => v).length !== 2
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
+        <FormLabel component="legend">Assign responsibility</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox {...label} checked={gilad} onChange={handleChange} name="gilad" />
+            }
+            label="Gilad Gray"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox {...label} checked={jason} onChange={handleChange} name="jason" />
+            }
+            label="Jason Killian"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox {...label} checked={antoine} onChange={handleChange} name="antoine" />
+            }
+            label="Antoine Llorca"
+          />
+        </FormGroup>
+        <FormHelperText>Be careful</FormHelperText>
+      </FormControl>
+      <FormControl
+        required
+        error={error}
+        component="fieldset"
+        sx={{ m: 3 }}
+        variant="standard"
+      >
+        <FormLabel component="legend">Pick two</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox {...label} checked={gilad} onChange={handleChange} name="gilad" />
+            }
+            label="Gilad Gray"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox {...label} checked={jason} onChange={handleChange} name="jason" />
+            }
+            label="Jason Killian"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox {...label} checked={antoine} onChange={handleChange} name="antoine" />
+            }
+            label="Antoine Llorca"
+          />
+        </FormGroup>
+        <FormHelperText>You can display an error</FormHelperText>
+      </FormControl>
+    </Box>
+  )
+}
+CheckboxesGroup.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.CheckboxesGroup
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const LabelPosition: ComponentStory<typeof Checkbox> = (args): JSX.Element => (
+  <FormControl component="fieldset">
+    <FormGroup aria-label="position" row>
+      <FormControlLabel
+        value="top"
+        control={<Checkbox />}
+        label="Top"
+        labelPlacement="top"
+      />
+      <FormControlLabel
+        value="start"
+        control={<Checkbox />}
+        label="Start"
+        labelPlacement="start"
+      />
+      <FormControlLabel
+        value="bottom"
+        control={<Checkbox />}
+        label="Bottom"
+        labelPlacement="bottom"
+      />
+      <FormControlLabel
+        value="end"
+        control={<Checkbox />}
+        label="End"
+        labelPlacement="end"
+      />
+    </FormGroup>
+  </FormControl>
+)
+LabelPosition.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.LabelPosition
+    }
+  },
+  controls: {
+    // exclude: /[a-zA-Z0-9]*/,
+    // hideNoControlsWarning: true
+  }
+}
+
+export const All: ComponentStory<typeof AllCombinations> = (args): JSX.Element => (
+  <AllCombinations />
+)
+All.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Checkbox.All
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Checkbox from '../../../../lib/components/atoms/Checkbox/Checkbox';
+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/Checkbox/Overview" component={Checkbox} />
+
+[](#checkbox-accessibility)Checkbox Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Checkbox/Accessibility.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+### [](#what-does-it-do)What does it do?
+
+Checkboxes allow the user to select one or more items from a set of options. A checkbox has an associated label that should clearly indicate to the user what action will be triggered.
+
+<Stack direction="row" spacing={1}>
+  <Chip clickable component="a" href="https://mui.com/components/checkboxes/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
+  <Chip clickable component="a" href="https://material.io/components/checkboxes" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
+  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#checkbox" 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/Checkbox" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
+</Stack>
+
+### [](#why-use-it)Why use it?
+
+* Used when there are multiple items to select that are not mutually exclusive.
+* Used to filter data either on a page, in a menu, or within a component.
+* Used when each selection in a group works independently from other selctions.
+
+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 Checkbox components.
+
+<Canvas isExpanded>
+<Checkbox label="Default Checked" defaultChecked />
+<Checkbox label="Default" />
+<Checkbox label="Disabled" disabled />
+<Checkbox label="Disabled Checked" disabled checked />
+</Canvas>
+
+### [](#when-to-avoid-it)When to avoid it?
+
+* Do not use a checkbox when you only have a single option; use a switch instead.
+* Do not use a checkbox to trigger an action based on a user's selection.
+* Do not use a checkbox when you can only select one option from a list; use a radio button instead.
+
+### [](#best-practices)Best practices
+
+* Use a text hint to communicate how many options a user can select (ex 'Select all that apply').
+* Ensure that all checkbox labels have a clear and concise description.
+* Use positive and active wording for checkbox labels, so that it's clear what will happen if the user turns on the checkbox.
+* When grouping multiple checkboxes, consider using the [FormGroup](https://mui.com/components/checkboxes/#formgroup) component.
+
+### [](#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=1045%3A17968&scaling=min-zoom&page-id=1044%3A16798&starting-point-node-id=1045%3A17981"
+/>

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

@@ -0,0 +1,24 @@
+import { Stack } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import IconButton from '../../../../lib/components/atoms/IconButton/IconButton'
+import DeleteIcon from '@mui/icons-material/Delete'
+
+export default {
+  title: 'Components/Inputs/Button (IconButton)/Examples',
+  component: IconButton
+} as ComponentMeta<typeof IconButton>
+
+export const Default: ComponentStory<typeof IconButton> = (args) => (
+  <Stack spacing={2} direction="row">
+    <IconButton aria-label='Trash can'><DeleteIcon /></IconButton>
+  </Stack>
+)
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.IconButton.Default
+    }
+  }
+}

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

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

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

@@ -0,0 +1,61 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Radio from '../../../../lib/components/atoms/Radio/Radio';
+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';
+
+<Meta title="Components/Inputs/Radio/Accessibility" />
+
+[](#radio-accessibility)Radio Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Radio/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 Radio Button](https://www.w3.org/TR/wai-aria-practices/#radiobutton) for more information.
+
+## [](#guidelines)Guidelines
+* Radio buttons must have a clear and concise description provided by a `<label>` element or `aria-label` attribute.
+* When a radio group does not have a default selected the focus should move to the first radio button in the group.
+* If the Radio button is a required field, include the `aria-required` property and indicate that it is a required field and use the validation message for input errors.
+* Use positive and active wording for radio button labels, so that it's clear what will happen if the user turns on the Radio. In other words, avoid negations such as "Don't send me more email," which would mean that the user would have to check the box in order for something not to happen.
+
+### [](#when-to-use-this-component)When to use this component
+Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
+
+### [](#screen-readers)Screen readers
+Radio buttons should have unique labels to identify their usage to assistive technologies whenever possible. In most cases, this is done by using a `<label>` element generated by the `FormControlLabel` component:
+<Canvas>
+  <FormControlLabel control={<Radio />} label="Your label goes here" />
+</Canvas>
+
+When a label element can't be used, it's necessary to add an attribute directly to the input 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>
+  <Radio
+    inputProps={{
+      'aria-label': 'Your label goes here',
+    }}
+  />
+</Canvas>
+
+Always offer a default selection for radio button lists. By definition, radio buttons always have exactly one option selected, and you therefore shouldn't display them without a default selection.
+
+If users might need to refrain from making a selection, you should provide a radio button for this choice, such as one labeled "None." Offering users an explicit, neutral option to click is better than requiring the implicit act of not selecting from the list, especially because doing the latter violates the rule of always having exactly one option chosen.
+<Canvas>
+  <FormControl>
+    <FormLabel id="demo-radio-buttons-group-label">Form description here</FormLabel>
+    <RadioGroup
+      aria-labelledby="demo-radio-buttons-group-label"
+      defaultValue="none"
+      name="radio-buttons-group"
+    >
+      <FormControlLabel value="one" control={<Radio />} label="One" />
+      <FormControlLabel value="two" control={<Radio />} label="Two" />
+      <FormControlLabel value="three" control={<Radio />} label="Three" />
+      <FormControlLabel value="none" control={<Radio />} label="None" />
+    </RadioGroup>
+  </FormControl>
+</Canvas>
+
+

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

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { Box, FormControl, FormControlLabel, FormLabel, RadioGroup } from '@mui/material'
+import Radio from '../../../../lib/components/atoms/Radio/Radio'
+
+const RadioGrid = (args: any): 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 }
+  })
+
+  const [value, setValue] = React.useState('default')
+
+  const handleGroupChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    setValue((event.target as HTMLInputElement).value)
+  }
+
+  return (
+    <div>
+      <div>
+        <Radio {...controlProps('a')} {...args} color="default" />
+        <Radio {...controlProps('b')} {...args} />
+        <Radio {...controlProps('d')} {...args} color="secondary" />
+        <Radio {...controlProps('e')} {...args} color="error" />
+        <Radio {...controlProps('f')} {...args} color="success" />
+        <Radio {...controlProps('g')} {...args} color="info" />
+        <Radio {...controlProps('h')} {...args} color="warning" />
+      </div>
+      <div>
+        <FormControl>
+          <FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
+          <RadioGroup
+            aria-labelledby="demo-controlled-radio-buttons-group"
+            name="controlled-radio-buttons-group"
+            value={value}
+            onChange={handleGroupChange}
+            row
+          >
+            <FormControlLabel value="default" control={<Radio {...args} color="default" />} label="Default" />
+            <FormControlLabel value="primary" control={<Radio {...args} color="primary" />} label="Primary" />
+            <FormControlLabel value="error" control={<Radio {...args} color="error" />} label="Error" />
+            <FormControlLabel value="success" control={<Radio {...args} color="success" />} label="Success" />
+            <FormControlLabel value="info" control={<Radio {...args} color="info" />} label="Info" />
+            <FormControlLabel value="warning" control={<Radio {...args} color="warning" />} label="Warning" />
+          </RadioGroup>
+        </FormControl>
+      </div>
+    </div>
+  )
+}
+
+export default function AllCombinations (): JSX.Element {
+  const combinations = [
+    { checked: true },
+    { },
+    { disabled: true },
+    { disabled: true, checked: true }
+  ]
+
+  return (
+    <Box>
+      {combinations.map(RadioConfig => (
+        <RadioGrid {...RadioConfig} />
+      ))}
+    </Box>
+  )
+}