@learningpool/ui 1.6.2 → 1.6.5

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

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

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

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

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

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

@@ -1,233 +0,0 @@
-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 />
-)