Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

site: Update Actions documentation and examples #1548

Merged
merged 1 commit into from
Jul 31, 2024
Merged

site: Update Actions documentation and examples #1548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 68 additions & 5 deletions packages/braid-design-system/src/lib/components/Actions/Actions.docs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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',
Expand All @@ -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: (
Expand All @@ -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>
Expand All @@ -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>,
),
},
],
Expand Down
26 changes: 2 additions & 24 deletions packages/braid-design-system/src/lib/components/Actions/Actions.gallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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: () =>
Expand Down
4 changes: 2 additions & 2 deletions packages/braid-design-system/src/lib/components/Actions/Actions.screenshots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const screenshots: ComponentScreenshot = {
screenshotWidths: [320, 768],
examples: [
{
label: 'Standard Actions',
label: 'Standard size',
Example: () => (
<Actions>
<Button>Button 1</Button>
Expand All @@ -16,7 +16,7 @@ export const screenshots: ComponentScreenshot = {
),
},
{
label: 'Small Actions',
label: 'Small size',
Example: () => (
<Actions size="small">
<Button>Button 1</Button>
Expand Down
28 changes: 4 additions & 24 deletions packages/braid-design-system/src/lib/components/Actions/Actions.snippets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>,
),
},
Expand Down
4 changes: 3 additions & 1 deletion packages/braid-design-system/src/lib/components/Actions/Actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down