Adds an example of nested stacks

scss/bitstyles/atoms/stack/Stack.js

@@ -8,11 +8,19 @@ const StackItem = ({
   stackItem.style.backgroundColor = backgroundColor;
   stackItem.style.padding = 'var(--bs-content-padding-base)';
   stackItem.style.borderRadius = 'var(--bs-size-s3)';
+  stackItem.style.minHeight = '6rem';
   stackItem.innerHTML = children;
   return stackItem;
 };
 
-export default ({ length, classname = [], sizeVariant = '' }) => {
+const Stack = ({
+  length = 3,
+  classname = [],
+  sizeVariant = '',
+  itemColor,
+  labelPrefix = 'stack',
+  children = [],
+}) => {
   const stack = document.createElement('div');
   stack.classList.add('a-stack');
   if (sizeVariant) {
@@ -23,11 +31,20 @@ export default ({ length, classname = [], sizeVariant = '' }) => {
     stack.classList.add(cls);
   });
 
-  for (let child = 0; child < length; child += 1) {
-    stack.append(
-      StackItem({ children: generateLabel(['stack', 'child', child + 1]) })
-    );
+  if (children.length) {
+    children.forEach((child) => stack.append(child));
+  } else {
+    for (let child = 0; child < length; child += 1) {
+      stack.append(
+        StackItem({
+          children: generateLabel([labelPrefix, 'child', child + 1]),
+          backgroundColor: itemColor,
+        })
+      );
+    }
   }
 
   return stack;
 };
+
+export { StackItem, Stack };

scss/bitstyles/atoms/stack/stack.stories.js

@@ -1,4 +1,5 @@
-import Stack from './Stack';
+import { Stack, StackItem } from './Stack';
+import { generateLabel } from '../../../../.storybook/helpers';
 
 export default {
   title: 'Atoms/Stack',
@@ -11,4 +12,23 @@ const Template = (args) => Stack(args);
 // ***** Size variants ****************** //
 
 export const Base = Template.bind({});
-Base.args = { length: 6 };
+Base.args = { length: 4 };
+
+export const Nested = () => {
+  const innerStack = Stack({
+    length: 2,
+    itemColor: 'var(--bs-color-grayscale-light-4)',
+    labelPrefix: 'stack 1 child 3 — stack 2',
+  });
+  const children = [
+    StackItem({ children: generateLabel(['stack 1', 'child 1']) }),
+    StackItem({ children: generateLabel(['stack 1', 'child 2']) }),
+    innerStack,
+    StackItem({ children: generateLabel(['stack 1', 'child 4']) }),
+    StackItem({ children: generateLabel(['stack 1', 'child 5']) }),
+  ];
+  const outerStack = Stack({ children });
+
+  outerStack.insertBefore(innerStack, outerStack.childNodes[2]);
+  return outerStack;
+};

scss/bitstyles/atoms/stack/stack.stories.mdx

@@ -2,14 +2,22 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
 <Meta title="Atoms/Stack/Overview" />
 
+<Canvas>
+  <Story id="atoms-stack--base" />
+</Canvas>
+
 # Stack
 
 A layout atom that stacks its children vertically and ensures consistent space between each. This component is responsive, applying larger spacing between children when rendered on larger viewports.
 
+This layout is suitable for large blocks of content, such as the sections in the main content of a page.
+
 The spacing and the breakpoints the component responds to can be [customized](#customization). You can also add extra size variants of the stack, that apply different spacing, but the default configuration provides only one.
 
+Stacks can be nested — children of a stack can themselves be stacks — while the spacing will remain consistent:
+
 <Canvas>
-  <Story id="atoms-stack--base" />
+  <Story id="atoms-stack--nested" />
 </Canvas>
 
 ## Customization