@learningpool/ui 1.6.0 → 1.6.1

package/src/stories/Components/DataDisplay/Tooltip/Accessibility.stories.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Tooltip from '../../../../lib/components/datadisplay/Tooltip/Tooltip';
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
+import Button from '../../../../lib/components/atoms/Button/Button';
+import { Box, Typography, IconButton} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+<Meta title="Components/Data Display/Tooltip/Accessibility" />
+
+[](#Tooltip-accessibility)Tooltip Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/DataDisplay/Tooltip/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
+The component handles most of the work necessary to make it accessible. However, you need to make sure that:
+
+* Tooltips can be hard to discover in the UI for some users because they lack visual cues, so try to use them consistently to increase awareness.
+* Tooltips have moderate contrast against the background.
+
+### [](#when-to-use-this-component)When to use this component
+Tooltips are used when you want a user-triggered messages that provides additional information about an element or feature.
+
+### [](#screen-readers)Screen readers
+By default, the tooltip only labels its child element. This is notably different from `title` which can either label or describe its child depending on whether the child already has a label. If you want the tooltip to act as an accessible description you can pass `describeChild`. Note that you shouldn't use `describeChild` if the tooltip provides the only visual label. Otherwise, the child would have no accessible name and the tooltip would violate [success criterion 2.5.3 in WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).
+<Canvas isExpanded>
+<>
+  <Tooltip title="Delete">
+  <IconButton>
+    <DeleteIcon />
+  </IconButton>
+  </Tooltip>
+  <Tooltip describeChild title="Does not add if it already exists.">
+    <Button>Add</Button>
+  </Tooltip>
+</>
+</Canvas>

package/src/stories/Components/DataDisplay/Tooltip/AllCombinations.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react'
+import { Stack, Box, ClickAwayListener } from '@mui/material'
+import Tooltip from '../../../../lib/components/datadisplay/Tooltip/Tooltip'
+import Button from '../../../../lib/components/atoms/Button/Button'
+import Fade from '@mui/material/Fade'
+import Zoom from '@mui/material/Zoom'
+
+const TooltipGrid = (args: any): JSX.Element => {
+  const [open, setOpen] = React.useState(false)
+
+  const handleTooltipClose = (): void => {
+    setOpen(false)
+  }
+
+  const handleTooltipOpen = (): void => {
+    setOpen(true)
+  }
+
+  return (
+    <>
+      <Stack direction="row" spacing={1} alignItems="center" mb={2}>
+        <Tooltip disableFocusListener title="Add">
+          <Button>Hover or touch</Button>
+        </Tooltip>
+        <Tooltip disableHoverListener title="Add">
+          <Button>Focus or touch</Button>
+        </Tooltip>
+        <Tooltip disableFocusListener disableTouchListener title="Add">
+          <Button>Hover</Button>
+        </Tooltip>
+        <ClickAwayListener onClickAway={handleTooltipClose}>
+          <div>
+            <Tooltip
+              PopperProps={{
+                disablePortal: true
+              }}
+              onClose={handleTooltipClose}
+              open={open}
+              disableFocusListener
+              disableHoverListener
+              disableTouchListener
+              title="Add"
+            >
+              <Button onClick={handleTooltipOpen}>Click</Button>
+            </Tooltip>
+          </div>
+        </ClickAwayListener>
+        <Tooltip title="You don't have permission to do this" followCursor>
+          <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
+            Disabled Action
+          </Box>
+        </Tooltip>
+      </Stack>
+
+      <Stack direction="row" spacing={10} alignItems="center" mb={2}>
+        <Tooltip title="Add">
+          <Button>Grow</Button>
+        </Tooltip>
+        <Tooltip
+          TransitionComponent={Fade}
+          TransitionProps={{ timeout: 600 }}
+          title="Add"
+        >
+          <Button>Fade</Button>
+        </Tooltip>
+        <Tooltip TransitionComponent={Zoom} title="Add">
+          <Button>Zoom</Button>
+        </Tooltip>
+      </Stack>
+
+      <Stack direction="row" spacing={10} alignItems="center" mb={2}>
+        <Tooltip title="Add" placement="top-start">
+          <Button>top-start</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="top">
+          <Button>top</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="top-end">
+          <Button>top-end</Button>
+        </Tooltip>
+      </Stack>
+
+      <Stack direction="row" spacing={10} alignItems="center" mb={2}>
+        <Tooltip title="Add" placement="left-start">
+          <Button>left-start</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="left">
+          <Button>left</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="left-end">
+          <Button>left-end</Button>
+        </Tooltip>
+      </Stack>
+
+      <Stack direction="row" spacing={10} alignItems="center" mb={2}>
+        <Tooltip title="Add" placement="right-start">
+          <Button>right-start</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="right">
+          <Button>right</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="right-end">
+          <Button>right-end</Button>
+        </Tooltip>
+      </Stack>
+
+      <Stack direction="row" spacing={10} alignItems="center" mb={2}>
+        <Tooltip title="Add" placement="bottom-start">
+          <Button>bottom-start</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="bottom">
+          <Button>bottom</Button>
+        </Tooltip>
+        <Tooltip title="Add" placement="bottom-end">
+          <Button>bottom-end</Button>
+        </Tooltip>
+      </Stack>
+    </>
+  )
+}
+
+export default function AllCombinations (): JSX.Element {
+  const combinations = [
+    { }
+  ]
+
+  return (
+    <Stack>
+      {combinations.map(TooltipConfig => (
+        <TooltipGrid {...TooltipConfig} />
+      ))}
+    </Stack>
+  )
+}

package/src/stories/Components/DataDisplay/Tooltip/Examples.stories.tsx

@@ -0,0 +1,237 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import Tooltip from '../../../../lib/components/datadisplay/Tooltip/Tooltip'
+import Button from '../../../../lib/components/atoms/Button/Button'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import DeleteIcon from '@mui/icons-material/Delete'
+import IconButton from '@mui/material/IconButton'
+import Fade from '@mui/material/Fade'
+import Zoom from '@mui/material/Zoom'
+import AllCombinations from './AllCombinations'
+
+export default {
+  title: 'Components/Data Display/Tooltip/Examples',
+  component: Tooltip
+} as ComponentMeta<typeof Tooltip>
+
+export const Default: ComponentStory<typeof Tooltip> = (args): JSX.Element => {
+  return (
+    <Tooltip title="Delete">
+      <IconButton>
+        <DeleteIcon />
+      </IconButton>
+    </Tooltip>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Tooltip.Default
+    }
+  }
+}
+
+export const Position: ComponentStory<typeof Tooltip> = (args): JSX.Element => {
+  return (
+    <Box sx={{ width: 500 }}>
+      <Grid container justifyContent="center">
+        <Grid item spacing={2}>
+          <Tooltip title="Add" placement="top-start">
+            <Button>top-start</Button>
+          </Tooltip>
+          <Tooltip title="Add" placement="top">
+            <Button>top</Button>
+          </Tooltip>
+          <Tooltip title="Add" placement="top-end">
+            <Button>top-end</Button>
+          </Tooltip>
+        </Grid>
+      </Grid>
+      <Grid container justifyContent="center">
+        <Grid item xs={6} spacing={2}>
+          <Tooltip title="Add" placement="left-start">
+            <Button>left-start</Button>
+          </Tooltip>
+          <br />
+          <Tooltip title="Add" placement="left">
+            <Button>left</Button>
+          </Tooltip>
+          <br />
+          <Tooltip title="Add" placement="left-end">
+            <Button>left-end</Button>
+          </Tooltip>
+        </Grid>
+        <Grid item container xs={6} alignItems="flex-end" direction="column">
+          <Grid item spacing={2}>
+            <Tooltip title="Add" placement="right-start">
+              <Button>right-start</Button>
+            </Tooltip>
+          </Grid>
+          <Grid item spacing={2}>
+            <Tooltip title="Add" placement="right">
+              <Button>right</Button>
+            </Tooltip>
+          </Grid>
+          <Grid item spacing={2}>
+            <Tooltip title="Add" placement="right-end">
+              <Button>right-end</Button>
+            </Tooltip>
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid container justifyContent="center">
+        <Grid item spacing={2}>
+          <Tooltip title="Add" placement="bottom-start">
+            <Button>bottom-start</Button>
+          </Tooltip>
+          <Tooltip title="Add" placement="bottom">
+            <Button>bottom</Button>
+          </Tooltip>
+          <Tooltip title="Add" placement="bottom-end">
+            <Button>bottom-end</Button>
+          </Tooltip>
+        </Grid>
+      </Grid>
+    </Box>
+  )
+}
+Position.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Tooltip.Position
+    }
+  }
+}
+
+export const Triggers: ComponentStory<typeof Tooltip> = (args): JSX.Element => {
+  const [open, setOpen] = React.useState(false)
+
+  const handleTooltipClose = (): void => {
+    setOpen(false)
+  }
+
+  const handleTooltipOpen = (): void => {
+    setOpen(true)
+  }
+
+  return (
+    <div>
+      <Grid container justifyContent="center">
+        <Grid item>
+          <Tooltip disableFocusListener title="Add">
+            <Button>Hover or touch</Button>
+          </Tooltip>
+        </Grid>
+        <Grid item>
+          <Tooltip disableHoverListener title="Add">
+            <Button>Focus or touch</Button>
+          </Tooltip>
+        </Grid>
+        <Grid item>
+          <Tooltip disableFocusListener disableTouchListener title="Add">
+            <Button>Hover</Button>
+          </Tooltip>
+        </Grid>
+        <Grid item>
+          <ClickAwayListener onClickAway={handleTooltipClose}>
+            <div>
+              <Tooltip
+                PopperProps={{
+                  disablePortal: true
+                }}
+                onClose={handleTooltipClose}
+                open={open}
+                disableFocusListener
+                disableHoverListener
+                disableTouchListener
+                title="Add"
+              >
+                <Button onClick={handleTooltipOpen}>Click</Button>
+              </Tooltip>
+            </div>
+          </ClickAwayListener>
+        </Grid>
+      </Grid>
+    </div>
+  )
+}
+Triggers.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Tooltip.Triggers
+    }
+  }
+}
+
+export const Transitions: ComponentStory<typeof Tooltip> = (args): JSX.Element => {
+  return (
+    <div>
+      <Tooltip title="Add">
+        <Button>Grow</Button>
+      </Tooltip>
+      <Tooltip
+        TransitionComponent={Fade}
+        TransitionProps={{ timeout: 600 }}
+        title="Add"
+      >
+        <Button>Fade</Button>
+      </Tooltip>
+      <Tooltip TransitionComponent={Zoom} title="Add">
+        <Button>Zoom</Button>
+      </Tooltip>
+    </div>
+  )
+}
+Transitions.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Tooltip.Transitions
+    }
+  }
+}
+
+export const FollowCursor: ComponentStory<typeof Tooltip> = (args): JSX.Element => {
+  return (
+    <Tooltip title="You don't have permission to do this" followCursor>
+      <Box sx={{ bgcolor: 'text.disabled', color: 'background.paper', p: 2 }}>
+        Disabled Action
+      </Box>
+    </Tooltip>
+  )
+}
+FollowCursor.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Tooltip.FollowCursor
+    }
+  }
+}
+
+export const ShowingAndHiding: ComponentStory<typeof Tooltip> = (args): JSX.Element => {
+  return (
+    <Tooltip title="Add" enterDelay={500} leaveDelay={200}>
+      <Button>[500ms, 200ms]</Button>
+    </Tooltip>
+  )
+}
+ShowingAndHiding.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Tooltip.ShowingAndHiding
+    }
+  }
+}
+
+export const All: ComponentStory<typeof AllCombinations> = (args): JSX.Element => (
+  <AllCombinations />
+)
+All.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Tooltip.All
+    }
+  }
+}

package/src/stories/Components/DataDisplay/Tooltip/Overview.stories.mdx

@@ -0,0 +1,58 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Tooltip from '../../../../lib/components/datadisplay/Tooltip/Tooltip';
+import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
+import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
+import Stack from '@mui/material/Stack';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
+
+<Meta title="Components/Data Display/Tooltip/Overview" component={Tooltip} />
+
+[](#component-overview)Tooltip Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Guidelines/Templates/ComponentOverview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+### [](#what-does-it-do)What does it do?
+
+Tooltips display informative text when users hover over, focus on, or tap an element.
+
+<Stack direction="row" spacing={1}>
+  <Chip clickable component="a" href="https://mui.com/components/radio-buttons/" 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#radio-buttons" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
+  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#radiobutton" 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=1065%3A17356&scaling=min-zoom&page-id=1059%3A17709&starting-point-node-id=1065%3A17356" 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/Radio" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
+</Stack>
+
+### [](#why-use-it)Why use it?
+
+* When activated, Tooltips can provide additional context for an element, such as a description of its function.
+
+### [](#how-to-implement-it)How to implement it?
+
+Below is basic example of the Tooltip component used with an IconButton:
+
+<Canvas isExpanded>
+<Tooltip title="Delete">
+  <IconButton>
+    <DeleteIcon />
+  </IconButton>
+</Tooltip>
+</Canvas>
+
+### [](#when-to-avoid-it)When to avoid it?
+
+* Do not use a Tooltip when you need to communicate critial information to a user.
+
+### [](#best-practices)Best practices
+
+* The information in a Tooltip should be contextual, useful, and nonessential.
+* Ensure the position of the Tooltip does not block related content.
+
+### [](#design-prototype)Design prototype
+<iframe
+  allowfullscreen
+  frameborder="0"
+  height="350"
+  width="100%"
+  src="https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1142%3A17936&amp;scaling=min-zoom&amp;page-id=1141%3A18763&amp;starting-point-node-id=1142%3A17936"
+/>

package/src/stories/Components/DataDisplay/Tooltip/Tooltip.stories.tsx

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

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

@@ -0,0 +1,25 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Alert from '../../../../lib/components/feedback/Alert/Alert';
+import Chip from '@mui/material/Chip';
+
+<Meta title="Components/Feedback/Alert/Accessibility" />
+
+[](#alert-accessibility)Alert Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Feedback/Alert/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 Alert](https://www.w3.org/TR/wai-aria-practices/#alert) for more information.
+
+## [](#guidelines)Guidelines
+* Don't use alerts that dismiss on a timer for critical or emergency messages. Some users may need more time to read or interact with messages and timed toasts may not provide sufficient time.
+* Users should be able to manage or limit noncritical alerts. This gives users the control to reduce the number of distractions or disruptions they receive, which is particularly helpful for users with cognitive limitations.
+
+### [](#when-to-use-this-component)When to use this component
+Use an alert when you want to display a short, important message in a way that attracts the user's attention without interrupting the user's task.
+
+### [](#screen-readers)Screen readers
+When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads.
+
+### [](#color-and-contrast)Color and contrast
+Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text.

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

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

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

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Stack } from '@mui/material'
+import Alert from '../../../../lib/components/feedback/Alert/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+import CheckIcon from '@mui/icons-material/Check'
+
+const AlertGrid = (args: any): JSX.Element => {
+  return (
+    <Stack sx={{ width: '100%' }} spacing={1}>
+      <Alert {...args}>Alert message.</Alert>
+      <Alert {...args} icon={<CheckIcon fontSize="inherit" />}>Alert message.</Alert>
+      <Alert {...args}><AlertTitle>Error</AlertTitle>Alert message.</Alert>
+      <Alert {...args} onClose={() => {}}>Alert message.</Alert>
+    </Stack>
+  )
+}
+
+export default function AllCombinations (): JSX.Element {
+  const combinations = [
+    { severity: 'error', variant: 'outlined' },
+    { severity: 'warning', variant: 'outlined' },
+    { severity: 'info', variant: 'outlined' },
+    { severity: 'success', variant: 'outlined' },
+    { severity: 'error', variant: 'filled' },
+    { severity: 'warning', variant: 'filled' },
+    { severity: 'info', variant: 'filled' },
+    { severity: 'success', variant: 'filled' }
+  ]
+
+  return (
+    <Stack sx={{ width: '100%' }} spacing={2}>
+      {combinations.map(alertConfig => (
+        <AlertGrid {...alertConfig} />
+      ))}
+    </Stack>
+  )
+}