@learningpool/ui 1.6.0-beta.9 → 1.6.1

package/src/stories/Components/Feedback/Alert/Examples.stories.tsx

@@ -0,0 +1,137 @@
+import { Stack } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import Alert from '../../../../lib/components/feedback/Alert/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+import Button from '../../../../lib/components/atoms/Button/Button'
+import CheckIcon from '@mui/icons-material/Check'
+import AllCombinations from './AllCombinations'
+
+export default {
+  title: 'Components/Feedback/Alert/Examples',
+  component: Alert
+} as ComponentMeta<typeof Alert>
+
+export const Default: ComponentStory<typeof Alert> = (args) => {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      <Alert severity="error">This is an error alert — check it out!</Alert>
+      <Alert severity="warning">This is a warning alert — check it out!</Alert>
+      <Alert severity="info">This is an info alert — check it out!</Alert>
+      <Alert severity="success">This is a success alert — check it out!</Alert>
+    </Stack>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Alert.Default
+    }
+  }
+}
+
+export const Description: ComponentStory<typeof Alert> = (args) => {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      <Alert severity="error">
+        <AlertTitle>Error</AlertTitle>
+        This is an error alert — <strong>check it out!</strong>
+      </Alert>
+      <Alert severity="warning">
+        <AlertTitle>Warning</AlertTitle>
+        This is a warning alert — <strong>check it out!</strong>
+      </Alert>
+      <Alert severity="info">
+        <AlertTitle>Info</AlertTitle>
+        This is an info alert — <strong>check it out!</strong>
+      </Alert>
+      <Alert severity="success">
+        <AlertTitle>Success</AlertTitle>
+        This is a success alert — <strong>check it out!</strong>
+      </Alert>
+    </Stack>
+  )
+}
+Description.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Alert.Description
+    }
+  }
+}
+
+export const Actions: ComponentStory<typeof Alert> = (args) => {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
+      <Alert
+        action={
+          <Button color="success" size="small">
+            UNDO
+          </Button>
+        }
+      >
+        This is a success alert — check it out!
+      </Alert>
+    </Stack>
+  )
+}
+Actions.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Alert.Actions
+    }
+  }
+}
+
+export const Icons: ComponentStory<typeof Alert> = (args) => {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
+        This is a success alert — check it out!
+      </Alert>
+      <Alert icon={false} severity="success">
+        This is a success alert — check it out!
+      </Alert>
+    </Stack>
+  )
+}
+Icons.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Alert.Icons
+    }
+  }
+}
+
+export const Variants: ComponentStory<typeof Alert> = (args) => {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      <Alert variant="filled" severity="success">
+        This is a success alert — check it out!
+      </Alert>
+      <Alert variant="outlined" severity="success">
+        This is a success alert — check it out!
+      </Alert>
+    </Stack>
+  )
+}
+Variants.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Alert.Variants
+    }
+  }
+}
+
+export const All: ComponentStory<typeof AllCombinations> = (args) => (
+  <AllCombinations />
+)
+All.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Alert.All
+    }
+  }
+}

package/src/stories/Components/Feedback/Alert/Overview.stories.mdx

@@ -0,0 +1,62 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Alert from '../../../../lib/components/feedback/Alert/Alert';
+import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+<Meta title="Components/Feedback/Alert/Overview" component={Alert} />
+
+[](#alert-overview)Alert Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Feedback/Alert/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+### [](#what-does-it-do)What does it do?
+
+An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
+
+<Stack direction="row" spacing={1}>
+  <Chip clickable component="a" href="https://mui.com/components/alertes/" 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#alertes" 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=1142%3A17936&scaling=min-zoom&page-id=1141%3A18763&starting-point-node-id=1142%3A17936" 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/Alert" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
+</Stack>
+
+### [](#why-use-it)Why use it?
+
+* Use alerts to inform users of important status changes and updates.
+* Task-generated alerts are initiated in response to user action and they give direct, immediate feedback.
+* System-generated alerts are initiated by the system, independent of user action and they provide updates on background system status or out-of-context events that have finished.
+
+### [](#how-to-implement-it)How to implement it?
+
+The basic Alert component includes four severity levels that set a distinctive icon and color.
+
+<Canvas isExpanded>
+<Stack sx={{ width: '100%' }} spacing={2}>
+  <Alert severity="error">This is an error alert — check it out!</Alert>
+  <Alert severity="warning">This is a warning alert — check it out!</Alert>
+  <Alert severity="info">This is an info alert — check it out!</Alert>
+  <Alert severity="success">This is a success alert — check it out!</Alert>
+</Stack>
+</Canvas>
+
+### [](#when-to-avoid-it)When to avoid it?
+
+* Only use alerts when necessary. Frequent interruptions can create a frustrating user experience, so these should be limited when possible.
+* Frequent distractions lower productivity and can lead to alert fatigue.
+
+### [](#best-practices)Best practices
+
+Alert severity helps convey the information being communicated and corresponds with a color and icon to provide a consistent, universal experience for users.
+* `severity="info"` - Provides additional information to users that may not be tied to their current action or task.
+* `severity="success"` - Confirms a task was completed as expected.
+* `severity="warning"` - Informs users that their actions are not desirable or might have unexpected results.
+* `severity="error"` - Informs users of an error or critical failure.
+
+### [](#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/Autocomplete/Accessibility.stories.mdx

@@ -0,0 +1,31 @@
+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 Chip from '@mui/material/Chip';
+import { top100Films } from '../../../assets/testData'
+
+<Meta title="Components/Inputs/Autocomplete/Accessibility" />
+
+[](#autocomplete-accessibility)Autocomplete Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/Autocomplete/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/#combobox) for more information.
+
+## [](#guidelines)Guidelines
+* The Autocomplete component automatically implements the WAI-ARIA authoring best practices. However, you need to be sure to add a descriptive `label` to the `TextField` component.
+
+### [](#when-to-use-this-component)When to use this component
+Use and Autocomplete component when you want to provide users with a panel of options or to suggest a word or phrase based on a user's input.
+
+### [](#screen-readers)Screen readers
+Be sure to add a clear and concise `label` to the `TextField` to ensure that screen readers can understand the purpose of the component.
+<Canvas isExpanded>
+<Autocomplete
+  renderInput={(params) => <TextField {...params} label="Description here" />}
+  id="combo-box-demo"
+  options={top100Films.map((option) => option.title)}
+  sx={{ width: 300 }}
+/>
+</Canvas>

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

@@ -0,0 +1,182 @@
+import { Box } from '@mui/material'
+import * as React from 'react'
+import Autocomplete from '../../../../lib/components/atoms/Autocomplete/Autocomplete'
+import TextField from '../../../../lib/components/atoms/TextField/TextField'
+import Stack from '@mui/material/Stack'
+import { top100Films } from '../../../assets/testData'
+
+interface FilmOptionType {
+  title: string
+  year: number
+}
+
+const AutocompleteGrid = (args: any): JSX.Element => {
+  const defaultProps = {
+    options: top100Films,
+    getOptionLabel: (option: FilmOptionType) => option.title || ''
+  }
+  const flatProps = {
+    options: top100Films.map((option) => option.title)
+  }
+  const [value, setValue] = React.useState<any>(null)
+
+  return (
+    <Stack spacing={1} sx={{ width: 300 }}>
+      <Autocomplete
+        {...defaultProps}
+        id="disable-close-on-select"
+        disableCloseOnSelect
+        renderInput={(params) => (
+          <TextField {...params} label="disableCloseOnSelect" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="clear-on-escape"
+        clearOnEscape
+        renderInput={(params) => (
+          <TextField {...params} label="clearOnEscape" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="disable-clearable"
+        disableClearable
+        renderInput={(params) => (
+          <TextField {...params} label="disableClearable" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="include-input-in-list"
+        includeInputInList
+        renderInput={(params) => (
+          <TextField {...params} label="includeInputInList" />
+        )}
+      />
+      <Autocomplete
+        {...flatProps}
+        id="flat-demo"
+        renderInput={(params) => (
+          <TextField {...params} label="flat" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="controlled-demo"
+        value={value}
+        onChange={(event: any, newValue: any) => {
+          setValue(newValue)
+        }}
+        renderInput={(params) => (
+          <TextField {...params} label="controlled" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="auto-complete"
+        autoComplete
+        includeInputInList
+        renderInput={(params) => (
+          <TextField {...params} label="autoComplete" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="disable-list-wrap"
+        disableListWrap
+        renderInput={(params) => (
+          <TextField {...params} label="disableListWrap" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="open-on-focus"
+        openOnFocus
+        renderInput={(params) => (
+          <TextField {...params} label="openOnFocus" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="auto-highlight"
+        autoHighlight
+        renderInput={(params) => (
+          <TextField {...params} label="autoHighlight" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="auto-select"
+        autoSelect
+        renderInput={(params) => (
+          <TextField {...params} label="autoSelect" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="disabled"
+        disabled
+        renderInput={(params) => (
+          <TextField {...params} label="disabled" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="disable-portal"
+        disablePortal
+        renderInput={(params) => (
+          <TextField {...params} label="disablePortal" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="blur-on-select"
+        blurOnSelect
+        renderInput={(params) => (
+          <TextField {...params} label="blurOnSelect" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="clear-on-blur"
+        clearOnBlur
+        renderInput={(params) => (
+          <TextField {...params} label="clearOnBlur" />
+        )}
+      />
+      <Autocomplete
+        {...defaultProps}
+        id="select-on-focus"
+        selectOnFocus
+        renderInput={(params) => (
+          <TextField {...params} label="selectOnFocus" />
+        )}
+      />
+      <Autocomplete
+        {...flatProps}
+        id="readOnly"
+        readOnly
+        defaultValue={[flatProps.options[13]]}
+        renderInput={(params) => (
+          <TextField {...params} label="readOnly" />
+        )}
+      />
+    </Stack>
+  )
+}
+
+export default function AllCombinations (): JSX.Element {
+  const combinations = [
+    { },
+    { freeSolo: true }
+  ]
+
+  return (
+    <Box>
+      {combinations.map((AutocompleteConfig, i) => (
+        <AutocompleteGrid key={i} {...AutocompleteConfig} />
+      ))}
+    </Box>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import Autocomplete from '../../../../lib/components/atoms/Autocomplete/Autocomplete'
+import TextField from '../../../../lib/components/atoms/TextField/TextField'
+import { top100Films } from '../../../assets/testData'
+
+export default {
+  title: 'Components/Inputs/Autocomplete/Properties',
+  component: Autocomplete,
+  parameters: {
+    controls: {
+      sort: 'requiredFirst'
+    }
+  },
+  addons: {
+    panelPosition: 'right'
+  }
+} as ComponentMeta<typeof Autocomplete>
+
+// 👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Autocomplete> = (args) => <Autocomplete {...args} />
+
+export const Properties = Template.bind({})
+Properties.args = {
+  renderInput: (params) => (
+    <TextField {...params} label="Top 100 Movies" />
+  ),
+  options: top100Films.map((option) => option.title),
+  id: 'combo-box-demo',
+  sx: { width: 300 }
+}

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

@@ -0,0 +1,233 @@
+import { Stack } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import Autocomplete from '../../../../lib/components/atoms/Autocomplete/Autocomplete'
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip'
+import TextField from '../../../../lib/components/atoms/TextField/TextField'
+import AllCombinations from './AllCombinations'
+import { top100Films } from '../../../assets/testData'
+
+export default {
+  title: 'Components/Inputs/Autocomplete/Examples',
+  component: Autocomplete
+} as ComponentMeta<typeof Autocomplete>
+
+// For grouped demo
+const options = top100Films.map((option) => {
+  const firstLetter = option.title[0].toUpperCase()
+  return {
+    firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
+    ...option
+  }
+})
+
+// For disabled options demo
+const timeSlots = Array.from(new Array(24 * 2)).map(
+  (_, index) =>
+    `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${
+      index % 2 === 0 ? '00' : '30'
+    }`
+)
+
+export const Default: ComponentStory<typeof Autocomplete> = (args) => (
+  <Autocomplete
+    id="default-demo"
+    options={[]}
+    sx={{ width: 300 }}
+    renderInput={(params) => <TextField {...params} label="Demo" />}
+  />
+)
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Autocomplete.Default
+    }
+  }
+}
+
+export const ComboBox: ComponentStory<typeof Autocomplete> = (args) => (
+  <Autocomplete
+    id="combo-box-demo"
+    options={top100Films.map((option) => option.title)}
+    sx={{ width: 300 }}
+    renderInput={(params) => <TextField {...params} label="Movie" />}
+  />
+)
+ComboBox.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Autocomplete.ComboBox
+    }
+  }
+}
+
+export const FreeSolo: ComponentStory<typeof Autocomplete> = (args) => (
+  <Stack spacing={2} sx={{ width: 300 }}>
+    <Autocomplete
+      id="free-solo-demo"
+      freeSolo
+      options={top100Films.map((option) => option.title)}
+      renderInput={(params) => <TextField {...params} label="freeSolo" />}
+    />
+    <Autocomplete
+      freeSolo
+      id="free-solo-2-demo"
+      disableClearable
+      options={top100Films.map((option) => option.title)}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Search input"
+          InputProps={{
+            ...params.InputProps,
+            type: 'search'
+          }}
+        />
+      )}
+    />
+  </Stack>
+)
+FreeSolo.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Autocomplete.FreeSolo
+    }
+  }
+}
+
+export const Grouped: ComponentStory<typeof Autocomplete> = (args) => (
+  <Autocomplete
+    id="grouped-demo"
+    options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
+    groupBy={(option) => option.firstLetter}
+    getOptionLabel={(option) => option.name || ''}
+    sx={{ width: 300 }}
+    renderInput={(params) => <TextField {...params} label="With categories" />}
+  />
+)
+Grouped.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Autocomplete.Grouped
+    }
+  }
+}
+
+export const DisabledOptions: ComponentStory<typeof Autocomplete> = (args) => (
+  <Autocomplete
+    id="disabled-options-demo"
+    options={timeSlots}
+    getOptionDisabled={(option) =>
+      option === timeSlots[0] || option === timeSlots[2]
+    }
+    sx={{ width: 300 }}
+    renderInput={(params) => <TextField {...params} label="Disabled options" />}
+  />
+)
+DisabledOptions.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Autocomplete.DisabledOptions
+    }
+  }
+}
+
+export const MultipleValues: ComponentStory<typeof Autocomplete> = (args) => (
+  <Stack spacing={3} sx={{ width: 500 }}>
+    <Autocomplete
+      multiple
+      id="tags-standard"
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+      defaultValue={[top100Films[13]]}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Multiple values"
+          placeholder="Favorites"
+        />
+      )}
+    />
+    <Autocomplete
+      multiple
+      id="tags-outlined"
+      options={top100Films}
+      getOptionLabel={(option) => option.title}
+      defaultValue={[top100Films[13]]}
+      filterSelectedOptions
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="filterSelectedOptions"
+          placeholder="Favorites"
+        />
+      )}
+    />
+    <Autocomplete
+      multiple
+      id="tags-filled"
+      options={top100Films.map((option) => option.title)}
+      defaultValue={[top100Films[13].title]}
+      freeSolo
+      renderTags={(value: readonly string[], getTagProps) =>
+        value.map((option: string, index: number) => (
+          <Chip variant="outlined" label={option} {...getTagProps({ index })} />
+        ))
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="freeSolo"
+          placeholder="Favorites"
+        />
+      )}
+    />
+    <Autocomplete
+      multiple
+      id="tags-readOnly"
+      options={top100Films.map((option) => option.title)}
+      defaultValue={[top100Films[12].title, top100Films[13].title]}
+      readOnly
+      renderInput={(params) => (
+        <TextField {...params} label="readOnly" placeholder="Favorites" />
+      )}
+    />
+  </Stack>
+)
+MultipleValues.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Autocomplete.MultipleValues
+    }
+  }
+}
+
+export const Sizes: ComponentStory<typeof Autocomplete> = (args) => (
+  <Stack spacing={2}>
+    <Autocomplete
+      id="size-demo-1"
+      size='small'
+      options={top100Films.map((option) => option.title)}
+      sx={{ width: 300 }}
+      renderInput={(params) => <TextField {...params} label="Movie" />}
+    />
+    <Autocomplete
+      id="size-demo-2"
+      options={top100Films.map((option) => option.title)}
+      sx={{ width: 300 }}
+      renderInput={(params) => <TextField {...params} label="Movie" />}
+    />
+  </Stack>
+)
+Sizes.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Autocomplete.Sizes
+    }
+  }
+}
+
+export const All: ComponentStory<typeof AllCombinations> = (args) => (
+  <AllCombinations />
+)