@learningpool/ui 1.6.3 → 1.6.5

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

@@ -1,52 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Autocomplete from '../../../../lib/components/atoms/Autocomplete/Autocomplete';
-import TextField from '../../../../lib/components/atoms/TextField/TextField';
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
-import Stack from '@mui/material/Stack';
-import { top100Films } from '../../../assets/testData'
-
-<Meta title="Components/Inputs/Autocomplete/Overview" component={Autocomplete} />
-
-[](#autocomplete-overview)Autocomplete Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Autocomplete/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-The autocomplete is a normal text input enhanced by a panel of suggested options.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/autocompletes/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/autocompletes" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#autocomplete" 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/Autocomplete" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Use an Autocomplete component when you want to provide a list of suggested options to the user.
-* Use an Autocomplete component when you want to suggest a word or phrase based on user input.
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is an example of the Autocomplete component:
-
-<Canvas isExpanded>
-<Autocomplete
-  sx={{ width: 300 }}
-  id="combo-box-demo"
-  options={top100Films.map((option) => option.title)}
-  renderInput={(params) => <TextField {...params} label="combo box" />}
-/>
-</Canvas>
-
-### [](#best-practices)Best practices
-
-The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:
-
-1. [Combo Box](?path=/story/components-inputs-autocomplete-examples--combo-box) - The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name.
-2. [Free Solo](?path=/story/components-inputs-autocomplete-examples--free-solo) - The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time.
-
-### [](#design-prototype)Design prototype
-TODO: Add Figma link

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

@@ -1,52 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Stack } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import Button from '../../../../lib/components/atoms/Button/Button';
-import IconButton from '../../../../lib/components/atoms/IconButton/IconButton';
-import Chip from '@mui/material/Chip';
-
-<Meta title="Components/Inputs/Button/Accessibility" />
-
-[](#button-accessibility)Button Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Button/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 Checkboxes](https://www.w3.org/TR/wai-aria-practices-1.1/#button) for more information.
-
-## [](#accessibility-guidelines)Guidelines
-* The button can be activated using both the Space or Enter key.
-* The button should have text or label that accurately describes the action of the button.
-* If a description of the button's function is present, the button element should have an aria-describedby set to the ID of the element containing the description.
-* After the button is activated ensure the focus is set correctly based on the type of action the button performs.
-
-### [](#when-to-use-this-component)When to use this component
-There can be some confusion around which element to use for interface design. When do you use a `<link>` and when do you use a `<button>`? With a link, the visitor navigates to a new resource, taking them away from the current context; but a button prompts a change in the current interface.
-
-When navigating to a different resource, provide a URL via the `href` prop so the component will render a `<a>` element:
-<Canvas>
-  <Button href="https://learningpool.com" variant="contained">Link</Button>
-</Canvas>
-
-When interacting with the UI, simply leave off the `href` prop and the component will render a `<button>` element. A `<button>` is the best element for opening a modal window, triggering a pop-up, toggling an interface or playing media content.
-<Canvas>
-  <Button variant="contained">Button</Button>
-</Canvas>
-
-### [](#aria-attributes)ARIA attributes
-There are cases where to reduce visual noise buttons that have the same action but with different context, will have the same text. In those cases, `aria-label` should be added with unique information about for the action in the page context:
-<Canvas>
-<Stack direction="row" spacing={2}>
-  <Button aria-label="Button 1 description" variant="contained">Button</Button>
-  <Button aria-label="Button 2 description" variant="contained">Button</Button>
-  <Button aria-label="Button 3 description" variant="contained">Button</Button>
-</Stack>
-</Canvas>
-
-#### [](#iconbutton)IconButton
-Sometimes you may want to use a IconButton with only an icon and no visible text. In this case, you must also provide an `aria-label` prop to communicate alternative information to screen readers.
-<Canvas>
-<IconButton aria-label="Your label goes here">
-  <DeleteIcon />
-</IconButton>
-</Canvas>

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

@@ -1,53 +0,0 @@
-import { Box } from '@mui/material'
-import * as React from 'react'
-import Button from '../../../../lib/components/atoms/Button/Button'
-import DeleteIcon from '@mui/icons-material/Delete'
-import SendIcon from '@mui/icons-material/Send'
-
-const ButtonGrid = (args: any): JSX.Element => {
-  return (
-    <div>
-      <Button {...args}>{args.content ? args.content : 'Default'}</Button>
-      <Button {...args} color="primary">{args.content ? args.content : 'Primary'}</Button>
-      <Button {...args} color="secondary">{args.content ? args.content : 'Secondary'}</Button>
-      <Button {...args} color="error">{args.content ? args.content : 'Error'}</Button>
-      <Button {...args} color="success">{args.content ? args.content : 'Success'}</Button>
-      <Button {...args} color="info">{args.content ? args.content : 'Info'}</Button>
-      <Button {...args} color="warning">{args.content ? args.content : 'Warning'}</Button>
-    </div>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { size: 'small' },
-    { size: 'small', variant: 'text' },
-    { size: 'small', variant: 'outlined' },
-    { size: 'small', variant: 'contained' },
-    { size: 'small', variant: 'contained', disabled: true },
-    { size: 'small', variant: 'contained', startIcon: <DeleteIcon /> },
-    { size: 'small', variant: 'contained', endIcon: <SendIcon /> },
-    { size: 'medium' },
-    { size: 'medium', variant: 'text' },
-    { size: 'medium', variant: 'outlined' },
-    { size: 'medium', variant: 'contained' },
-    { size: 'medium', variant: 'contained', disabled: true },
-    { size: 'medium', variant: 'contained', startIcon: <DeleteIcon /> },
-    { size: 'medium', variant: 'contained', endIcon: <SendIcon /> },
-    { size: 'large' },
-    { size: 'large', variant: 'text' },
-    { size: 'large', variant: 'outlined' },
-    { size: 'large', variant: 'contained' },
-    { size: 'large', variant: 'contained', disabled: true },
-    { size: 'large', variant: 'contained', startIcon: <DeleteIcon /> },
-    { size: 'large', variant: 'contained', endIcon: <SendIcon /> }
-  ]
-
-  return (
-    <Box sx={{ '& button': { m: 1 } }}>
-      {combinations.map(buttonConfig => (
-        <ButtonGrid {...buttonConfig} disableRipple={true} />
-      ))}
-    </Box>
-  )
-}

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

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

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

@@ -1,190 +0,0 @@
-import { Box, Stack } from '@mui/material'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import Button from '../../../../lib/components/atoms/Button/Button'
-import IconButton from '../../../../lib/components/atoms/IconButton/IconButton'
-import AllCombinations from './AllCombinations'
-import DeleteIcon from '@mui/icons-material/Delete'
-import SendIcon from '@mui/icons-material/Send'
-import AlarmIcon from '@mui/icons-material/Alarm'
-import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'
-
-export default {
-  title: 'Components/Inputs/Button/Examples',
-  component: Button
-} as ComponentMeta<typeof Button>
-
-export const Default: ComponentStory<typeof Button> = (args) => (
-  <Stack spacing={2} direction="row">
-    <Button variant="text">Text</Button>
-    <Button variant="contained">Contained</Button>
-    <Button variant="outlined">Outlined</Button>
-  </Stack>
-)
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.Button.Default
-    }
-  }
-}
-
-export const Text: ComponentStory<typeof Button> = (args) => (
-  <Stack direction="row" spacing={2}>
-    <Button {...args}>Primary</Button>
-    <Button {...args} disabled>Disabled</Button>
-    <Button {...args} href="#text-buttons">Link</Button>
-  </Stack>
-)
-Text.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Button.Text
-    }
-  }
-}
-
-export const Contained: ComponentStory<typeof Button> = (args) => (
-  <Stack direction="row" spacing={2}>
-    <Button variant="contained">Contained</Button>
-    <Button variant="contained" disabled>
-      Disabled
-    </Button>
-    <Button variant="contained" href="#contained-buttons">
-      Link
-    </Button>
-  </Stack>
-)
-Contained.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Button.Contained
-    }
-  }
-}
-
-export const Outlined: ComponentStory<typeof Button> = (args) => (
-  <Stack direction="row" spacing={2}>
-    <Button variant="outlined">Primary</Button>
-    <Button variant="outlined" disabled>
-      Disabled
-    </Button>
-    <Button variant="outlined" href="#outlined-buttons">
-      Link
-    </Button>
-  </Stack>
-)
-Outlined.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Button.Outlined
-    }
-  }
-}
-
-export const Colors: ComponentStory<typeof Button> = (args) => (
-  <Stack direction="row" spacing={2}>
-    <Button variant="contained" color="primary">Primary</Button>
-    <Button variant="contained" color="secondary">Secondary</Button>
-    <Button variant="contained" color="error">Error</Button>
-    <Button variant="contained" color="warning">Warning</Button>
-    <Button variant="contained" color="success">Success</Button>
-    <Button variant="contained" color="info">Info</Button>
-  </Stack>
-)
-Colors.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Button.Colors
-    }
-  }
-}
-
-export const Sizes: ComponentStory<typeof Button> = (args) => (
-  <Box sx={{ '& button': { m: 1 } }}>
-    <div>
-      <Button size="small">Small</Button>
-      <Button size="medium">Medium</Button>
-      <Button size="large">Large</Button>
-    </div>
-    <div>
-      <Button variant="outlined" size="small">
-        Small
-      </Button>
-      <Button variant="outlined" size="medium">
-        Medium
-      </Button>
-      <Button variant="outlined" size="large">
-        Large
-      </Button>
-    </div>
-    <div>
-      <Button variant="contained" size="small">
-        Small
-      </Button>
-      <Button variant="contained" size="medium">
-        Medium
-      </Button>
-      <Button variant="contained" size="large">
-        Large
-      </Button>
-    </div>
-  </Box>
-)
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Button.Sizes
-    }
-  }
-}
-
-export const WithIcon: ComponentStory<typeof Button> = (args) => (
-  <Stack direction="row" spacing={2}>
-    <Button variant="outlined" startIcon={<DeleteIcon />}>
-      Delete
-    </Button>
-    <Button variant="contained" endIcon={<SendIcon />}>
-      Send
-    </Button>
-  </Stack>
-)
-WithIcon.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Button.WithIcon
-    }
-  }
-}
-
-export const IconButtons: ComponentStory<typeof Button> = (args) => (
-  <Stack direction="row" spacing={1}>
-    <IconButton aria-label="delete">
-      <DeleteIcon />
-    </IconButton>
-    <IconButton aria-label="delete" disabled color="primary">
-      <DeleteIcon />
-    </IconButton>
-    <IconButton color="secondary" aria-label="add an alarm">
-      <AlarmIcon />
-    </IconButton>
-    <IconButton color="primary" aria-label="add to shopping cart">
-      <AddShoppingCartIcon />
-    </IconButton>
-  </Stack>
-)
-IconButtons.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Button.IconButtons
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args) => (
-  <AllCombinations />
-)

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

@@ -1,52 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Button from '../../../../lib/components/atoms/Button/Button';
-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/Button/Overview" component={Button} />
-
-[](#button-overview)Button Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Button/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-A button helps the user to find the most important actions of a page or within a viewport and enables them to perform these actions. The label is used to clearly indicate to the user what action will be triggered.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/buttons/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/buttons" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#button" 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/Button" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Buttons are used to show the user's choice of options for actions and assign these to a clear hierarchy.
-* Buttons allow users to commit a change, complete steps in a task, or make choices.
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is an overview of the Contained, Outlined and Text button components.
-
-<Canvas isExpanded>
-  <Button variant="text">Text</Button>
-  <Button variant="contained">Contained</Button>
-  <Button variant="outlined">Outlined</Button>
-</Canvas>
-
-### [](#best-practices)Best practices
-
-* Text button (low emphasis) - Text buttons are typically used for less important actions.
-* Outlined Button (medium emphasis) - Outlined buttons are used for more emphasis than text buttons due to the stroke.
-* Contained button (high emphasis) - Contained buttons have more emphasis, as they use a color fill and shadow.
-
-### [](#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=487%3A14431&amp;scaling=min-zoom&amp;page-id=310%3A35254&amp;starting-point-node-id=487%3A14431"
-/>

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

@@ -1,38 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Checkbox from '../../../../lib/components/atoms/Checkbox/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Chip from '@mui/material/Chip';
-
-<Meta title="Components/Inputs/Checkbox/Accessibility" />
-
-[](#checkbox-accessibility)Checkbox Accessibility <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>
-=================================================================================
-
-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 Checkboxes](https://www.w3.org/TR/wai-aria-practices/#checkbox) for more information.
-
-## [](#guidelines)Guidelines
-* Checkboxes must have a clear and concise description provided by a `<label>` element or `aria-label` attribute.
-* Users should be warned if selecting a checkbox will cause a change in context.
-* If the checkbox 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.
-
-### [](#when-to-use-this-component)When to use this component
-Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others.
-
-### [](#screen-readers)Screen readers
-Checkboxes 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={<Checkbox defaultChecked />} 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>
-  <Checkbox
-    inputProps={{
-      'aria-label': 'Your label goes here',
-    }}
-  />
-</Canvas>
-
-Use positive and active wording for checkbox labels, so that it's clear what will happen if the user turns on the checkbox. 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. Write checkbox labels so that users know both what will happen if they check a particular box, and what will happen if they leave it unchecked.

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

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import {
-  Bookmark as BookmarkIcon,
-  BookmarkBorder as BookmarkBorderIcon,
-  Favorite as FavoriteIcon,
-  FavoriteBorder as FavoriteBorderIcon
-} from '@mui/icons-material'
-import { Box, FormControlLabel, FormGroup } from '@mui/material'
-import Checkbox from '../../../../lib/components/atoms/Checkbox/Checkbox'
-
-const CheckboxGrid = (args: any): JSX.Element => {
-  const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
-
-  return (
-    <Box>
-      <Checkbox {...label} {...args} />
-      <Checkbox {...label} {...args} color="primary" />
-      <Checkbox {...label} {...args} color="secondary" />
-      <Checkbox {...label} {...args} color="error" />
-      <Checkbox {...label} {...args} color="success" />
-      <Checkbox {...label} {...args} color="info" />
-      <Checkbox {...label} {...args} color="warning" />
-      <Checkbox {...label} {...args} icon={<FavoriteBorderIcon />} checkedIcon={<FavoriteIcon />} />
-      <Checkbox {...label} {...args} icon={<BookmarkBorderIcon />} checkedIcon={<BookmarkIcon />} />
-      <FormGroup row>
-        <FormControlLabel control={<Checkbox {...label} {...args} />} label="Label"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} color="primary" />} label="Primary"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} color="secondary" />} label="Secondary"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} color="error" />} label="Error"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} color="success" />} label="Success"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} color="info" />} label="Info"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} color="warning" />} label="Warning"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} icon={<FavoriteBorderIcon />} checkedIcon={<FavoriteIcon />} />} label="Label"/>
-        <FormControlLabel control={<Checkbox {...label} {...args} icon={<BookmarkBorderIcon />} checkedIcon={<BookmarkIcon />} />} label="Label"/>
-      </FormGroup>
-    </Box>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { defaultChecked: true },
-    { },
-    { disabled: true },
-    { disabled: true, checked: true }
-  ]
-
-  return (
-    <Box>
-      {combinations.map(checkboxConfig => (
-        <CheckboxGrid {...checkboxConfig} />
-      ))}
-    </Box>
-  )
-}

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

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