import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs } from '../../globals/internal/storybook-cdn';
import * as OrderedListStories from './ordered-list.stories';

<Meta of={OrderedListStories} />

# Ordered list

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

## Table of Contents

- [Overview](#overview)
- [Native List Styles](#native-list-styles)
- [Nested](#nested)
- [Component API](#component-api)
- [CDN](#cdn)
- [Feedback](#feedback)

## Overview

<div style={{ paddingLeft: '15px' }}>
  <Canvas of={OrderedListStories.Default} />
</div>

## Native List Styles

<div style={{ paddingLeft: '15px' }}>
  <Canvas of={OrderedListStories.NativeListStyles} />
</div>

## Nested

<div style={{ paddingLeft: '15px' }}>
  <Canvas of={OrderedListStories.Nested} />
</div>

## Component API

## `cds-ordered-list`

<ArgTypes of="cds-ordered-list" />

## `cds-list-item`

<ArgTypes of="cds-list-item" />

<Markdown>{`${cdnJs({ components: ['list'] })}`}</Markdown>

## 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/web-components/src/components/list/ordered-list.mdx).
