@learningpool/ui 1.6.2 → 1.6.5

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

@@ -1,213 +0,0 @@
-import { Box, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@mui/material'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import Switch from '../../../../lib/components/atoms/Switch/Switch'
-import AllCombinations from './AllCombinations'
-
-export default {
-  title: 'Components/Inputs/Switch/Examples',
-  component: Switch
-} as ComponentMeta<typeof Switch>
-
-export const Default: ComponentStory<typeof Switch> = (args): JSX.Element => {
-  const label = { inputProps: { 'aria-label': 'Switch description here' } }
-
-  return (
-    <>
-      <Switch {...label} defaultChecked />
-      <Switch {...label} />
-      <Switch {...label} disabled defaultChecked />
-      <Switch {...label} disabled />
-    </>
-  )
-}
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.Switch.Default
-    }
-  }
-}
-
-export const Label: ComponentStory<typeof Switch> = (args): JSX.Element => {
-  return (
-    <FormGroup>
-      <FormControlLabel control={<Switch defaultChecked />} label="Default switch description" />
-      <FormControlLabel disabled control={<Switch />} label="Disabled switch description" />
-    </FormGroup>
-  )
-}
-Label.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Switch.Label
-    }
-  }
-}
-
-export const Sizes: ComponentStory<typeof Switch> = (args): JSX.Element => {
-  const label = { inputProps: { 'aria-label': 'Switch description here' } }
-
-  return (
-    <Box>
-      <Switch {...label} defaultChecked size="small" />
-      <Switch {...label} defaultChecked />
-      <Switch
-        {...label}
-        defaultChecked
-        sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
-      />
-    </Box>
-  )
-}
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Switch.Sizes
-    }
-  }
-}
-
-export const Colors: ComponentStory<typeof Switch> = (args): JSX.Element => {
-  const label = { inputProps: { 'aria-label': 'Switch description here' } }
-
-  return (
-    <Box>
-      <Switch {...label} defaultChecked color="default" />
-      <Switch {...label} defaultChecked />
-      <Switch {...label} defaultChecked color="secondary" />
-      <Switch {...label} defaultChecked color="warning" />
-      <Switch {...label} defaultChecked color="success" />
-    </Box>
-  )
-}
-Colors.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Switch.Colors
-    }
-  }
-}
-
-export const Controlled: ComponentStory<typeof Switch> = (args): JSX.Element => {
-  const [checked, setChecked] = React.useState(true)
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setChecked(event.target.checked)
-  }
-
-  return (
-    <Switch
-      checked={checked}
-      onChange={handleChange}
-      inputProps={{ 'aria-label': 'Controlled switch description' }}
-    />
-  )
-}
-Controlled.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Switch.Controlled
-    }
-  }
-}
-
-export const SwitchesGroup: ComponentStory<typeof Switch> = (args): JSX.Element => {
-  const [state, setState] = React.useState({
-    gilad: true,
-    jason: false,
-    antoine: true
-  })
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    setState({
-      ...state,
-      [event.target.name]: event.target.checked
-    })
-  }
-
-  return (
-    <FormControl component="fieldset" variant="standard">
-      <FormLabel component="legend">Assign responsibility</FormLabel>
-      <FormGroup>
-        <FormControlLabel
-          control={
-            <Switch checked={state.gilad} onChange={handleChange} name="gilad" />
-          }
-          label="Gilad Gray"
-        />
-        <FormControlLabel
-          control={
-            <Switch checked={state.jason} onChange={handleChange} name="jason" />
-          }
-          label="Jason Killian"
-        />
-        <FormControlLabel
-          control={
-            <Switch checked={state.antoine} onChange={handleChange} name="antoine" />
-          }
-          label="Antoine Llorca"
-        />
-      </FormGroup>
-      <FormHelperText>Be careful</FormHelperText>
-    </FormControl>
-  )
-}
-SwitchesGroup.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Switch.SwitchesGroup
-    }
-  }
-}
-
-export const LabelPosition: ComponentStory<typeof Switch> = (args): JSX.Element => (
-  <FormControl component="fieldset">
-    <FormLabel component="legend">Label placement</FormLabel>
-    <FormGroup aria-label="position" row>
-      <FormControlLabel
-        value="top"
-        control={<Switch color="primary" />}
-        label="Top"
-        labelPlacement="top"
-      />
-      <FormControlLabel
-        value="start"
-        control={<Switch color="primary" />}
-        label="Start"
-        labelPlacement="start"
-      />
-      <FormControlLabel
-        value="bottom"
-        control={<Switch color="primary" />}
-        label="Bottom"
-        labelPlacement="bottom"
-      />
-      <FormControlLabel
-        value="end"
-        control={<Switch color="primary" />}
-        label="End"
-        labelPlacement="end"
-      />
-    </FormGroup>
-  </FormControl>
-)
-LabelPosition.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Switch.LabelPosition
-    }
-  }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args): JSX.Element => (
-  <AllCombinations />
-)
-All.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Switch.All
-    }
-  }
-}

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

@@ -1,62 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Switch from '../../../../lib/components/atoms/Switch/Switch';
-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/Switch/Overview" component={Switch} />
-
-[](#switch-overview)Switch Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Switch/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-A toggle switch is used to quickly change between two possible states, such as on/off. A switch has an associated label that should clearly describe the option.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/switches/" 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#switches" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1059%3A17697&scaling=min-zoom&page-id=1059%3A17118&starting-point-node-id=1059%3A17697" 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/Switch" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* A switch represents a physical switch that allows users to toggle things on or off, like a light switch.
-* Use a switch when an instant response of applied settings is required without an explicit action.
-* Use a switch when a user is toggling independent features or behaviors.
-* Switches are the preferred way to adjust settings on mobile.
-
-Understanding [Switch vs Checkbox](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8)
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is an overview of the basic Switch component:
-
-<Canvas isExpanded>
-<Switch label="Default Checked" defaultChecked />
-<Switch label="Default" />
-<Switch label="Disabled" disabled defaultChecked />
-<Switch label="Disabled Checked" disabled />
-</Canvas>
-
-### [](#when-to-avoid-it)When to avoid it?
-
-* Do not use a switch when multiple options are available and the user has to select one or more options.
-* Do not use a switch when a user has to selected option(s) from a list of related items.
-* Do not use a switch when requiring a user's consent (such as accepting terms and conditions); use a Checkbox instead.
-
-### [](#best-practices)Best practices
-
-* Ensure that switches have a clear and concise label that describes the option.
-* Switches should not require a review or confirmation following a change.
-* You can easily provide a label to the Switch with the `FormControlLabel` 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=1059%3A17697&scaling=min-zoom&page-id=1059%3A17118&starting-point-node-id=1059%3A17697"
-/>

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

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

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

@@ -1,29 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import TextField from '../../../../lib/components/atoms/TextField/TextField';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Chip from '@mui/material/Chip';
-
-<Meta title="Components/Inputs/TextField/Accessibility" />
-
-[](#textfield-accessibility)TextField Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/TextField/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 [[ADD RESOURCE HERE]](https://www.w3.org/TR/wai-aria-practices/) for more information.
-
-## [](#guidelines)Guidelines
-* Labels should be visible when an input gets focus.
-* Labels must be announced by screen reader on focus.
-* Text fields must have a clear and concise description provided by it's associated `<label>` element.
-* If the text field is required, include the `aria-required` property to indicate that it'a a required field.
-* Use a clear validation message for input errors.
-
-### [](#screen-readers)Screen readers
-The TextField wrapper component is a complete form control including a label, input, and help text. In order for the text field to be accessible, the input is automatically linked to the label and the helper text.
-
-*Be sure to provide a unique ID and label for the input.*
-
-<Canvas>
-  <TextField id="unique-id-here" label="Input description"/>
-</Canvas>

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

@@ -1,57 +0,0 @@
-import * as React from 'react'
-import { Box } from '@mui/material'
-import TextField from '../../../../lib/components/atoms/TextField/TextField'
-
-const TextFieldGrid = (args: any): JSX.Element => {
-  return (
-    <Box
-      component="form"
-      sx={{
-        '& > :not(style)': { m: 1, width: '25ch' }
-      }}
-      noValidate
-      autoComplete="off"
-    >
-      {[
-        { focused: true },
-        { helperText: 'Enter some text', focused: true },
-        { value: 'Hello world', helperText: 'Valid entry', focused: true }
-      ].map((selectItem, index) => {
-        return (
-          <TextField
-            {...selectItem}
-            {...args}
-            id={`outlined-basic-${index}`}
-            label="Outlined"
-            variant="outlined"
-          />
-        )
-      })}
-    </Box>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { color: 'primary' },
-    { color: 'primary', size: 'small' },
-    { color: 'secondary' },
-    { color: 'secondary', size: 'small' },
-    { color: 'error' },
-    { color: 'error', size: 'small' },
-    { color: 'success' },
-    { color: 'success', size: 'small' },
-    { color: 'info' },
-    { color: 'info', size: 'small' },
-    { color: 'warning' },
-    { color: 'warning', size: 'small' }
-  ]
-
-  return (
-    <Box>
-      {combinations.map(textFieldConfig => (
-        <TextFieldGrid {...textFieldConfig} />
-      ))}
-    </Box>
-  )
-}

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

@@ -1,127 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import TextField from '../../../../lib/components/atoms/TextField/TextField'
-import AllCombinations from './AllCombinations'
-import Box from '@mui/material/Box'
-
-export default {
-  title: 'Components/Inputs/TextField/Examples',
-  component: TextField
-} as ComponentMeta<typeof TextField>
-
-export const Basic: ComponentStory<typeof TextField> = (args) => (
-  <TextField id="outlined-basic" label="Outlined" variant="outlined" />
-)
-Basic.parameters = {
-  docs: {
-    description: {
-      component: DOCS.TextField.Basic
-    }
-  },
-  controls: {
-    // exclude: /[a-zA-Z0-9]*/,
-    // hideNoControlsWarning: true
-  }
-}
-
-export const Validation: ComponentStory<typeof TextField> = (args) => (
-  <Box
-    component="form"
-    sx={{
-      '& .MuiTextField-root': { m: 1, width: '25ch' }
-    }}
-    noValidate
-    autoComplete="off"
-  >
-    <div>
-      <TextField
-        variant="outlined"
-        error
-        id="outlined-error"
-        label="Error"
-        defaultValue="Hello World"
-      />
-      <TextField
-        variant="outlined"
-        error
-        id="outlined-error-helper-text"
-        label="Error"
-        defaultValue="Hello World"
-        helperText="Incorrect entry."
-      />
-    </div>
-  </Box>
-)
-Validation.parameters = {
-  docs: {
-    description: {
-      story: DOCS.TextField.Validation
-    }
-  }
-}
-
-export const Sizes: ComponentStory<typeof TextField> = (args) => (
-  <Box
-    component="form"
-    sx={{
-      '& .MuiTextField-root': { m: 1, width: '25ch' }
-    }}
-    noValidate
-    autoComplete="off"
-  >
-    <div>
-      <TextField
-        variant="outlined"
-        label="Size"
-        id="outlined-size-small"
-        defaultValue="Small"
-        size="small"
-      />
-      <TextField variant="outlined" label="Size" id="outlined-size-normal" defaultValue="Normal" />
-    </div>
-  </Box>
-)
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: DOCS.TextField.Sizes
-    }
-  }
-}
-
-export const Colors: ComponentStory<typeof TextField> = (args) => (
-  <Box
-    component="form"
-    sx={{
-      '& > :not(style)': { m: 1, width: '25ch' }
-    }}
-    noValidate
-    autoComplete="off"
-  >
-    <TextField variant="outlined" label="Outlined primary" color="primary" focused />
-    <TextField variant="outlined" label="Outlined secondary" color="secondary" focused />
-    <TextField variant="outlined" label="Outlined error" color="error" focused />
-    <TextField variant="outlined" label="Outlined success" color="success" focused />
-    <TextField variant="outlined" label="Outlined info" color="info" focused />
-    <TextField variant="outlined" label="Outlined warning" color="warning" focused />
-  </Box>
-)
-Colors.parameters = {
-  docs: {
-    description: {
-      story: DOCS.TextField.Colors
-    }
-  }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args) => (
-  <AllCombinations />
-)
-All.parameters = {
-  docs: {
-    description: {
-      story: DOCS.TextField.All
-    }
-  }
-}

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

@@ -1,60 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import TextField from '../../../../lib/components/atoms/TextField/TextField';
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-
-<Meta title="Components/Inputs/TextField/Overview" component={TextField} />
-
-[](#textfield-overview)TextField Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/TextField/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Text fields let users enter and edit text.
-Switches toggle the state of a single setting on or off. A switch has an associated label that should clearly describe the option.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/text-fields/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/text-fields" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1059%3A17697&scaling=min-zoom&page-id=1059%3A17118&starting-point-node-id=1059%3A17697" 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/TextField" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Use text fields to allow users to enter text into a UI.
-* Text fields are typically used in forms and dialogs.
-* Use a text field for collecting information such as name, email address, phone number, and address.
-
-### [](#how-to-implement-it)How to implement it?
-
-The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), filled, and standard.
-
-<Canvas isExpanded>
-<TextField id="outlined-basic" label="Outlined" variant="outlined" />
-<TextField id="filled-basic" label="Filled" variant="filled" />
-<TextField id="standard-basic" label="Standard" variant="standard" />
-</Canvas>
-
-*The standard variant of the TextField is no longer documented in the Material Design guidelines ([here's why](https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03)), but MUI will continue to support it.*
-
-### [](#when-to-avoid-it)When to avoid it?
-
-* Do not use a text field for multiple lines inputs; use the Text Area component instead.
-
-### [](#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=1198%3A19066&scaling=contain&page-id=465%3A11747&starting-point-node-id=1198%3A19066"
-/>