site: Update Stack snippets

seek-oss · Aug 8, 2024 · e5ac784 · e5ac784
1 parent 17c42b7
commit e5ac784
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 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
@@ -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
@@ -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>,
     ),
   },