Skip to content

Commit 9831545

Browse files
srcdevsrcdev
committed
IndicatorList - Storybook story created
1 parent 9fb1330 commit 9831545

1 file changed

Lines changed: 241 additions & 0 deletions

File tree

‎app/components/02.molecules/indicator-list/stories/IndicatorList.stories.ts‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import IndicatorList from "../IndicatorList.vue";
2+
import type { Meta, StoryObj } from "@nuxtjs/storybook";
3+
4+
const meta: Meta<typeof IndicatorList> = {
5+
title: "Molecules/Lists/IndicatorList",
6+
component: IndicatorList,
7+
argTypes: {
8+
tag: {
9+
control: { type: "select" },
10+
options: ["ul", "ol"],
11+
description: "HTML list element to render — use ol for ordered/sequential content",
12+
},
13+
itemCount: {
14+
control: { type: "number", min: 0, step: 1 },
15+
description: "Number of list items to render",
16+
},
17+
styleClassPassthrough: {
18+
control: "object",
19+
description: "Additional CSS classes applied to the root element",
20+
},
21+
},
22+
args: {
23+
tag: "ul",
24+
itemCount: 3,
25+
styleClassPassthrough: [],
26+
},
27+
};
28+
29+
export default meta;
30+
type Story = StoryObj<typeof IndicatorList>;
31+
32+
// ─── Stories ─────────────────────────────────────────────────────────────────
33+
34+
/** Default — counter bubbles are rendered via CSS, no indicator slots needed. */
35+
export const Default: Story = {
36+
args: {
37+
tag: "ul",
38+
itemCount: 3,
39+
},
40+
render: (args) => ({
41+
components: { IndicatorList },
42+
setup() {
43+
return { args };
44+
},
45+
template: `
46+
<IndicatorList v-bind="args">
47+
<template #item-0><span>First list item</span></template>
48+
<template #item-1><span>Second list item</span></template>
49+
<template #item-2><span>Third list item</span></template>
50+
</IndicatorList>
51+
`,
52+
}),
53+
};
54+
55+
/** Ordered list — demonstrates the ol tag for sequentially meaningful content. */
56+
export const OrderedList: Story = {
57+
name: "Ordered List (ol)",
58+
args: {
59+
tag: "ol",
60+
itemCount: 4,
61+
},
62+
render: (args) => ({
63+
components: { IndicatorList },
64+
setup() {
65+
return { args };
66+
},
67+
template: `
68+
<IndicatorList v-bind="args">
69+
<template #item-0><span>Preheat the oven to 180°C</span></template>
70+
<template #item-1><span>Mix the dry ingredients together</span></template>
71+
<template #item-2><span>Fold in the wet ingredients until just combined</span></template>
72+
<template #item-3><span>Bake for 25–30 minutes until golden</span></template>
73+
</IndicatorList>
74+
`,
75+
}),
76+
};
77+
78+
/** Custom indicators — icon slots replace the default CSS counter bubbles. */
79+
export const WithCustomIndicators: Story = {
80+
name: "With Custom Indicator Icons",
81+
args: {
82+
tag: "ul",
83+
itemCount: 3,
84+
},
85+
render: (args) => ({
86+
components: { IndicatorList },
87+
setup() {
88+
return { args };
89+
},
90+
template: `
91+
<IndicatorList v-bind="args">
92+
<template #indicator-0>
93+
<svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
94+
<polyline points="20 6 9 17 4 12" />
95+
</svg>
96+
</template>
97+
<template #item-0><span>Identity verified successfully</span></template>
98+
99+
<template #indicator-1>
100+
<svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
101+
<polyline points="20 6 9 17 4 12" />
102+
</svg>
103+
</template>
104+
<template #item-1><span>Payment method confirmed</span></template>
105+
106+
<template #indicator-2>
107+
<svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
108+
<circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
109+
</svg>
110+
</template>
111+
<template #item-2><span>Awaiting address confirmation</span></template>
112+
</IndicatorList>
113+
`,
114+
}),
115+
};
116+
117+
/** Mixed — some items use custom indicator slots, others fall back to CSS counters. */
118+
export const MixedIndicators: Story = {
119+
name: "Mixed — Icons and Counters",
120+
args: {
121+
tag: "ul",
122+
itemCount: 4,
123+
},
124+
render: (args) => ({
125+
components: { IndicatorList },
126+
setup() {
127+
return { args };
128+
},
129+
template: `
130+
<IndicatorList v-bind="args">
131+
<template #indicator-0>
132+
<svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
133+
<polyline points="20 6 9 17 4 12" />
134+
</svg>
135+
</template>
136+
<template #item-0><span>Completed — icon indicator</span></template>
137+
138+
<template #item-1><span>Pending — CSS counter fallback</span></template>
139+
140+
<template #indicator-2>
141+
<svg class="indicator-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
142+
<polyline points="20 6 9 17 4 12" />
143+
</svg>
144+
</template>
145+
<template #item-2><span>Completed — icon indicator</span></template>
146+
147+
<template #item-3><span>Pending — CSS counter fallback</span></template>
148+
</IndicatorList>
149+
`,
150+
}),
151+
};
152+
153+
/** Rich content — items contain more than a single line of text. */
154+
export const RichContent: Story = {
155+
name: "Rich Item Content",
156+
args: {
157+
tag: "ol",
158+
itemCount: 3,
159+
},
160+
render: (args) => ({
161+
components: { IndicatorList },
162+
setup() {
163+
return { args };
164+
},
165+
template: `
166+
<IndicatorList v-bind="args">
167+
<template #item-0>
168+
<div>
169+
<strong>Create your account</strong>
170+
<p style="margin:0.25rem 0 0">Enter your email and choose a password to get started.</p>
171+
</div>
172+
</template>
173+
<template #item-1>
174+
<div>
175+
<strong>Choose a plan</strong>
176+
<p style="margin:0.25rem 0 0">Select from Starter, Pro, or Enterprise depending on your needs.</p>
177+
</div>
178+
</template>
179+
<template #item-2>
180+
<div>
181+
<strong>Start building</strong>
182+
<p style="margin:0.25rem 0 0">You're all set — dive into the dashboard and start your first project.</p>
183+
</div>
184+
</template>
185+
</IndicatorList>
186+
`,
187+
}),
188+
};
189+
190+
export const SingleItem: Story = {
191+
name: "Single Item",
192+
args: {
193+
tag: "ul",
194+
itemCount: 1,
195+
},
196+
render: (args) => ({
197+
components: { IndicatorList },
198+
setup() {
199+
return { args };
200+
},
201+
template: `
202+
<IndicatorList v-bind="args">
203+
<template #item-0><span>The only item</span></template>
204+
</IndicatorList>
205+
`,
206+
}),
207+
};
208+
209+
export const Empty: Story = {
210+
name: "Zero Items",
211+
args: {
212+
itemCount: 0,
213+
},
214+
render: (args) => ({
215+
components: { IndicatorList },
216+
setup() {
217+
return { args };
218+
},
219+
template: `<IndicatorList v-bind="args" />`,
220+
}),
221+
};
222+
223+
export const WithStyleClassPassthrough: Story = {
224+
name: "With styleClassPassthrough",
225+
args: {
226+
itemCount: 2,
227+
styleClassPassthrough: ["custom-class", "another-class"],
228+
},
229+
render: (args) => ({
230+
components: { IndicatorList },
231+
setup() {
232+
return { args };
233+
},
234+
template: `
235+
<IndicatorList v-bind="args">
236+
<template #item-0><span>First item</span></template>
237+
<template #item-1><span>Second item</span></template>
238+
</IndicatorList>
239+
`,
240+
}),
241+
};

0 commit comments

Comments
 (0)