Skip to content

Commit

Permalink
chore(ListChoice): migrate from CSF2 to CSF3
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarkaaa
sarkaaa committed Sep 25, 2024
1 parent bcf18de commit bd16f4d
Showing 1 changed file with 131 additions and 195 deletions.
326 changes: 131 additions & 195 deletions packages/orbit-components/src/ListChoice/ListChoice.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import * as React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { useArgs } from "@storybook/preview-api";
import { action } from "@storybook/addon-actions";

import Button from "../Button";
Expand All @@ -7,239 +9,173 @@ import RenderInRtl from "../utils/rtl/RenderInRtl";

import ListChoice from ".";

Button.displayName = "Button";
ListChoice.displayName = "ListChoice";

const getIcon = (source: string | null) => source && Icons[source];

export default {
const meta: Meta<typeof ListChoice> = {
title: "ListChoice",
};

export const Default = ({ title, description, icon }) => {
const Icon = getIcon(icon);

return (
<ListChoice
title={title}
description={description}
icon={Icon && <Icon />}
onClick={action("onClick")}
/>
);
};
component: ListChoice,

Default.story = {
parameters: {
info: "Some description about this type of ListChoice in general.",
info: "Check Orbit.Kiwi for more detailed design guidelines.",
},
};

Default.args = {
title: "Choice Title",
description: "Further description",
icon: "Accommodation",
args: {
title: "Choice Title",
},
};

Default.argTypes = {
icon: {
options: Object.keys(Icons),
control: {
type: "select",
export default meta;

type Story = StoryObj<typeof ListChoice>;

export const Default: Story = {
parameters: {
info: "Minimal setup with title, uncontrolled, not selectable. Check Orbit.Kiwi for more detailed design guidelines.",
controls: {
exclude: ["tabIndex"],
},
},
};

export const MultipleChoices = () => (
<>
<ListChoice
title="Choice Title"
description="Further description"
selectable
icon={<Icons.Accommodation />}
onClick={action("onClick")}
/>
<ListChoice
title="Choice Title"
description="Further description"
selectable
selected
disabled
icon={<Icons.Accommodation />}
onClick={action("onClick")}
/>
<ListChoice
title="Choice Title"
description="Further description"
selectable
icon={<Icons.Accommodation />}
onClick={action("onClick")}
/>
</>
);

MultipleChoices.story = {
name: "Multiple choices",
export const MultipleChoices: Story = {
render: ({ icon, ...args }) => {
const Icon = typeof icon === "string" && getIcon(icon);

return (
<>
{
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
Array(...Array(3)).map((_, idx) => (
// eslint-disable-next-line react/no-array-index-key
<ListChoice key={idx} {...args} icon={<Icon />} />
))
}
</>
);
},

args: {
description: "Further description",
icon: "Accommodation",
selectable: true,
selected: false,
disabled: false,
tabIndex: 0,
role: "list",
onClick: action("onClick"),
},

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

parameters: {
info: "Some description about this type of ListChoice in general.",
controls: {
exclude: ["onClick"],
},
},
};

export const WithAction = ({ title, description, disabled, icon, dataTest }) => {
const Icon = getIcon(icon);

return (
<ListChoice
title={title}
description={description}
disabled={disabled}
icon={Icon && <Icon />}
action={
<Button
onClick={action("onClick")}
iconLeft={<Icons.Plus />}
size="small"
type="primarySubtle"
/>
}
onClick={action("onClick")}
dataTest={dataTest}
/>
);
};
export const WithAction: Story = {
render: ({ icon, ...args }) => {
const Icon = typeof icon === "string" && getIcon(icon);
const IconButton = getIcon("Plus");

WithAction.args = {
title: "Choice Title",
description: "Further description",
disabled: false,
icon: "Accommodation",
dataTest: "test",
};
return (
<ListChoice
{...args}
icon={<Icon />}
action={
<Button
onClick={action("onClick")}
iconLeft={<IconButton />}
size="small"
type="primarySubtle"
/>
}
/>
);
},

WithAction.argTypes = {
icon: {
options: Object.keys(Icons),
control: {
type: "select",
},
args: {
...MultipleChoices.args,
selectable: false,
},
};

export const Playground = ({
title,
description,
selectable,
selected,
disabled,
icon,
dataTest,
}) => {
const Icon = getIcon(icon);

return (
<ListChoice
title={title}
description={description}
selectable={selectable}
selected={selected}
disabled={disabled}
icon={Icon && <Icon />}
onClick={action("onClick")}
dataTest={dataTest}
/>
);
};
argTypes: {
...MultipleChoices.argTypes,
},

Playground.story = {
parameters: {
info: "Some description about this type of InputField in general.",
controls: {
exclude: ["onClick"],
},
},
};

Playground.args = {
title: "Choice Title",
description: "Further description",
selectable: true,
selected: false,
disabled: false,
icon: "Accommodation",
dataTest: "test",
};
export const Playground: Story = {
render: function Render({ icon, ...args }) {
const [{ selected }, updateArgs] = useArgs();

Playground.argTypes = {
icon: {
options: Object.keys(Icons),
control: {
type: "select",
},
function onClick() {
updateArgs({ selected: !selected });
}

const Icon = typeof icon === "string" && getIcon(icon);

return <ListChoice {...args} onClick={() => onClick()} icon={<Icon />} />;
},
};

export const Controlled = ({ icon }) => {
const [selected, setSelected] = React.useState(false);

const Icon = getIcon(icon);

return (
<ListChoice
title="Controlled ListChoice"
description="This ListChoice is controlled by React.useState"
icon={Icon && <Icon />}
selectable
selected={selected}
onClick={e => {
action("onClick")(e);
setSelected(!selected);
}}
/>
);
};
args: {
...MultipleChoices.args,
id: "listchoice-id",
},

Controlled.args = {
icon: "Accommodation",
};
argTypes: {
...MultipleChoices.argTypes,
},

Controlled.argTypes = {
icon: {
options: Object.keys(Icons),
control: {
type: "select",
parameters: {
controls: {
exclude: ["onClick"],
},
},
};

export const Rtl = () => (
<RenderInRtl>
<>
<ListChoice
title="Choice Title"
description="Further description"
selectable
icon={<Icons.Accommodation />}
onClick={action("onClick")}
/>
<ListChoice
title="Choice Title"
description="Further description"
selectable
selected
disabled
icon={<Icons.Accommodation />}
onClick={action("onClick")}
/>
<ListChoice
title="Choice Title"
description="Further description"
selectable
icon={<Icons.Accommodation />}
onClick={action("onClick")}
/>
</>
</RenderInRtl>
);
export const Rtl: Story = {
render: ({ icon, ...args }) => {
const Icon = typeof icon === "string" && getIcon(icon);

Rtl.story = {
name: "RTL",
return (
<RenderInRtl>
<>
<ListChoice {...args} icon={<Icon />} />
<ListChoice {...args} icon={<Icon />} selected disabled />
<ListChoice {...args} icon={<Icon />} />
</>
</RenderInRtl>
);
},

args: {
...MultipleChoices.args,
},

argTypes: {
...MultipleChoices.argTypes,
},

parameters: {
info: "Some description about this type of ListChoice.",
controls: {
disable: true,
},
},
};

0 comments on commit bd16f4d

Please sign in to comment.