docs(contained-list): improve stories (#12347)

* docs(contained-list): rename stories * docs(contained-list): add "With Layer" story
carbon-design-system · Oct 21, 2022 · 74dff48 · 74dff48
1 parent 4d94763
commit 74dff48
Showing 1 changed file with 54 additions and 6 deletions.
diff --git a/packages/react/src/components/ContainedList/next/ContainedList.stories.js b/packages/react/src/components/ContainedList/next/ContainedList.stories.js
@@ -19,6 +19,7 @@ import {
 import { VStack } from '../../Stack';
 import Button from '../../Button';
 import ExpandableSearch from '../../ExpandableSearch';
+import { Layer } from '../../Layer';
 import Tag from '../../Tag';
 import { Tooltip } from '../../Tooltip/next';
 
@@ -29,7 +30,7 @@ export default {
   component: ContainedList,
 };
 
-export const OnPage = () => (
+export const Default = () => (
   <>
     <ContainedList label="List title" kind="on-page">
       <ContainedListItem>List item</ContainedListItem>
@@ -63,7 +64,7 @@ export const Disclosed = () => (
   </>
 );
 
-export const Interactive = () => {
+export const WithInteractiveItems = () => {
   const onClick = action('onClick (ContainedListItem)');
 
   return (
@@ -88,7 +89,7 @@ export const Interactive = () => {
   );
 };
 
-export const Actions = () => {
+export const WithActions = () => {
   const itemAction = (
     <Button
       kind="ghost"
@@ -128,7 +129,7 @@ export const Actions = () => {
   );
 };
 
-export const ActionsInteractive = () => {
+export const WithInteractiveItemsAndActions = () => {
   const onClick = action('onClick (ContainedListItem)');
   const itemAction = (
     <Button
@@ -183,7 +184,7 @@ export const ActionsInteractive = () => {
   );
 };
 
-export const ListTitleDecorators = () => {
+export const WithListTitleDecorators = () => {
   return (
     <VStack gap={12}>
       <ContainedList
@@ -228,7 +229,7 @@ export const ListTitleDecorators = () => {
   );
 };
 
-export const Icons = () => {
+export const WithIcons = () => {
   return (
     <VStack gap={12}>
       <ContainedList label="List title" kind="on-page">
@@ -247,6 +248,53 @@ export const Icons = () => {
   );
 };
 
+export const WithLayer = () => {
+  return (
+    <VStack gap={12}>
+      <VStack gap={5}>
+        <ContainedList label="List title" kind="on-page">
+          <ContainedListItem>List item</ContainedListItem>
+          <ContainedListItem>List item</ContainedListItem>
+        </ContainedList>
+        <Layer>
+          <VStack gap={5}>
+            <ContainedList label="List title" kind="on-page">
+              <ContainedListItem>List item</ContainedListItem>
+              <ContainedListItem>List item</ContainedListItem>
+            </ContainedList>
+            <Layer>
+              <ContainedList label="List title" kind="on-page">
+                <ContainedListItem>List item</ContainedListItem>
+                <ContainedListItem>List item</ContainedListItem>
+              </ContainedList>
+            </Layer>
+          </VStack>
+        </Layer>
+      </VStack>
+      <VStack gap={5}>
+        <ContainedList label="List title" kind="disclosed">
+          <ContainedListItem>List item</ContainedListItem>
+          <ContainedListItem>List item</ContainedListItem>
+        </ContainedList>
+        <Layer>
+          <VStack gap={5}>
+            <ContainedList label="List title" kind="disclosed">
+              <ContainedListItem>List item</ContainedListItem>
+              <ContainedListItem>List item</ContainedListItem>
+            </ContainedList>
+            <Layer>
+              <ContainedList label="List title" kind="disclosed">
+                <ContainedListItem>List item</ContainedListItem>
+                <ContainedListItem>List item</ContainedListItem>
+              </ContainedList>
+            </Layer>
+          </VStack>
+        </Layer>
+      </VStack>
+    </VStack>
+  );
+};
+
 const PlaygroundStory = (args) => (
   <>
     {[...Array(4)].map((_, i) => (