@learningpool/ui 1.6.0 → 1.6.1

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

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

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

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