@learningpool/ui 1.6.3 → 1.6.5

package/src/stories/Guidelines/Accessibility/SoundAndMotion.stories.mdx

@@ -1,59 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Button from '@mui/material/Button';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import AlertTitle from '@mui/material/AlertTitle';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import writing1 from '../../assets/writing-1.jpg';
-import writing2 from '../../assets/writing-2.png';
-import writing3 from '../../assets/writing-3.png';
-import writing4 from '../../assets/writing-4.png';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-
-<Meta title="Guidelines/Accessibility/Sound and Motion" />
-
-# [](#sound-and-motion)Sound and motion can ***enhance the user experience*** when used effectively
-
-<br/>
-<Divider />
-
-## [](#sound-motion)Sound and Motion
-Sound and motion can be used to enhance a user's experience; however, this must be done correctly to not overwhelm users or disrupt expectations.
-
-### [](#sound)Sound
-By adding clear and concise labels to UI elements, we can provide users a reliable way to navigate our products using sound. Some assistive technologies like screen readers will announce labels out loud when users navigate through UI elements by touch.
-
-Some UI elements can be difficult to use with screen readers when sounds play at the same time as the screen readers announce labels, such as background music or interaction effects.
-
-#### [](#sound-alternatives)Sound Alternatives
-Closed captions and transcripts can be used to provide visual alternatives to sounds effects and audio alerts.
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#sound-and-motion)
-
-<br/>
-
-### [](#motion)Motion
-Motion effects can be used to enhance the experience by guiding a user's focus between UI elements; however, overuse of motion effects can become distracting or disruptive to the overall experience.
-
-Material Design provides motion guidance based on the following from the W3C:
-
-- Enable content that [moves, scrolls, or blinks](https://www.w3.org/TR/WCAG20/#general-thresholddef) automatically to be paused, stopped, or hidden if it lasts more than five seconds
-- Limit flashing content to three times in a one-second period to meet [flash and red flash thresholds](https://www.w3.org/TR/WCAG20/#general-thresholddef)
-- Avoid [flashing large central regions](https://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G176) of the screen
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#sound-and-motion)
-
-<br/>
-
-### [](#timed-controls)Timed controls
-Controls in an app can be set to disappear after a certain amount of time. For example, five seconds after starting a video, playback controls can fade from the screen.
-
-#### [](#high-priority-controls)High-priority controls
-Controls that perform high-priority functions can be missed by users if timers cause them to disappear too quickly. For example, TalkBack reads controls out loud if they are focused on. Placing them on timers can prevent the controls from completing their task.
-
-Controls that enable important functions can allow users to turn them on again, or perform the same function in other ways. Learn more in Composition.
-
-[Material Design](https://m2.material.io/design/usability/accessibility.html#sound-and-motion)

package/src/stories/Guidelines/Accessibility/Typography.stories.mdx

@@ -1,69 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Button from '@mui/material/Button';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import AlertTitle from '@mui/material/AlertTitle';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import typography1 from '../../assets/typography-1.png';
-
-<Meta title="Guidelines/Accessibility/Typography" />
-
-# [](#typography)Typography is a core component of visual accessibility
-
-<br/>
-<Divider />
-
-## [](#accessible-typography)Accessible Typography
-Typography is the manner in which typefaces and fonts visual present text, and is a core component of visual accessibility.
-
-Our design system uses *Roboto* as our primary font for it's clean style, legibility and readability.
-
-<br/>
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img src={typography1} alt="Roboto font family examples of differnt styles" />
-  </Grid>
-  <Grid item xs={6}>
-    <p><em>"Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn't compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types."</em></p>
-    <a href="https://fonts.google.com/specimen/Roboto#about">-Google Fonts</a>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-
-## [](#font-size)Font Size
-
-Since many factors can impact the overall understandability of a typeface, the WCAG does not specify a minimum font size for web. Instead the WCAG guidelines focus more on contrast as a measure of visual accessibility. The WCAG also states that a user must be able to resize text up to 200% without using assistive technology and without loss of content or functionality.
-
-Most modern web browsers set a default font size of 16px on the html element, but this can be changed on the user level. Users change their font size settings for a variety of reasons, so our design system uses rem units when setting font sizes to better accommodate a user's settings and maximize accessibility support.
-
-<Alert severity="info">
-  <AlertTitle><b>Minimum font size</b></AlertTitle>
-  We recommend a <em>minimum font size of <b>14px</b></em> across all Learning Pool products.
-</Alert>
-
-<br/>
-<br/>
-
-## [](#readability-legibility)Typeface Readability & Legibility
-
-Both readability and legibility are related measures of visual clarity. Readability is a measure of how easy a user can read the text and legibility is a measure of how individual words or characters are distinguished by a user.
-
-*"When reading text, most people do not read or parse individual characters or even words. Instead, the eye quickly scans through text and parses patterns and groups of characters (typically 6-9 characters at a time) which are nearly instantaneously converted into meaning by the human brain. This subconscious process allows us to read and understand text content very quickly with high degrees of understanding, even though we aren't even seeing or thinking of characters and words.*
-
-*It is only when characters or words are unfamiliar or introduce a barrier to that direct pattern-to-meaning process that we must pause to more closely examine or process characters or words. For optimal readability and understandability, the key is to avoid those interruptions."*
-
-[**-WebAIM Font Techniques**](https://webaim.org/techniques/fonts/)
-
-Some principles to consider:
-1. Use simple, familiar, and easily-parsed fonts.
-2. Avoid character complexity
-3. Avoid character ambiguity
-4. Use a limited number of typefaces, fonts, and font variations.
-5. Consider spacing and weight.
-6. Ensure sufficient, but not too much, contrast between the text and the background.
-7. Avoid small font sizes and other anti-patterns.

package/src/stories/Guidelines/Accessibility/Writing.stories.mdx

@@ -1,188 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Button from '@mui/material/Button';
-import Alert from '@mui/material/Alert';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import AlertTitle from '@mui/material/AlertTitle';
-import Divider from '@mui/material/Divider';
-import Grid from '@mui/material/Grid';
-import writing1 from '../../assets/writing-1.jpg';
-import writing2 from '../../assets/writing-2.png';
-import writing3 from '../../assets/writing-3.png';
-import writing4 from '../../assets/writing-4.png';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-
-<Meta title="Guidelines/Accessibility/Writing" />
-
-# [](#accessible-writing)Accessibility text is used by assistive technologies to ***communicate information***.
-
-<br/>
-<Divider />
-
-## [](#accessibility-text)Accessibility Text
-Accessibility text is text that is utilized by assistive technologies such as screen readers like NVDA, JAWS or VoiceOver. These assistive technologies will announce text and UI elements to users, including both on-screen text and visibly hidden alternative text.
-
-### [](#visible-non-visible)Visible and Non-Visible Text
-Accessibility text includes both on-screen visible text and UI elements and visually hidden text such as image alt text or aria-label descriptions. We use WAI-ARIA attributes to provide additional information to users when necessary. By utilizing clear and meaningful visible and hidden text, we help all of our users successfully navigate our products and understand our content.
-
-### [](#alternative-text)Alternative Text
-*Alt text helps translate a visual UI into a text-based UI. Alt text is a short label (up to 125 characters) in the code that describes an image for users who are unable to see them. Since alt text is only for images, there is no need to add “image of” or “picture of” to the alt text. A screen reader will read the alt text aloud in place of the image. Alt text is valuable for sighted users as well as alt text appears if an image fails to load. Include targeted keywords to help inform the user about the image. Keywords can also improve search engine optimization (SEO)."*
-
-[Material Design 3](https://m3.material.io/foundations/accessible-design/accessibility-basics)
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img src={writing1} alt="Good example of alternative text on image" />
-    <p><em>Alt text: "Person walking on a trail in the mountains"</em></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>Use alt text to convey what the image is showing in an informative, short phrase.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img src={writing1} alt="Bad example of alternative text on image" />
-    <p><em>Alt text: "Landscape photo"</em></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Using only one or two words to describe an image may not be informative.</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>
-
-### [](#reading-speed)Reading Speed
-Screen reader users hear every UI element read aloud. The shorter the text, the faster a screen reader user can navigate it.
-
-[Material Design 3](https://m3.material.io/foundations/accessible-design/accessibility-basics)
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <p><b>Switch to user123@learningpool.com</b></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>Write clear and short accessibility text.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <p><b>Account switcher. Switch the active account to user123@learningpool.com</b></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Consider rewriting long and less concise accessibility text.</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>
-
-### [](#contol-types)Control Types and States
-Screen readers may automatically announce a control's type or state by either speaking the control name or making a sound.
-
-[Material Design 3](https://m3.material.io/foundations/accessible-design/accessibility-basics)
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <p><b>Search users</b></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>Write clear and short accessibility text.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <p><b>Search users field</b></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Usually the control type should not be stated because the ARIA label will announce the control type for screen reader users, making the extra label redundant.</p>
-  </Grid>
-  <br/>
-  <br/>
-  <br/>
-  <br/>
-  <br/>
-  <Grid item xs={6}>
-    <p><b>Download over Wi-Fi</b></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>Write clear and short accessibility text.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <p><b>Download over Wi-Fi is selected</b></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Consider not including the current state, in this case, that Wi-Fi is "selected".</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>
-
-### [](#action-elements)Indicating Elements by Action
-Action verbs indicate what an element or link does if activated, rather than what an element looks like. This describes what an element does without relying on visual acuity.
-
-[Material Design 3](https://m3.material.io/foundations/accessible-design/accessibility-basics)
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "100px"}} src={writing2} alt="UI toggle button" />
-    <p><b>"Open vertical navigation menu"</b></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>Accessibility text for a navigation menu could be 'Open navigation menu" and "Close navigation menu".</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "100px"}} src={writing2} alt="UI toggle button" />
-    <p><b>"Side menu"</b></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Consider revising accessibility text that doesn't indicate what action will occur, such as "Side menu".</p>
-  </Grid>
-  <br/>
-  <br/>
-  <br/>
-  <br/>
-  <br/>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "100px"}} src={writing3} alt="Edit icon" />
-    <p><b>"Edit"</b></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>The description read aloud indicates the action represented by the icon.</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "100px"}} src={writing3} alt="Edit icon" />
-    <p><b>"Pencil"</b></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Describing what the icon looks like may not explain what the action does.</p>
-  </Grid>
-</Grid>
-
-<br/>
-<br/>
-<br/>
-
-### [](#state-change)Elements with state changes
-For icons that toggle between values or states, announce the icon according to how it is presented to the user. For example, if a star icon represents the action of adding something to a wishlist, the app could verbalize "Add to wishlist" or "Remove from wishlist".
-
-- If the icon is a property of an item, screen readers will verbalize the current state (such as "on" or "off") if coded as a checkbox.
-- If the icon is an action and is selected, the text label can specify the action that occurs, such as "Add to wishlist".
-
-[Material Design 3](https://m3.material.io/foundations/accessible-design/accessibility-basics)
-
-<br/>
-<br/>
-<br/>
-
-### [](#control-interactions)Control Interactions
-Users might navigate with a keyboard or other device, not with their fingers or a mouse, which should be considered when describing for users how to interact with a control. Accessibility software will describe the correct interaction for the user.
-
-[Material Design 3](https://m3.material.io/foundations/accessible-design/accessibility-basics)
-
-<br/>
-<Grid container  sx={{ width: '100%' }} spacing={2}>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "100px"}} src={writing4} alt="UI toggle button" />
-    <p><b>"Voice Search"</b></p>
-    <p><CheckCircleIcon color="success" /> <b>Correct</b></p>
-    <p>The command "voice search" describes the user task (search) paired with the input method (voice).</p>
-  </Grid>
-  <Grid item xs={6}>
-    <img style={{maxWidth: "100px"}} src={writing4} alt="UI toggle button" />
-    <p><b>"Tap to speak"</b></p>
-    <p><ErrorIcon color="error" /> <b>Caution</b></p>
-    <p>Consider revising commands that don't fully express how to activate a control. This voice command says "tap", even though it could be selected via a keyboard press, switch device, or braille display. Because this is a task to perform a search, the action could be mentioned instead of "speak".</p>
-  </Grid>
-</Grid>

package/src/stories/Guidelines/Styleguide/ColorSwatch.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardMedia from '@mui/material/CardMedia'
-import Typography from '@mui/material/Typography'
-import { rgbToHex } from '@mui/material/'
-
-export default function ColorSwatch ({ colorValue, colorTheme }): JSX.Element {
-  return (
-    <Card
-      sx={{
-        minWidth: '250px'
-      }}
-    >
-      <CardMedia
-        sx={{
-          backgroundColor: colorValue,
-          width: '100%',
-          height: '100px'
-        }}
-      />
-      <CardContent>
-        <Typography
-          sx={{
-            fontSize: '1.1rem',
-            fontWeight: 'bold',
-            marginBottom: '.25rem'
-          }}
-          component="div"
-        >
-          {rgbToHex(colorValue)}
-        </Typography>
-        <Typography
-          sx={{
-            fontSize: '1rem'
-          }}
-          component='div'
-        >
-          {colorValue}
-        </Typography>
-        <Typography
-          sx={{
-            color: 'text.secondary',
-            fontSize: '1rem'
-          }}
-          component='div'
-        >
-          {String(colorTheme)}
-        </Typography>
-      </CardContent>
-    </Card>
-  )
-}

package/src/stories/Guidelines/Styleguide/Colors.stories.mdx

@@ -1,118 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import Card from '@mui/material/Card'
-import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
-import Typography from '@mui/material/Typography'
-import ColorSwatch from './ColorSwatch'
-import DesignTokens from '@learningpool/design-tokens'
-import Chip from '../../../lib/components/datadisplay/Chip/Chip'
-import Stack from '@mui/material/Stack'
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../utils/CustomIcons';
-
-<Meta title="Guidelines/Styleguide/Colors" />
-
-[](#design-system-colors)Colors
-=================================================================================
-The Design System uses design tokens and themes to consistenly manage colors across products.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/material-ui/customization/color/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI Color" variant="outlined" />
-</Stack>
-
-## [](#palette)Palette
-<Typography mt={4} mb={1} variant="h5">Primary</Typography>
-<Grid container spacing={2} direction="row">
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.primary.light} colorTheme="theme.palette.primary.light"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.primary.main} colorTheme="theme.palette.primary.main"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.primary.dark} colorTheme="theme.palette.primary.dark"/>
-  </Grid>
-</Grid>
-
-<Typography mt={4} mb={1} variant="h5">Secondary</Typography>
-<Grid container spacing={2} direction="row">
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.secondary.light} colorTheme="theme.palette.secondary.light"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.secondary.main} colorTheme="theme.palette.secondary.main"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.secondary.dark} colorTheme="theme.palette.secondary.dark"/>
-  </Grid>
-</Grid>
-
-<Typography mt={4} mb={1} variant="h5">Error</Typography>
-<Grid container spacing={2} direction="row">
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.error.light} colorTheme="theme.palette.error.light"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.error.main} colorTheme="theme.palette.error.main"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.error.dark} colorTheme="theme.palette.error.dark"/>
-  </Grid>
-</Grid>
-
-<Typography mt={4} mb={1} variant="h5">Warning</Typography>
-<Grid container spacing={2} direction="row">
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.warning.light} colorTheme="theme.palette.warning.light"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.warning.main} colorTheme="theme.palette.warning.main"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.warning.dark} colorTheme="theme.palette.warning.dark"/>
-  </Grid>
-</Grid>
-
-<Typography mt={4} mb={1} variant="h5">Info</Typography>
-<Grid container spacing={2} direction="row">
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.info.light} colorTheme="theme.palette.info.light"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.info.main} colorTheme="theme.palette.info.main"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.info.dark} colorTheme="theme.palette.info.dark"/>
-  </Grid>
-</Grid>
-
-<Typography mt={4} mb={1} variant="h5">Success</Typography>
-<Grid container mb={8} spacing={2} direction="row">
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.success.light} colorTheme="theme.palette.success.light"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.success.main} colorTheme="theme.palette.success.main"/>
-  </Grid>
-  <Grid item>
-    <ColorSwatch colorValue={DesignTokens.palette.success.dark} colorTheme="theme.palette.success.dark"/>
-  </Grid>
-</Grid>
-
-## [](#guidelines)Color Guidelines
-The theme exposes the following palette colors (*accessible under theme.palette.*):
-
-- **primary** - Used to represent primary UI elements. It's the color displayed most frequently across our system.
-- **secondary** - Used to represent secondary UI elements. It provides ways to accent elements. Using it is optional.
-- **error** - Used to represent interface elements that the user should be made aware of.
-- **warning** - Used to represent potentially dangerous actions or important messages.
-- **info** - Used to present information to the user that is neutral and not necessarily important.
-- **success** - Used to indicate the successful completion of an action that user triggered.
-
-For more information about color, check out the [MUI color section](https://mui.com/material-ui/customization/color/).
-
-## [](#accessibility)Color Accessibility
-Contrast must always pass the WCAG AA requirements for text and background colors.
-The size of the text is an import factor when determining the proper accessibile contrast ratio.
-For example, light text on a dark background may pass AA guidelines at 16px, but it may require a higher font weight or size for 13px text using the same color combinations.
-
-See [Material Design Color and Contrast](https://material.io/design/usability/accessibility.html#color-and-contrast) for more information.

package/src/stories/Guidelines/Styleguide/Typography.stories.mdx

@@ -1,84 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import Card from '@mui/material/Card'
-import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
-import Typography from '@mui/material/Typography'
-import ColorSwatch from './ColorSwatch'
-import DesignTokens from '@learningpool/design-tokens'
-import Chip from '../../../lib/components/datadisplay/Chip/Chip'
-import Stack from '@mui/material/Stack'
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../utils/CustomIcons';
-
-<Meta title="Guidelines/Styleguide/Typography" />
-
-[](#design-system-typography)Typography
-=================================================================================
-The Design System uses design tokens and themes to consistenly manage typography across products.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/material-ui/react-typography/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI Typography" variant="outlined" />
-</Stack>
-
-## [](#typography-general)General
-The Roboto font will not be automatically loaded by MUI. You are responsible for loading any fonts used in your application. Roboto Font has a few easy ways to get started.
-
-## Roboto Font CDN
-Shown below is a sample link markup used to load the Roboto font from a CDN:
-
-```
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-/>
-```
-
-## [](#typography-variants)Variants
-<Box sx={{ width: '100%', maxWidth: 500 }}>
-  <Typography variant="h1" gutterBottom>
-    h1. Heading
-  </Typography>
-  <Typography variant="h2" gutterBottom>
-    h2. Heading
-  </Typography>
-  <Typography variant="h3" gutterBottom>
-    h3. Heading
-  </Typography>
-  <Typography variant="h4" gutterBottom>
-    h4. Heading
-  </Typography>
-  <Typography variant="h5" gutterBottom>
-    h5. Heading
-  </Typography>
-  <Typography variant="h6" gutterBottom>
-    h6. Heading
-  </Typography>
-  <Typography variant="subtitle1" gutterBottom>
-    subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-    blanditiis tenetur
-  </Typography>
-  <Typography variant="subtitle2" gutterBottom>
-    subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-    blanditiis tenetur
-  </Typography>
-  <Typography variant="body1" gutterBottom>
-    body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-    blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
-    neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
-    quasi quidem quibusdam.
-  </Typography>
-  <Typography variant="body2" gutterBottom>
-    body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
-    blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur,
-    neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
-    quasi quidem quibusdam.
-  </Typography>
-  <Typography variant="button" display="block" gutterBottom>
-    button text
-  </Typography>
-  <Typography variant="caption" display="block" gutterBottom>
-    caption text
-  </Typography>
-  <Typography variant="overline" display="block" gutterBottom>
-    overline text
-  </Typography>
-</Box>

package/src/stories/Introduction.stories.mdx

@@ -1,65 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import AtomicDesign from './assets/Atomic_Design_Icons-Dark.svg';
-import Atoms from './assets/atoms.svg';
-import Molecules from './assets/molecules.svg';
-import Organisms from './assets/organisms.svg';
-import Templates from './assets/templates.svg';
-import Pages from './assets/pages.svg';
-
-<Meta title="Introduction" />
-
-[](#introduction-to-the-learning-pool-design-system)Introduction to the Learning Pool Design System
-=================================================================================
-
-The Learning Pool Design System was created to help us build products for our customers more efficiently. Established to be the single source of truth for product teams working on Learning Pool products across the globe, the Learning Pool Design System contains everything from Getting Started guides through to Core Components intended for adoption within each product. It enables product teams to design and develop with speed, consistency, and quality. Our dedicated Design System team works with the individual product teams across Learning Pool to ensure the system continues to evolve to meet the needs of our designers, developers, and customers.
-
-## [](#atomic-design)Atomic Design
-<div class="sbdocs-section-container">
-  <a href=".?path=/docs/components-atoms-button-overview--page"><img src={Atoms} alt="Atomic Design - Atoms" /></a>
-  <a href=".?path=/docs/components-molecules-button-overview--page"><img src={Molecules} alt="Atomic Design - Molecules" /></a>
-  <a href=".?path=/docs/components-organisms-button-overview--page"><img src={Organisms} alt="Atomic Design - Organisms" /></a>
-  <a href=".?path=/docs/components-templates-button-overview--page"><img src={Templates} alt="Atomic Design - Templates" /></a>
-  <a href=".?path=/docs/components-pages-button-overview--page"><img src={Pages} alt="Atomic Design - Pages" /></a>
-</div>
-
-----------------------------------------------
-
-## [](#styleguide)Style Guide
-
-Our Design Tokens can be viewed on the design file on [**Figma DS: Design Tokens**](https://www.figma.com/file/8iprnWcQv5V6y9lKbKY6N3/DS%3A-Design-Tokens?node-id=0%3A1).
-
-These are synced up with the Github repo found here [**learningpool/design-tokens**](https://github.com/learningpool/design-tokens).
-
-_There is further work to be done to separate the tokens into light/dark/global JSON files and potentially the same will be done when we get to client themes_
-
-----------------------------------------------
-
-Style guides contain specific implementation guidelines, visual references, and design principles for creating interfaces or other design deliverables. The most common style guides tend to focus on branding (colours, typography, trademarks, logos, and print media), but style guides also offer guidance on content (such as tone of voice and language recommendations) and visual- and interaction-design standards (also known as front-end style guides). These guidelines are sometimes incorporated into the component library as well, to provide relevant guidance in context.
-
-## [](#component-library)Component Library
-
-Our Component Library is currently in development but it will be built using [**Storybook**](https://storybook.js.org) and have its own subdomain for access, currently at [**storybook.learningpool.com**](https://storybook.learningpool.com).
-
-The component library will contain Components ready to be used in our projects.
-
-It is built upon Material UI [**MUI**](https://mui.com) and only extended to meet the Design requirements for our usage.
-
-----------------------------------------------
-
-Component libraries (also known as design libraries) are what many people associate with design systems: these thorough libraries house predetermined, reusable UI elements and serve as a one-stop-shop for designers and developers alike to learn about and implement specific UI elements. Creating these libraries takes significant time and resources. In addition to visual examples of components, they include:
-*   Component name: a specific and unique UI component name, to avoid miscommunication between designers and developers
-*   Description: a clear explanation for what this element is and how it is typically used, occasionally accompanied by do’s and don’ts for context and clarification
-*   Attributes: variables or adjustments that can be made to customize or adapt the component for specific needs (i.e., color, size, shape, copy)
-*   State: recommended defaults and the subsequent changes in appearance
-*   Code snippets: the actual code excerpt for the element (some design systems go as far as sharing multiple examples and offering a “sandbox” environment to try out different component customizations)
-*   Front-end & backend frameworks to implement the library (if applicable), to avoid painful and unnecessary debugging
-
-## [](#pattern-library)Pattern Library
-
-Our Pattern Library is currently in development but it will be built using [**Storybook**](https://storybook.js.org) and have its own subdomain for access, currently at [**storybook.learningpool.com**](https://storybook.learningpool.com).
-
-The pattern library will contain Templates and Pages ready to be used in our projects.
-
-----------------------------------------------
-
-Sometimes, the terms ‘component library’ and ‘pattern library’ are used synonymously; however, there is a distinction between these two types of libraries.  Component libraries specify individual UI elements, while pattern libraries feature collections of UI-element groupings or layouts. Pattern libraries are often thought of as less robust compared to component libraries, but they can be as thorough or as high-level as needed. They typically feature content structures, layouts, and/or templates. Much like the components, the patterns are meant to be reused and adapted.