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

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

# Layout

The `<Layout/>` component.

## Import

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

<Preview>
  <Story name="Layout">
    <Layout
      headerProps={{
        skipLinkHref: '#',
        logoLinkHref: '#',
        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": "APIs",
                  "items": [
                    {
                      "title": "Postcode Lookup",
                      "link": "/lookup",
                    },
                    {
                      "title": "Address Autocomplete",
                      "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"
            },
          ]
        },
      }}
      footerProps={{
        columns: [
          {
            heading: 'Product',
            links: [
              {
                href: '#',
                text: 'Test Link A',
              },
              {
                href: '#',
                text: 'Test Link B',
              },
              {
                href: '#',
                text: 'Test Link C',
              },
              {
                href: '#',
                text: 'Test Link D',
              },
            ]
          },
          {
            heading: 'Test',
            links: [
              {
                href: '#',
                text: 'Test Link E',
              },
              {
                href: '#',
                text: 'Test Link f',
              },
              {
                href: '#',
                text: 'Test Link G',
              },
              {
                href: '#',
                text: 'Test Link H',
              }
            ]
          }
        ],
      }}
    >
      <h1>hello world</h1>
      <Pane color="white" border="black" background="black">
        <p>this is text content</p>
      </Pane>
    </Layout>
  </Story>
</Preview>