Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Navigation component #767

Merged
merged 4 commits into from
May 17, 2022
Merged

Add Navigation component #767

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
09e35b2
Add Navigation component.
huwshimi Apr 22, 2022
a87395f
Add search input focus and escape to close.
huwshimi Apr 27, 2022
3247c28
Migrate changes from maas-ui. Add integration tests.
huwshimi May 16, 2022
4383bd3
Remove click position.
huwshimi May 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
282 changes: 282 additions & 0 deletions src/components/Navigation/Navigation.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading