import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { TopBar } from "./TopBar";
import { Button, BUTTON_VARIANT } from "../Button";
import { Box } from "../Box";
import { Reference } from "../Reference";

<Meta title="Components/Layout/Top Bar" component={TopBar} />

# TopBar

```jsx
import { TopBar } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="TopBar">
    <TopBar
      leftSlot={
        <TopBar.SubNav>
          <TopBar.SubNavItem href="/" isActive>
            Item One
          </TopBar.SubNavItem>
          <TopBar.SubNavItem href="/">Item Two</TopBar.SubNavItem>
          <TopBar.SubNavItem href="/">Item Three</TopBar.SubNavItem>
        </TopBar.SubNav>
      }
      rightSlot={
        <Button.Group>
          <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary Action</Button>
          <Button>Primary Action</Button>
        </Button.Group>
      }
    />
  </Story>
</Preview>

## `TopBar` Custom Props

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<Props of={TopBar} />

## `TopBar.SubNav` Custom Props

`TopBar.SubNav` simply extends [`BoxProps`](/?path=/docs/components-box--box#all-props) and does not have any custom props.

## `TopBar.SubNavItem` Custom Props

These are the custom props that extend [`LinkProps`](/?path=/docs/components-link--link#all-props)

<Props of={TopBar.SubNavItem} />

## `TopBar.Breadcrumbs` Custom Props

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).

<Props of={TopBar.Breadcrumbs} />

## Demos

### Breadcrumbs

<Preview>
  <Story name="TopBar with Breadcrumbs">
    <TopBar
      leftSlot={
        <TopBar.Breadcrumbs
          parentLinkTitle="My Shared Room"
          parentLinkProps={{ className: "test-class" }}
          currentPageTitle="SOC 2 Type 2 Report"
          currentPageSubtitle="June 2018 — June 2019"
        />
      }
    />
  </Story>
</Preview>

### Breadcrumbs, actions, and SubNav

When another row is needed, just use a second `TopBar`.

<Preview>
  <Story name="TopBar with Breadcrumbs, actions, and SubNav">
    <Box>
      <TopBar
        leftSlot={
          <TopBar.Breadcrumbs
            parentLinkTitle="My Shared Room"
            parentLinkProps={{ className: "test-class" }}
            currentPageTitle="SOC 2 Type 2 Report"
            currentPageSubtitle="June 2018 — June 2019"
          />
        }
        rightSlot={
          <Button.Group>
            <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary Action</Button>
            <Button>Primary Action</Button>
          </Button.Group>
        }
      />
      <TopBar
        leftSlot={
          <TopBar.SubNav>
            <TopBar.SubNavItem href="/" isActive>
              Audience Activity
            </TopBar.SubNavItem>
            <TopBar.SubNavItem href="/">Properties</TopBar.SubNavItem>
            <TopBar.SubNavItem href="/">Versions</TopBar.SubNavItem>
          </TopBar.SubNav>
        }
      />
    </Box>
  </Story>
</Preview>

### Breadcrumbs with plain parent text

When navigation back to a parent page is not needed, you can render text instead of a clickable link by using the `parentTitle` prop of `TopBar.Breadcrumbs`.

<Preview>
  <Story name="TopBar Breadcrumbs with plain parent">
    <Box>
      <TopBar
        leftSlot={
          <TopBar.Breadcrumbs
            parentTitle="My Shared Room"
            currentPageTitle="SOC 2 Type 2 Report"
            currentPageSubtitle="June 2018 — June 2019"
          />
        }
        rightSlot={
          <Button.Group>
            <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary Action</Button>
            <Button>Primary Action</Button>
          </Button.Group>
        }
      />
    </Box>
  </Story>
</Preview>

### Middle

There are a total of 3 slots available with `TopBar`.

<Preview>
  <Story name="Middle">
    <TopBar
      leftSlot={<TopBar.Breadcrumbs currentPageTitle="Page Title" />}
      middleSlot={<Reference>Page level content</Reference>}
      rightSlot={<Button>Primary Action</Button>}
    />
  </Story>
</Preview>