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

apps/design-land/src/app/list/list.component.html

@@ -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>

libs/design/list/README.md

@@ -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>`.