Skip to content

Commit

Permalink
Fix flyout stories
Browse files Browse the repository at this point in the history
  • Loading branch information
vineethasok committed Oct 31, 2023
1 parent cbb8a59 commit a570b11
Showing 1 changed file with 26 additions and 14 deletions.
40 changes: 26 additions & 14 deletions src/components/Flyout/Flyout.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,17 @@ interface Props extends FlyoutProps {
title: string;
description?: string;
align: "default" | "top";
size: "default" | "narrow" | "wide";
}

const FlyoutExample = ({ title, description, align, ...props }: Props) => {
const FlyoutExample = ({ title, description, align, size, ...props }: Props) => {
return (
<Flyout {...props}>
<Flyout.Trigger>Flyout Trigger</Flyout.Trigger>
<Flyout.Content strategy="fixed">
<Flyout.Content
strategy="fixed"
size={size}
>
<Flyout.Header
title={title}
description={description}
Expand All @@ -35,19 +39,22 @@ export default {
title: { control: "text" },
description: { control: "text" },
align: { control: "select", options: ["default", "top"] },
size: { control: "select", options: ["default", "narrow", "wide"] },
},
};

export const Playground = {
args: {
title: "Title",
description: "Description",
align: "default",
size: "default",
},
parameters: {
docs: {
source: {
transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
const { title, description, align, ...props } = story.args;
const { title, description, align, size, ...props } = story.args;
return `<Flyout\n
${Object.entries(props)
.flatMap(([key, value]) =>
Expand All @@ -60,17 +67,22 @@ export const Playground = {
.join("\n")}
>
<Flyout.Header
title="${title}"
description="${description}"
/>
<Flyout.Body align="${align}">
<Flyout.Element>Content1 long text content</Flyout.Element>
</Flyout.Body>
<Flyout.Footer>
<Flyout.Close label="Cancel" />
<Button>Test Primary</Button>
</Flyout.Footer>
<Flyout.Content
strategy="fixed"
size="${size}"
>
<Flyout.Header
title="${title}"
description="${description}"
/>
<Flyout.Body align="${align}">
<Flyout.Element>Content1 long text content</Flyout.Element>
</Flyout.Body>
<Flyout.Footer>
<Flyout.Close label="Cancel" />
<Button>Test Primary</Button>
</Flyout.Footer>
</Flyout.Content>
</Flyout>
`;
},
Expand Down

0 comments on commit a570b11

Please sign in to comment.