@learningpool/ui 1.6.0 → 1.6.1

package/src/stories/Components/Landmarks/Header/Overview.stories.mdx

@@ -0,0 +1,44 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Header } from '../../../../lib/'
+import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+<Meta title="Components/Landmarks/Header/Overview" component={Header} />
+
+[](#mobile-navigation-overview)Header Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Navigation/Drawer/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+### [](#what-does-it-do)What does it do?
+
+The Header component provides a simple consistent landmark for each page. It supports a title and breadcrumbs to provide location information. It also supports additional information via the subtitle and can allow interactions with the call to action and additional quick actions.
+
+<Stack direction="row" spacing={1}>
+  <Chip clickable component="a" href="https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=487%3A14431&amp;scaling=min-zoom&amp;page-id=310%3A35254&amp;starting-point-node-id=487%3A14431" 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/landmarks/Header" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
+</Stack>
+
+### [](#why-use-it)Why use it?
+
+Most websites contain a Header as its a standard landmark, usually containing a Header 1 which is required on each page to meet accessibility standards. The component provided has very litte bells and whistles but tried to provide the basics required in almost all instances. The main reason is consistency across various products, in combination with a consistent navigation each product will feel familiar to our end users. Futher information about the reasons for the header structure can be found in our [Design System documentation](https://learninglocker.atlassian.net/wiki/spaces/PX/pages/3619029045/Header#Rational).
+
+### [](#how-to-implement-it)How to implement it?
+
+You can see a basic example of the Header component below.
+
+<Canvas isExpanded>
+  <Story id="components-landmarks-header-examples--overview" />
+</Canvas>
+
+### [](#best-practices)Best practices
+
+* Use the Header component to provide a consistent and required landmark.
+* Set the title using the `title` prop (required).
+* Optional props for `breadcrumbs`, `subtitle`, `callToAction` and `additionalButtons`.
+
+### [](#future-considerations)Future considerations
+
+* none
+
+### [](#design-prototype)Design prototype
+TODO: Add design prototype

package/src/stories/Components/Navigation/Drawer/Accessibility.stories.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Chip from '@mui/material/Chip';
+
+<Meta title="Components/Navigation/Drawer/Accessibility" />
+
+[](#drawer-accessibility)Drawer Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Navigation/Drawer/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.
+
+## [](#accessibility-guidelines)Guidelines
+* The Drawer component automatically handles the work necessary to make it accessible.
+* Be sure to follow all accessibility guidelines for the elements used within the Drawer.

package/src/stories/Components/Navigation/Drawer/Drawer.stories.tsx

@@ -0,0 +1,80 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { Drawer, Button } from '../../../../lib/'
+import { Box, List, ListItem, ListItemText, ListItemButton } from '@mui/material'
+import AppsIcon from '@mui/icons-material/Apps'
+
+export default {
+  title: 'Components/Navigation/Drawer/Properties',
+  component: Drawer,
+  parameters: {
+    controls: {
+      sort: 'requiredFirst'
+    }
+  },
+  addons: {
+    panelPosition: 'right'
+  }
+} as ComponentMeta<typeof Drawer>
+
+// 👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Drawer> = (args) => {
+  type Anchor = 'left'
+
+  const [state, setState] = React.useState({ left: false })
+
+  const toggleDrawer =
+    (anchor: Anchor, open: boolean) =>
+      (event: React.KeyboardEvent | React.MouseEvent) => {
+        if (
+          event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+        ) {
+          return
+        }
+
+        setState({ ...state, [anchor]: open })
+      }
+
+  return (
+    <>
+      <Button aria-label="Toggle Drawer" onClick={toggleDrawer('left', true)}>
+        <AppsIcon />
+      </Button>
+      <Drawer
+        anchor={'left'}
+        open={state.left}
+        onClose={toggleDrawer('left', false)}
+      >
+        <Box
+          sx={{ width: 250 }}
+          role="presentation"
+          onClick={toggleDrawer('left', false)}
+          onKeyDown={toggleDrawer('left', false)}
+        >
+          <List>
+            <ListItem>
+              <ListItemButton>
+                <ListItemText primary="One" />
+              </ListItemButton>
+            </ListItem>
+            <ListItem>
+              <ListItemButton>
+                <ListItemText primary="Two" />
+              </ListItemButton>
+            </ListItem>
+            <ListItem>
+              <ListItemButton>
+                <ListItemText primary="Three" />
+              </ListItemButton>
+            </ListItem>
+          </List>
+        </Box>
+      </Drawer>
+    </>
+  )
+}
+
+export const Properties = Template.bind({})
+Properties.args = {}

package/src/stories/Components/Navigation/Drawer/Examples.stories.tsx

@@ -0,0 +1,440 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import { styled, useTheme } from '@mui/material/styles'
+import { Drawer, Button } from '../../../../lib/'
+import {
+  Box, List, ListItem, ListItemButton, Stack,
+  ListItemIcon, ListItemText, Divider, CssBaseline,
+  Toolbar, Typography, IconButton, AppBar
+} from '@mui/material'
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
+import InboxIcon from '@mui/icons-material/MoveToInbox'
+import MailIcon from '@mui/icons-material/Mail'
+import AppsIcon from '@mui/icons-material/Apps'
+import MenuIcon from '@mui/icons-material/Menu'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+
+export default {
+  title: 'Components/Navigation/Drawer/Examples',
+  component: Drawer
+} as ComponentMeta<typeof Drawer>
+
+export const Default: ComponentStory<typeof Drawer> = (args) => {
+  type Anchor = 'left'
+
+  const [state, setState] = React.useState({ left: false })
+
+  const toggleDrawer =
+    (anchor: Anchor, open: boolean) =>
+      (event: React.KeyboardEvent | React.MouseEvent) => {
+        if (
+          event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+        ) {
+          return
+        }
+
+        setState({ ...state, [anchor]: open })
+      }
+
+  return (
+    <>
+      <Button aria-label="Toggle Drawer" onClick={toggleDrawer('left', true)}>
+        <AppsIcon />
+      </Button>
+      <Drawer
+        anchor={'left'}
+        open={state.left}
+        onClose={toggleDrawer('left', false)}
+      >
+        <Box
+          sx={{ width: 250 }}
+          role="presentation"
+          onClick={toggleDrawer('left', false)}
+          onKeyDown={toggleDrawer('left', false)}
+        >
+          <List>
+            <ListItem>
+              <ListItemButton>
+                <ListItemText primary="One" />
+              </ListItemButton>
+            </ListItem>
+            <ListItem>
+              <ListItemButton>
+                <ListItemText primary="Two" />
+              </ListItemButton>
+            </ListItem>
+            <ListItem>
+              <ListItemButton>
+                <ListItemText primary="Three" />
+              </ListItemButton>
+            </ListItem>
+          </List>
+        </Box>
+      </Drawer>
+    </>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.Drawer.Default
+    },
+    source: {
+      type: 'code'
+    }
+  }
+}
+
+// eslint-disable-next-line no-undef
+export const TemporaryDrawer: ComponentStory<typeof AllCombinations> = (args) => {
+  type Anchor = 'top' | 'left' | 'bottom' | 'right'
+
+  const [state, setState] = React.useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false
+  })
+
+  const toggleDrawer =
+    (anchor: Anchor, open: boolean) =>
+      (event: React.KeyboardEvent | React.MouseEvent) => {
+        if (
+          event.type === 'keydown' &&
+        ((event as React.KeyboardEvent).key === 'Tab' ||
+          (event as React.KeyboardEvent).key === 'Shift')
+        ) {
+          return
+        }
+
+        setState({ ...state, [anchor]: open })
+      }
+
+  const list: any = (anchor: Anchor) => (
+    <Box
+      sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
+      role="presentation"
+      onClick={toggleDrawer(anchor, false)}
+      onKeyDown={toggleDrawer(anchor, false)}
+    >
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+    </Box>
+  )
+
+  return (
+    <Stack direction={'row'} spacing={2}>
+      {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+        <React.Fragment key={anchor}>
+          <Button aria-label="Toggle Drawer" onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
+          <Drawer
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+          >
+            {list(anchor)}
+          </Drawer>
+        </React.Fragment>
+      ))}
+    </Stack>
+  )
+}
+TemporaryDrawer.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Drawer.TemporaryDrawer
+    },
+    source: {
+      type: 'code'
+    }
+  }
+}
+
+export const PersistentDrawer: ComponentStory<typeof Drawer> = (args) => {
+  const drawerWidth = 240
+
+  const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
+    open?: boolean
+  }>(({ theme, open }) => ({
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    marginLeft: `-${drawerWidth}px`,
+    ...(open && {
+      transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen
+      }),
+      marginLeft: 0
+    })
+  }))
+
+  interface AppBarProps extends MuiAppBarProps {
+    open?: boolean
+  }
+
+  const AppBar = styled(MuiAppBar, {
+    shouldForwardProp: (prop) => prop !== 'open'
+  })<AppBarProps>(({ theme, open }) => ({
+    transition: theme.transitions.create(['margin', 'width'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    ...(open && {
+      width: `calc(100% - ${drawerWidth}px)`,
+      marginLeft: `${drawerWidth}px`,
+      transition: theme.transitions.create(['margin', 'width'], {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen
+      })
+    })
+  }))
+
+  const DrawerHeader = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: 'flex-end'
+  }))
+
+  const theme = useTheme()
+  const [open, setOpen] = React.useState(false)
+
+  const handleDrawerOpen = (): void => {
+    setOpen(true)
+  }
+
+  const handleDrawerClose = (): void => {
+    setOpen(false)
+  }
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      <AppBar position="fixed" open={open}>
+        <Toolbar>
+          <IconButton
+            color="inherit"
+            aria-label="open drawer"
+            onClick={handleDrawerOpen}
+            edge="start"
+            sx={{ mr: 2, ...(open && { display: 'none' }) }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography variant="h6" noWrap component="div">
+            Persistent drawer
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            boxSizing: 'border-box'
+          }
+        }}
+        variant="persistent"
+        anchor="left"
+        open={open}
+      >
+        <DrawerHeader>
+          <IconButton onClick={handleDrawerClose}>
+            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+          </IconButton>
+        </DrawerHeader>
+        <Divider />
+        <List>
+          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+        </List>
+        <Divider />
+        <List>
+          {['All mail', 'Trash', 'Spam'].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+        </List>
+      </Drawer>
+      <Main open={open}>
+        <DrawerHeader />
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
+          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
+          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
+          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
+          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
+          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
+          sapien faucibus et molestie ac.
+        </Typography>
+        <Typography paragraph>
+          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
+          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
+          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
+          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
+          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
+          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
+          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
+          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
+          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+          posuere sollicitudin aliquam ultrices sagittis orci a.
+        </Typography>
+      </Main>
+    </Box>
+  )
+}
+PersistentDrawer.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Drawer.PersistentDrawer
+    },
+    source: {
+      type: 'code'
+    }
+  }
+}
+
+export const PermanentDrawer: ComponentStory<typeof Drawer> = (args) => {
+  const drawerWidth = 240
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}
+      >
+        <Toolbar>
+          <Typography variant="h6" noWrap component="div">
+            Permanent drawer
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            boxSizing: 'border-box'
+          }
+        }}
+        variant="permanent"
+        anchor="left"
+      >
+        <Toolbar />
+        <Divider />
+        <List>
+          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+        </List>
+        <Divider />
+        <List>
+          {['All mail', 'Trash', 'Spam'].map((text, index) => (
+            <ListItem button key={text}>
+              <ListItemIcon>
+                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+              </ListItemIcon>
+              <ListItemText primary={text} />
+            </ListItem>
+          ))}
+        </List>
+      </Drawer>
+      <Box
+        component="main"
+        sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
+      >
+        <Toolbar />
+        <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
+          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
+          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
+          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
+          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
+          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
+          sapien faucibus et molestie ac.
+        </Typography>
+        <Typography paragraph>
+          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
+          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
+          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
+          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
+          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
+          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
+          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
+          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
+          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+          posuere sollicitudin aliquam ultrices sagittis orci a.
+        </Typography>
+      </Box>
+    </Box>
+  )
+}
+PermanentDrawer.parameters = {
+  docs: {
+    description: {
+      story: DOCS.Drawer.PermanentDrawer
+    },
+    source: {
+      type: 'code'
+    }
+  }
+}

package/src/stories/Components/Navigation/Drawer/Overview.stories.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Drawer } from '../../../../lib/'
+import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+
+<Meta title="Components/Navigation/Drawer/Overview" component={Drawer} />
+
+[](#drawer-overview)Drawer Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Navigation/Drawer/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
+=================================================================================
+
+### [](#what-does-it-do)What does it do?
+
+Navigation drawers provide access to destinations in your app.
+
+<Stack direction="row" spacing={1}>
+  <Chip clickable component="a" href="https://mui.com/components/drawers/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
+  <Chip clickable component="a" href="https://material.io/components/navigation-drawer" 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=487%3A14431&amp;scaling=min-zoom&amp;page-id=310%3A35254&amp;starting-point-node-id=487%3A14431" 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/navigation/Drawer" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
+</Stack>
+
+### [](#why-use-it)Why use it?
+
+* Use a Drawer component when you want to provide a user with easy access to destinations and app functionality.
+
+### [](#how-to-implement-it)How to implement it?
+
+Below is a basic example of the Drawer component.
+
+<Canvas isExpanded>
+  <Story id="components-navigation-drawer-examples--default" />
+</Canvas>
+
+### [](#best-practices)Best practices
+
+* You can use the `temporary` variant to display a drawer for small screens and `permanent` for a drawer for wider screens.
+* Persistent navigation drawers are acceptable for all sizes larger than mobile.
+* Permanent navigation drawers are the recommended default for desktop.
+* The mini variant is recommended for apps sections that need quick selection access alongside content.
+
+### [](#design-prototype)Design prototype
+TODO: Add design prototype

package/src/stories/Components/Navigation/MobileNavigation/Accessibility.stories.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Chip from '@mui/material/Chip';
+
+<Meta title="Components/Navigation/Mobile Navigation/Accessibility" />
+
+[](#mobile-navigation-accessibility)Mobile Navigation Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Navigation/Drawer/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.
+
+## [](#accessibility-guidelines)Guidelines
+* The Mobile Navigation component automatically handles the work necessary to make it accessible.
+* Be sure to follow all accessibility guidelines for the elements used within the component.
+* The Mobile Navigation component is keyboard accessible and provides a focus trap when open.