site: Update Actions documentation and examples (#1548)

seek-oss · Jul 31, 2024 · 16334cd · 16334cd
1 parent 2e9a035
commit 16334cd
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 56 deletions.
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
@@ -1,7 +1,18 @@
 import React from 'react';
 import type { ComponentDocs } from 'site/types';
 import source from '@braid-design-system/source.macro';
-import { Actions, Button, TextLink, Text, Strong, Stack } from '../';
+import {
+  Actions,
+  Button,
+  TextLink,
+  Text,
+  Strong,
+  Stack,
+  Notice,
+  Tiles,
+  Inline,
+} from '../';
+import { actionsSpace } from './Actions';
 
 const docs: ComponentDocs = {
   category: 'Content',
@@ -13,6 +24,13 @@ const docs: ComponentDocs = {
         <Button variant="transparent">Button 3</Button>
       </Actions>,
     ),
+  description: (
+    <Text>
+      The <Strong>Actions</Strong> component standardises the responsive layout
+      and spacing for groups of{' '}
+      <TextLink href="/components/Button">Button</TextLink> components.
+    </Text>
+  ),
   alternatives: [
     {
       name: 'Inline',
@@ -24,6 +42,51 @@ const docs: ComponentDocs = {
     },
   ],
   additional: [
+    {
+      label: 'Layout',
+      description: (
+        <>
+          <Text>
+            The buttons are arranged using a responsive{' '}
+            <TextLink href="/components/Inline">Inline</TextLink> component.{' '}
+            <Strong>On mobile</Strong>, the buttons are full width, and stacked
+            vertically. <Strong>Above mobile</Strong>, the buttons are the width
+            of their content sitting side by side, wrapping when necessary.
+          </Text>
+
+          <Notice tone="info">
+            <Text>
+              For consistency, it is recommended to always lead with the primary
+              action.
+            </Text>
+          </Notice>
+        </>
+      ),
+      code: false,
+      Example: () =>
+        source(
+          <Tiles space="xlarge" columns={[1, 2]}>
+            <Stack space="small">
+              <Text tone="secondary" size="small">
+                On mobile
+              </Text>
+              <Stack space={actionsSpace}>
+                <Button>Primary</Button>
+                <Button variant="transparent">Secondary</Button>
+              </Stack>
+            </Stack>
+            <Stack space="small">
+              <Text tone="secondary" size="small">
+                Above mobile
+              </Text>
+              <Inline space={actionsSpace}>
+                <Button>Primary</Button>
+                <Button variant="transparent">Secondary</Button>
+              </Inline>
+            </Stack>
+          </Tiles>,
+        ),
+    },
     {
       label: 'Sizes',
       description: (
@@ -43,9 +106,9 @@ const docs: ComponentDocs = {
       ),
       Example: () =>
         source(
-          <Stack space="large">
+          <Tiles space="xlarge" columns={[1, 2]}>
             <Stack space="small">
-              <Text tone="secondary" weight="strong">
+              <Text tone="secondary" size="small">
                 Standard size
               </Text>
               <Actions>
@@ -54,15 +117,15 @@ const docs: ComponentDocs = {
               </Actions>
             </Stack>
             <Stack space="small">
-              <Text tone="secondary" weight="strong">
+              <Text tone="secondary" size="small">
                 Small size
               </Text>
               <Actions size="small">
                 <Button>Button 1</Button>
                 <Button variant="transparent">Button 2</Button>
               </Actions>
             </Stack>
-          </Stack>,
+          </Tiles>,
         ),
     },
   ],

diff --git a/packages/braid-design-system/src/lib/components/Actions/Actions.gallery.tsx b/packages/braid-design-system/src/lib/components/Actions/Actions.gallery.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import source from '@braid-design-system/source.macro';
 import type { GalleryComponent } from 'site/types';
-import { Actions, Button, IconDelete } from '../';
+import { Actions, Button } from '../';
 
 export const galleryItems: GalleryComponent = {
   examples: [
     {
-      label: 'With multiple buttons',
+      label: 'Standard size',
       Example: () =>
         source(
           <Actions>
@@ -16,28 +16,6 @@ export const galleryItems: GalleryComponent = {
           </Actions>,
         ),
     },
-    {
-      label: 'With a branded action',
-      Example: () =>
-        source(
-          <Actions>
-            <Button tone="brandAccent">Button 1</Button>
-            <Button variant="transparent">Button 2</Button>
-          </Actions>,
-        ),
-    },
-    {
-      label: 'With a destructive action',
-      Example: () =>
-        source(
-          <Actions>
-            <Button tone="critical" icon={<IconDelete />}>
-              Delete
-            </Button>
-            <Button variant="transparent">Cancel</Button>
-          </Actions>,
-        ),
-    },
     {
       label: 'Small size',
       Example: () =>

diff --git a/packages/braid-design-system/src/lib/components/Actions/Actions.screenshots.tsx b/packages/braid-design-system/src/lib/components/Actions/Actions.screenshots.tsx
@@ -6,7 +6,7 @@ export const screenshots: ComponentScreenshot = {
   screenshotWidths: [320, 768],
   examples: [
     {
-      label: 'Standard Actions',
+      label: 'Standard size',
       Example: () => (
         <Actions>
           <Button>Button 1</Button>
@@ -16,7 +16,7 @@ export const screenshots: ComponentScreenshot = {
       ),
     },
     {
-      label: 'Small Actions',
+      label: 'Small size',
       Example: () => (
         <Actions size="small">
           <Button>Button 1</Button>

diff --git a/packages/braid-design-system/src/lib/components/Actions/Actions.snippets.tsx b/packages/braid-design-system/src/lib/components/Actions/Actions.snippets.tsx
@@ -1,35 +1,15 @@
 import React from 'react';
-import { Actions, Button, IconDelete } from '../../playroom/components';
+import { Actions, Button } from '../../playroom/components';
 import source from '@braid-design-system/source.macro';
 import type { Snippets } from '../private/Snippets';
 
 export const snippets: Snippets = [
   {
-    name: 'With multiple buttons',
+    name: 'Standard size',
     code: source(
       <Actions>
-        <Button>Submit</Button>
-        <Button variant="transparent">Cancel</Button>
-      </Actions>,
-    ),
-  },
-  {
-    name: 'With a branded action',
-    code: source(
-      <Actions>
-        <Button tone="brandAccent">Submit</Button>
-        <Button variant="transparent">Cancel</Button>
-      </Actions>,
-    ),
-  },
-  {
-    name: 'With a destructive action',
-    code: source(
-      <Actions>
-        <Button tone="critical" icon={<IconDelete />}>
-          Delete
-        </Button>
-        <Button variant="transparent">Cancel</Button>
+        <Button>Button 1</Button>
+        <Button variant="transparent">Button 2</Button>
       </Actions>,
     ),
   },

diff --git a/packages/braid-design-system/src/lib/components/Actions/Actions.tsx b/packages/braid-design-system/src/lib/components/Actions/Actions.tsx
@@ -9,12 +9,14 @@ export interface ActionsProps {
   data?: InlineProps['data'];
 }
 
+export const actionsSpace = 'xsmall';
+
 export const Actions = ({ size, data, children }: ActionsProps) => {
   const contextValue = useMemo(() => ({ size }), [size]);
 
   return (
     <ActionsContext.Provider value={contextValue}>
-      <Inline collapseBelow="tablet" space="xsmall" data={data}>
+      <Inline collapseBelow="tablet" space={actionsSpace} data={data}>
         {children}
       </Inline>
     </ActionsContext.Provider>