import { Heading } from './Heading';
import { v4 as uuid } from 'uuid';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { FONT_SIZE_OPTIONS, FONT_COLOR_OPTIONS } from '../../lib/tokens';
import { RESPONSIVE_STORY } from '../../docs/constants';

<Meta title="Components/Heading/Overview" component={Heading} />

# Heading

Use `Headings` as labels for pages or sections of a page that make up an interface. `Headings` can label an entire page, or sections of related content.
The `Heading` component allows you to specify an appropriate semantic element (h1-h6) and independently set its size so that it is appropriate for the surrounding content.
If no size is specified, a default size will be applied.

<Canvas isExpanded>
  <Heading as="h1">Lead the world towards a clean energy future</Heading>
</Canvas>

## Props

<ArgsTable of={Heading} />

## All Levels

Each Heading level has a default size.

<Canvas>
  <Story
    name="Levels"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=742%3A8800',
      },
    }}
  >
    <>
      <Heading as="h1">h1 Heading</Heading>
      <Heading as="h2">h2 Heading</Heading>
      <Heading as="h3">h3 Heading</Heading>
      <Heading as="h4">h4 Heading</Heading>
      <Heading as="h5">h5 Heading</Heading>
      <Heading as="h6">h6 Heading</Heading>
    </>
  </Story>
</Canvas>

## Sizes

The default size of the Heading can overridden as xs-5xl so that it's appropriate for its surrounding context.

<Canvas>
  <Story name="Sizes">
    <>
      {[...FONT_SIZE_OPTIONS].reverse().map(fontSize => (
        <Heading as="h3" size={fontSize} key={uuid()}>
          {`Size ${fontSize}`}
        </Heading>
      ))}
    </>
  </Story>
</Canvas>

The `size` prop accepts an object where the properties correspond to [breakpoint tokens](?path=/story/design-tokens-design-tokens--page#breakpoints).

<Canvas>
  <Story name="Responsive Sizes" parameters={{ ...RESPONSIVE_STORY }}>
    <Heading
      as="h3"
      size={{ base: 'sm', tablet: 'lg', desktop: 'xl', hd: '3xl' }}
    >
      Leading the world towards a clean energy future
    </Heading>
  </Story>
</Canvas>

## Colors

The variant of the heading is inherited from its parent, but can be set to brand variant as well.

<Canvas>
  <Story name="Variant">
    <>
      {FONT_COLOR_OPTIONS.map(variant => (
        <Heading as="h3" variant={variant} key={uuid()}>
          {variant}
        </Heading>
      ))}
    </>
  </Story>
</Canvas>
