Skip to content

Commit

Permalink
docs(accordion): update documentation examples to ensure a11y compliance
Browse files Browse the repository at this point in the history
  • Loading branch information
@damienrobson-sage
damienrobson-sage committed Jan 24, 2025
1 parent 58041d0 commit e779c31
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 32 deletions.
10 changes: 5 additions & 5 deletions src/components/accordion/accordion.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const MyComponent = () => (

The default version of `Accordion` has a white background and no side borders.

<Canvas of={AccordionStories.AccordionDefault} />
<Canvas of={AccordionStories.Default} />

### With disabled content padding

Expand Down Expand Up @@ -124,19 +124,19 @@ The icon showing the state of the `Accordion` can be left-aligned by setting the

The default width of 100% can be overriden by setting the `width` prop to a custom value.

<Canvas of={AccordionStories.DifferentWidth} />
<Canvas of={AccordionStories.CustomWidth} />

### With custom padding and margins

An `Accordion` can be rendered with different padding and margin by setting the `padding` and `margin` props.

<Canvas of={AccordionStories.WithDifferentPaddingAndMargin} />
<Canvas of={AccordionStories.WithCustomPaddingAndMargins} />

### With custom title padding and margins

An `Accordion` title can be rendered with different padding and margin by passing the desired configuration object to the `headerSpacing` prop.

<Canvas of={AccordionStories.WithDifferentPaddingAndMarginInAccordionTitle} />
<Canvas of={AccordionStories.WithCustomTitlePaddingAndMargins} />

### Grouped

Expand All @@ -160,7 +160,7 @@ An `Accordion` will automatically adjust its height to fit the content inside i

Setting the `variant` prop to `subtle` will override the default styling of an Accordion. The `subTitle` and `scheme` props will have no effect when used alongside this variant, nor will the validation props (`error`, `warning`, and `info`).

<Canvas of={AccordionStories.AccordionSubtle} />
<Canvas of={AccordionStories.SubtleVariant} />

## Props

Expand Down
86 changes: 59 additions & 27 deletions src/components/accordion/accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const meta: Meta<typeof Accordion> = {
export default meta;
type Story = StoryObj<typeof Accordion>;

export const AccordionDefault: Story = () => {
export const Default: Story = () => {
return (
<Accordion title="Heading">
<Box mt={2}>Content</Box>
Expand All @@ -33,7 +33,7 @@ export const AccordionDefault: Story = () => {
</Accordion>
);
};
AccordionDefault.storyName = "Default";
Default.storyName = "Default";

export const WithDisableContentPadding: Story = () => {
return (
Expand Down Expand Up @@ -116,7 +116,7 @@ export const LeftAlignedIcon: Story = () => {
};
LeftAlignedIcon.storyName = "Left-Aligned Icon";

export const DifferentWidth: Story = () => {
export const CustomWidth: Story = () => {
return (
<Accordion width="500px" title="Heading">
<Box mt={2}>Content</Box>
Expand All @@ -125,65 +125,65 @@ export const DifferentWidth: Story = () => {
</Accordion>
);
};
DifferentWidth.storyName = "Custom Width";
CustomWidth.storyName = "Custom Width";

export const WithDifferentPaddingAndMargin: Story = () => {
export const WithCustomPaddingAndMargins: Story = () => {
return (
<>
<Accordion m={0} p={0} title="Accordion">
<Accordion m={0} p={0} title="First Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion m={1} p={1} title="Accordion">
<Accordion m={1} p={1} title="Second Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion m={2} p={2} title="Accordion">
<Accordion m={2} p={2} title="Third Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion m={3} p={3} title="Accordion">
<Accordion m={3} p={3} title="Fourth Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion m={4} p={4} title="Accordion">
<Accordion m={4} p={4} title="Fifth Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion m={5} p={5} title="Accordion">
<Accordion m={5} p={5} title="Sixth Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion m={6} p={6} title="Accordion">
<Accordion m={6} p={6} title="Seventh Accordion">
<Box mt={2}>content</Box>
</Accordion>
</>
);
};
WithDifferentPaddingAndMargin.storyName = "With Custom Padding And Margins";
WithCustomPaddingAndMargins.storyName = "With Custom Padding And Margins";

export const WithDifferentPaddingAndMarginInAccordionTitle: Story = () => {
export const WithCustomTitlePaddingAndMargins: Story = () => {
return (
<>
<Accordion headerSpacing={{ p: 0 }} title="Accordion">
<Accordion headerSpacing={{ p: 0 }} title="First Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion headerSpacing={{ p: 1 }} title="Accordion">
<Accordion headerSpacing={{ p: 1 }} title="Second Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion headerSpacing={{ p: 2 }} title="Accordion">
<Accordion headerSpacing={{ p: 2 }} title="Third Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion headerSpacing={{ p: 3 }} title="Accordion">
<Accordion headerSpacing={{ p: 3 }} title="Fourth Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion headerSpacing={{ p: 4 }} title="Accordion">
<Accordion headerSpacing={{ p: 4 }} title="Fifth Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion headerSpacing={{ p: 5 }} title="Accordion">
<Accordion headerSpacing={{ p: 5 }} title="Sixth Accordion">
<Box mt={2}>content</Box>
</Accordion>
<Accordion headerSpacing={{ p: 6 }} title="Accordion">
<Accordion headerSpacing={{ p: 6 }} title="Seventh Accordion">
<Box mt={2}>content</Box>
</Accordion>
</>
);
};
WithDifferentPaddingAndMarginInAccordionTitle.storyName =
WithCustomTitlePaddingAndMargins.storyName =
"With Custom Title Padding And Margins";

export const Grouped: Story = () => {
Expand Down Expand Up @@ -212,15 +212,47 @@ export const Grouped: Story = () => {
Grouped.storyName = "Grouped";

export const WithValidationIcon: Story = () => {
const [firstAccordionExpanded, setFirstAccordionExpanded] =
useState<boolean>(true);
const [secondAccordionExpanded, setSecondAccordionExpanded] =
useState<boolean>(true);
const [thirdAccordionExpanded, setThirdAccordionExpanded] =
useState<boolean>(true);

const toggleFirstAccordion = () => {
setFirstAccordionExpanded(!firstAccordionExpanded);
};
const toggleSecondAccordion = () => {
setSecondAccordionExpanded(!secondAccordionExpanded);
};
const toggleThirdAccordion = () => {
setThirdAccordionExpanded(!thirdAccordionExpanded);
};

return (
<AccordionGroup>
<Accordion title="Heading" expanded error="This is an error state">
<Accordion
title="First Heading"
expanded={firstAccordionExpanded}
onChange={toggleFirstAccordion}
error="This is an error state"
>
<Typography>Content</Typography>
</Accordion>
<Accordion title="Heading" expanded warning="This is a warning state">
<Accordion
title="Second Heading"
expanded={secondAccordionExpanded}
onChange={toggleSecondAccordion}
warning="This is a warning state"
>
<Typography>Content</Typography>
</Accordion>
<Accordion title="Heading" expanded info="This is an info state">
<Accordion
title="Third Heading"
expanded={thirdAccordionExpanded}
onChange={toggleThirdAccordion}
info="This is an info state"
>
<Typography>Content</Typography>
</Accordion>
</AccordionGroup>
Expand Down Expand Up @@ -257,7 +289,7 @@ export const WithDynamicContent: Story = () => {
};
WithDynamicContent.storyName = "With Dynamic Content";

export const AccordionSubtle: Story = () => {
export const SubtleVariant: Story = () => {
return (
<Accordion title="Heading" variant="subtle">
<Box>Content</Box>
Expand All @@ -266,4 +298,4 @@ export const AccordionSubtle: Story = () => {
</Accordion>
);
};
AccordionSubtle.storyName = "Subtle Variant";
SubtleVariant.storyName = "Subtle Variant";

0 comments on commit e779c31

Please sign in to comment.