@learningpool/ui 1.6.0 → 1.6.1

package/src/lib/utils/helpers.tsx

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,33 @@
+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

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

package/src/lib/utils/theme.tsx

@@ -0,0 +1,79 @@
+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

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

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// 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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,278 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,29 @@
+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>