Skip to content

Commit

Permalink
chore: Storybook 7 format
Browse files Browse the repository at this point in the history
  • Loading branch information
@denkristoffer
denkristoffer committed Apr 3, 2024
1 parent 05a02bc commit b0c3ddf
Show file tree
Hide file tree
Showing 83 changed files with 7,952 additions and 8,287 deletions.
246 changes: 125 additions & 121 deletions packages/components/accordion/stories/Accordion.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React, { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Flex } from '@contentful/f36-core';
import { SectionHeading, Text } from '@contentful/f36-typography';
import { Button } from '@contentful/f36-button';
import { Accordion, AccordionProps } from '../src';
import { Accordion } from '../src';

type Story = StoryObj<typeof Accordion>;

export default {
title: 'Components/Accordion',
Expand All @@ -17,144 +20,145 @@ export default {
className: { control: { disable: true } },
testId: { control: { disable: true } },
},
};
} as Meta<typeof Accordion>;

const defaultText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.`;

export const basic = ({ align, ...args }: AccordionProps) => (
<Accordion align={align}>
<Accordion.Item title={args['Accordion.Item Title #1']}>
<Text as="p">{args['Accordion.Item Content #1']}</Text>
</Accordion.Item>
<Accordion.Item title={args['Accordion.Item Title #2']}>
<Text as="p">{args['Accordion.Item Content #2']}</Text>
</Accordion.Item>
<Accordion.Item title={args['Accordion.Item Title #3']}>
<Text as="p">{args['Accordion.Item Content #3']}</Text>
</Accordion.Item>
</Accordion>
);
export const basic: Story = {
args: {
align: 'end',
},
render: ({ align }) => (
<Accordion align={align}>
<Accordion.Item title="Accordion #1">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item title="Accordion #2">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item title="Accordion #3">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
</Accordion>
),
};

export const overview = ({ align, ...args }: AccordionProps) => (
<>
<Flex flexDirection="column" marginBottom="spacingM" fullWidth>
<SectionHeading marginBottom="spacingS">
Accordion alignment start
</SectionHeading>
export const overview: Story = {
render: () => (
<>
<Flex flexDirection="column" marginBottom="spacingM" fullWidth>
<SectionHeading marginBottom="spacingS">
Accordion alignment start
</SectionHeading>

<Flex>
<Accordion align="start">
<Accordion.Item title={args['Accordion.Item Title #1']}>
<Text as="p">{args['Accordion.Item Content #1']}</Text>
</Accordion.Item>
<Accordion.Item title={args['Accordion.Item Title #2']}>
<Text as="p">{args['Accordion.Item Content #2']}</Text>
</Accordion.Item>
<Accordion.Item title={args['Accordion.Item Title #3']}>
<Text as="p">{args['Accordion.Item Content #3']}</Text>
</Accordion.Item>
</Accordion>
<Flex>
<Accordion align="start">
<Accordion.Item title="Accordion #1">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item title="Accordion #2">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item title="Accordion #3">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
</Accordion>
</Flex>
</Flex>
</Flex>
<Flex flexDirection="column">
<SectionHeading marginBottom="spacingS">
Accordion alignment end
</SectionHeading>
<Flex flexDirection="column">
<SectionHeading marginBottom="spacingS">
Accordion alignment end
</SectionHeading>

<Flex>
<Accordion align="end">
<Accordion.Item title={args['Accordion.Item Title #1']}>
<Text as="p">{args['Accordion.Item Content #1']}</Text>
</Accordion.Item>
<Accordion.Item title={args['Accordion.Item Title #2']}>
<Text as="p">{args['Accordion.Item Content #2']}</Text>
</Accordion.Item>
<Accordion.Item title={args['Accordion.Item Title #3']}>
<Text as="p">{args['Accordion.Item Content #3']}</Text>
</Accordion.Item>
</Accordion>
<Flex>
<Accordion align="end">
<Accordion.Item title="Accordion #1">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item title="Accordion #2">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item title="Accordion #3">
<Text as="p">{defaultText}</Text>
</Accordion.Item>
</Accordion>
</Flex>
</Flex>
</Flex>
</>
);
</>
),
};

export const DynamicContent = ({ align, ...args }: AccordionProps) => {
const [content, updateContent] = useState(defaultText);
export const DynamicContent: Story = {
render: ({ align }) => {
const [content, updateContent] = useState(defaultText);

const addContent = () => {
updateContent(content + defaultText);
};
const addContent = () => {
updateContent(content + defaultText);
};

return (
<Flex flexDirection="column" fullWidth>
<Flex marginBottom="spacingS">
<Button onClick={addContent}>Add content</Button>
return (
<Flex flexDirection="column" fullWidth>
<Flex marginBottom="spacingS">
<Button onClick={addContent}>Add content</Button>
</Flex>
<Flex>
<Accordion align={align}>
<Accordion.Item title="Accordion #1">
<Text as="p">{content}</Text>
</Accordion.Item>
</Accordion>
</Flex>
</Flex>
<Flex>
<Accordion align={align}>
<Accordion.Item title={args['Accordion.Item Title #1']}>
<Text as="p">{content}</Text>
</Accordion.Item>
</Accordion>
</Flex>
</Flex>
);
);
},
};

export const Controlled = ({ align, ...args }: AccordionProps) => {
const [accordionState, setAccordionState] = useState({
1: true,
2: false,
3: false,
});

const handleExpand = (itemIndex: number) => () => {
setAccordionState((state) => ({ ...state, [itemIndex]: true }));
};
export const Controlled: Story = {
render: ({ align }) => {
const [accordionState, setAccordionState] = useState({
1: true,
2: false,
3: false,
});

const handleCollapse = (itemIndex: number) => () => {
setAccordionState((state) => ({ ...state, [itemIndex]: false }));
};
const handleExpand = (itemIndex: number) => () => {
setAccordionState((state) => ({ ...state, [itemIndex]: true }));
};

return (
<Accordion align={align}>
<Accordion.Item
title={args['Accordion.Item Title #1']}
isExpanded={accordionState[1]}
onExpand={handleExpand(1)}
onCollapse={handleCollapse(1)}
>
<Text as="p">{args['Accordion.Item Content #1']}</Text>
</Accordion.Item>
<Accordion.Item
title={args['Accordion.Item Title #2']}
isExpanded={accordionState[2]}
onExpand={handleExpand(2)}
onCollapse={handleCollapse(2)}
>
<Text as="p">{args['Accordion.Item Content #2']}</Text>
</Accordion.Item>
<Accordion.Item
title={args['Accordion.Item Title #3']}
isExpanded={accordionState[3]}
onExpand={handleExpand(3)}
onCollapse={handleCollapse(3)}
>
<Text as="p">{args['Accordion.Item Content #3']}</Text>
</Accordion.Item>
</Accordion>
);
};
const handleCollapse = (itemIndex: number) => () => {
setAccordionState((state) => ({ ...state, [itemIndex]: false }));
};

basic.args = {
align: 'end',
'Accordion.Item Title #1': 'Accordion I',
'Accordion.Item Content #1': defaultText,
'Accordion.Item Title #2': 'Accordion II',
'Accordion.Item Content #2': defaultText,
'Accordion.Item Title #3': 'Accordion III',
'Accordion.Item Content #3': defaultText,
return (
<Accordion align={align}>
<Accordion.Item
title="Accordion #1"
isExpanded={accordionState[1]}
onExpand={handleExpand(1)}
onCollapse={handleCollapse(1)}
>
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item
title="Accordion #2"
isExpanded={accordionState[2]}
onExpand={handleExpand(2)}
onCollapse={handleCollapse(2)}
>
<Text as="p">{defaultText}</Text>
</Accordion.Item>
<Accordion.Item
title="Accordion #3"
isExpanded={accordionState[3]}
onExpand={handleExpand(3)}
onCollapse={handleCollapse(3)}
>
<Text as="p">{defaultText}</Text>
</Accordion.Item>
</Accordion>
);
},
};
Loading

0 comments on commit b0c3ddf

Please sign in to comment.