Skip to content

Commit

Permalink
docs: DLT-1796 move storybook to doc site - Link to Pagination (#441)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ninamarina
ninamarina authored Aug 16, 2024
1 parent 0f90dd4 commit bc2d57d
Show file tree
Hide file tree
Showing 20 changed files with 487 additions and 1,308 deletions.
4 changes: 4 additions & 0 deletions apps/dialtone-documentation/docs/_data/site-nav.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -646,6 +646,10 @@
"text": "List Item",
"link": "/components/list-item.html"
},
{
"text": "List Item Group",
"link": "/components/list-item-group.html"
},
{
"text": "Modal",
"link": "/components/modal.html"
Expand Down
95 changes: 95 additions & 0 deletions apps/dialtone-documentation/docs/components/list-item-group.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
---
title: List item group
description: The "List Item Group" component uses a non interactive heading which groups list items.
status: ready
storybook: https://dialtone.dialpad.com/vue/?path=/story/components-list-item-group--default
---

<code-well-header>
<dt-list-item-group
heading="Example Heading"
heading-class="d-fw-bold"
>
<dt-list-item
navigation-type="tab"
>
item1
</dt-list-item>
<dt-list-item
navigation-type="tab"
>
item2
</dt-list-item>
<dt-list-item
navigation-type="tab"
>
item3
</dt-list-item>
</dt-list-item-group>
</code-well-header>

## Base style

You should use this component when you have multiple list items you would like to group into different categories.

The heading is unstyled by default. You will likely have to pass utility classes to the heading-class prop to make the heading look how you wish.

<code-well-header>
<dt-list-item-group
heading="Example Heading"
heading-class="d-fw-bold"
ref="listItemGroup"
>
<dt-list-item
navigation-type="tab"
>
item1
</dt-list-item>
<dt-list-item
navigation-type="tab"
>
item2
</dt-list-item>
<dt-list-item
navigation-type="tab"
>
item3
</dt-list-item>
</dt-list-item-group>
</code-well-header>

<code-example-tabs
:htmlCode='() => $refs.listItemGroup'
vueCode='
<dt-list-item-group
heading="Example Heading"
heading-class="d-fw-bold"
>
<dt-list-item
navigation-type="tab"
>
item1
</dt-list-item>
<dt-list-item
navigation-type="tab"
>
item2
</dt-list-item>
<dt-list-item
navigation-type="tab"
>
item3
</dt-list-item>
</dt-list-item-group>
'
/>

## Accessibility

The List Item Group does not implement arrow-keys keyboard navigation. You will however get arrow-keys keyboard navigation when using this within list based Dialtone components such as Dropdown or Combobox.

The aria label for the List Item Group will be set by the content of the heading.

## Vue API

<component-vue-api component-name="listitemgroup" />
183 changes: 176 additions & 7 deletions apps/dialtone-documentation/docs/components/list-item.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,52 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen

<code-well-header class="d-d-block">
<ul>
<dt-list-item navigationType="tab">
<dt-list-item navigation-type="tab">
<template #left>
<dt-icon name="check" />
</template>
<span>Default List Item</span>
<template #subtitle>
{subtitle}
Description
</template>
<template #bottom>
{bottom}
<dt-badge text="Label" />
</template>
<template #right>
<dt-icon name="external-link" />
</template>
</dt-list-item>
</ul>
</code-well-header>

## Base style

A list item provides accessibility controls and common functionality. The component uses child components that provide styling and slots for different types of list items. If you want to create a custom list item you can pass a type "custom", which will let you define the structure of the content.

The default list item has 5 slots that can be used for the most common use cases, **left**, **right**, **default**, **subtitle** and **bottom** slot. All of the slots are optional.

The **left** slot can contain content, such as an avatar, that will be positioned to the left of the main content.

The **right** slot works the same way, but its contents are placed to the right of the main slot.

The **default** slot contains the main content of the list item.

The **subtitle** slot can be used to display content below the default slot. The slot has smaller text size and lighter color than default slot.

The **bottom** slot can be used to display content below the subtitle slot.

<code-well-header class="d-d-block">
<ul>
<dt-list-item navigation-type="tab">
<template #left>
<dt-icon name="check" />
</template>
<span>Default List Item</span>
<template #subtitle>
Description
</template>
<template #bottom>
<dt-badge text="Label" />
</template>
<template #right>
<dt-icon name="external-link" />
Expand Down Expand Up @@ -68,23 +105,155 @@ htmlCode='
'
vueCode='
<ul>
<dt-list-item navigationType="tab">
<dt-list-item navigation-type="tab">
<template #left>
<dt-icon name="check" />
</template>
<span>Default List Item</span>
<template #subtitle>
{subtitle}
Description
</template>
<template #bottom>
{bottom}
<dt-badge text="Label" />
</template>
<template #right>
<dt-icon name="external-link" />
</template>
</dt-list-item>
</ul>
'
showHtmlWarning />
/>

## Variants

### Custom list item

When `type` is set to "custom" the list item will not render any styles or slots. This type can be used when the list item has to support content that does not work with the default structure.

<code-well-header class="d-d-block">
<ul ref="customListItem">
<dt-list-item
navigation-type="tab"
type="custom"
>
<div class="d-py8 d-px12 d-d-flex d-ai-center d-jc-space-between">
<div>
<time
class="d-fs-100 d-pr12"
datetime="10:00"
>
10:00
</time>
<span class="d-fs-200">
Custom List Item Example
</span>
</div>
<div class="d-p6 d-tn8 d-r12 d-d-flex d-bgc-white d-bar4 d-bs-md">
<dt-button
class="d-p4 d-py8"
importance="clear"
title="share"
>
<template #icon>
<dt-icon
name="share-2"
size="200"
/>
</template>
</dt-button>
<dt-button
class="d-p4 d-py8 d-ml4"
importance="clear"
title="star"
>
<template #icon>
<dt-icon
name="star"
size="200"
/>
</template>
</dt-button>
<dt-button
class="d-p4 d-py8 d-ml4"
importance="clear"
title="more"
>
<template #icon>
<dt-icon
name="more-vertical"
size="200"
/>
</template>
</dt-button>
</div>
</div>
</dt-list-item>
</ul>
</code-well-header>

<code-example-tabs
:htmlCode='() => $refs.customListItem'
vueCode='
<ul>
<dt-list-item
navigation-type="tab"
type="custom"
>
<div class="d-py8 d-px12 d-d-flex d-ai-center d-jc-space-between">
<div>
<time
class="d-fs-100 d-pr12"
datetime="10:00"
>
10:00
</time>
<span class="d-fs-200">
Custom List Item Example
</span>
</div>
<div class="d-p6 d-tn8 d-r12 d-d-flex d-bgc-white d-bar4 d-bs-md">
<dt-button
class="d-p4 d-py8"
importance="clear"
title="share"
>
<template #icon>
<dt-icon
name="share-2"
size="200"
/>
</template>
</dt-button>
<dt-button
class="d-p4 d-py8 d-ml4"
importance="clear"
title="star"
>
<template #icon>
<dt-icon
name="star"
size="200"
/>
</template>
</dt-button>
<dt-button
class="d-p4 d-py8 d-ml4"
importance="clear"
title="more"
>
<template #icon>
<dt-icon
name="more-vertical"
size="200"
/>
</template>
</dt-button>
</div>
</div>
</dt-list-item>
</ul>
'
/>

## Vue API

Expand Down
Loading

0 comments on commit bc2d57d

Please sign in to comment.