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

<Meta title="Prefabs/Header" component={Header} />

# Header

The `<Header/>` component.

## Import

```js
import { Header } from '@firstclasspostcodes/sw14';
// or
import { Header } from '@firstclasspostcodes/sw14/lib/prefabs/Header';
```

<Preview>
  <Story name="Header">
    <Header
      logoLinkHref="#"
      skipLinkHref="#"
      controls={[
        {
          "background": "transparent",
          "border": "transparent",
          "href": "https://docs.firstclasspostcodes.com",
          "text": "Docs",
        },
        {
          "background": "black",
          "color": "white",
          "href": "https://dashboard.firstclasspostcodes.com",
          "text": "Dashboard",
        },
      ]}
      navigationData={{
        items: [
          {
            "title": "Products",
            "items": [
              {
                "title": "APIs",
                "items": [
                  {
                    "title": "Postcode Lookup",
                    "link": "/lookup",
                  },
                  {
                    "title": "Address Autocomplete",
                    "link": "/address-autocomplete",
                  },
                  {
                    "title": "Geolookup",
                    "link": "/geolookup",
                  }
                ]
              },
              {
                "title": "Formats",
                "items": [
                  {
                    "title": "JSON",
                    "link": "/lookup",
                  },
                  {
                    "title": "GeoJSON",
                    "link": "/address-autocomplete",
                  }
                ]
              },
            ]
          },
          {
            "title": "Services",
            "items": [
              {
                "title": "Something short",
                "link": "/service-a",
              },
              {
                "title": "Very short",
                "link": "/service-b",
              },
              {
                "title": "Something a bit longer",
                "link": "/service-c",
              }
            ]
          },
          {
            "title": "Pricing",
            "link": "/pricing"
          },
          {
            "title": "Dashboard",
            "link": "https://dashboard.firstclasspostcodes.com",
            "visible": {
              "xs": true,
              "md": false,
            },
          },
        ],
      }}
    />
  </Story>
</Preview>