import { Story, Canvas, ArgTypes, Meta } from '@storybook/addon-docs/blocks';
import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
import * as BreadcrumbStories from './Breadcrumb.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# Breadcrumb

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Breadcrumb)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/breadcrumb/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/breadcrumb/accessibility)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [Breadcrumb with `OverflowMenu`](#breadcrumb-with-overflowmenu)
- [Skeleton state](#skeleton-state)
- [Component API](#component-api)
  - [Breadcrumb noTrailingSlash](#breadcrumb-notrailingslash)
  - [BreadcrumbItem isCurrentPage](#breadcrumbitem-iscurrentpage)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

You can build a breadcrumb using a combination of the `Breadcrumb` and
`BreadcrumbItem` components. The `Breadcrumb` component accepts a list of
`BreadcrumbItem` components as `children` and each `BreadcrumbItem` is
responsible for displaying the page links in the hierarchy.

<Canvas
  of={BreadcrumbStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Default),
    },
  ]}
/>

## Breadcrumb with `OverflowMenu`

When space becomes limited, use an `OverflowMenu` to truncate the breadcrumbs.
The first and last two page links should be shown, but the remaining breadcrumbs
in between are condensed into an overflow menu. Breadcrumbs should never wrap
onto a second line.

<Canvas
  of={BreadcrumbStories.BreadcrumbWithOverflowMenu}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () =>
        stackblitzPrefillConfig(BreadcrumbStories.BreadcrumbWithOverflowMenu),
    },
  ]}
/>

## Skeleton state

You can use the `BreadcrumbSkeleton` component to render a skeleton variant of a
breadcrumb. This is useful to display while content in your breadcrumb is being
fetched from an external resource like an API.

<Canvas
  of={BreadcrumbStories.Skeleton}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(BreadcrumbStories.Skeleton),
    },
  ]}
/>

## Component API

<ArgTypes />

### Breadcrumb noTrailingSlash

You can use the `noTrailingSlash` prop to omit the slash from the end of the
current page.

```jsx
<Breadcrumb noTrailingSlash>
  <BreadcrumbItem href="#">Breadcrumb 1</BreadcrumbItem>
  <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
  <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>
```

### BreadcrumbItem isCurrentPage

You can use the `isCurrentPage` prop on a `BreadcrumbItem` to represent the
current page.

```jsx
<Breadcrumb>
  <BreadcrumbItem href="#">Breadcrumb 1</BreadcrumbItem>
  <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
  <BreadcrumbItem href="#" isCurrentPage>
    Breadcrumb 3
  </BreadcrumbItem>
</Breadcrumb>
```

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Breadcrumb/Breadcrumb.mdx).
