@learningpool/ui 1.6.3 → 1.6.5

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

@@ -1,307 +0,0 @@
-import { createTheme, PaletteMode, ThemeProvider, Typography, useTheme } from '@mui/material'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import { VerticalNavigation } 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'
-import { applications } from '../../../../lib/components/stream/AppSwitcher/constants'
-
-export default {
-  title: 'Components/Navigation/Vertical Navigation/Examples',
-  component: VerticalNavigation
-} as ComponentMeta<typeof VerticalNavigation>
-
-export const Default: ComponentStory<typeof VerticalNavigation> = (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 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 />,
-      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: 'Longstringoftextthatdoesntwrap Item' },
-        { label: 'Forth Item' }
-      ]
-    },
-    { label: 'Library', icon: customer1 ? <MenuBook /> : <LibraryAdd /> },
-    {
-      label: 'Another Test',
-      icon: <MenuBook />,
-      children: [
-        { label: 'Child Link' },
-        { label: 'Child Link' }
-      ]
-    }
-  ]
-  const secondaryItems = [
-    {
-      label: 'Home',
-      icon: <Home />,
-      children: [
-        { label: 'Child Link' },
-        { label: 'Child Link' }
-      ]
-    },
-    { label: 'Home Too', icon: <MenuBook /> }
-  ]
-
-  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') }
-  ]
-
-  return (
-    <ThemeProvider theme={testTheme}>
-      <VerticalNavigation
-        items={items}
-        secondaryItems={secondaryItems}
-        // logo='assets/automation.svg'
-        logoText='Stream Automation'
-        isPersistent={isPersistent}
-        setIsPersistent={setPersistentMode}
-        streamHomeApplications={applications}
-        {...args}
-
-        // 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}
-      />
-      <main style={{
-        backgroundColor: '#eee',
-        margin: '-1rem',
-        padding: '3rem',
-        paddingLeft: isPersistent ? 340 : 100
-      }}>
-        <button onClick={(): void => setThemeMode(themeMode === 'light' ? 'dark' : 'light')}>Toggle theme mode</button>
-        {/* <button onClick={(): void => setPersistentMode(!isPersistent)}>Toggle persistent</button> */}
-        <h1>H1 element for axe testing</h1>
-        <p style={{
-          width: '100%',
-          height: 'auto'
-        }}>
-          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.
-
-          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. 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.
-        </p>
-        <p style={{
-          width: '100%',
-          height: 'auto'
-        }}>
-          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.
-
-          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. 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.
-        </p>
-        <p style={{
-          width: '100%',
-          height: 'auto'
-        }}>
-          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.
-
-          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. 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.
-        </p>
-      </main>
-    </ThemeProvider>
-  )
-}
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.VerticalNavigation.Default
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Overview: ComponentStory<typeof VerticalNavigation> = (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' },
-        { 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' }
-      ]
-    },
-    { label: 'Home Too', icon: <MenuBook /> }
-  ]
-
-  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') }
-  ]
-
-  return (
-    <VerticalNavigation
-      items={items}
-      secondaryItems={secondaryItems}
-      logoText='Stream'
-      {...args}
-
-      // 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'
-      avatarPanelFootnote='v1.03'
-    />
-  )
-}
-Overview.parameters = {
-  docs: {
-    description: {
-      component: DOCS.VerticalNavigation.Overview
-    },
-    source: {
-      type: 'code'
-    },
-    iframeHeight: 700,
-    inlineStories: false
-  }
-}
-export const Empty: ComponentStory<typeof VerticalNavigation> = (args): JSX.Element => {
-  const items = [
-    { label: 'Home', icon: <Home /> }
-  ]
-  const secondaryItems = []
-
-  const avatarPanelMenuItems = []
-
-  return (
-    <VerticalNavigation
-      items={items}
-      secondaryItems={secondaryItems}
-      logoText='Stream'
-      {...args}
-
-      // 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}
-      avatarPanelFootnote={<Typography>v1.03</Typography>}
-    />
-  )
-}
-Empty.parameters = {
-  docs: {
-    description: {
-      component: DOCS.VerticalNavigation.Empty
-    },
-    source: {
-      type: 'code'
-    },
-    iframeHeight: 700,
-    inlineStories: false
-  }
-}

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

@@ -1,47 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { VerticalNavigation } 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/Vertical Navigation/Overview" component={VerticalNavigation} />
-
-[](#vertical-navigation-overview)Vertical 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 Vertical Navigation component provides a persistent navigation drawer that can be toggled open or closed. This component appears fixed to the left side of the browser window, or displays on the right side for right-to-left languages. It is primarily used to navigate between pages within an application.
-
-<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 Vertical 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 vertical orientation can be found in our [Design System documentation](https://learninglocker.atlassian.net/wiki/spaces/PX/pages/3619029045/Vertical+Navigation#Rational).
-
-### [](#how-to-implement-it)How to implement it?
-
-You can see a basic example of the Vertical Navigation component below.
-
-<Canvas isExpanded>
-  <Story id="components-navigation-vertical-navigation-examples--overview" />
-</Canvas>
-
-### [](#best-practices)Best practices
-
-* Use the Vertical 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
-
-* *Persistent Display* - The Vertical Navigation component will provide users the ability to "pin" the navigation drawer in a persistent open state. This will allow users some individual control over how they navigate through a site. Persistent display of menu items can give users easy access to the 2nd tier nav elements.
-
-### [](#design-prototype)Design prototype
-TODO: Add design prototype

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

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

package/src/stories/ContactUs.stories.mdx

@@ -1,21 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Contact Us" />
-
-[](#contact-us)Contact Us
-=================================================================================
-
-The Design System team is currently building the architecture for the Design System ecosystem.
-
-There are a couple of ways to get in contact with the team.
-
----
-
-### [](#contributors)Contributors
-
-Contributors to the Component Library on Github.
-
-<div class="sbdocs-avatar-list">
-  <img class="sbdocs-avatar" src="https://avatars.githubusercontent.com/u/1729773?s=50&v=4" alt="nilslp" />
-  <img class="sbdocs-avatar" src="https://avatars.githubusercontent.com/u/20683148?s=50&v=4" alt="rdeber" />
-</div>

package/src/stories/Experimental/Test.stories.mdx

@@ -1,46 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Button from '../../lib/components/atoms/Button/Button';
-
-<Meta title="Experimental/Test" component={Button} />
-
-[](#login)Login
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-A button helps the user to find the most important actions of a page or within a viewport and enables them to perform these actions. The label is used to clearly indicate to the user what action will be triggered.
-
-### [](#why-use-it)Why use it?
-
-* Buttons are used to show the user’s choice of options for actions and assign these to a clear hierarchy.
-* Buttons allow users to commit a change, complete steps in a task, or make choices.
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is an overview of the Contained, Outlined and Text button components.
-
-<Canvas>
-  <Button variant="text">Text</Button>
-  <Button variant="contained">Contained</Button>
-  <Button variant="outlined">Outlined</Button>
-</Canvas>
-
-Visit the [All Stories](./?path=/docs/components-atoms-button-all-stories--default) page to view all possible variations, states, and sizes for the Button component.
-
-### [](#when-to-avoid-it)When to avoid it?
-
-### [](#best-practices)Best practices
-
-* Text button (low emphasis) - Text buttons are typically used for less important actions.
-* Outlined Button (medium emphasis) - Outlined buttons are used for more emphasis than text buttons due to the stroke.
-* Contained button (high emphasis) - Contained buttons have more emphasis, as they use a color fill and shadow.
-
-### [](#design-prototype)Design prototype
-<iframe
-  allowfullscreen
-  frameborder="0"
-  height="350"
-  width="100%"
-  src="https://www.figma.com/embed?embed_host=share&amp;url=https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=487%3A14431&amp;scaling=min-zoom&amp;page-id=310%3A35254&amp;starting-point-node-id=487%3A14431"
-/>

package/src/stories/GettingStarted/Designer.stories.mdx

@@ -1,86 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import AtomicDesign from '../assets/Atomic_Design_Icons-Dark.svg';
-import FigmaTokens from '../assets/figma-tokens.png';
-
-<Meta title="Getting Started/Designer" />
-
-[](#getting-started-designer)Getting Started - Designer
-=================================================================================
-
-## [](#getting-started-designer-pre-requisites)Pre-requisites
-
-*   [Figma Tokens](https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) plugin should be installed
-    
-*   Figma Tokens will also need to be authenticated against the [shared repository](https://github.com/Learning Pool/design-tokens) for the Tokens
-    
-    *   You will find all the details on how to do this using Github [here](https://docs.tokens.studio/sync/github).
-        
-*   [Stark](https://www.figma.com/community/plugin/732603254453395948/Stark) plugin should be installed
-    
-
-This repository is what keeps the design files and dev usage. There is an option to create a pull-request upon pushing changes to the repository which should always be used.
-
-As the design tokens are the base level for the Design System any changes to them should always be reviewed and signed off by **at least 2 other members** of the design system team.
-
-* * *
-
-With the above out of the way, we can cover the process of configuring our design files to utilize the Design Tokens approach of our overall Design System.
-
-The below diagram shows where the Figma Tokens fit into our process.
-
-1.  Figma - DS: Design tokens: _this file is our master and will only be updated when necessary_
-    
-    1.  Figma Tokens plugin: _this plugin holds **Global, Light** (theme)**, Dark** (theme) configs_
-        
-    2.  It will be used to develop the themes further down the line
-        
-
-Any changes to the base tokens are done using the plugin - this is crucial as the plugin is what syncs the design file decisions with the dev usage
-
-<img src={FigmaTokens} alt="Figma Tokens architecture" />
-
-Overall infrastructure map can be seen [here](https://miro.com/app/board/o9J_kxQ6aBM=/)
-
-The design tokens are the lowest level and for the most part, the properties have been configured in the correct format. The values however will change when the decisions for the default theme and accessibility issues have been rectified.
-
-* * *
-
-### Configuring a component to use Design Tokens
-
-We are extending the MUI5 library of which we have obtained the official Figma design file. Currently, only @Nils Sanderson​ has access to this so please reach out to them and they can make a copy of the master component to be extended.
-
-To contribute to the [Component Library](https://www.figma.com/file/mBDuFn79U8wQIIEoCGpMew/DS:-Component-Library) design file, consult with the Design System team as to the work required and consult the [Jira roadmap](https://Learning Pool.atlassian.net/jira/software/projects/DS/boards/211/roadmap) to see the upcoming work.
-
-1.  Create a new page under the Atomic design category you will be creating the component under and name it accordingly e.g. Button, Card
-    
-    1.  If you need to make a new section for a category not existing in the design file, create a new blank page and name it in the following format \---- Atoms ---- to act as a divider
-        
-2.  Navigate to the \_\_Template page and copy the layout component that meets the needs of the component, Portrait or Landscape and paste it into your component file. Update the title and if there are any links that are useful follow the convention in the header to add these
-    
-    1.  This is not that important as most of the components will have a lot of variations requiring the layout to be custom dimensions
-        
-3.  Copy the master component from MUI5 into the layout and detach from the original (if not automatically done)
-    
-    1.  In some cases, there may be multiple components e.g. a base component of which the component is built upon, refer to the Button page on how to structure this
-        
-    2.  Make sure to update any of the components to use the local file components
-        
-4.  For the most part, we are extending MUI5’s components so there may be no changes required, however, if there are please refer to the Jira ticket or document stating these changes.
-    
-5.  Hooking up the design tokens from Figma Tokens. It may prove useful to run through some of the [docs on Figma Tokens](https://docs.tokens.studio) to understand its usage.
-    
-    1.  Using the tokens will be different for each element. Some elements may require a border to use the divider property or the primary.main background. These should be pretty simple to understand based on how the default MUI5 component has been configured.
-        
-6.  Select the layer and run the [Stark](https://www.figma.com/community/plugin/732603254453395948/Stark) plugin (contrast checker) to make sure it meets the AA standards
-    
-
-* * *
-
-### Using the Figma Tokens plugin
-
-Sorry for the bad video, I will do a better one to replace this as there are a few moments that I am just babbling to myself.
-
-Video tutorial showing the Figma Tokens plugin in use for porting over the Badge component from the MUI5 Figma file to the Learning Pool DS: Component Library file.
-
-<iframe src="https://player.vimeo.com/video/673198005?h=587da7a4ff" width="640" height="369" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
-<p><a href="https://vimeo.com/673198005">Figma Tokens - Badge example (terrible tutorial)</a> from <a href="https://vimeo.com/user126793800">Nils Sanderson</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

package/src/stories/GettingStarted/Developer.stories.mdx

@@ -1,134 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import AtomicDesign from '../assets/Atomic_Design_Icons-Dark.svg';
-
-<Meta title="Getting Started/Developer" />
-
-[](#getting-started-developer)Getting Started - Developer
-=================================================================================
-
-Learning Pool UI is the Component library for use on Learning Pool projects. There is a long-term vision, for now though, there are only a handful of components to utilize.
-
-It is built on top of [MUI](https://mui.com) and bootstrapped with [Create React App](https://github.com/facebook/create-react-app). Our documentation is provided via [Storybook](https://storybook.js.org) and our tests are written using [Jest](https://jestjs.io).
-
-Our module uses [semantic versionsing](https://semver.org) and publishes to [NPM](https://www.npmjs.com).
-
-## Installation
-
-First clone the repo then run:
-
-### `npm install`
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm run start`
-
-Runs the app in the development mode.\
-Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm run start:run-test`
-The same as the `npm run start` command but runs the `npm run test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
-
-### `npm run build-storybook`
-Builds the Storybook app for pushing to the public subdomain.
-
-### `npm run test`
-Runs the component Jest tests. If its the first run it also takes a snapshot for comparison, on successive runs.
-
-### `npm run test:update-snapshot`
-Updates the Jest snapshot.
-
-### `npm run test:generate-output`
-Runs the tests and outputs the results to a file `.jest-test-results.json` for use within the [Storybook addon Jest](https://storybook.js.org/addons/@storybook/addon-jest/)
-
-## Getting started
-
-### Project structure
-
-A quick understanding of the architecture of the project is useful before getting started. As this project is used to maintain a Component library it compiles into a module that is hosted on NPM. The `lib` and `stories` directory structure should mirror each other for ease of navigation through the project.
-
-```
-src
-│
-└───lib
-│   │
-│   └───atoms
-│   │   │
-│   │   └───Button
-│   │   ...
-│   └───molecules
-│   ...
-└───stories
-    │
-    └───atoms
-    │   │
-    │   └───Button
-    │   ...
-    └───molecules
-    ...
-```
----
-### Creating a component
-To get started it is recommended to create a directory for the component in the directory appropriate for your component:
-
-```
-src
-│
-└───lib
-    │
-    └───atoms
-        │
-        └───Component
-                Component.test.tsx
-                Component.tsx
-                ComponentStyles.tsx
-```
-Once you have created the above structure, it should be mirrored within the `src/stories` directory. It may not require a directory if it is just one file e.g. `src/stories/atoms/Component.stories.tsx`
-
-If the component is a bit more complicated and requires extra work for the story, it would be best to create a directory to containing the story and additional files.
-```
-src
-│
-└───stories
-    │
-    └───atoms
-        │
-        └───Component
-                Component.stories.tsx
-                Component.tsx
-```
-
-## Using the library
-
-Add the following in the head of the project (if React it's likely to be index.html within the public directory).
-
-```
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:wght@400;600;700&display=swap" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:wght@300;400;500&display=swap" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />
-```
-
-Importing and using components from the library.
-
-```javascript
-import { Button } from 'Learning Pool-ui'
-
-return <Button />
-```
-
-See all the components currently available [components source code](https://bitbucket.org/Learning Pool/Learning Pool-ui/src/master/src/lib/components/).
-
-## Contributing
-Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
-
-Please make sure to update tests as appropriate.
-
-There are related repositories which will be linked in the future.
-
-## License
-[MIT](https://choosealicense.com/licenses/mit/)