Add Navigation component.

src/components/Navigation/Navigation.stories.mdx

@@ -0,0 +1,282 @@
+import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
+import Navigation from "./Navigation";
+import { Theme } from "../../types";
+
+<Meta title="Navigation" component={Navigation} />
+
+export const Template = (args) => <Navigation {...args} />;
+
+### Navigation
+
+This is the [React](https://reactjs.org/) component for the Vanilla
+[Navigation](https://vanillaframework.io/docs/patterns/navigation) pattern. It
+is a simple navigation bar that you can add to the top of your site or app.
+
+The navigation items are collapsed behind a "Menu" link in small screens and
+displayed horizontally on larger screens.
+
+### Props
+
+<ArgsTable of={Navigation} />
+
+### Default
+
+The default navigation is constrained to the max width of the Vanilla grid and
+uses the light theme.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      items: [
+        {
+          label: "Products",
+          url: "#",
+        },
+        {
+          label: "Services",
+          url: "#",
+        },
+        {
+          label: "Partners",
+          url: "#",
+        },
+      ],
+      logo: {
+        src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+        title: "Canonical",
+        url: "#",
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Dark
+
+You can switch to a dark themed Navigation by using the `dark` prop. This will
+automatically update the Navigation items to use lighter text and hover state
+colours.
+
+<Canvas>
+  <Story
+    name="Dark"
+    args={{
+      items: [
+        {
+          label: "Products",
+          url: "#",
+        },
+        {
+          label: "Services",
+          url: "#",
+        },
+        {
+          label: "Partners",
+          url: "#",
+        },
+      ],
+      logo: {
+        src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+        title: "Canonical",
+        url: "#",
+      },
+      theme: Theme.DARK,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Dropdown
+
+Sub-navigation dropdown menus can be added to Navigation by adding an `items`
+array instead of a URL. By default, the dropdown items will align to the left of the
+parent item. This can be changed by adding `alignRight` to the subnav
+object.
+
+<Canvas>
+  <Story
+    name="Dropdown"
+    args={{
+      items: [
+        {
+          items: [
+            {
+              label: "Introduction",
+              url: "#",
+            },
+            {
+              label: "News",
+              url: "#",
+            },
+            {
+              label: "Getting started - Command line",
+              url: "#",
+            },
+            {
+              label: "Getting started - OpenStack",
+              url: "#",
+            },
+            {
+              label: "Getting started - OpenNebula",
+              url: "#",
+            },
+          ],
+          label: "LXD",
+        },
+        {
+          items: [
+            {
+              label: "Introduction",
+              url: "#",
+            },
+            {
+              label: "News",
+              url: "#",
+            },
+            {
+              label: "Getting started",
+              url: "#",
+            },
+          ],
+          label: "LXCFS",
+        },
+      ],
+      itemsRight: [
+        {
+          alignRight: true,
+          items: [
+            {
+              label: "Sign out",
+              url: "#",
+            },
+          ],
+          label: "My account",
+        },
+      ],
+      logo: {
+        src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+        title: "LXD",
+        url: "#",
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Search
+
+Expanding search can be enabled by providing props to the underlying [`SearchBox`](/?path=/docs/searchbox--default-story)
+component. Elements to toggle the Searchbox will be included automatically if
+the SearchBox props are provided.
+
+<Canvas>
+  <Story
+    name="Search"
+    args={{
+      items: [
+        {
+          label: "Products",
+          url: "#",
+        },
+        {
+          label: "Services",
+          url: "#",
+        },
+        {
+          label: "Partners",
+          url: "#",
+        },
+      ],
+      logo: {
+        src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+        title: "Canonical",
+        url: "#",
+      },
+      searchProps: {
+        onSearch: () => null,
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Overriding the logo
+
+Logos can be displayed using the new tag design. In cases where another logo
+style is required then an element can be provided to the `logo` prop.
+
+<Canvas>
+  <Story
+    name="Overriding the logo"
+    args={{
+      items: [
+        {
+          label: "Products",
+          url: "#",
+        },
+        {
+          label: "Services",
+          url: "#",
+        },
+        {
+          label: "Partners",
+          url: "#",
+        },
+      ],
+      logo: (
+        <img
+          alt=""
+          src="https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg"
+          width="100"
+        />
+      ),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Overriding the link component
+
+In some cases such as when using [React Router](https://reactrouter.com/) it is
+necessary to use custom components for links. When this is required then a
+function can be passed to `generateLink` which should return your component.
+Bear in mind that some props like classes and on-click events might be passed to
+this function so take care in overriding any link props.
+
+<Canvas>
+  <Story
+    name="Overriding the link component"
+    args={{
+      generateLink: ({ url, label, isSelected, ...props }) => (
+        <button {...props}>{label}</button>
+      ),
+      items: [
+        {
+          label: "Products",
+          url: "#",
+        },
+        {
+          label: "Services",
+          url: "#",
+        },
+        {
+          label: "Partners",
+          url: "#",
+        },
+      ],
+      logo: {
+        src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
+        title: "Canonical",
+        url: "#",
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>