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
      skipLinkHref="#"
      headerProps={{
        "controls": [
          {
            "background": "black",
            "color": "white",
            "href": "https://dashboard.firstclasspostcodes.com",
            "text": "Dashboard"
          }
        ],
        "logoLinkHref": "/",
        "logoLinkTitle": "Firstclasspostcodes",
        "navigationData": {
          "items": [
            {
              "link": "/",
              "title": "Homepage",
              "visible": {
                "md": false,
                "xs": true
              }
            },
            {
              "link": "/getting-started",
              "title": "Getting Started"
            },
            {
              "items": [
                {
                  "items": [
                    {
                      "link": "/api/operations/postcode-lookup",
                      "title": "Postcode Lookup"
                    },
                    {
                      "link": "/api/operations/geolocation-lookup",
                      "title": "Geolocation Lookup"
                    },
                    {
                      "link": "/api/operations/address-autocomplete",
                      "title": "Address Autocomplete"
                    }
                  ],
                  "title": "Operations"
                },
                {
                  "items": [
                    {
                      "link": "/api/information/authentication",
                      "title": "Authentication"
                    },
                    {
                      "link": "/api/information/errors",
                      "title": "Errors"
                    },
                    {
                      "link": "/api/information/request-ids",
                      "title": "Request IDs"
                    },
                    {
                      "link": "/api/information/usage",
                      "title": "Usage"
                    }
                  ],
                  "title": "Information"
                }
              ],
              "title": "API Reference"
            },
            {
              "items": [
                {
                  "items": [
                    {
                      "link": "/libaries/javascript",
                      "title": "Javascript"
                    },
                    {
                      "link": "/libaries/python",
                      "title": "Python"
                    },
                    {
                      "link": "/libaries/ruby",
                      "title": "Ruby"
                    },
                    {
                      "link": "/libaries/php",
                      "title": "PHP"
                    }
                  ],
                  "title": "Libraries"
                },
                {
                  "items": [
                    {
                      "link": "https://dashboard.firstclasspostcodes.com",
                      "title": "Dashboard"
                    },
                    {
                      "link": "https://hub.docker.com/r/firstclasspostcodes/mock",
                      "rel": "noreferrer noopener",
                      "target": "_blank",
                      "title": "Mock API"
                    },
                    {
                      "link": "https://editor.swagger.io/?url=https://api.firstclasspostcodes.com/data/.spec",
                      "rel": "noreferrer noopener",
                      "target": "_blank",
                      "title": "API Reference"
                    }
                  ],
                  "title": "Tools"
                }
              ],
              "title": "Libraries & Tools"
            },
            {
              "link": "https://dashboard.firstclasspostcodes.com",
              "title": "Dashboard",
              "visible": {
                "md": false,
                "xs": true
              }
            }
          ]
        }
      }}
      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>