@learningpool/ui 1.6.3 → 1.6.5

package/src/lib/utils/helpers.tsx

@@ -1,77 +0,0 @@
-import { useSpring, config } from '@react-spring/web'
-
-/**
- * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
- * @param avatarName string - Expected full name but accepts any string
- * @returns string
- */
-export const handleAvatarInitials = (avatarName: string): string => {
-  let firstInitial = avatarName.split('')[0] || ''
-  let secondInitial = ''
-
-  if (avatarName.split(' ')?.length > 1) {
-    firstInitial = avatarName.split(' ')[0][0]
-
-    if (avatarName.split(' ')[1]?.length > 0) {
-      secondInitial = avatarName?.split(' ')[1][0]
-    }
-  }
-
-  return `${firstInitial}${secondInitial}`
-}
-
-const STAGGER_ITEMS_DELAY = 70
-
-/**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param trigger boolean - Trigger to reverse the animation from main component
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
- * @returns Object
- */
-export const useStaggerAnimation = (trigger: boolean, animationCount: number, incrementAnimationCount: Function): Object => {
-  const defaultAnimationConfig = {
-    from: { opacity: 0, y: 10 },
-    to: { opacity: 1, y: 0 },
-    reverse: !trigger,
-    config: {
-      ...config.default,
-      mass: 1
-    }
-  }
-
-  const staggerAnimation = useSpring({
-    ...defaultAnimationConfig,
-    delay: trigger ? STAGGER_ITEMS_DELAY * (animationCount + 1) : 0
-  })
-
-  incrementAnimationCount()
-
-  return staggerAnimation
-}
-
-/**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
- * @returns Object
- */
-export const useFadeIn = (animationCount: number, incrementAnimationCount: Function): Object => {
-  const defaultAnimationConfig = {
-    from: { opacity: 0 },
-    to: { opacity: 1 },
-    config: {
-      ...config.default,
-      mass: 1
-    }
-  }
-
-  const staggerFadeInUpAnimation = useSpring({
-    ...defaultAnimationConfig,
-    delay: STAGGER_ITEMS_DELAY * (animationCount + 1)
-  })
-
-  incrementAnimationCount()
-
-  return staggerFadeInUpAnimation
-}

package/src/lib/utils/hooks.tsx

@@ -1,33 +0,0 @@
-import { useState, useEffect } from 'react'
-
-const getWidth = () => window.innerWidth ??
-  document.documentElement.clientWidth ??
-  document.body.clientWidth
-
-export const useCurrentWidth = () => {
-  // save current window width in the state object
-  const [width, setWidth] = useState(getWidth())
-
-  // in this case useEffect will execute only once because
-  // it does not have any dependencies.
-  useEffect(() => {
-    // timeoutId for debounce mechanism
-    let timeoutId: any
-    const resizeListener = () => {
-      // prevent execution of previous setTimeout
-      clearTimeout(timeoutId)
-      // change width from the state object after 150 milliseconds
-      timeoutId = setTimeout(() => setWidth(getWidth()), 150)
-    }
-    // set resize listener
-    window.addEventListener('resize', resizeListener)
-
-    // clean up function
-    return () => {
-      // remove resize listener
-      window.removeEventListener('resize', resizeListener)
-    }
-  }, [])
-
-  return width
-}

package/src/lib/utils/index.tsx

@@ -1,4 +0,0 @@
-/* Export */
-
-/* Theming */
-export { defaultTheme, darkTheme, lightTheme } from './theme'

package/src/lib/utils/theme.tsx

@@ -1,79 +0,0 @@
-import { amber, blue } from '@mui/material/colors'
-
-const DEFAULT_HEADER_TYPOGRAPHY = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
-}
-
-const DEFAULT_BODY_TYPOGRAPHY = {
-  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
-}
-
-// @TODO: Discuss this with the experience design team, according to the UUI Figma
-export const defaultTheme = {
-  typography: {
-    ...DEFAULT_BODY_TYPOGRAPHY,
-    h1: DEFAULT_HEADER_TYPOGRAPHY,
-    h2: DEFAULT_HEADER_TYPOGRAPHY,
-    h3: DEFAULT_HEADER_TYPOGRAPHY,
-    h4: DEFAULT_HEADER_TYPOGRAPHY,
-    h5: DEFAULT_HEADER_TYPOGRAPHY,
-    h6: DEFAULT_HEADER_TYPOGRAPHY,
-    subtitle1: DEFAULT_BODY_TYPOGRAPHY,
-    subtitle2: DEFAULT_BODY_TYPOGRAPHY,
-    body1: DEFAULT_BODY_TYPOGRAPHY,
-    body2: DEFAULT_BODY_TYPOGRAPHY,
-    button: {
-      ...DEFAULT_BODY_TYPOGRAPHY,
-      fontWeight: 700
-    },
-    caption: DEFAULT_BODY_TYPOGRAPHY,
-    overline: DEFAULT_BODY_TYPOGRAPHY
-  }
-  // overrides: {
-  //   MuiCssBaseline: {
-  //     '@global': {
-  //       '.MuiAvatarGroup-root .MuiAvatar-root:first-of-type': {
-  //         backgroundColor: '#eee',
-  //         color: '#333'
-  //       }
-  //     }
-  //   }
-  // }
-}
-
-export const lightTheme = {
-  palette: {
-    primary: {
-      main: '#0069b4'
-    },
-    secondary: {
-      main: blue[500]
-    },
-    divider: 'rgba(0, 0, 0, 0.075)',
-    text: {
-      primary: 'rgba(0,0,0,0.95)'
-    }
-  }
-}
-
-export const darkTheme = {
-  palette: {
-    primary: amber,
-    divider: 'rgba(255, 255, 255, 0.075)',
-    text: {
-      primary: 'rgba(255,255,255,0.95)'
-    }
-  }
-}
-
-export const motion = {
-  ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
-  easeOut: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
-  easeIn: 'cubic-bezier(0.4, 0.0, 1, 1)',
-  easeInOut: 'cubic-bezier(0.4, 0.0, 0.6, 1)'
-}
-
-export const tooltipDelay = {
-  start: 500,
-  end: 200
-}

package/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

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

@@ -1,34 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { Avatar, AvatarGroup } from '../../../../lib/'
-import Chip from '../../../../lib/components/datadisplay/Chip/Chip'
-import { Box, Typography, IconButton} from '@mui/material'
-import DeleteIcon from '@mui/icons-material/Delete'
-
-<Meta title="Components/Data Display/Avatar/Accessibility" />
-
-[](#avatar-accessibility)Avatar Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/DataDisplay/Avatar/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.
-
-## [](#guidelines)Guidelines
-
-* When using the Avatar with text initials on a background color, the component will automatically set the correct text color with the highest contrast ratio.
-
-### [](#screen-readers)Screen readers
-
-When using the Avatar with an image, include a clear and concise description with an `alt` tag.
-
-<Canvas isExpanded>
-<Stack direction="row" spacing={2}>
-  <Avatar alt="User One Profile" src="/assets/avatar-1.jpg" />
-</Stack>
-</Canvas>
-
-When using the Avatar with text initials, include a clear and concise description with an `aria-label` tag.
-
-<Canvas isExpanded>
-<Stack direction="row" spacing={2}>
-  <Avatar aria-label="LP User Profile">LP</Avatar>
-</Stack>
-</Canvas>

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

@@ -1,56 +0,0 @@
-import * as React from 'react'
-import { Stack } from '@mui/material'
-import { Avatar, AvatarGroup } from '../../../../lib/'
-import FolderIcon from '@mui/icons-material/Folder'
-
-const AvatarGrid = (args: any): JSX.Element => {
-  return (
-    <>
-      <Stack direction="column" mb={5}>
-        <Stack direction="row" spacing={2} alignItems="center" mb={1}>
-          <Avatar {...args} alt="User One" src="/assets/avatar-1.jpg" />
-          <Avatar {...args}>LP</Avatar>
-          <Avatar {...args} sx={{ bgcolor: '#333' }}>LP</Avatar>
-          <Avatar {...args}>
-            <FolderIcon />
-          </Avatar>
-          <Avatar {...args} sx={{ width: 64, height: 64 }}>LP</Avatar>
-        </Stack>
-        <Stack direction="row" spacing={2} alignItems="center" mb={1}>
-          <AvatarGroup max={4}>
-            <Avatar {...args}>RD</Avatar>
-            <Avatar {...args}>NS</Avatar>
-            <Avatar {...args}>AM</Avatar>
-            <Avatar {...args}>KW</Avatar>
-            <Avatar {...args}>DD</Avatar>
-            <Avatar {...args}>NT</Avatar>
-          </AvatarGroup>
-          <AvatarGroup total={25}>
-            <Avatar {...args}>RD</Avatar>
-            <Avatar {...args}>NS</Avatar>
-            <Avatar {...args}>AM</Avatar>
-            <Avatar {...args}>KW</Avatar>
-            <Avatar {...args}>DD</Avatar>
-            <Avatar {...args}>NT</Avatar>
-          </AvatarGroup>
-        </Stack>
-      </Stack>
-    </>
-  )
-}
-
-export default function AllCombinations (): JSX.Element {
-  const combinations = [
-    { variant: 'circular' },
-    { variant: 'square' },
-    { variant: 'rounded' }
-  ]
-
-  return (
-    <Stack>
-      {combinations.map(AvatarConfig => (
-        <AvatarGrid {...AvatarConfig} />
-      ))}
-    </Stack>
-  )
-}

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

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

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

@@ -1,278 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import { Avatar, AvatarGroup } from '../../../../lib/'
-import { Stack, Badge } from '@mui/material'
-import FolderIcon from '@mui/icons-material/Folder'
-import PageviewIcon from '@mui/icons-material/Pageview'
-import AssignmentIcon from '@mui/icons-material/Assignment'
-import { green, blue } from '@mui/material/colors'
-import { styled } from '@mui/material/styles'
-import AllCombinations from './AllCombinations'
-
-export default {
-  title: 'Components/Data Display/Avatar/Examples',
-  component: Avatar
-} as ComponentMeta<typeof Avatar>
-
-export const Default: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar alt="LP">LP</Avatar>
-    </Stack>
-  )
-}
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.Avatar.Default
-    }
-  }
-}
-
-export const ImageAvatars: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar alt="User One" src="/assets/avatar-1.jpg" />
-      <Avatar alt="User Two" src="/assets/avatar-2.jpg" />
-      <Avatar alt="User Three" src="/assets/avatar-3.jpg" />
-    </Stack>
-  )
-}
-ImageAvatars.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.ImageAvatars
-    }
-  }
-}
-
-export const LetterAvatars: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar>L</Avatar>
-      <Avatar>P</Avatar>
-      <Avatar>LP</Avatar>
-    </Stack>
-  )
-}
-LetterAvatars.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.LetterAvatars
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Sizes: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar sx={{ width: 24, height: 24 }} alt="User One" src="/assets/avatar-1.jpg" />
-      <Avatar alt="User One" src="/assets/avatar-1.jpg" />
-      <Avatar sx={{ width: 56, height: 56 }} alt="User One" src="/assets/avatar-1.jpg" />
-    </Stack>
-  )
-}
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.Sizes
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Colors: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar sx={{ bgcolor: '#eee' }}>LP</Avatar>
-      <Avatar sx={{ bgcolor: '#333' }}>LP</Avatar>
-      <Avatar sx={{ bgcolor: green[500] }}>LP</Avatar>
-    </Stack>
-  )
-}
-Colors.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.Colors
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const IconAvatars: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar>
-        <AssignmentIcon />
-      </Avatar>
-      <Avatar sx={{ bgcolor: '#eee' }}>
-        <FolderIcon />
-      </Avatar>
-      <Avatar sx={{ bgcolor: '#333' }}>
-        <PageviewIcon />
-      </Avatar>
-    </Stack>
-  )
-}
-IconAvatars.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.IconAvatars
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Variants: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar variant="square" sx={{ bgcolor: blue[800] }}>LP</Avatar>
-      <Avatar variant="rounded" sx={{ bgcolor: blue[800] }}>LP</Avatar>
-    </Stack>
-  )
-}
-Variants.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.Variants
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Grouped: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <AvatarGroup max={4}>
-      <Avatar>RD</Avatar>
-      <Avatar>NS</Avatar>
-      <Avatar>AM</Avatar>
-      <Avatar>KW</Avatar>
-      <Avatar>DD</Avatar>
-      <Avatar>NT</Avatar>
-    </AvatarGroup>
-  )
-}
-Grouped.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.Grouped
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const TotalAvatars: ComponentStory<typeof Avatar> = (args): JSX.Element => {
-  return (
-    <AvatarGroup total={25}>
-      <Avatar>RD</Avatar>
-      <Avatar>NS</Avatar>
-      <Avatar>AM</Avatar>
-      <Avatar>KW</Avatar>
-      <Avatar>DD</Avatar>
-      <Avatar>NT</Avatar>
-    </AvatarGroup>
-  )
-}
-TotalAvatars.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.TotalAvatars
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const BadgeAvatars: ComponentStory<typeof AllCombinations> = (args): JSX.Element => {
-  const StyledBadge = styled(Badge)(({ theme }) => ({
-    '& .MuiBadge-badge': {
-      backgroundColor: '#44b700',
-      color: '#44b700',
-      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
-      '&::after': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        borderRadius: '50%',
-        animation: 'ripple 1.2s infinite ease-in-out',
-        border: '1px solid currentColor',
-        content: '""'
-      }
-    },
-    '@keyframes ripple': {
-      '0%': {
-        transform: 'scale(.8)',
-        opacity: 1
-      },
-      '100%': {
-        transform: 'scale(2.4)',
-        opacity: 0
-      }
-    }
-  }))
-
-  const SmallAvatar = styled(Avatar)(({ theme }) => ({
-    width: 22,
-    height: 22,
-    border: '2px solid #eee'
-  }))
-
-  return (
-    <Stack direction="row" spacing={2}>
-      <StyledBadge
-        overlap="circular"
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        variant="dot"
-      >
-        <Avatar alt="User One" src="/assets/avatar-1.jpg" />
-      </StyledBadge>
-      <Badge
-        overlap="circular"
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        badgeContent={
-          <SmallAvatar alt="User One" src="/assets/avatar-1.jpg" />
-        }
-      >
-        <Avatar alt="User One" src="/assets/avatar-1.jpg" />
-      </Badge>
-    </Stack>
-  )
-}
-BadgeAvatars.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.BadgeAvatars
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args): JSX.Element => (
-  <AllCombinations />
-)
-All.parameters = {
-  docs: {
-    description: {
-      story: DOCS.Avatar.All
-    }
-  }
-}

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

@@ -1,47 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Avatar } 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/Data Display/Avatar/Overview" component={Avatar} />
-
-[](#Avatar-overview)Avatar Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/DataDisplay/Avatar/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Avatars are found throughout material design with uses in everything from tables to dialog menus.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/Avatares/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/selection-controls#Avatares" 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=1142%3A17936&scaling=min-zoom&page-id=1141%3A18763&starting-point-node-id=1142%3A17936" 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/datadisplay/Avatar" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Use an Avatar as a visual representation of a user.
-* Use an AvatarGroup to display a group of avatars.
-
-### [](#how-to-implement-it)How to implement it?
-
-An Avatar can be `circular`, `square` or `rounded` depending on usage. The default is a circular.
-
-<Canvas isExpanded>
-<Stack direction="row" spacing={2}>
-  <Avatar>LP</Avatar>
-  <Avatar variant="square">LP</Avatar>
-  <Avatar variant="rounded">LP</Avatar>
-</Stack>
-</Canvas>
-
-### [](#best-practices)Best practices
-
-* Follow the [Badge Avatar example](/?path=/docs/components-data-display-avatar-examples--badge-avatars#badge-avatars) pattern to display a user's status with a round indicator at the bottom right.
-* Use the `AvatarGroup` component to display a group of avatars.
-* Provide an `alt` tag with a clear description of the avatar for screen readers when using an image.
-
-### [](#design-prototype)Design prototype
-TODO: Add design prototype

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

@@ -1,29 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
-import { Box, Typography} from '@mui/material';
-
-<Meta title="Components/Data Display/Chip/Accessibility" />
-
-[](#Chip-accessibility)Chip Accessibility <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/DataDisplay/Chip/Accessibility.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-This component has been validated to meet the WCAG 2.1 AA and Section 508 accessibility guidelines; however, changes made by the developer can affect accessibility compliance.
-
-Please follow the guidance in this section and see [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/) for more information.
-
-## [](#guidelines)Guidelines
-The component handles most of the work necessary to make it accessible. However, you need to make sure that:
-
-* A chip should have a short and clear label.
-* Color should not be used as the only means to differentiate between different chip categories.
-* If a Chip is deletable or clickable then it is a button in tab order.
-* When a Chip is focused, releasing (keyup event) `Backspace` or `Delete` will call the `onDelete` handler, while releasing `Escape` will blur the Chip.
-
-### [](#when-to-use-this-component)When to use this component
-Chips are used for content that needs to be labeled, categorized, or organized using keywords that describe them.
-
-### [](#screen-readers)Screen readers
-Chips should have a short and concise label using the `label` prop. Adding Chips can increase the visual noise on a page, so use short labels to make scanning easy.
-<Canvas isExpanded>
-<Chip label="Chip Label" />
-</Canvas>