@learningpool/ui 1.6.0 → 1.6.1

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

@@ -0,0 +1,384 @@
+import { createTheme, PaletteMode, ThemeProvider, useTheme } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import * as React from 'react'
+import { DOCS } from '../../../../docs'
+import { MobileNavigation, Typography, Button } from '../../../../lib'
+import { lightTheme, darkTheme } from '../../../../lib/utils'
+import MailIcon from '@mui/icons-material/Mail'
+import GroupIcon from '@mui/icons-material/Group'
+import { Home, LibraryAdd, MenuBook } from '@mui/icons-material'
+
+export default {
+  title: 'Components/Navigation/Mobile Navigation/Examples',
+  component: MobileNavigation
+} as ComponentMeta<typeof MobileNavigation>
+
+export const Default: ComponentStory<typeof MobileNavigation> = (args) => {
+  const theme = useTheme()
+  const [themeMode, setThemeMode] = React.useState<PaletteMode>('light')
+  const [isPersistent, setPersistentMode] = React.useState(false)
+
+  const testTheme = createTheme({
+    palette: {
+      mode: themeMode,
+      // ...darkTheme
+      ...(theme.palette.mode === 'dark' && { ...darkTheme.palette }),
+      ...(theme.palette.mode === 'light' && { ...lightTheme.palette })
+    }
+  })
+
+  const items = [
+    { label: 'Lorem ipsum' },
+    {
+      label: 'Testing',
+      icon: <GroupIcon />,
+      onClick: () => console.log('Action: Testing item clicked'),
+      children: [
+        {
+          label: 'First Item',
+          onClick: () => console.log('Action: First sub item clicked')
+        },
+        { label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do' },
+        { label: 'Third Item' },
+        { label: 'Forth Item' }
+      ]
+    },
+    { label: 'Sed do eiusmod tempor incididunt ut labore' }
+  ]
+  const secondaryItems = [
+    { label: 'Lorem ipsum' },
+    { label: 'Dolar sit amet' },
+    { label: 'Sed do eiusmod' },
+    { label: 'Consectetur' }
+  ]
+  const avatarPanelMenuItems = [
+    { label: 'Lorem ipsum', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') },
+    { label: 'Dolar sit amet', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') },
+    { label: 'Sed do eiusmodSed do eiusmodSed do eiusmodSed do eiusmod', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') },
+    { label: 'Lorem ipsum', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') }
+  ]
+  // const avatarPanelSettingItems = [
+  //   { label: 'Lorem ipsum', onClick: () => console.log('Action: Avatar panel menu item') },
+  //   { label: 'Dolar sit amet', onClick: () => console.log('Action: Avatar panel menu item') },
+  //   { label: 'Sed do eiusmodSed do eiusmodSed do eiusmodSed do eiusmod', onClick: () => console.log('Action: Avatar panel menu item') },
+  //   { label: 'Lorem ipsum', onClick: () => console.log('Action: Avatar panel menu item') }
+  // ]
+
+  return (
+    <ThemeProvider theme={testTheme}>
+      <MobileNavigation
+        items={items}
+        secondaryItems={secondaryItems}
+        // logo='assets/automation.svg'
+        logoText='Stream Automation'
+        isPersistent={isPersistent}
+        setIsPersistent={setPersistentMode}
+        showNotchIndicator
+
+        // Search panel props
+        hasSearch
+        searchPanelPlaceholder='Search for something awesome...'
+        searchPanelDefaultValue='Energy switching'
+        searchPanelOnClickSearch={() => console.log('Action: Search')}
+
+        // Avatar panel props
+        hasAvatar
+        avatarPanelOnClickSwitchDirection={() => console.log('Action: Switch direction of navigation')}
+        avatarPanelOnClickLogout={() => console.log('Action: Logout')}
+        avatarPanelOnClickViewProfile={() => console.log('Action: View profile')}
+        avatarPanelViewProfileString='View profile'
+        avatarPanelOnClickEditProfile={() => console.log('Action: Edit profile')}
+        avatarPanelEditProfileString='Edit profile'
+        avatarPanelMenuItems={avatarPanelMenuItems}
+        avatarPanelOnClickMainAction={() => console.log('Action: Main action')}
+        avatarPanelMainActionString='Admin panel'
+        // avatarPanelSettingItems={avatarPanelSettingItems}
+
+        {...args}
+      />
+      <main style={{
+        backgroundAttachment: 'fixed',
+        backgroundColor: '#eee',
+        // backgroundImage: 'url(assets/iPhone6.jpg)',
+        backgroundPosition: 'bottom left',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100%',
+        margin: '-1rem',
+        padding: '3rem'
+      }}>
+        <Button onClick={(): void => setThemeMode(themeMode === 'light' ? 'dark' : 'light')}>Toggle theme mode</Button>
+        {/* <button onClick={(): void => setPersistentMode(!isPersistent)}>Toggle persistent</button> */}
+        <Typography
+          component='h1'
+          variant="h4"
+          style={{ margin: '1rem 0 .5rem' }}
+        >
+          Mobile Navigation Demo
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+      </main>
+    </ThemeProvider>
+  )
+}
+Default.parameters = {
+  docs: {
+    description: {
+      component: DOCS.MobileNavigation.Default
+    },
+    source: {
+      type: 'code'
+    }
+  }
+}
+
+export const Overview: ComponentStory<typeof MobileNavigation> = (args): JSX.Element => {
+  const customer1 = false
+
+  const items = [
+    { label: 'Home', icon: <Home /> },
+    { label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do', icon: <MailIcon />, onClick: () => console.log('hi there') },
+    {
+      label: 'Testing',
+      icon: <GroupIcon />,
+      children: [
+        { label: 'Child Link' },
+        { label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do', onClick: () => console.log('hi there') },
+        { label: 'Child Link Three' },
+        { label: 'Child Link Four' }
+      ]
+    },
+    { label: 'Library', icon: customer1 ? <MenuBook /> : <LibraryAdd /> },
+    { label: 'Menu', icon: <MenuBook /> },
+    {
+      label: 'Another Test',
+      icon: <GroupIcon />,
+      children: [
+        { label: 'Child Link' },
+        { label: 'Child Link' }
+      ]
+    }
+  ]
+  const secondaryItems = [
+    {
+      label: 'Home',
+      icon: <Home />,
+      children: [
+        { label: 'Child Link' },
+        { label: 'Child Link' }
+      ],
+      fullHeightFlyout: true
+    },
+    { label: 'Home Too', icon: <MenuBook /> }
+  ]
+
+  return (
+    <MobileNavigation
+      items={items}
+      secondaryItems={secondaryItems}
+      logoText='Stream'
+
+      {...args}
+    />
+  )
+}
+Overview.parameters = {
+  docs: {
+    description: {
+      component: DOCS.MobileNavigation.Overview
+    },
+    source: {
+      type: 'code'
+    },
+    iframeHeight: 700,
+    inlineStories: false
+  }
+}
+
+export const ReactNativeApp: ComponentStory<typeof MobileNavigation> = (args) => {
+  const theme = useTheme()
+  const [themeMode, setThemeMode] = React.useState<PaletteMode>('light')
+  const [isPersistent, setPersistentMode] = React.useState(false)
+
+  const testTheme = createTheme({
+    palette: {
+      mode: themeMode,
+      // ...darkTheme
+      ...(theme.palette.mode === 'dark' && { ...darkTheme.palette }),
+      ...(theme.palette.mode === 'light' && { ...lightTheme.palette })
+    }
+  })
+
+  const items = [
+    { label: 'Dashboard' },
+    { label: 'Discover' }
+  ]
+  const secondaryItems = [
+    { label: 'My Library' },
+    { label: 'Notifications' }
+  ]
+  const avatarPanelMenuItems = [
+    { label: 'Download permissions', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') },
+    { label: 'About this App', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') },
+    { label: 'How it works', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') },
+    { label: 'Privacy policy', icon: <MenuBook />, onClick: () => console.log('Action: Avatar panel menu item') }
+  ]
+
+  return (
+    <ThemeProvider theme={testTheme}>
+      <MobileNavigation
+        items={items}
+        secondaryItems={secondaryItems}
+        logo='https://uuicdn.learningpool.com/stream/logo/latest/icon.svg'
+        logoText='Stream LXP'
+        isPersistent={isPersistent}
+        setIsPersistent={setPersistentMode}
+        showNotchIndicator
+
+        // Search panel props
+        hasSearch
+        searchPanelPlaceholder='Search course catalogue'
+        searchPanelDefaultValue='Fire and Safety'
+        searchPanelOnClickSearch={() => console.log('Action: Search')}
+
+        // Avatar panel props
+        hasAvatar
+        avatarPanelOnClickSwitchDirection={() => console.log('Action: Switch direction of navigation')}
+        avatarPanelOnClickLogout={() => console.log('Action: Logout')}
+        avatarPanelOnClickViewProfile={() => console.log('Action: View profile')}
+        avatarPanelViewProfileString='View profile'
+        avatarPanelOnClickEditProfile={() => console.log('Action: Edit profile')}
+        avatarPanelEditProfileString='Edit profile'
+        avatarPanelMenuItems={avatarPanelMenuItems}
+        avatarPanelOnClickMainAction={() => console.log('Action: Main action')}
+        avatarPanelMainActionString='Archived playlists'
+
+        {...args}
+      />
+      <main style={{
+        backgroundAttachment: 'fixed',
+        backgroundColor: '#eee',
+        // backgroundImage: 'url(assets/iPhone6.jpg)',
+        backgroundPosition: 'bottom left',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100%',
+        margin: '-1rem',
+        padding: '3rem'
+      }}>
+        <Button onClick={(): void => setThemeMode(themeMode === 'light' ? 'dark' : 'light')}>Toggle theme mode</Button>
+        {/* <button onClick={(): void => setPersistentMode(!isPersistent)}>Toggle persistent</button> */}
+        <Typography
+          component='h1'
+          variant="h4"
+          style={{ margin: '1rem 0 .5rem' }}
+        >
+          Mobile Navigation Demo
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+        <Typography paragraph={true}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+          in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
+          adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Typography>
+      </main>
+    </ThemeProvider>
+  )
+}
+ReactNativeApp.parameters = {
+  docs: {
+    description: {
+      component: DOCS.MobileNavigation.Default
+    },
+    source: {
+      type: 'code'
+    }
+  }
+}

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

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

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

@@ -0,0 +1,47 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { MobileNavigation } 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/Mobile Navigation/Overview" component={MobileNavigation} />
+
+[](#mobile-navigation-overview)Mobile Navigation 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 Mobile Navigation component provides a navigation bar that displays fixed to the bottom of the browser window. There are 3 buttons displayed in the navbar: a navigation menu, a site search, and a user profile. Each of these buttons toggles a panel that reveals the additional content.
+
+<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 the Mobile Navigation component when you want to provide a clear and consistent method of navigating between pages within an application. Futher information about the reasons for the mobile navigation structure can be found in our [Design System documentation](https://learninglocker.atlassian.net/wiki/spaces/PX/pages/3619029045/Mobile+Navigation#Rational).
+
+### [](#how-to-implement-it)How to implement it?
+
+You can see a basic example of the Mobile Navigation component below.
+
+<Canvas isExpanded>
+  <Story id="components-navigation-mobile-navigation-examples--overview" />
+</Canvas>
+
+### [](#best-practices)Best practices
+
+* Use the Mobile Navigation component to provide a consistent display of top level site navigation elements.
+* Set the primary navigation links using the `items` prop.
+* Set the secondary navigation links using the `secondaryItems` prop.
+* Use the `logoText` prop to provide a clear and concise label for any custom logos added to the component.
+
+### [](#future-considerations)Future considerations
+
+* none
+
+### [](#design-prototype)Design prototype
+TODO: Add design prototype

package/src/stories/Components/Navigation/VerticalNavigation/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/Vertical Navigation/Accessibility" />
+
+[](#vertical-navigation-accessibility)Vertical 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 Vertical 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 Vertical Navigation component is keyboard accessible and provides a focus trap when open.