@learningpool/ui 1.6.3 → 1.6.5

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

@@ -1,261 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import TextField from '../../../../lib/components/atoms/TextField/TextField'
-
-export default {
-  title: 'Components/Inputs/TextField/Properties',
-  component: TextField,
-  argTypes: {
-    autoComplete: {
-      description: "This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).",
-      control: { type: 'text' },
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    autoFocus: {
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'If true, the input element is focused during the first mount.'
-    },
-    classes: {
-      description: 'Override or extend the styles applied to the component. See CSS API below for more details.',
-      control: { type: 'object' },
-      table: {
-        type: { summary: 'object' }
-      }
-    },
-    color: {
-      options: ['primary', 'secondary', 'error', 'info', 'success', 'warning'],
-      description: 'The color of the component. It supports those theme colors that make sense for this component.',
-      control: { type: 'radio' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'primary' }
-      }
-    },
-    defaultValue: {
-      control: { type: 'any' },
-      table: {
-        type: { summary: 'any' }
-      },
-      description: 'The default value. Use when the component is not controlled.'
-    },
-    disabled: {
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'If true, the component is disabled.'
-    },
-    error: {
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'If true, the label is displayed in an error state.'
-    },
-    helperText: {
-      description: 'The helper text content.',
-      control: { type: 'node' },
-      table: {
-        type: { summary: 'node' }
-      }
-    },
-    FormHelperTextProps: {
-      description: 'Props applied to the FormHelperText element.',
-      control: { type: 'object' },
-      table: {
-        type: { summary: 'object' }
-      }
-    },
-    fullWidth: {
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'If true, the input will take up the full width of its container.'
-    },
-    InputLabelProps: {
-      description: 'Props applied to the InputLabel element. Pointer events like onClick are enabled if and only if shrink is true.',
-      control: { type: 'object' },
-      table: {
-        type: { summary: 'object' }
-      }
-    },
-    id: {
-      description: 'The id of the input element. Use this prop to make label and helperText accessible for screen readers.',
-      control: { type: 'text' },
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    inputProps: {
-      description: 'Attributes applied to the input element.',
-      control: { type: 'object' },
-      table: {
-        type: { summary: 'object' }
-      }
-    },
-    InputProps: {
-      description: 'Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.',
-      control: { type: 'object' },
-      table: {
-        type: { summary: 'object' }
-      }
-    },
-    inputRef: {
-      description: 'Pass a ref to the input element.',
-      control: { type: 'ref' },
-      table: {
-        type: { summary: 'ref' }
-      }
-    },
-    label: {
-      description: 'The label content.',
-      control: { type: 'node' },
-      table: {
-        type: { summary: 'node' }
-      }
-    },
-    margin: {
-      options: ['dense', 'none', 'normal'],
-      description: 'If dense or normal, will adjust vertical spacing of this and contained components.',
-      control: { type: 'radio' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'none' }
-      }
-    },
-    maxRows: {
-      description: 'Maximum number of rows to display when multiline option is set to true.',
-      control: { type: 'number' },
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    minRows: {
-      description: 'Minimum number of rows to display when multiline option is set to true.',
-      control: { type: 'number' },
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    multiline: {
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'If true, a textarea element is rendered instead of an input.'
-    },
-    name: {
-      description: 'Name attribute of the input element.',
-      control: { type: 'text' },
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    onChange: {
-      description: 'Callback fired when the value is changed.\n\nSignature:`function(event: object) => void` event: The event source of the callback. You can pull out the new value by accessing `event.target.value` (string).',
-      control: { type: 'function' },
-      table: {
-        type: { summary: 'function' }
-      }
-    },
-    placeholder: {
-      description: 'The short hint displayed in the input before the user enters a value.',
-      control: { type: 'text' },
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    required: {
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'If true, the label is displayed as required and the input element is required.'
-    },
-    rows: {
-      description: 'Number of rows to display when multiline option is set to true.',
-      control: { type: 'number' },
-      table: {
-        type: { summary: 'number' }
-      }
-    },
-    SelectProps: {
-      description: 'Props applied to the Select element.',
-      control: { type: 'object' },
-      table: {
-        type: { summary: 'object' }
-      }
-    },
-    select: {
-      control: { type: 'boolean' },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' }
-      },
-      description: 'Render a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.'
-    },
-    size: {
-      options: ['medium', 'small'],
-      description: 'The size of the component.',
-      control: { type: 'radio' },
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    sx: {
-      options: ['Array<func | object | bool>', 'func', 'object'],
-      description: 'The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.',
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    type: {
-      description: 'Type of the input element. It should be a valid HTML5 input type.',
-      control: { type: 'text' },
-      table: {
-        type: { summary: 'string' }
-      }
-    },
-    value: {
-      description: 'The value of the input element, required for a controlled component.',
-      table: {
-        type: { summary: 'any' }
-      }
-    },
-    variant: {
-      options: ['filled', 'outlined', 'standard'],
-      description: 'The variant to use. @TODO: Learning Pool default is outlined, and the TextField component is extending the OutlinedInput variant so we don\'t encourage or support the other variant types for TextField.',
-      control: { type: 'radio' },
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'outlined' }
-      }
-    }
-  },
-  parameters: {
-    controls: {
-      sort: 'requiredFirst'
-    }
-  }
-  // addons: {
-  //   panelPosition: 'right'
-  // }
-} as ComponentMeta<typeof TextField>
-
-// 👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof TextField> = (args) => <TextField {...args} />
-
-export const Properties = Template.bind({})
-Properties.args = {}

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

@@ -1,32 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import ToggleButton from '../../../../lib/components/atoms/ToggleButton/ToggleButton';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Chip from '@mui/material/Chip';
-
-<Meta title="Components/Inputs/ToggleButton/Accessibility" />
-
-[](#ToggleButton-accessibility)ToggleButton Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/ToggleButton/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](https://www.w3.org/TR/wai-aria-practices/) for more information.
-
-## [](#guidelines)Guidelines
-* A ToggleButton should have a clear and concise label provided with `aria-label`, `aria-labelledby` or `<label>`.
-* ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
-
-### [](#when-to-use-this-component)When to use this component
-Use a ToggleButton when you want to group or emphasize related options.
-
-### [](#screen-readers)Screen readers
-All ToggleButtons should have a label. The easiest way is with an `aria-label`.
-<Canvas isExpanded>
-  <ToggleButton aria-label="label">ToggleButton</ToggleButton>
-</Canvas>
-
-You can also use a linked description with `aria-labelledby`.
-<Canvas isExpanded>
-  <div id="toggle-description">ToggleButton description</div>
-  <ToggleButton aria-labelledby="toggle-description">ToggleButton</ToggleButton>
-</Canvas>

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

@@ -1,113 +0,0 @@
-
-import * as React from 'react'
-import { Stack } from '@mui/material'
-import ToggleButton from '../../../../lib/components/atoms/ToggleButton/ToggleButton'
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'
-import FormatBoldIcon from '@mui/icons-material/FormatBold'
-import FormatItalicIcon from '@mui/icons-material/FormatItalic'
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined'
-import FormatColorFillIcon from '@mui/icons-material/FormatColorFill'
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
-
-const ToggleButtonGrid = (args: any): JSX.Element => {
-  const [alignment, setAlignment] = React.useState<string | null>('left')
-
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string | null
-  ): void => {
-    setAlignment(newAlignment)
-  }
-
-  const [formats, setFormats] = React.useState(() => ['bold', 'italic'])
-
-  const handleFormat = (
-    event: React.MouseEvent<HTMLElement>,
-    newFormats: string[]
-  ): void => {
-    setFormats(newFormats)
-  }
-
-  return (
-    <>
-      <ToggleButtonGroup
-        {...args}
-        value={alignment}
-        exclusive
-        onChange={handleAlignment}
-        aria-label="text alignment"
-        color="primary"
-      >
-        <ToggleButton {...args} value="left" aria-label="left aligned">
-          <FormatAlignLeftIcon />
-        </ToggleButton>
-        <ToggleButton {...args} value="center" aria-label="centered">
-          <FormatAlignCenterIcon />
-        </ToggleButton>
-        <ToggleButton {...args} value="right" aria-label="right aligned">
-          <FormatAlignRightIcon />
-        </ToggleButton>
-        <ToggleButton {...args} value="justify" aria-label="justified" disabled>
-          <FormatAlignJustifyIcon />
-        </ToggleButton>
-      </ToggleButtonGroup>
-
-      <ToggleButtonGroup
-        {...args}
-        value={formats}
-        onChange={handleFormat}
-        aria-label="text formatting"
-        color="primary"
-      >
-        <ToggleButton {...args} value="bold" aria-label="bold">
-          <FormatBoldIcon />
-        </ToggleButton>
-        <ToggleButton {...args} value="italic" aria-label="italic">
-          <FormatItalicIcon />
-        </ToggleButton>
-        <ToggleButton {...args} value="underlined" aria-label="underlined">
-          <FormatUnderlinedIcon />
-        </ToggleButton>
-        <ToggleButton {...args} value="color" aria-label="color" disabled>
-          <FormatColorFillIcon />
-          <ArrowDropDownIcon />
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { color: 'primary', size: 'small' },
-    { color: 'primary' },
-    { color: 'primary', size: 'large' },
-    { color: 'secondary', size: 'small' },
-    { color: 'secondary' },
-    { color: 'secondary', size: 'large' },
-    { color: 'error', size: 'small' },
-    { color: 'error' },
-    { color: 'error', size: 'large' },
-    { color: 'success', size: 'small' },
-    { color: 'success' },
-    { color: 'success', size: 'large' },
-    { color: 'info', size: 'small' },
-    { color: 'info' },
-    { color: 'info', size: 'large' },
-    { color: 'warning', size: 'small' },
-    { color: 'warning' },
-    { color: 'warning', size: 'large' }
-  ]
-
-  return (
-    <Stack sx={{ width: '100%' }} spacing={2}>
-      {combinations.map(toggleButtonConfig => (
-        <ToggleButtonGrid {...toggleButtonConfig} />
-      ))}
-    </Stack>
-  )
-}