site: Add data prop docs (#1704)

seek-oss · Feb 4, 2025 · 04ead55 · 04ead55
1 parent a10e211
commit 04ead55
Show file tree

Hide file tree

Showing 149 changed files with 829 additions and 174 deletions.
diff --git a/packages/braid-design-system/scripts/generateIcons.cts b/packages/braid-design-system/scripts/generateIcons.cts
@@ -153,6 +153,7 @@ const svgrConfig = {
         import { IconContainer, type IconContainerProps } from '${relative(
           `${baseDir}/src/lib/components/icons/IconContainer`,
         )}';
+
         import { ${svgComponentName} } from '${relative(`${iconDir}/${svgComponentName}`)}';
 
         export type ${iconName}Props = IconContainerProps;
@@ -169,10 +170,11 @@ const svgrConfig = {
     await templateFileIfMissing(
       `${iconName}.docs.tsx`,
       dedent/* ts */ `
-        import type { ComponentDocs } from 'site/types';
-        import { iconDocumentation } from '${relative(`${iconComponentsDir}/iconCommon.docs`)}';
         import source from '@braid-design-system/source.macro';
+        import type { ComponentDocs } from 'site/types';
+
         import { ${iconName}, Heading, Stack } from '${relative(`${baseDir}/src/lib/components`)}';
+        import { iconDocumentation } from '${relative(`${iconComponentsDir}/iconCommon.docs`)}';
 
         const docs: ComponentDocs = {
           category: 'Icon',
@@ -185,7 +187,7 @@ const svgrConfig = {
               </Stack>,
             ),
           alternatives: [],
-          additional: [iconDocumentation],
+          additional: [...iconDocumentation],
         };
 
         export default docs;

diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx
@@ -12,6 +12,7 @@ import {
   IconImage,
 } from '../';
 import { Placeholder } from '../../playroom/components';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 import { validSpaceValues } from './Accordion';
 
@@ -220,6 +221,22 @@ const docs: ComponentDocs = {
           </>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Accordion
+          data={{ testid: 'accordion-1' }}
+          // => data-testid="accordion-1"
+        >
+          <AccordionItem
+            data={{ testid: 'accordion-item-1' }}
+            // => data-testid="accordion-item-1"
+          >
+            ...
+          </AccordionItem>
+        </Accordion>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Actions/Actions.docs.tsx b/packages/braid-design-system/src/lib/components/Actions/Actions.docs.tsx
@@ -12,6 +12,7 @@ import {
   Tiles,
   Inline,
 } from '../';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 import { actionsSpace } from './Actions';
 
@@ -129,6 +130,17 @@ const docs: ComponentDocs = {
           </Tiles>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Actions
+          data={{ testid: 'actions-1' }}
+          // => data-testid="actions-1"
+        >
+          ...
+        </Actions>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Alert/Alert.docs.tsx b/packages/braid-design-system/src/lib/components/Alert/Alert.docs.tsx
@@ -3,6 +3,7 @@ import type { ComponentDocs } from 'site/types';
 
 import { Alert, Card, Text, Strong, Stack, TextLink, List, Notice } from '../';
 import { IconLanguage } from '../icons';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 const docs: ComponentDocs = {
   category: 'Content',
@@ -168,6 +169,17 @@ const docs: ComponentDocs = {
           </Card>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Alert
+          data={{ testid: 'alert-1' }}
+          // => data-testid="alert-1"
+        >
+          ...
+        </Alert>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.docs.tsx b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.docs.tsx
@@ -17,6 +17,7 @@ import {
   TextField,
 } from '../';
 import { IconHelp, IconLanguage } from '../icons';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 import { highlightSuggestions } from './Autosuggest';
 
@@ -811,6 +812,15 @@ const docs: ComponentDocs = {
           </Stack>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Autosuggest
+          data={{ testid: 'autosuggest-1' }}
+          // => data-testid="autosuggest-1"
+        />
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Badge/Badge.docs.tsx b/packages/braid-design-system/src/lib/components/Badge/Badge.docs.tsx
@@ -17,6 +17,7 @@ import {
   IconOverflow,
   Divider,
 } from '../';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 const docs: ComponentDocs = {
   category: 'Content',
@@ -146,8 +147,8 @@ const docs: ComponentDocs = {
               />
               <Stack space="medium">
                 <Divider />
-                {new Array(3).fill('').map(() => (
-                  <>
+                {new Array(3).fill('').map((_, index) => (
+                  <Fragment key={index}>
                     <Box boxShadow="borderCriticalLight">
                       <Columns space="medium" alignY="center">
                         <Column width="content">
@@ -172,13 +173,24 @@ const docs: ComponentDocs = {
                       </Columns>
                     </Box>
                     <Divider />
-                  </>
+                  </Fragment>
                 ))}
               </Stack>
             </Stack>
           </>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Badge
+          data={{ testid: 'badge-1' }}
+          // => data-testid="badge-1"
+        >
+          ...
+        </Badge>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Bleed/Bleed.docs.tsx b/packages/braid-design-system/src/lib/components/Bleed/Bleed.docs.tsx
@@ -3,6 +3,7 @@ import type { ComponentDocs } from 'site/types';
 
 import { Box, Bleed, Stack, Text, Strong, TextLink, Tiles, Toggle } from '../';
 import { Placeholder } from '../../playroom/components';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 import { vars } from '../../themes/vars.css';
 
@@ -251,6 +252,17 @@ const docs: ComponentDocs = {
           </>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Bleed
+          data={{ testid: 'bleed-1' }}
+          // => data-testid="bleed-1"
+        >
+          ...
+        </Bleed>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Box/Box.docs.tsx b/packages/braid-design-system/src/lib/components/Box/Box.docs.tsx
@@ -26,7 +26,7 @@ import {
   unresponsiveProperties,
   pseudoProperties,
 } from '../../css/atoms/atomicProperties';
-import { Notice } from '../Notice/Notice';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 // TODO: COLORMODE RELEASE
 // Use public import
@@ -131,43 +131,20 @@ const docs: ComponentDocs = {
         </>
       ),
     },
-    {
-      label: 'Data attributes',
-      description: (
-        <>
-          <Text>
-            Braid components are very explicit about the properties they accept,
-            which makes providing arbitrary{' '}
-            <TextLink href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">
-              data attributes
-            </TextLink>{' '}
-            not possible. Instead, all Braid components accept a{' '}
-            <Strong>data</Strong> prop, allowing a single collection of data
-            attributes to be provided.
-          </Text>
-          <Notice>
-            <Text>
-              While Box does support the native HTML syntax, it also supports
-              the <Strong>data</Strong> prop for consistency.
-            </Text>
-          </Notice>
-          <Code playroom={false}>
-            {
-              source(
-                <Box
-                  data={{
-                    testid: 'customIdentifier',
-                  }}
-                  // => data-testid="customIdentifier"
-                >
-                  ...
-                </Box>,
-              ).code
-            }
-          </Code>
-        </>
-      ),
-    },
+    dataAttributeDocs({
+      code: `
+        <Box
+          data={{
+            testid: 'customIdentifier',
+          }}
+          // => data-testid="customIdentifier"
+        >
+          ...
+        </Box>
+      `,
+      supportsNativeSyntax: true,
+      componentName: 'Box',
+    }),
     {
       label: 'CSS utilities',
       description: (

diff --git a/packages/braid-design-system/src/lib/components/Button/Button.docs.tsx b/packages/braid-design-system/src/lib/components/Button/Button.docs.tsx
@@ -16,6 +16,7 @@ import {
   Toggle,
   IconArrow,
 } from '../';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 const choosingRightButtonDoc = [
   {
@@ -610,6 +611,17 @@ const docs: ComponentDocs = {
           </>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Button
+          data={{ testid: 'button-1' }}
+          // => data-testid="button-1"
+        >
+          ...
+        </Button>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.docs.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.docs.tsx
@@ -21,6 +21,7 @@ import {
   IconAdd,
   IconArrow,
 } from '..';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 const docs: ComponentDocs = {
   category: 'Content',
@@ -302,6 +303,15 @@ const docs: ComponentDocs = {
           </Stack>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <ButtonIcon
+          data={{ testid: 'button-icon-1' }}
+          // => data-testid="button-icon-1"
+        />
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Card/Card.docs.tsx b/packages/braid-design-system/src/lib/components/Card/Card.docs.tsx
@@ -4,6 +4,7 @@ import type { ComponentDocs } from 'site/types';
 
 import { Box, Stack, Card, Text, Tiles, Strong, Columns, Column } from '../';
 import { Placeholder } from '../../playroom/components';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 import { validCardComponents } from './Card';
 
@@ -162,6 +163,17 @@ const docs: ComponentDocs = {
         </Text>
       ),
     },
+    dataAttributeDocs({
+      code: `
+        <Card
+          data={{ testid: 'card-1' }}
+          // => data-testid="card-1"
+        >
+          ...
+        </Card>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };
 

diff --git a/packages/braid-design-system/src/lib/components/Checkbox/Checkbox.docs.tsx b/packages/braid-design-system/src/lib/components/Checkbox/Checkbox.docs.tsx
@@ -14,6 +14,7 @@ import {
   Divider,
 } from '../';
 import { Placeholder } from '../../playroom/components';
+import { dataAttributeDocs } from '../private/dataAttribute.docs';
 
 const docs: ComponentDocs = {
   category: 'Content',
@@ -324,6 +325,17 @@ const docs: ComponentDocs = {
           </>,
         ),
     },
+    dataAttributeDocs({
+      code: `
+        <Checkbox
+          data={{ testid: 'checkbox-1' }}
+          // => data-testid="checkbox-1"
+        >
+          ...
+        </Checkbox>
+      `,
+      supportsNativeSyntax: false,
+    }),
   ],
 };