Merge branch 'master' into icon-attachment

seek-oss · Oct 21, 2024 · 51dee18 · 51dee18
2 parents 0b6af98 + 504803e
commit 51dee18
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 25 deletions.
diff --git a/.changeset/wet-bananas-end.md b/.changeset/wet-bananas-end.md
@@ -0,0 +1,21 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - Disclosure
+---
+
+**Disclosure:** Add `size` support
+
+Introduce the `size` prop to the `Disclosure` component, providing the same options as the `Text` component.
+
+**EXAMPLE USAGE:**
+```jsx
+<Disclosure
+  size="small"
+>
+  ...
+</Disclosure>
+```
diff --git a/package.json b/package.json
@@ -87,7 +87,7 @@
   "volta": {
     "node": "20.18.0"
   },
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].2",
   "pnpm": {
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",

diff --git a/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.docs.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.docs.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentDocs } from 'site/types';
-import { Disclosure, Text, TextLink, Strong } from '..';
+import { Disclosure, Text, TextLink, Strong, Stack, Notice } from '..';
 import source from '@braid-design-system/source.macro';
 
 const docs: ComponentDocs = {
@@ -43,53 +43,123 @@ const docs: ComponentDocs = {
   ],
   additional: [
     {
-      label: 'Custom space',
+      label: 'Visual weight',
       description: (
         <Text>
-          The space between the disclosure label and content can be customised
-          via the <Strong>space</Strong> prop.
+          By default, the call to action will have the same affordance as{' '}
+          <TextLink href="/components/TextLinkButton">TextLinkButton</TextLink>.
+          Optionally, the visual weight can be decreased by setting{' '}
+          <Strong>weight</Strong> to <Strong>weak</Strong>.
         </Text>
       ),
       Example: ({ id, setDefaultState, getState, setState }) =>
         source(
           <>
-            {setDefaultState('expanded', true)}
+            {setDefaultState('expanded', false)}
 
             <Disclosure
               id={id}
+              weight="weak"
               expandLabel="Show content"
               collapseLabel="Hide content"
               expanded={getState('expanded')}
               onToggle={setState('expanded')}
-              space="small"
             >
               <Text>Content</Text>
             </Disclosure>
           </>,
         ),
     },
     {
-      label: 'Visual weight',
+      label: 'Sizing',
+      description: (
+        <>
+          <Text>
+            The size can be customised via the <Strong>size</Strong> prop, which
+            accepts the same sizes as the{' '}
+            <TextLink href="/components/Text">Text</TextLink> component.
+          </Text>
+          <Notice>
+            <Text>
+              The provided <Strong>size</Strong> will also be used as the
+              default size for <TextLink href="/components/Text">Text</TextLink>{' '}
+              components within the content of the disclosure.
+            </Text>
+          </Notice>
+        </>
+      ),
+      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>,
+        ),
+    },
+    {
+      label: 'Custom space',
       description: (
         <Text>
-          By default, the call to action will have the same affordance as{' '}
-          <TextLink href="/components/TextLinkButton">TextLinkButton</TextLink>.
-          Optionally, the visual weight can be decreased by setting{' '}
-          <Strong>weight</Strong> to <Strong>weak</Strong>.
+          The default space between the disclosure label and content will be
+          determined by the <TextLink href="#sizing">size</TextLink>.
+          Alternatively, this can be customised via the <Strong>space</Strong>{' '}
+          prop.
         </Text>
       ),
       Example: ({ id, setDefaultState, getState, setState }) =>
         source(
           <>
-            {setDefaultState('expanded', false)}
+            {setDefaultState('expanded', true)}
 
             <Disclosure
               id={id}
-              weight="weak"
               expandLabel="Show content"
               collapseLabel="Hide content"
               expanded={getState('expanded')}
               onToggle={setState('expanded')}
+              space="large"
             >
               <Text>Content</Text>
             </Disclosure>

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.screenshots.tsx b/packages/braid-design-system/src/lib/components/Disclosure/Disclosure.screenshots.tsx
@@ -1,12 +1,17 @@
 import React, { type ReactNode } from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Disclosure, Text } from '../';
+import { Disclosure, Stack, Text } from '../';
 import { Box } from '../Box/Box';
+import { textSizeUntrimmed } from '../../css/typography.css';
 
 const Container = ({ children }: { children: ReactNode }) => (
   <Box style={{ maxWidth: 250 }}>{children}</Box>
 );
 
+const textSizes = Object.keys(textSizeUntrimmed) as Array<
+  keyof typeof textSizeUntrimmed
+>;
+
 export const screenshots: ComponentScreenshot = {
   screenshotWidths: [320],
   examples: [
@@ -182,5 +187,46 @@ export const screenshots: ComponentScreenshot = {
         </Text>
       ),
     },
+    {
+      label: 'Sizes and default spacing',
+      Example: ({ id, handler }) => (
+        <Stack space="large">
+          {textSizes.map((size) => (
+            <Disclosure
+              key={size}
+              id={`${id}_${size}`}
+              expandLabel={`${size.charAt(0).toUpperCase()}${size.slice(
+                1,
+              )} size`}
+              size={size}
+              expanded={true}
+              onToggle={handler}
+            >
+              <Text>Defaults to {size} text size</Text>
+            </Disclosure>
+          ))}
+        </Stack>
+      ),
+    },
+    {
+      label: 'Inline: Sizes and default spacing',
+      Example: ({ id, handler }) => (
+        <Stack space="large">
+          {textSizes.map((size) => (
+            <Text size={size} key={size}>
+              Inline disclosure in{' '}
+              <Disclosure
+                id={`${id}_${size}`}
+                expandLabel={`${size} size`}
+                expanded={true}
+                onToggle={handler}
+              >
+                Defaults to {size} text size
+              </Disclosure>
+            </Text>
+          ))}
+        </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>,
     ),
   },