From e5ac784739a859e83ca3ddcf43c1f46f5bb2e9a3 Mon Sep 17 00:00:00 2001
From: Michael Taranto <michael.taranto@gmail.com>
Date: Thu, 8 Aug 2024 13:27:50 +1000
Subject: [PATCH] site: Update Stack snippets

---
 .../src/lib/components/Stack/Stack.docs.tsx   |  6 ++
 .../lib/components/Stack/Stack.snippets.tsx   | 66 ++++++++++---------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
index b082ed0a1d4..9f61207fad5 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
@@ -14,6 +14,12 @@ const docs: ComponentDocs = {
         <Placeholder height={40} />
       </Stack>,
     ),
+  description: (
+    <Text>
+      Defines the vertical rhythm of its child elements, interleaving a uniform
+      amount of space between each element.
+    </Text>
+  ),
   alternatives: [
     {
       name: 'Box',
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.snippets.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.snippets.tsx
index e0910b87fd5..de8bc5e2cb1 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.snippets.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.snippets.tsx
@@ -1,76 +1,78 @@
 import React from 'react';
 import type { Snippets } from '../private/Snippets';
-import { Stack, Placeholder } from '../../playroom/components';
+import { Stack, Placeholder, Text, Heading } from '../../playroom/components';
 import source from '@braid-design-system/source.macro';
 
 export const snippets: Snippets = [
   {
-    name: 'XXSmall Space',
+    name: 'Small content',
     code: source(
-      <Stack space="xxsmall">
-        <Placeholder height={40} />
-        <Placeholder height={40} />
-        <Placeholder height={40} />
+      <Stack space="xsmall">
+        <Text size="small">Small Text</Text>
+        <Text size="small">Small Text</Text>
       </Stack>,
     ),
   },
   {
-    name: 'XSmall Space',
+    name: 'Standard content',
     code: source(
-      <Stack space="xsmall">
-        <Placeholder height={40} />
-        <Placeholder height={40} />
-        <Placeholder height={40} />
+      <Stack space="small">
+        <Text>Standard Text</Text>
+        <Text>Standard Text</Text>
       </Stack>,
     ),
   },
   {
-    name: 'Small Space',
+    name: 'Content groups',
     code: source(
-      <Stack space="small">
-        <Placeholder height={40} />
-        <Placeholder height={40} />
-        <Placeholder height={40} />
+      <Stack space="medium">
+        <Heading level="4">Heading</Heading>
+        <Text>Standard Text</Text>
       </Stack>,
     ),
   },
   {
-    name: 'Medium Space',
+    name: 'Content groups (loose)',
     code: source(
-      <Stack space="medium">
-        <Placeholder height={40} />
-        <Placeholder height={40} />
-        <Placeholder height={40} />
+      <Stack space="large">
+        <Heading level="3">Heading</Heading>
+        <Text>Standard Text</Text>
       </Stack>,
     ),
   },
   {
-    name: 'Gutter Space',
+    name: 'Section groups',
     code: source(
-      <Stack space="gutter">
-        <Placeholder height={40} />
+      <Stack space="large">
         <Placeholder height={40} />
         <Placeholder height={40} />
       </Stack>,
     ),
   },
   {
-    name: 'Large Space',
+    name: 'Section groups (loose)',
     code: source(
-      <Stack space="large">
-        <Placeholder height={40} />
+      <Stack space="xlarge">
         <Placeholder height={40} />
         <Placeholder height={40} />
       </Stack>,
     ),
   },
   {
-    name: 'Responsive Space',
+    name: 'Page sections',
     code: source(
-      <Stack space={{ mobile: 'small', tablet: 'large', desktop: 'none' }}>
-        <Placeholder height={40} />
-        <Placeholder height={40} />
-        <Placeholder height={40} />
+      <Stack space="xxlarge">
+        <Placeholder height={100} />
+        <Placeholder height={100} />
+      </Stack>,
+    ),
+  },
+  {
+    name: 'Page sections (loose)',
+    code: source(
+      <Stack space="xxxlarge">
+        <Placeholder height={100} />
+        <Placeholder height={100} />
       </Stack>,
     ),
   },