Snippets & gallery

seek-oss · Oct 21, 2024 · 7178fff · 7178fff
1 parent d618e6b
commit 7178fff
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 7 deletions.
diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.gallery.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.gallery.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import type { GalleryComponent } from 'site/types';
-import { Disclosure } from '..';
+import { Disclosure, Stack, Strong, Text } from '..';
 import source from '@braid-design-system/source.macro';
 import { Placeholder } from '../../playroom/components';
 
 export const galleryItems: GalleryComponent = {
   examples: [
     {
+      label: 'Standard',
       Example: ({ id }) =>
         source(
           <Disclosure
@@ -18,5 +19,80 @@ export const galleryItems: GalleryComponent = {
           </Disclosure>,
         ),
     },
+    {
+      label: 'Visual weight',
+      Example: ({ id }) =>
+        source(
+          <Stack space="large">
+            <Disclosure
+              id={`${id}_1`}
+              expandLabel="Regular weight"
+              weight="regular"
+            >
+              <Placeholder height={100} />
+            </Disclosure>
+            <Disclosure
+              id={`${id}_2`}
+              expandLabel="Weak weight"
+              size="standard"
+              weight="weak"
+            >
+              <Placeholder height={100} />
+            </Disclosure>
+          </Stack>,
+        ),
+    },
+    {
+      label: 'Sizing',
+      Example: ({ id, handler }) =>
+        source(
+          <Stack space="large">
+            <Disclosure
+              id={`${id}_1`}
+              expandLabel="Large size"
+              size="large"
+              expanded={true}
+              onToggle={handler}
+            >
+              <Text>
+                Defaults to <Strong>large</Strong> text size
+              </Text>
+            </Disclosure>
+            <Disclosure
+              id={`${id}_2`}
+              expandLabel="Standard size"
+              size="standard"
+              expanded={true}
+              onToggle={handler}
+            >
+              <Text>
+                Defaults to <Strong>standard</Strong> text size
+              </Text>
+            </Disclosure>
+            <Disclosure
+              id={`${id}_3`}
+              expandLabel="Small size"
+              size="small"
+              expanded={true}
+              onToggle={handler}
+            >
+              <Text>
+                Defaults to <Strong>small</Strong> text size
+              </Text>
+            </Disclosure>
+            <Disclosure
+              id={`${id}_4`}
+              expandLabel="Xsmall size"
+              size="xsmall"
+              expanded={true}
+              onToggle={handler}
+            >
+              <Text>
+                Defaults to <Strong>xsmall</Strong> text size
+              </Text>
+            </Disclosure>
+          </Stack>,
+        ),
+    },
   ],
 };
diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.snippets.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.snippets.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import type { Snippets } from '../private/Snippets';
-import { Disclosure, Stack, Text } from '../../playroom/components';
+import { Disclosure, Text } from '../../playroom/components';
 import source from '@braid-design-system/source.macro';
 
 export const snippets: Snippets = [
   {
     name: 'Standard',
     code: source(
       <Disclosure expandLabel="Show" collapseLabel="Hide">
-        <Stack space="large">
-          <Text>Content</Text>
-        </Stack>
+        <Text>Content</Text>
       </Disclosure>,
     ),
   },

diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.tsx
@@ -86,8 +86,8 @@ export const Disclosure = ({
   const size = sizeProp ?? textContext?.size ?? 'standard';
   const defaultSpace = isInline
     ? /*
-       * If inline, only use `xxsmall` as the space between the trigger
-       * and the content will include the line height of the text
+       * If inline, only use `xxsmall` space between the trigger and the content
+       * to compensate for the additional space created by the line height of text.
        */
       'xxsmall'
     : defaultSpaceForSize[size];