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

Jump to bottom

chore(OnyxSelect): Implement storybook control type for modelValue #1878

Merged
merged 6 commits into from
Sep 18, 2024
Merged

chore(OnyxSelect): Implement storybook control type for modelValue #1878

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dccd76d
docs(changeset): feat(OnyxSelect): Implement storybook control type f…
MajaZarkova Sep 17, 2024
9aaf175
Implement storybook control type for modelValue
MajaZarkova Sep 17, 2024
93a1993
Merge branch 'main' into feat/1701-implement-model-value-type-for-select
MajaZarkova Sep 17, 2024
336b57f
Remove changeset
MajaZarkova Sep 17, 2024
de2ffa2
Update other stories, where not the default options are used
MajaZarkova Sep 17, 2024
2b8da76
Merge branch 'main' into feat/1701-implement-model-value-type-for-select
MajaZarkova Sep 18, 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
152 changes: 100 additions & 52 deletions packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts
View file
Open in desktop
MajaZarkova marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,59 @@ import OnyxButton from "../OnyxButton/OnyxButton.vue";
import OnyxSelect from "./OnyxSelect.vue";
import type { SelectOption } from "./types";

const DEMO_OPTIONS = [
"Apple",
"Banana",
"Mango",
"Kiwi",
"Orange",
"Papaya",
"Apricot",
"Lemon",
"Cranberry",
"Avocado",
"Cherry",
"Coconut",
"Lychee",
"Melon",
"Raspberry",
"Strawberry",
].map<SelectOption>((option) => ({ value: option.toLowerCase(), label: option }));
DEMO_OPTIONS.splice(6, 0, {
value: "disabled",
label: "Unavailable fruit",
disabled: true,
});

const MULTISELECT_DEMO_OPTIONS = [
{
value: "disabled-2",
label: "Selected unavailable fruit",
disabled: true,
},
...DEMO_OPTIONS,
{ value: "long", label: "Option with a very long long long long long long long text" },
];

const LONG_LABELED_DEMO_OPTIONS = Array.from({ length: 10 }, (_, index) => ({
value: index,
truncation: "multiline",
label: `Long labeled option ${index + 1} `.repeat(4),
})) satisfies SelectOption[];

const GROUPED_DEMO_OPTIONS = [
{ value: "cat", label: "Cat", group: "Land" },
{ value: "dog", label: "Dog", group: "Land" },
{ value: "tiger", label: "Tiger", group: "Land" },
{ value: "reindeer", label: "Reindeer", group: "Land" },
{ value: "racoon", label: "Racoon", group: "Land" },
{ value: "dolphin", label: "Dolphin", group: "Water" },
{ value: "flounder", label: "Flounder", group: "Water" },
{ value: "eel", label: "Eel", group: "Water" },
{ value: "falcon", label: "Falcon", group: "Air" },
{ value: "owl", label: "Owl", group: "Air" },
];

/**
* The select is a fundamental element utilized across various components such as
* dropdowns, navigation bars, pagination, tables, etc.
Expand All @@ -29,6 +82,10 @@ const meta: Meta<typeof OnyxSelect> = {
empty: { control: { disable: true } },
optionsEnd: { control: { disable: true } },
option: { control: { disable: true } },
modelValue: {
control: { type: "select" },
options: DEMO_OPTIONS.map((option) => option.value),
},
},

decorators: [
Expand Down Expand Up @@ -57,46 +114,6 @@ const meta: Meta<typeof OnyxSelect> = {
export default meta;
type Story = StoryObj<typeof OnyxSelect>;

const DEMO_OPTIONS = [
"Apple",
"Banana",
"Mango",
"Kiwi",
"Orange",
"Papaya",
"Apricot",
"Lemon",
"Cranberry",
"Avocado",
"Cherry",
"Coconut",
"Lychee",
"Melon",
"Raspberry",
"Strawberry",
].map<SelectOption>((option) => ({ value: option.toLowerCase(), label: option }));
DEMO_OPTIONS.splice(6, 0, {
value: "disabled",
label: "Unavailable fruit",
disabled: true,
});

const MULTISELECT_DEMO_OPTIONS = [
{
value: "disabled-2",
label: "Selected unavailable fruit",
disabled: true,
},
...DEMO_OPTIONS,
{ value: "long", label: "Option with a very long long long long long long long text" },
];

const LONG_LABELED_DEMO_OPTIONS = Array.from({ length: 10 }, (_, index) => ({
value: index,
truncation: "multiline",
label: `Long labeled option ${index + 1} `.repeat(4),
})) satisfies SelectOption[];

/**
* This example shows a default single select.
*/
Expand Down Expand Up @@ -141,6 +158,12 @@ export const Multiselect = {
withCheckAll: true,
options: MULTISELECT_DEMO_OPTIONS,
},
argTypes: {
modelValue: {
control: { type: "multi-select" },
options: MULTISELECT_DEMO_OPTIONS.map((option) => option.value),
},
},
} satisfies Story;

/**
Expand All @@ -151,6 +174,12 @@ export const MultiselectWithPreview = {
...Multiselect.args,
textMode: "preview",
},
argTypes: {
modelValue: {
control: { type: "multi-select" },
options: MULTISELECT_DEMO_OPTIONS.map((option) => option.value),
},
},
} satisfies Story;

/**
Expand All @@ -164,6 +193,12 @@ export const Required = {
options: MULTISELECT_DEMO_OPTIONS,
required: true,
},
argTypes: {
modelValue: {
control: { type: "multi-select" },
options: MULTISELECT_DEMO_OPTIONS.map((option) => option.value),
},
},
} satisfies Story;

/**
Expand All @@ -187,18 +222,13 @@ export const GroupedOptions = {
args: {
label: "Grouped select",
listLabel: "List label",
options: [
{ value: "cat", label: "Cat", group: "Land" },
{ value: "dog", label: "Dog", group: "Land" },
{ value: "tiger", label: "Tiger", group: "Land" },
{ value: "reindeer", label: "Reindeer", group: "Land" },
{ value: "racoon", label: "Racoon", group: "Land" },
{ value: "dolphin", label: "Dolphin", group: "Water" },
{ value: "flounder", label: "Flounder", group: "Water" },
{ value: "eel", label: "Eel", group: "Water" },
{ value: "falcon", label: "Falcon", group: "Air" },
{ value: "owl", label: "Owl", group: "Air" },
],
options: GROUPED_DEMO_OPTIONS,
},
argTypes: {
modelValue: {
control: { type: "select" },
options: GROUPED_DEMO_OPTIONS.map((option) => option.value),
},
},
} satisfies Story;

Expand All @@ -211,6 +241,12 @@ export const Empty = {
...Default.args,
options: [],
},
argTypes: {
modelValue: {
control: { type: "select" },
options: [],
},
},
} satisfies Story;

/**
Expand Down Expand Up @@ -265,6 +301,12 @@ export const WithCustomSearch: Story = {
valueLabel: "Option One",
modelValue: 1,
},
argTypes: {
modelValue: {
control: { type: "select" },
options: optionsForCustomSearch.map((option) => option.value),
},
},
decorators: [
/**
* Decorator to simulate search
Expand Down Expand Up @@ -424,6 +466,12 @@ export const MultilineOptions = {
options: LONG_LABELED_DEMO_OPTIONS,
placeholder: "Placeholder...",
},
argTypes: {
modelValue: {
control: { type: "select" },
options: LONG_LABELED_DEMO_OPTIONS.map((option) => option.value),
},
},
} satisfies Story;

/**
Expand Down
Loading