Skip to content

Commit

Permalink
docs: updated stories from csf2 to csf3
Browse files Browse the repository at this point in the history
  • Loading branch information
@nataliepina
nataliepina committed May 30, 2023
1 parent 4e090ff commit faefd81
Show file tree
Hide file tree
Showing 79 changed files with 3,472 additions and 2,936 deletions.
10 changes: 6 additions & 4 deletions .storybook/docs/stories/Typography.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from "@storybook/addon-docs";
import { Meta, Unstyled } from "@storybook/addon-docs";
import { Typeset } from "@storybook/addon-docs";
import {
fontFamilySansSerif,
Expand Down Expand Up @@ -42,7 +42,9 @@ import {
sampleText="The quick brown fox jumps over the lazy dog"
/>
<h2>Heading Text</h2>
<HeadingText1>Heading Text 1</HeadingText1>
<HeadingText2>Heading Text 2</HeadingText2>
<HeadingText3>Heading Text 3</HeadingText3>
<Unstyled>
<HeadingText1>Heading Text 1</HeadingText1>
<HeadingText2>Heading Text 2</HeadingText2>
<HeadingText3>Heading Text 3</HeadingText3>
</Unstyled>
</div>
10 changes: 6 additions & 4 deletions .storybook/docs/stories/Welcome.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from "@storybook/addon-docs";
import { Meta, Unstyled } from "@storybook/addon-docs";

import { WelcomeBanner, WelcomeCards, WelcomeFooter } from "../index.ts";

Expand All @@ -11,6 +11,8 @@ import { WelcomeBanner, WelcomeCards, WelcomeFooter } from "../index.ts";
}}
/>

<WelcomeBanner />
<WelcomeCards />
<WelcomeFooter />
<Unstyled>
<WelcomeBanner />
<WelcomeCards />
<WelcomeFooter />
</Unstyled>
270 changes: 143 additions & 127 deletions packages/accordion/accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from "react";
import { Flex, FlexItem } from "../styleUtils/layout";
import { Story, Meta } from "@storybook/react";
import { StoryFn, Meta } from "@storybook/react";
import { SecondaryButton } from "../button";
import {
Accordion,
Expand Down Expand Up @@ -31,7 +31,7 @@ export default {
}
} as Meta;

const Template: Story<AccordionBaseProps> = args => (
const Template: StoryFn<AccordionBaseProps> = args => (
<Accordion {...args}>
<AccordionItem id="panel1">
<AccordionItemTitle>Panel 1</AccordionItemTitle>
Expand All @@ -50,41 +50,49 @@ const Template: Story<AccordionBaseProps> = args => (
</Accordion>
);

export const Default = Template.bind({});
export const Default = {
render: Template
};

export const AccordionItemExpandedOnRender = Template.bind({});
AccordionItemExpandedOnRender.args = { initialExpandedItems: ["panel1"] };
export const AccordionItemExpandedOnRender = {
render: Template,
args: { initialExpandedItems: ["panel1"] }
};

export const AllowingMultipleAccordionItemsOpen = Template.bind({});
AllowingMultipleAccordionItemsOpen.args = { allowMultipleExpanded: true };
export const AllowingMultipleAccordionItemsOpen = {
render: Template,
args: { allowMultipleExpanded: true }
};

export const InteractiveElementsInTitle = args => (
<Accordion {...args}>
<AccordionItem>
<AccordionItemTitleInteractive>
{({ getHeading }) => (
<Flex align="center">
<FlexItem>{getHeading("Panel 1")}</FlexItem>
<FlexItem flex="shrink">
<SecondaryButton>Action</SecondaryButton>
</FlexItem>
</Flex>
)}
</AccordionItemTitleInteractive>
<AccordionItemContent>
Content 1 <a href="google.com">has focusable content</a>
</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
);
export const InteractiveElementsInTitle = {
render: args => (
<Accordion {...args}>
<AccordionItem>
<AccordionItemTitleInteractive>
{({ getHeading }) => (
<Flex align="center">
<FlexItem>{getHeading("Panel 1")}</FlexItem>
<FlexItem flex="shrink">
<SecondaryButton>Action</SecondaryButton>
</FlexItem>
</Flex>
)}
</AccordionItemTitleInteractive>
<AccordionItemContent>
Content 1 <a href="google.com">has focusable content</a>
</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
)
};

export const WithChangeHandler = () => {
const onChange = expanded => {
Expand Down Expand Up @@ -112,99 +120,107 @@ export const WithChangeHandler = () => {
);
};

export const WithDisabledAccordionItem = args => (
<Accordion {...args}>
<AccordionItem>
<AccordionItemTitle disabled={true}>Panel 1</AccordionItemTitle>
<AccordionItemContent>Content 1</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
);
export const WithDisabledAccordionItem = {
render: args => (
<Accordion {...args}>
<AccordionItem>
<AccordionItemTitle disabled={true}>Panel 1</AccordionItemTitle>
<AccordionItemContent>Content 1</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
)
};

export const WithAccordionItemThatHasAppearanceDanger = args => (
<Accordion>
<AccordionItem {...args}>
<AccordionItemTitle appearance="danger">Panel 1</AccordionItemTitle>
<AccordionItemContent>Content 1</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
);
export const WithAccordionItemThatHasAppearanceDanger = {
render: args => (
<Accordion>
<AccordionItem {...args}>
<AccordionItemTitle appearance="danger">Panel 1</AccordionItemTitle>
<AccordionItemContent>Content 1</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
)
};

export const CustomPaddingSizeOnAccordionItemContent = args => (
<Accordion {...args}>
<AccordionItem>
<AccordionItemTitle>Panel 1</AccordionItemTitle>
<AccordionItemContent paddingSize="xxl">
Content 1 has paddingSize="xxl"
</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
);
export const CustomPaddingSizeOnAccordionItemContent = {
render: args => (
<Accordion {...args}>
<AccordionItem>
<AccordionItemTitle>Panel 1</AccordionItemTitle>
<AccordionItemContent paddingSize="xxl">
Content 1 has paddingSize="xxl"
</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem>
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</Accordion>
)
};

export const ControlledUsingStatelessAccordion = args => (
<ToggleInputListStoryHelper>
{({ changeHandler, selectedItems }) => {
return (
<Flex gutterSize="m">
<FlexItem>
<StatelessAccordion
onChange={changeHandler}
expandedItems={selectedItems}
{...args}
>
<AccordionItem id="first">
<AccordionItemTitle>Panel 1</AccordionItemTitle>
<AccordionItemContent>Content 1</AccordionItemContent>
</AccordionItem>
<AccordionItem id="second">
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem id="third">
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</StatelessAccordion>
</FlexItem>
<FlexItem>
<ToggleInputList
id="checkbox"
items={[
{ inputLabel: "Panel 1", id: "id.1", value: "first" },
{ inputLabel: "Panel 2", id: "id.2", value: "second" },
{ inputLabel: "Panel 3", id: "id.3", value: "third" }
]}
listLabel="Open panels"
onChange={changeHandler}
selectedItems={selectedItems}
/>
</FlexItem>
</Flex>
);
}}
</ToggleInputListStoryHelper>
);
export const ControlledUsingStatelessAccordion = {
render: args => (
<ToggleInputListStoryHelper>
{({ changeHandler, selectedItems }) => {
return (
<Flex gutterSize="m">
<FlexItem>
<StatelessAccordion
onChange={changeHandler}
expandedItems={selectedItems}
{...args}
>
<AccordionItem id="first">
<AccordionItemTitle>Panel 1</AccordionItemTitle>
<AccordionItemContent>Content 1</AccordionItemContent>
</AccordionItem>
<AccordionItem id="second">
<AccordionItemTitle>Panel 2</AccordionItemTitle>
<AccordionItemContent>Content 2</AccordionItemContent>
</AccordionItem>
<AccordionItem id="third">
<AccordionItemTitle>Panel 3</AccordionItemTitle>
<AccordionItemContent>Content 3</AccordionItemContent>
</AccordionItem>
</StatelessAccordion>
</FlexItem>
<FlexItem>
<ToggleInputList
id="checkbox"
items={[
{ inputLabel: "Panel 1", id: "id.1", value: "first" },
{ inputLabel: "Panel 2", id: "id.2", value: "second" },
{ inputLabel: "Panel 3", id: "id.3", value: "third" }
]}
listLabel="Open panels"
onChange={changeHandler}
selectedItems={selectedItems}
/>
</FlexItem>
</Flex>
);
}}
</ToggleInputListStoryHelper>
)
};
Loading

0 comments on commit faefd81

Please sign in to comment.