@learningpool/ui 1.6.0 → 1.6.1

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

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

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

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

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

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