docs: contained-list

src/data/nav-items.yaml

@@ -114,6 +114,8 @@
       path: /components/checkbox/usage/
     - title: Code snippet
       path: /components/code-snippet/usage/
+    - title: Contained list
+      path: /components/contained-list/usage/
     - title: Content switcher
       path: /components/content-switcher/usage/
     - title: Data table

src/pages/components/contained-list/accessibility.mdx

@@ -0,0 +1,26 @@
+---
+title: Contained list
+description:
+  Contained lists group content that is similar or related and can contain
+  read-only or interactive information.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+<PageDescription>
+
+Design annotations are needed for specific instances shown below, but for the
+standard accordion component, Carbon already incorporates accessibility.
+
+</PageDescription>
+
+<InlineNotification>
+
+This page is underdevelopment. Please check back later for updates.
+
+</InlineNotification>
+
+<AnchorLinks>
+  <AnchorLink>What Carbon provides</AnchorLink>
+  <AnchorLink>Design recommendations</AnchorLink>
+  <AnchorLink>Development considerations</AnchorLink>
+</AnchorLinks>

src/pages/components/contained-list/code.mdx

@@ -0,0 +1,32 @@
+---
+title: Contained list
+description:
+  Contained lists group content that is similar or related and can contain
+  read-only or interactive information.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+<PageDescription>
+
+Preview the contained list component with the React live demo. For detailed code
+usage documentation, see the Storybooks for each framework below.
+
+</PageDescription>
+
+## Documentation
+
+<InlineNotification>
+
+**Coming soon:** The storybook code for contained list is underdevelopment and
+will be available soon.
+
+</InlineNotification>
+
+## Live demo
+
+<InlineNotification>
+
+**Coming soon:** The live demo for contained list is underdevelopment and will
+be available soon.
+
+</InlineNotification>

src/pages/components/contained-list/style.mdx

@@ -0,0 +1,153 @@
+---
+title: Contained list
+description:
+  Contained lists group content that is similar or related and can contain
+  read-only or interactive information.
+tabs: ['Usage', 'Style', 'Code', 'Accessibility']
+---
+
+## Color
+
+| Element          | Property         | Color token        |
+| ---------------- | ---------------- | ------------------ |
+| Title: on page   | text color       | `$text-primary`    |
+|                  | background-color | `$background`      |
+| Title: disclosed | text color       | `$text-secondary`  |
+|                  | background-color | `$layer`\*         |
+| Item             | text color       | `$text-primary`    |
+|                  | background-color | transparent        |
+| Icon (optional)  | svg              | `$icon-primary`    |
+| Row divider      | border-bottom    | `$border-subtle`\* |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={8}>
+
+![Enabled states for contained list variants](images/contained-list-style-1.png)
+
+</Column>
+</Row>
+
+<Caption>Example of enabled states for contained list variants.</Caption>
+
+### Interactive states
+
+| Element  | Property         | Color token        |
+| -------- | ---------------- | ------------------ |
+| Hover    | background-color | `$layer-hover`\*   |
+| Focus    | border           | `$focus`           |
+| Active   | background-color | `$layer-active`\*  |
+| Disabled | text color       | `$text-disabled`   |
+|          | border           | `$border-disabled` |
+
+<Caption>
+  * Denotes a contextual color token that will change values based on the layer
+  it is placed on.
+</Caption>
+
+<Row>
+<Column colLg={12}>
+
+![States for contained list item rows](images/contained-list-style-2.png)
+
+</Column>
+</Row>
+
+<Caption>Example of states for contained list item rows.</Caption>
+
+<br />
+
+<Row>
+<Column colLg={12}>
+
+![States for contained list inline actions](images/contained-list-style-3.png)
+
+</Column>
+</Row>
+
+<Caption>Example of states for contained list inline actions.</Caption>
+
+## Typography
+
+All contained list text should be set in sentence case, with only the first word
+in a phrase and any proper nouns capitalized.
+
+| Element          | Font-size (px/rem) | Font-weight    | Type token            |
+| ---------------- | ------------------ | -------------- | --------------------- |
+| Title: on page   | 14 / 0.875         | SemiBold / 600 | `$heading-compact-01` |
+| Title: disclosed | 12 / 0.75          | Regular / 400  | `$label-01`           |
+| Item             | 14 / 0.875         | Regular / 400  | `$body-01`            |
+
+## Structure
+
+| Element           | Property                    | px / rem | Spacing token |
+| ----------------- | --------------------------- | -------- | ------------- |
+| Header: on page   | height                      | 32 / 2   | `$spacing-07` |
+|                   | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Header: disclosed | height                      | 48 / 3   | `$spacing-09` |
+|                   | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Item              | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Icon (optional)   | height, width               | 16 / 1   | —             |
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for the on page list variant.](images/contained-list-style-4.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for the on page list variant. | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for the disclosed list variant.](images/contained-list-style-5.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for the disclosed list variant. | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for height and width of row content.](images/contained-list-style-6.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for height and width of row content. | px /
+  rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for padding and rule alignment.](images/contained-list-style-7.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for padding and rule alignment. | px / rem
+</Caption>
+
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for inline actions.](images/contained-list-style-8.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for inline actions. | px / rem
+</Caption>