Skip to content

Commit

Permalink
chore(TileGroup): migrate stories from CSF2 to CSF3
Browse files Browse the repository at this point in the history
  • Loading branch information
@domihustinova
domihustinova committed Oct 7, 2024
1 parent dcd212b commit e3b901c
Showing 1 changed file with 72 additions and 252 deletions.
324 changes: 72 additions & 252 deletions packages/orbit-components/src/TileGroup/TileGroup.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from "react";
import { action } from "@storybook/addon-actions";
import type { Meta, StoryObj } from "@storybook/react";

import * as Icons from "../icons";
import Stack from "../Stack";
Expand All @@ -14,272 +15,91 @@ import TileGroup from ".";

const getIcon = source => Icons[source];

export default {
title: "TileGroup",
};
type TileGroupPropsAndCustomArgs = React.ComponentProps<typeof TileGroup> &
React.ComponentProps<typeof Tile>;

export const DefaultJustWrapper = ({ dataTest, as, content }) => {
return (
<TileGroup as={as} dataTest={dataTest}>
<Tile onClick={action("clicked")}>{content}</Tile>
<Tile onClick={action("clicked")}>{content}</Tile>
<Tile onClick={action("clicked")}>{content}</Tile>
<Tile onClick={action("clicked")}>{content}</Tile>
</TileGroup>
);
const meta: Meta<TileGroupPropsAndCustomArgs> = {
title: "TileGroup",
component: TileGroup,
};

DefaultJustWrapper.story = {
name: "Default - just wrapper",

parameters: {
info: "This is the default configuration of this component.",
export default meta;
type Story = StoryObj<TileGroupPropsAndCustomArgs>;

export const Playground: Story = {
render: ({ as, children, ...args }) => {
const Icon = getIcon("GenderMan");

return (
<TileGroup as={as || "div"} {...args}>
{Array.from({ length: 4 }, (_, idx) => (
<Tile
key={idx}
icon={Icon && <Icon />}
onClick={action("clicked")}
expandable
header={
<Stack justify="between" align="center" direction="row" shrink>
<Stack spacing="none" direction="column" shrink>
<Stack direction="row" align="center" spacing="200">
<Heading type="title4" as="h4">
Mr. Hot potato
</Heading>
<CountryFlag code="cz" />
</Stack>
<Text>13/37/1337</Text>
</Stack>
<Stack align="center" basis="0%">
<Badge type="infoSubtle">You</Badge>
</Stack>
</Stack>
}
>
{children}
</Tile>
))}
</TileGroup>
);
},
};

DefaultJustWrapper.args = {
dataTest: "test",
as: "div",
content: "Lorem ipsum dolor sit amet",
};

export const DefaultWithHeaderProps = ({ title, description, icon }) => {
const Icon = getIcon(icon);
return (
<TileGroup>
<Tile
onClick={action("clicked")}
icon={Icon && <Icon />}
title={title}
description={description}
/>
<Tile
onClick={action("clicked")}
icon={Icon && <Icon />}
title={title}
description={description}
/>
<Tile
onClick={action("clicked")}
icon={Icon && <Icon />}
title={title}
description={description}
/>
<Tile
onClick={action("clicked")}
icon={Icon && <Icon />}
title={title}
description={description}
/>
</TileGroup>
);
};

DefaultWithHeaderProps.story = {
name: "Default - with header props",

parameters: {
info: "This is the default configuration of this component.",
info: "This is the playground configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.",
},
};

DefaultWithHeaderProps.args = {
title: "Expandable",
description:
"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.",
icon: "Airplane",
};

DefaultWithHeaderProps.argTypes = {
icon: {
options: Object.keys(Icons),
control: {
type: "select",
},
args: {
id: "ID",
as: "div",
children: "This is example of expanded content",
},
};

export const ExpandableWithCustomDescription = ({ icon }) => {
const Icon = getIcon(icon);

return (
<TileGroup>
<Tile
icon={Icon && <Icon />}
onClick={action("clicked")}
expandable
header={
<Stack justify="between" align="center" direction="row" shrink>
<Stack spacing="none" direction="column" shrink>
<Stack direction="row" align="center" spacing="200">
<Heading type="title4" as="h4">
Mr. Hot potato
</Heading>
<CountryFlag code="cz" />
</Stack>
<Text>13/37/1337</Text>
</Stack>
<Stack align="center" basis="0%">
<Badge type="infoSubtle">You</Badge>
</Stack>
</Stack>
}
>
This is example of expanded content
</Tile>
<Tile
icon={Icon && <Icon />}
onClick={action("clicked")}
expandable
header={
<Stack justify="between" align="center" direction="row" shrink>
<Stack spacing="none" direction="column" shrink>
<Stack direction="row" align="center" spacing="200">
<Heading type="title4" as="h4">
Mr. Hot potato
</Heading>
<CountryFlag code="cz" />
export const Rtl: Story = {
render: () => (
<RenderInRtl>
<TileGroup>
{Array.from({ length: 4 }, (_, idx) => (
<Tile
key={idx}
onClick={action("clicked")}
description={
<Stack justify="between" direction="row">
<Text>Mr. John Smith</Text>
<Text>20 kg</Text>
</Stack>
<Text>13/37/1337</Text>
</Stack>
<Stack align="center" basis="0%">
<Badge type="infoSubtle">You</Badge>
</Stack>
</Stack>
}
>
This is example of expanded content
</Tile>
<Tile
icon={Icon && <Icon />}
onClick={action("clicked")}
expandable
header={
<Stack justify="between" align="center" direction="row" shrink>
<Stack spacing="none" direction="column" shrink>
<Stack direction="row" align="center" spacing="200">
<Heading type="title4" as="h4">
Mr. Hot potato
</Heading>
<CountryFlag code="cz" />
</Stack>
<Text>13/37/1337</Text>
</Stack>
<Stack align="center" basis="0%">
<Badge type="infoSubtle">You</Badge>
</Stack>
</Stack>
}
>
This is example of expanded content
</Tile>
<Tile
icon={Icon && <Icon />}
onClick={action("clicked")}
expandable
header={
<Stack justify="between" align="center" direction="row" shrink>
<Stack spacing="none" direction="column" shrink>
<Stack direction="row" align="center" spacing="200">
<Heading type="title4" as="h4">
Mr. Hot potato
</Heading>
<CountryFlag code="cz" />
</Stack>
<Text>13/37/1337</Text>
</Stack>
<Stack align="center" basis="0%">
<Badge type="infoSubtle">You</Badge>
</Stack>
</Stack>
}
>
This is example of expanded content
</Tile>
</TileGroup>
);
};

ExpandableWithCustomDescription.story = {
name: "Expandable with custom description",

parameters: {
info: "This is the playground configuration of this component.",
},
};

ExpandableWithCustomDescription.args = {
icon: "GenderMan",
};

ExpandableWithCustomDescription.argTypes = {
icon: {
options: Object.keys(Icons),
control: {
type: "select",
},
},
};

export const Rtl = () => (
<RenderInRtl>
<TileGroup>
<Tile
onClick={action("clicked")}
description={
<Stack justify="between" direction="row">
<Text>Mr. John Smith</Text>
<Text>20 kg</Text>
</Stack>
}
expandable
>
This is example of expanded content
</Tile>
<Tile
onClick={action("clicked")}
description={
<Stack justify="between" direction="row">
<Text>Mr. John Smith</Text>
<Text>20 kg</Text>
</Stack>
}
expandable
>
This is example of expanded content
</Tile>
<Tile
onClick={action("clicked")}
description={
<Stack justify="between" direction="row">
<Text>Mr. John Smith</Text>
<Text>20 kg</Text>
</Stack>
}
expandable
>
This is example of expanded content
</Tile>
<Tile
onClick={action("clicked")}
description={
<Stack justify="between" direction="row">
<Text>Mr. John Smith</Text>
<Text>20 kg</Text>
</Stack>
}
expandable
>
This is example of expanded content
</Tile>
</TileGroup>
</RenderInRtl>
);

Rtl.story = {
name: "RTL",
}
expandable
>
This is example of expanded content
</Tile>
))}
</TileGroup>
</RenderInRtl>
),

parameters: {
info: "This is a preview of this component in RTL setup.",
controls: {
disable: true,
},
},
};

0 comments on commit e3b901c

Please sign in to comment.