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

docs(design): clean up list component docs #2805

Merged
merged 1 commit into from
May 21, 2024
Merged

docs(design): clean up list component docs #2805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions apps/design-land/src/app/list/list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<h1 daffArticleTitle>List</h1>
<p daffArticleLead> List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.</p>

<h2>Basic Lists</h2>
<h2>Basic List</h2>
<p>A <code>&lt;daff-list&gt;</code> consists of multiple <code>&lt;daff-list-item&gt;s</code>.</p>
<design-land-example-viewer-container example="basic-list"></design-land-example-viewer-container>

<h2>Navigation Lists</h2>
<p>Use <code>&lt;daff-nav-list&gt;</code> for navigation lists. <code>&lt;daff-list-item&gt;</code>should be added to an anchor tag directly.</p>
<h2>Navigation List</h2>
<p>Use <code>&lt;daff-nav-list&gt;</code> for navigation lists. <code>&lt;daff-list-item&gt;</code> should be directly added to an anchor tag.</p>
<design-land-example-viewer-container example="nav-list"></design-land-example-viewer-container>

<h2>Multi-line Lists</h2>
<h2>Multi-line List</h2>
<p>For lists that have multiple lines per item, wrap each line appropriately with a heading or paragraph tag.</p>
<design-land-example-viewer-container example="multiline-list"></design-land-example-viewer-container>

<h2>List with Icons</h2>
<p>To add an icon to a list item, use the <code>&lt;golfPrefix&gt;</code> or <code>&lt;golfSuffix&gt;</code> attributes for the appropriate placements.</p>
<p>To add an icon to a list item, use the <code>daffPrefix</code> or <code>daffSuffix</code> attributes for the appropriate placements.</p>
<design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>

<h2>Deprecation Notice</h2>
Expand Down
76 changes: 18 additions & 58 deletions libs/design/list/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,29 @@
# List Component

The `<daff-list>` component can be used to display a series of line items.
# List
List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.

## Basic List
A `<daff-list>` consists of multiple `<daff-list-item>`s.

- Consists of multiple `<daff-list-item>`s

### Usage

```
<daff-list>
<h3 daffListSubheader>Lorem Ipsum</h3>
<daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
<daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
<daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
</daff-list>
```

## Link List (Deprecated)

- `type="link"` is used for navigation lists
<design-land-example-viewer-container example="basic-list"></design-land-example-viewer-container>

### Usage
## Nvigation List
Use `<daff-nav-list>` for navigation lists. `<daff-list-item>` should be directly added to an anchor tag.

```
<daff-list type="link">
<h3 daffListSubheader>List Subheader</h3>
<daff-list-item><a href="#">List Item</a></daff-list-item>
<daff-list-item><a href="#">List Item</a></daff-list-item>
<daff-list-item><a href="#">List Item</a></daff-list-item>
<daff-list-item><a href="#">List Item</a></daff-list-item>
<daff-list-item><a href="#">List Item</a></daff-list-item>
</daff-list>
```
<design-land-example-viewer-container example="nav-list"></design-land-example-viewer-container>

## Multi-line List (Deprecated)
## Multi-line List
For lists that have multiple lines per item, wrap each line appropriately with a heading or paragraph tag.

- `type="multi-line"` allows you to have multiple lines per `daff-list-item`.
<design-land-example-viewer-container example="multiline-list"></design-land-example-viewer-container>

### Usage
## List with Icons
To add an icon to a list item, use the `daffPrefix` or `daffSuffix` attributes for the appropriate placements.

```
<daff-list type="multi-line">
<daff-list-item>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
</daff-list-item>
<daff-list-item>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
</daff-list-item>
<daff-list-item>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
</daff-list-item>
</daff-list>
```
<design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>

### Usage
## Deprecation Notice
The `mode` property will be deprecated in v1.0.0.

```
<daff-list>
<daff-list-item>
<i class="fab fa-twitter" daffListItemIcon></i>
<h4>Lorem ipsum</h4>
</daff-list-item>
</daff-list>
```
- `mode="navigation"` is replaced with `<daff-nav-list>`.
- `mode="link"` is replaced with `<daff-nav-list>`.
- `mode="multiline"` is completely deprecated. Multi-line lists will be a natural result of adding multiple lines to a `<daff-list-item>`.
Loading