@learningpool/ui 1.6.3 → 1.6.5

package/src/stories/Components/Inputs/ToggleButton/Examples.stories.tsx

@@ -1,339 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import ToggleButton from '../../../../lib/components/atoms/ToggleButton/ToggleButton'
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import { Stack } from '@mui/material'
-import CheckIcon from '@mui/icons-material/Check'
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'
-import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'
-import FormatBoldIcon from '@mui/icons-material/FormatBold'
-import FormatItalicIcon from '@mui/icons-material/FormatItalic'
-import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined'
-import FormatColorFillIcon from '@mui/icons-material/FormatColorFill'
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
-import LaptopIcon from '@mui/icons-material/Laptop'
-import TvIcon from '@mui/icons-material/Tv'
-import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid'
-import AllCombinations from './AllCombinations'
-
-export default {
-  title: 'Components/Inputs/ToggleButton/Examples',
-  component: ToggleButton
-} as ComponentMeta<typeof ToggleButton>
-
-export const Default: ComponentStory<typeof ToggleButton> = (args): JSX.Element => {
-  const [selected, setSelected] = React.useState(false)
-
-  return (
-    <ToggleButton
-      aria-label="label"
-      value="check"
-      selected={selected}
-      onChange={(): void => {
-        setSelected(!selected)
-      }}
-    >
-      <CheckIcon />
-    </ToggleButton>
-  )
-}
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.ToggleButton.Default
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const ExclusiveSection: ComponentStory<typeof ToggleButton> = (args): JSX.Element => {
-  const [alignment, setAlignment] = React.useState<string | null>('left')
-
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string | null
-  ): void => {
-    setAlignment(newAlignment)
-  }
-
-  return (
-    <ToggleButtonGroup
-      value={alignment}
-      exclusive
-      onChange={handleAlignment}
-      aria-label="text alignment"
-      color="primary"
-    >
-      <ToggleButton value="left" aria-label="left aligned">
-        <FormatAlignLeftIcon />
-      </ToggleButton>
-      <ToggleButton value="center" aria-label="centered">
-        <FormatAlignCenterIcon />
-      </ToggleButton>
-      <ToggleButton value="right" aria-label="right aligned">
-        <FormatAlignRightIcon />
-      </ToggleButton>
-      <ToggleButton value="justify" aria-label="justified" disabled>
-        <FormatAlignJustifyIcon />
-      </ToggleButton>
-    </ToggleButtonGroup>
-  )
-}
-ExclusiveSection.parameters = {
-  docs: {
-    description: {
-      story: DOCS.ToggleButton.ExclusiveSection
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const MultipleSection: ComponentStory<typeof ToggleButton> = (args): JSX.Element => {
-  const [formats, setFormats] = React.useState(() => ['bold', 'italic'])
-
-  const handleFormat = (
-    event: React.MouseEvent<HTMLElement>,
-    newFormats: string[]
-  ): void => {
-    setFormats(newFormats)
-  }
-
-  return (
-    <ToggleButtonGroup
-      value={formats}
-      onChange={handleFormat}
-      aria-label="text formatting"
-      color="primary"
-    >
-      <ToggleButton value="bold" aria-label="bold">
-        <FormatBoldIcon />
-      </ToggleButton>
-      <ToggleButton value="italic" aria-label="italic">
-        <FormatItalicIcon />
-      </ToggleButton>
-      <ToggleButton value="underlined" aria-label="underlined">
-        <FormatUnderlinedIcon />
-      </ToggleButton>
-      <ToggleButton value="color" aria-label="color" disabled>
-        <FormatColorFillIcon />
-        <ArrowDropDownIcon />
-      </ToggleButton>
-    </ToggleButtonGroup>
-  )
-}
-MultipleSection.parameters = {
-  docs: {
-    description: {
-      story: DOCS.ToggleButton.MultipleSection
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Sizes: ComponentStory<typeof ToggleButton> = (args): JSX.Element => {
-  const [alignment, setAlignment] = React.useState('left')
-
-  const handleChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string
-  ): void => {
-    setAlignment(newAlignment)
-  }
-
-  const children = [
-    <ToggleButton value="left" key="left">
-      <FormatAlignLeftIcon />
-    </ToggleButton>,
-    <ToggleButton value="center" key="center">
-      <FormatAlignCenterIcon />
-    </ToggleButton>,
-    <ToggleButton value="right" key="right">
-      <FormatAlignRightIcon />
-    </ToggleButton>,
-    <ToggleButton value="justify" key="justify">
-      <FormatAlignJustifyIcon />
-    </ToggleButton>
-  ]
-
-  const control = {
-    value: alignment,
-    onChange: handleChange,
-    exclusive: true
-  }
-
-  return (
-    <Stack direction="column" spacing={2}>
-      <ToggleButtonGroup size="small" {...control}>
-        {children}
-      </ToggleButtonGroup>
-      <ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
-      <ToggleButtonGroup size="large" {...control}>
-        {children}
-      </ToggleButtonGroup>
-    </Stack>
-  )
-}
-Sizes.parameters = {
-  docs: {
-    description: {
-      story: DOCS.ToggleButton.Sizes
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Colors: ComponentStory<typeof ToggleButton> = (args): JSX.Element => {
-  const [alignment, setAlignment] = React.useState('left')
-
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string | null
-  ): void => {
-    if (newAlignment !== null) {
-      setAlignment(newAlignment)
-    }
-  }
-
-  const children = [
-    <ToggleButton value="left" key="left">
-      <FormatAlignLeftIcon />
-    </ToggleButton>,
-    <ToggleButton value="center" key="center">
-      <FormatAlignCenterIcon />
-    </ToggleButton>,
-    <ToggleButton value="right" key="right">
-      <FormatAlignRightIcon />
-    </ToggleButton>
-  ]
-
-  const control = {
-    value: alignment,
-    onChange: handleAlignment,
-    exclusive: true
-  }
-
-  return (
-    <Stack direction="column" spacing={2}>
-      <ToggleButtonGroup {...control} color="primary">
-        {children}
-      </ToggleButtonGroup>
-      <ToggleButtonGroup {...control} color="secondary">
-        {children}
-      </ToggleButtonGroup>
-      <ToggleButtonGroup {...control} color="error">
-        {children}
-      </ToggleButtonGroup>
-      <ToggleButtonGroup {...control} color="info">
-        {children}
-      </ToggleButtonGroup>
-      <ToggleButtonGroup {...control} color="success">
-        {children}
-      </ToggleButtonGroup>
-      <ToggleButtonGroup {...control} color="warning">
-        {children}
-      </ToggleButtonGroup>
-    </Stack>
-  )
-}
-Colors.parameters = {
-  docs: {
-    description: {
-      story: DOCS.ToggleButton.Colors
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const EnforceValues: ComponentStory<typeof ToggleButton> = (args): JSX.Element => {
-  const [alignment, setAlignment] = React.useState('left')
-  const [devices, setDevices] = React.useState(() => ['phone'])
-
-  const handleAlignment = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string | null
-  ): void => {
-    if (newAlignment !== null) {
-      setAlignment(newAlignment)
-    }
-  }
-
-  const handleDevices = (
-    event: React.MouseEvent<HTMLElement>,
-    newDevices: string[]
-  ): void => {
-    if (newDevices.length) {
-      setDevices(newDevices)
-    }
-  }
-
-  return (
-    <Stack direction="row" spacing={4}>
-      <ToggleButtonGroup
-        value={alignment}
-        exclusive
-        onChange={handleAlignment}
-        aria-label="text alignment"
-      >
-        <ToggleButton value="left" aria-label="left aligned">
-          <FormatAlignLeftIcon />
-        </ToggleButton>
-        <ToggleButton value="center" aria-label="centered">
-          <FormatAlignCenterIcon />
-        </ToggleButton>
-        <ToggleButton value="right" aria-label="right aligned">
-          <FormatAlignRightIcon />
-        </ToggleButton>
-      </ToggleButtonGroup>
-
-      <ToggleButtonGroup
-        value={devices}
-        onChange={handleDevices}
-        aria-label="device"
-      >
-        <ToggleButton value="laptop" aria-label="laptop">
-          <LaptopIcon />
-        </ToggleButton>
-        <ToggleButton value="tv" aria-label="tv">
-          <TvIcon />
-        </ToggleButton>
-        <ToggleButton value="phone" aria-label="phone">
-          <PhoneAndroidIcon />
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Stack>
-  )
-}
-EnforceValues.parameters = {
-  docs: {
-    description: {
-      story: DOCS.ToggleButton.EnforceValues
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args) => (
-  <AllCombinations />
-)
-All.parameters = {
-  docs: {
-    description: {
-      story: DOCS.ToggleButton.All
-    }
-  }
-}

package/src/stories/Components/Inputs/ToggleButton/Overview.stories.mdx

@@ -1,55 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import ToggleButton from '../../../../lib/components/atoms/ToggleButton/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
-import CheckIcon from '@mui/icons-material/Check';
-
-<Meta title="Components/Inputs/ToggleButton/Overview" component={ToggleButton} />
-
-[](#alert-overview)ToggleButton Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/Inputs/ToggleButton/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Toggle buttons can be used to group related options.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/alertes/" 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#alertes" 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=1152%3A18414&scaling=contain&page-id=1146%3A17946&starting-point-node-id=1152%3A18414" 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/atoms/ToggleButton" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Toggle buttons can be used to allow users to select between options in a group.
-* To emphasize groups of related toggle buttons, a group should share a common container.
-
-### [](#how-to-implement-it)How to implement it?
-
-The `ToggleButtonGroup` controls the selected state of its child buttons when given its own `value` prop.
-
-With exclusive selection, selecting one option deselects any other:
-<Canvas isExpanded>
-  <Story id="components-inputs-togglebutton-examples--exclusive-section" />
-</Canvas>
-
-Multiple selection allows for logically-grouped options to have multiple options selected:
-<Canvas isExpanded>
-  <Story id="components-inputs-togglebutton-examples--multiple-section" />
-</Canvas>
-
-### [](#when-to-avoid-it)When to avoid it?
-
-* Do not use a toggle button when user consent is required (ex. accepting terms and conditions). Instead, use a Checkbox component.
-
-### [](#best-practices)Best practices
-
-* Use the `exclusive` prop to allow only one option to be selected at a time.
-* Use the `multiple` prop to allow multiple options to be selected at a time.
-* Be sure to give the toggle button a clear and concise label.
-
-### [](#design-prototype)Design prototype
-TODO: Add design prototype link

package/src/stories/Components/Inputs/ToggleButton/ToggleButton.stories.tsx

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

package/src/stories/Components/Landmarks/Header/Examples.stories.tsx

@@ -1,197 +0,0 @@
-import { Check, MenuBook } from '@mui/icons-material'
-import { createTheme, Direction, PaletteMode, ThemeProvider } from '@mui/material'
-import { useEffect } from '@storybook/addons'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import { Header, Typography, Button } from '../../../../lib'
-import { lightTheme, darkTheme } from '../../../../lib/utils'
-
-export default {
-  title: 'Components/Landmarks/Header/Examples',
-  component: Header
-} as ComponentMeta<typeof Header>
-
-export const Default: ComponentStory<typeof Header> = (args) => {
-  const [themeMode, setThemeMode] = React.useState<PaletteMode>('light')
-  const [directionMode, setDirectionMode] = React.useState<Direction>('ltr')
-
-  const themeOptions = {
-    palette: {
-      // ...darkTheme
-      ...(themeMode === 'light' && { ...lightTheme.palette }),
-      ...(themeMode === 'dark' && { ...darkTheme.palette }),
-      mode: themeMode
-    },
-    direction: directionMode
-  }
-
-  let testTheme = createTheme(themeOptions)
-
-  useEffect(() => {
-    testTheme = createTheme(themeOptions)
-  }, [themeMode])
-
-  const breadcrumbItems = [
-    { label: 'Lorem ipsum', href: '#' },
-    { label: 'Dolar sit amet', href: '#' },
-    { label: 'Sed do eiusmod', href: '#' },
-    { label: 'Consectetur', href: '#' }
-  ]
-
-  const additionalButtons = [
-    { 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 callToAction = {
-    label: 'Just do it!',
-    icon: <Check />
-  }
-
-  return (
-    <ThemeProvider theme={testTheme}>
-      <Header
-        // @ts-expect-error
-        title='I am one of the best titles you ever will see'
-        titleComponent='h4'
-        subtitle='Is awesome and you know it!'
-        breadcrumbItems={breadcrumbItems}
-
-        callToAction={callToAction}
-        callToActionComponent='button'
-        additionalButtons={additionalButtons}
-
-        {...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> */}
-        <Button onClick={(): void => setDirectionMode(directionMode === 'ltr' ? 'rtl' : 'ltr')}>Toggle direction mode</Button>
-        <Typography
-          component='h1'
-          variant="h4"
-          style={{ margin: '1rem 0 .5rem' }}
-        >
-          Header 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.Header.Default
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}
-
-export const Overview: ComponentStory<typeof Header> = (args) => {
-  const breadcrumbItems = [
-    { label: 'Lorem ipsum', href: '#' },
-    { label: 'Dolar sit amet', href: '#' },
-    { label: 'Sed do eiusmod', href: '#' },
-    { label: 'Consectetur', href: '#' }
-  ]
-
-  const additionalButtons = [
-    { 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 callToAction = {
-    label: 'Just do it!',
-    icon: <Check />
-  }
-
-  return (
-    <Header
-      // @ts-expect-error
-      title='I am one of the best titles you ever will see'
-      titleComponent='h4'
-      subtitle='Is awesome and you know it!'
-      breadcrumbItems={breadcrumbItems}
-
-      callToAction={callToAction}
-      callToActionComponent='button'
-      additionalButtons={additionalButtons}
-
-      {...args}
-    />
-  )
-}
-Overview.parameters = {
-  docs: {
-    description: {
-      component: DOCS.Header.Overview
-    },
-    source: {
-      type: 'code'
-    }
-  }
-}

package/src/stories/Components/Landmarks/Header/Header.stories.tsx

@@ -1,34 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { Header } from '../../../../lib'
-
-export default {
-  title: 'Components/Landmarks/Header/Properties',
-  component: Header,
-  parameters: {
-    controls: {
-      sort: 'requiredFirst'
-    }
-  },
-  addons: {
-    panelPosition: 'right'
-  }
-} as ComponentMeta<typeof Header>
-
-// 👇 We create a “template” of how args map to rendering
-const defaultConfig = {
-  title: 'I am the Header title',
-  subtitle: 'I am the Header subtitle',
-  callToAction: {
-    label: 'Important button',
-    onClick: () => console.log('Hello there, you clicked the Important button')
-  }
-}
-const Template: ComponentStory<typeof Header> = (args) => (
-  <Header {...defaultConfig} {...args} />
-)
-
-export const Properties = Template.bind({})
-Properties.args = {
-  style: { minWidth: '90vw' }
-}