Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate Stories to CSF3 - Batch 8 #4484

Merged
merged 9 commits into from
Oct 7, 2024
Merged

Migrate Stories to CSF3 - Batch 8 #4484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
13dbe8e
chore(MobileDialogPrimitive): migrate stories from CSF2 to CSF3
domihustinova Sep 24, 2024
08e7f8e
chore(Tile): migrate stories from CSF2 to CSF3
domihustinova Sep 24, 2024
6602a83
chore(Toast): migrate stories from CSF2 to CSF3
domihustinova Sep 25, 2024
d662b99
chore(Wizard): migrate stories from CSF2 to CSF3
domihustinova Sep 25, 2024
e6bd14a
chore(Grid): migrate stories from CSF2 to CSF3
domihustinova Sep 25, 2024
151ef10
chore(TileGroup): migrate stories from CSF2 to CSF3
domihustinova Sep 26, 2024
f639f69
chore(Timeline): migrate stories from CSF2 to CSF3
domihustinova Sep 26, 2024
3c80b84
chore(Tooltip): migrate stories from CSF2 to CSF3
domihustinova Sep 26, 2024
0ab57a3
chore(TooltipPrimitive): migrate stories from CSF2 to CSF3
domihustinova Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
387 changes: 153 additions & 234 deletions packages/orbit-components/src/Tile/Tile.stories.tsx
View file
Open in desktop

Large diffs are not rendered by default.

324 changes: 72 additions & 252 deletions packages/orbit-components/src/TileGroup/TileGroup.stories.tsx
View file
Open in desktop
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,
},
},
};
Loading
Loading