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

docs: update doc.s for used components #1791

Merged
merged 14 commits into from
Nov 8, 2023
Merged

docs: update doc.s for used components #1791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
bc0766f
docs(Accordion): update and improve docs
booc0mtaco Oct 23, 2023
407f62d
docs(Avatar): update and improve documentation
booc0mtaco Oct 25, 2023
e920234
docs(Icon): update and improve documentation
booc0mtaco Nov 2, 2023
cce3fd8
refactor(NumberIcon): update docs and improve prop usage
booc0mtaco Nov 2, 2023
9351d2b
docs(TextareaField): update and improve documentation
booc0mtaco Nov 3, 2023
7e99f81
docs(Tag): update and improve documentation
booc0mtaco Nov 3, 2023
b3683f8
docs(InputField): update and improve documentation
booc0mtaco Nov 3, 2023
7b267cb
docs(Checkbox): update and improve documentation
booc0mtaco Nov 3, 2023
2888364
docs(Table): update and improve documentation
booc0mtaco Nov 7, 2023
7d7a4f8
docs(Card): update and improve documentation
booc0mtaco Nov 7, 2023
5aeef5d
docs(Popover): update and improve documentation
booc0mtaco Nov 7, 2023
5f1ecfb
docs(Tooltip): update and improve documentation
booc0mtaco Nov 8, 2023
c98c9e5
docs(Modal): update and improve documentation
booc0mtaco Nov 8, 2023
174aef4
docs: consistency improvements between docs
booc0mtaco Nov 8, 2023
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
105 changes: 50 additions & 55 deletions src/components/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import Icon from '../Icon';
import NumberIcon from '../NumberIcon';
import Text from '../Text';

type Args = React.ComponentProps<typeof Accordion>;

export default {
title: 'Components/Accordion',
component: Accordion,
Expand Down Expand Up @@ -36,20 +38,27 @@ export default {
},
},
},
decorators: [(Story) => <div style={{ margin: '0.5rem' }}>{Story()}</div>],
decorators: [(Story) => <div className="m-2">{Story()}</div>],
booc0mtaco marked this conversation as resolved.
Show resolved Hide resolved
} as Meta<Args>;

type Args = React.ComponentProps<typeof Accordion>;
type Story = StoryObj<Args>;

export const Default: StoryObj<Args> = {};
export const Default: Story = {};
booc0mtaco marked this conversation as resolved.
Show resolved Hide resolved

export const Small: StoryObj<Args> = {
/**
* Default `Accordion` using the `small` size.
*/
export const Small: Story = {
args: {
size: 'sm',
},
};

export const Stacked: StoryObj<Args> = {
/**
* This demonstrates how one can combine multiple `Accordion` rows, where any of the rows can
* be defaulted to open (using `defaultOpen`).
*/
export const Stacked: Story = {
args: {
children: (
<>
Expand Down Expand Up @@ -102,21 +111,21 @@ export const Stacked: StoryObj<Args> = {
},
};

export const StackedSmall: StoryObj<Args> = {
export const StackedSmall: Story = {
args: {
...Stacked.args,
size: 'sm',
},
};

export const StackedOutline: StoryObj<Args> = {
export const StackedOutline: Story = {
args: {
...Stacked.args,
hasOutline: true,
},
};

export const StackedSmallOutline: StoryObj<Args> = {
export const StackedSmallOutline: Story = {
args: {
...Stacked.args,
size: 'sm',
Expand All @@ -125,27 +134,9 @@ export const StackedSmallOutline: StoryObj<Args> = {
};

/**
* The following stories are mostly for visual regression testing to capture the open state.
* This demonstrates how to specify that a section is not currently expandable using `isExpandable`.
*/
export const DefaultOpen: StoryObj<Args> = {
args: {
children: (
<Accordion.Row defaultOpen>
<Accordion.Button data-testid="accordion-button">
Massa quam egestas massa.
</Accordion.Button>
<Accordion.Panel data-testid="accordion-panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
Suscipit dui, nunc sit dui tellus massa laoreet tellus.
</Accordion.Panel>
</Accordion.Row>
),
},
};

export const EmptyStackedOpen: StoryObj<Args> = {
export const EmptyStackedOpen: Story = {
args: {
children: (
<>
Expand Down Expand Up @@ -190,14 +181,7 @@ export const EmptyStackedOpen: StoryObj<Args> = {
},
};

export const SmallOpen: StoryObj<Args> = {
args: {
...DefaultOpen.args,
size: 'sm',
},
};

export const StackedOpen: StoryObj<Args> = {
export const StackedOpen: Story = {
args: {
children: (
<>
Expand Down Expand Up @@ -242,30 +226,35 @@ export const StackedOpen: StoryObj<Args> = {
},
};

export const StackedSmallOpen: StoryObj<Args> = {
export const StackedSmallOpen: Story = {
args: {
...StackedOpen.args,
size: 'sm',
},
};

export const StackedOutlineOpen: StoryObj<Args> = {
export const StackedOutlineOpen: Story = {
args: {
...StackedOpen.args,
hasOutline: true,
},
};

export const StackedSmallOutlineOpen: StoryObj<Args> = {
export const StackedSmallOutlineOpen: Story = {
args: {
...StackedOpen.args,
size: 'sm',
hasOutline: true,
},
};

// Visual regression testing unhelpful since story value is in interaction and as a code example.
export const UsingRenderProp: StoryObj<Args> = {
/**
*
* This shows how to use a render prop for the row, to allow controlling render based on component state.
*
* **NOTE**: Visual regression testing unhelpful since story value is in interaction and as a code example.
*/
export const UsingRenderProp: Story = {
render: () => (
<Accordion headingAs="h2">
<Accordion.Row>
Expand All @@ -289,7 +278,7 @@ export const UsingRenderProp: StoryObj<Args> = {
* Although headings should provide limited text, we allow for text to span multiple lines, preserving
* the size of the state caret.
*/
export const WithLargeHeader: StoryObj<Args> = {
export const WithLargeHeader: Story = {
parameters: {
chromatic: {
viewports: [chromaticViewports.ipadMini],
Expand All @@ -313,7 +302,12 @@ export const WithLargeHeader: StoryObj<Args> = {
},
};

export const UsingComplexHeaders: StoryObj<Args> = {
/**
* You can use other EDS components within the `Accordion.Button` to allow for custom, non-text headers.
*
* **Example**: using `Text` and `Icon` in the `Accordion.Button`.
*/
export const UsingComplexHeaders: Story = {
parameters: {
badges: ['1.2', 'implementationExample'],
},
Expand All @@ -322,7 +316,7 @@ export const UsingComplexHeaders: StoryObj<Args> = {
<>
<Accordion.Row>
<Accordion.Button>
<Text size="lg" variant="neutral-subtle">
<Text size="lg">
<Icon
className="m-2"
name="check-circle"
Expand All @@ -341,7 +335,7 @@ export const UsingComplexHeaders: StoryObj<Args> = {
</Accordion.Row>
<Accordion.Row>
<Accordion.Button>
<Text size="lg" variant="neutral-subtle">
<Text size="lg">
<Icon
className="m-2"
name="check-circle"
Expand All @@ -363,7 +357,12 @@ export const UsingComplexHeaders: StoryObj<Args> = {
},
};

export const UsingNumberIconInHeaders: StoryObj<Args> = {
/**
* You can use other EDS components within the `Accordion.Button` to allow for custom, non-text headers.
*
* **Example**: using `Text` and `NumberIcon` in the `Accordion.Button`.
*/
export const UsingNumberIconInHeaders: Story = {
parameters: {
badges: ['1.2', 'implementationExample'],
},
Expand All @@ -372,11 +371,9 @@ export const UsingNumberIconInHeaders: StoryObj<Args> = {
<>
<Accordion.Row>
<Accordion.Button>
<div className="flex flex-wrap gap-1">
<div className="flex flex-wrap items-center gap-2">
<NumberIcon aria-label="Step 1" number={1} />
<Text size="lg" variant="neutral-subtle">
Step 1
</Text>
<Text size="lg">Step 1</Text>
</div>
</Accordion.Button>
<Accordion.Panel>
Expand All @@ -388,11 +385,9 @@ export const UsingNumberIconInHeaders: StoryObj<Args> = {
</Accordion.Row>
<Accordion.Row>
<Accordion.Button>
<div className="flex flex-wrap gap-1">
<NumberIcon aria-label="Step 3" number={2} />
<Text size="lg" variant="neutral-subtle">
Step 2
</Text>
<div className="items flex flex-wrap items-center gap-2">
<NumberIcon aria-label="Step 2" number={2} />
<Text size="lg">Step 2</Text>
</div>
</Accordion.Button>
<Accordion.Panel>
Expand Down
18 changes: 13 additions & 5 deletions src/components/Accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,21 @@ type AccordionProps = {
*/
className?: string;
/**
* Outline variant adds extra padding and a rounded border.
* Outline variant adds adjusts the `Accordion` style by defining a containing border and other layout adjustments.
*
* **Default is `false`**.
*/
hasOutline?: boolean;
/**
* Used to specify which heading element should be rendered for each Accordion.Title child.
* Used to specify which heading element should be rendered for each `Accordion.Title` child.
*
* **Default is `"h2"`**.
booc0mtaco marked this conversation as resolved.
Show resolved Hide resolved
*/
headingAs: HeadingElement;
/**
* Various Accordion sizes. Defaults to 'md'.
* Various sizes supported by the `Accordion`.
*
* **Default is `"md"`**.
*/
size?: Extract<Size, 'sm' | 'md'>;
};
Expand All @@ -41,7 +47,9 @@ type AccordionButtonProps = {
*/
className?: string;
/**
* Icon override for component. Default is 'expand-more'
* Icon override for component.
*
* **Default is `"expand-more"`**.
*/
icon?: Extract<IconName, 'expand-more'>;
/**
Expand Down Expand Up @@ -106,7 +114,7 @@ const AccordionRowContext = createContext<{ isExpandable?: boolean }>({
/**
* `import {Accordion} from "@chanzuckerberg/eds;`
*
* Displays a list of headers stacked on top of one another that can reveal or hide associated content.
* Displays one or more headers stacked on top of one another that can reveal or hide associated content.
* This component is based on the [Disclosure](https://headlessui.com/react/disclosure) component, provided by HeadlessUI.
*
* @see https://headlessui.com/react/disclosure
Expand Down
Loading