Skip to content

Commit

Permalink
chore(Select): migrate from CSF2 to CSF3
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarkaaa
sarkaaa committed Sep 17, 2024
1 parent e2b1c83 commit 785c32c
Showing 1 changed file with 143 additions and 175 deletions.
318 changes: 143 additions & 175 deletions packages/orbit-components/src/Select/Select.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { action } from "@storybook/addon-actions";

import Airplane from "../icons/Airplane";
import * as Icons from "../icons";
import CountryFlag from "../CountryFlag";
import { CODES } from "../CountryFlag/consts";
import RenderInRtl from "../utils/rtl/RenderInRtl";
Expand All @@ -16,237 +17,204 @@ const objectOptions = [
{ value: 3, label: "Third item" },
];

export default {
title: "Select",
type SelectPropsAndCustomArgs = React.ComponentProps<typeof Select> & {
code: string;
icon: string;
};

export const Default = () => <Select options={objectOptions} onChange={action("onChange")} />;
const meta: Meta<SelectPropsAndCustomArgs> = {
title: "Select",
component: Select,

args: {
options: objectOptions,
onChange: action("onChange"),
onBlur: action("onBlur"),
onFocus: action("onFocus"),
},

Default.story = {
parameters: {
info: "Selects are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
info: "Select component. Check Orbit.Kiwi for more detailed guidelines.",
controls: {
exclude: [
"onChange",
"onBlur",
"onFocus",
"help",
"error",
"placeholder",
"inlineLabel",
"disabled",
"name",
"prefix",
"label",
],
},
},
};

export const WithPrefix = () => (
<Select
label="Select box (with prefix)"
options={objectOptions}
onChange={action("onChange")}
prefix={<Airplane color="secondary" />}
/>
);
export default meta;

type Story = StoryObj<SelectPropsAndCustomArgs>;

WithPrefix.story = {
name: "With prefix",
const getIcon = (source: string | null) => source && Icons[source];

export const Default: Story = {
parameters: {
info: "Selects are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
info: "Default setup of Select component. Check Orbit.Kiwi for more detailed guidelines.",
},
};

export const WithCountryFlagPrefix = ({ code }) => {
return (
<Select
label="Select box (with prefix)"
options={objectOptions}
onChange={action("onChange")}
prefix={<CountryFlag code={code} />}
/>
);
};
export const WithPrefixAndLabel: Story = {
render: ({ icon, ...args }) => {
const Icon = getIcon(icon as string);

WithCountryFlagPrefix.story = {
name: "With CountryFlag prefix",
return <Select {...args} prefix={<Icon />} />;
},

parameters: {
info: "Selects are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
args: {
icon: "Airplane",
label: "Select box",
},
};

WithCountryFlagPrefix.args = {
code: CODES.ANYWHERE,
};
argTypes: {
icon: {
options: Object.keys(Icons),
control: {
type: "select",
},
},
},

WithCountryFlagPrefix.argTypes = {
code: {
options: Object.values(CODES),
control: {
type: "select",
parameters: {
info: "Select component with prefix icon and label. Check Orbit.Kiwi for more detailed guidelines.",
controls: {
exclude: ["onChange", "onBlur", "onFocus", "help", "error", "placeholder", "inlineLabel"],
},
},
};

export const WithLongLabel = ({ inlineLabel }) => {
return (
<Select
label="Select box (with long label)"
options={objectOptions}
onChange={action("onChange")}
inlineLabel={inlineLabel}
/>
);
};
export const WithCountryFlagPrefix: Story = {
render: ({ code, ...args }) => {
const Icon = <CountryFlag code={code} />;

WithLongLabel.story = {
name: "With long label",
return <Select {...args} prefix={Icon} />;
},

parameters: {
info: "Long labels truncate automatically when inline.",
args: {
code: CODES.ANYWHERE,
},
};

WithLongLabel.args = {
inlineLabel: true,
};
argTypes: {
code: {
options: Object.values(CODES),
control: {
type: "select",
},
},
},

export const WithPlaceholder = ({ placeholder }) => {
return (
<Select
label="Select box (with placeholder)"
placeholder={placeholder}
options={objectOptions}
onChange={action("onChange")}
/>
);
parameters: {
info: "Select component with country flag icon as a prefix. Check Orbit.Kiwi for more detailed guidelines.",
},
};

WithPlaceholder.story = {
name: "With placeholder",
export const WithLongLabel: Story = {
args: {
label: "Select box (very long label)",
inlineLabel: true,
},

parameters: {
info: "Selects are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
info: "Select component with a long label truncate automatically when inline. Check Orbit.Kiwi for more detailed guidelines.",
controls: {
exclude: ["onChange", "onBlur", "onFocus", "help", "error", "placeholder"],
},
},
};

WithPlaceholder.args = {
placeholder: "Select value from list",
};

export const WithHelpMessage = () => (
<Select
label="Select box (with help text)"
options={objectOptions}
help="Most common choice is Booking cancellation"
onChange={action("onChange")}
/>
);

WithHelpMessage.story = {
name: "With help message",
export const WithPlaceholder: Story = {
args: {
placeholder: "Select value from list",
},

parameters: {
info: "Selects are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
info: "Select component with placeholder set up. Check Orbit.Kiwi for more detailed guidelines.",
controls: {
exclude: ["onChange", "onBlur", "onFocus", "help", "error", "inlineLabel"],
},
},
};

export const WithErrorMessage = () => (
<Select
label="Select box (with error text)"
options={objectOptions}
error={<div>You need to select some value.</div>}
onChange={action("onChange")}
/>
);

WithErrorMessage.story = {
name: "With error message",
export const WithHelpMessage = {
args: {
help: "Most common choice is Booking cancellation",
},

parameters: {
info: "Selects are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
info: "Select component with help message tooltip. Check Orbit.Kiwi for more detailed guidelines.",
controls: {
exclude: ["onChange", "onBlur", "onFocus", "placeholder", "error", "inlineLabel"],
},
},
};

export const Playground = ({
placeholder,
disabled,
name,
customValueText,
option,
value,
dataTest,
spaceAfter,
id,
required,
dataAttrs,
width,
label,
inlineLabel,
error,
help,
}) => {
return (
<Select
id={id}
required={required}
placeholder={placeholder}
width={width}
options={option}
disabled={disabled}
name={name}
label={label}
inlineLabel={inlineLabel}
onChange={action("onChange")}
onBlur={action("onBlur")}
onFocus={action("onFocus")}
dataTest={dataTest}
value={value}
customValueText={customValueText}
spaceAfter={spaceAfter}
dataAttrs={dataAttrs}
error={error}
help={help}
/>
);
};
export const WithErrorMessage = {
args: {
error: "You need to select some value.",
},

Playground.story = {
parameters: {
info: "Selects are used for showing content hierarchy and are important for improving the reading experience for our users. Visit Orbit.Kiwi for more detailed guidelines.",
info: "Select component with error message tooltip. Check Orbit.Kiwi for more detailed guidelines.",
controls: {
exclude: ["onChange", "onBlur", "onFocus", "placeholder", "help", "inlineLabel"],
},
},
};

Playground.args = {
placeholder: "Select value from list",
disabled: false,
name: "name",
customValueText: "",
option: objectOptions,
value: undefined,
dataTest: "test",
spaceAfter: SPACINGS_AFTER.SMALL,
id: "select-id",
required: false,
dataAttrs: { "data-recording-ignore": true },
width: "",
label: "Label",
inlineLabel: false,
error: "",
help: "",
};
export const Playground = {
args: {
placeholder: "Select value from list",
name: "name",
customValueText: "",
value: "value",
spaceAfter: SPACINGS_AFTER.SMALL,
id: "select-id",
required: false,
width: "50%",
prefix: "Prefix",
error: "",
help: "",
},

Playground.argTypes = {
spaceAfter: {
options: Object.values(SPACINGS_AFTER),
control: {
type: "select",
argTypes: {
spaceAfter: {
options: Object.values(SPACINGS_AFTER),
control: {
type: "select",
},
},
},
value: {
options: objectOptions.map(opt => opt.value),

parameters: {
info: "Playground of select component. Check Orbit.Kiwi for more detailed guidelines.",
controls: {
exclude: ["onChange", "onBlur", "onFocus"],
},
},
};

export const Rtl = () => (
<RenderInRtl>
<Select placeholder="My placeholder" options={objectOptions} label="My label" />
</RenderInRtl>
);

Rtl.story = {
name: "RTL",
export const Rtl = {
render: () => (
<RenderInRtl>
<Select placeholder="My placeholder" options={objectOptions} label="My label" />
</RenderInRtl>
),

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

0 comments on commit 785c32c

Please sign in to comment.