import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import { Typography } from '.';

<Meta title="Components/Typography" component={Typography.H1} />

# Typography

The `<Typography.X>` component is used for all text-based components and allows you to flexibly customise it's appearance. This component is also used inside lots of other components, such as `<Button/>`.

## Import

```js
import { Typography } from '@firstclasspostcodes/sw14';
// or
import { Typography } from '@firstclasspostcodes/sw14/lib/components/Typography';
```

## Headings

### Heading

A heading is a primary title used for branding and marketing pages.

<Preview>
  <Story name="Heading">
    <>
      <Typography.Heading color="brand">Such a <Typography.Highlight highlight={['blue', 1]}>very important</Typography.Highlight> adventure.</Typography.Heading>
      <Typography.Caption>An optional accompanying caption</Typography.Caption>
    </>
  </Story>
</Preview>

### Subheading

A sub heading is a secondary title on the page, used for branding and marketing pages.

<Preview>
  <Story name="Subheading">
    <>
      <Typography.Subheading>Developers First</Typography.Subheading>
      <Typography.Caption>
        We've built extensively documented libraries for Javascript, .NET, 
        Java, Ruby, Python and PHP, to help you easily integrate our API into 
        your service.
      </Typography.Caption>
      <Typography.P>
        A mocked version of our API is also available in Docker, 
        so you can get started building without any subscription.
      </Typography.P>
    </>
  </Story>
</Preview>

### H1

<Preview>
  <Story name="H1">
    <>
      <Typography.H1>Such a <Typography.Text color="brand">very important</Typography.Text> adventure.</Typography.H1>
      <Typography.Caption>An optional accompanying caption</Typography.Caption>
      <Typography.P>
        Ballast <Typography.Text weight="bold">hogshead <Typography.Text slant="-10">fluke swing</Typography.Text> the lead poop</Typography.Text> deck Buccaneer dance the 
        hempen jig sutler pirate long boat. Main sheet boatswain mutiny 
        long boat <a href="#">case shot grapple clap of thunder</a> lookout smartly parley. 
        Bowsprit pillage rigging topgallant yawl trysail capstan spirits 
        interloper dead men tell no tales.
      </Typography.P>
    </>
  </Story>
</Preview>

### H2

<Preview>
  <Story name="H2">
    <>
      <Typography.H2>Such a very important adventure.</Typography.H2>
      <Typography.Caption>An optional accompanying caption</Typography.Caption>
      <Typography.P>
        Ballast hogshead fluke swing the lead poop deck Buccaneer dance the 
        hempen jig sutler pirate long boat. Main sheet boatswain mutiny 
        long boat case shot grapple clap of thunder lookout smartly parley. 
        Bowsprit pillage rigging topgallant yawl trysail capstan spirits 
        interloper dead men tell no tales.
      </Typography.P>
    </>
  </Story>
</Preview>

### H3

<Preview>
  <Story name="H3">
    <>
      <Typography.H3>Such a very important adventure.</Typography.H3>
      <Typography.Caption>An optional accompanying caption</Typography.Caption>
      <Typography.P>
        Ballast hogshead fluke swing the lead poop deck Buccaneer dance the 
        hempen jig sutler pirate long boat. Main sheet boatswain mutiny 
        long boat case shot grapple clap of thunder lookout smartly parley. 
        Bowsprit pillage rigging topgallant yawl trysail capstan spirits 
        interloper dead men tell no tales.
      </Typography.P>
    </>
  </Story>
</Preview>

### H4

<Preview>
  <Story name="H4">
    <>
      <Typography.H4>Such a very important adventure.</Typography.H4>
      <Typography.Caption>An optional accompanying caption</Typography.Caption>
    </>
  </Story>
</Preview>

### H5

<Preview>
  <Story name="H5">
    <>
      <Typography.H5>Such a very important adventure.</Typography.H5>
      <Typography.Caption>An optional accompanying caption</Typography.Caption>
    </>
  </Story>
</Preview>

### H6

<Preview>
  <Story name="H6">
    <>
      <Typography.P>
        Ballast hogshead fluke swing the lead poop deck Buccaneer dance the 
        hempen jig sutler pirate long boat. Main sheet boatswain mutiny 
        long boat case shot grapple clap of thunder lookout smartly parley. 
        Bowsprit pillage rigging topgallant yawl trysail capstan spirits 
        interloper dead men tell no tales.
      </Typography.P>
      <Typography.H6>Such a very important adventure.</Typography.H6>
    </>
  </Story>
</Preview>

### Links

<Preview>
  <Story name="Links">
    <>
      <Typography.P as="a" href="#">
        Click me
      </Typography.P>
      <Typography.H6>Such a very important adventure.</Typography.H6>
    </>
  </Story>
</Preview>

### Paragraph

<Preview>
  <Story name="Paragraph">
    <>
      <Typography.P>
        Ballast hogshead fluke swing the lead poop deck Buccaneer dance the 
        hempen jig sutler pirate long boat. Main sheet boatswain mutiny 
        long boat case shot grapple clap of thunder lookout smartly parley. 
        Bowsprit pillage rigging topgallant yawl trysail capstan spirits 
        interloper dead men tell no tales.
      </Typography.P>
      <Typography.P>
        Ballast hogshead fluke swing the lead poop deck Buccaneer dance the 
        hempen jig sutler pirate long boat. Main sheet boatswain mutiny 
        long boat case shot grapple clap of thunder lookout smartly parley. 
        Bowsprit pillage rigging topgallant yawl trysail capstan spirits 
        interloper dead men tell no tales.
      </Typography.P>
      <Typography.P>
        Ballast hogshead fluke swing the lead poop deck Buccaneer dance the 
        hempen jig sutler pirate long boat. Main sheet boatswain mutiny 
        long boat case shot grapple clap of thunder lookout smartly parley. 
        Bowsprit pillage rigging topgallant yawl trysail capstan spirits 
        interloper dead men tell no tales.
      </Typography.P>
    </>
  </Story>
</Preview>