Skip to content

Commit 0bd74e6

Browse files
marissahuysentruytmarissahuysentruyt
committed
feat: add more data to migrated components list
- captures the component title so it displays with proper capitalization in the list - generate a component url so it can be used to link to component docs
1 parent d7fed2a commit 0bd74e6

File tree

3 files changed

+366
-64
lines changed

3 files changed

+366
-64
lines changed

‎.storybook/blocks/ComponentDetails.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -485,8 +485,10 @@ export const MigratedComponentsList = () => {
485485
<>
486486
<ul className="sb-unstyled" style={{ columnCount: 3, columnGap: '1rem', listStyle: 'none', padding: 0, marginTop: '1rem' }}>
487487
{components.map((component, idx) => (
488-
<li key={`${component}-${idx}`} style={{ marginBottom: '0.5rem' }}>
489-
{component.charAt(0).toUpperCase() + component.slice(1)}
488+
<li key={`${component.name || component}-${idx}`} style={{ marginBottom: '0.5rem' }}>
489+
<a href={`/?path=/docs/components-${component.url}--docs`}>
490+
{component.title || (typeof component === 'string' ? component.charAt(0).toUpperCase() + component.slice(1) : '')}
491+
</a>
490492
</li>
491493
))}
492494
</ul>

‎.storybook/data/migrated-components.json

Lines changed: 297 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,302 @@
11
{
22
"total": 85,
3-
"migrated": 58,
3+
"migrated": 59,
44
"components": [
5-
"accordion",
6-
"actionbar",
7-
"actionbutton",
8-
"actiongroup",
9-
"alertbanner",
10-
"alertdialog",
11-
"avatar",
12-
"badge",
13-
"breadcrumb",
14-
"button",
15-
"buttongroup",
16-
"checkbox",
17-
"closebutton",
18-
"coachmark",
19-
"colorarea",
20-
"colorhandle",
21-
"colorloupe",
22-
"colorslider",
23-
"colorwheel",
24-
"combobox",
25-
"contextualhelp",
26-
"dial",
27-
"dialog",
28-
"divider",
29-
"dropzone",
30-
"fieldgroup",
31-
"fieldlabel",
32-
"form",
33-
"helptext",
34-
"icon",
35-
"illustratedmessage",
36-
"infieldbutton",
37-
"infieldprogresscircle",
38-
"inlinealert",
39-
"link",
40-
"menu",
41-
"meter",
42-
"opacitycheckerboard",
43-
"pagination",
44-
"picker",
45-
"popover",
46-
"progressbar",
47-
"progresscircle",
48-
"radio",
49-
"rating",
50-
"search",
51-
"statuslight",
52-
"stepper",
53-
"swatch",
54-
"swatchgroup",
55-
"switch",
56-
"table",
57-
"tag",
58-
"taggroup",
59-
"textfield",
60-
"thumbnail",
61-
"toast",
62-
"tooltip"
5+
{
6+
"name": "accordion",
7+
"title": "Accordion",
8+
"url": "accordion"
9+
},
10+
{
11+
"name": "actionbar",
12+
"title": "Action bar",
13+
"url": "action-bar"
14+
},
15+
{
16+
"name": "actionbutton",
17+
"title": "Action button",
18+
"url": "action-button"
19+
},
20+
{
21+
"name": "actiongroup",
22+
"title": "Action group",
23+
"url": "action-group"
24+
},
25+
{
26+
"name": "alertbanner",
27+
"title": "Alert banner",
28+
"url": "alert-banner"
29+
},
30+
{
31+
"name": "alertdialog",
32+
"title": "Alert dialog",
33+
"url": "alert-dialog"
34+
},
35+
{
36+
"name": "avatar",
37+
"title": "Avatar",
38+
"url": "avatar"
39+
},
40+
{
41+
"name": "badge",
42+
"title": "Badge",
43+
"url": "badge"
44+
},
45+
{
46+
"name": "breadcrumb",
47+
"title": "Breadcrumbs",
48+
"url": "breadcrumbs"
49+
},
50+
{
51+
"name": "button",
52+
"title": "Button",
53+
"url": "button"
54+
},
55+
{
56+
"name": "buttongroup",
57+
"title": "Button group",
58+
"url": "button-group"
59+
},
60+
{
61+
"name": "checkbox",
62+
"title": "Checkbox",
63+
"url": "checkbox"
64+
},
65+
{
66+
"name": "clearbutton",
67+
"title": "Clear button",
68+
"url": "clear-button"
69+
},
70+
{
71+
"name": "closebutton",
72+
"title": "Close button",
73+
"url": "close-button"
74+
},
75+
{
76+
"name": "coachmark",
77+
"title": "Coach mark",
78+
"url": "coach-mark"
79+
},
80+
{
81+
"name": "colorarea",
82+
"title": "Color area",
83+
"url": "color-area"
84+
},
85+
{
86+
"name": "colorhandle",
87+
"title": "Color handle",
88+
"url": "color-handle"
89+
},
90+
{
91+
"name": "colorloupe",
92+
"title": "Color loupe",
93+
"url": "color-loupe"
94+
},
95+
{
96+
"name": "colorslider",
97+
"title": "Color slider",
98+
"url": "color-slider"
99+
},
100+
{
101+
"name": "colorwheel",
102+
"title": "Color wheel",
103+
"url": "color-wheel"
104+
},
105+
{
106+
"name": "combobox",
107+
"title": "Combobox",
108+
"url": "combobox"
109+
},
110+
{
111+
"name": "contextualhelp",
112+
"title": "Contextual help",
113+
"url": "contextual-help"
114+
},
115+
{
116+
"name": "dial",
117+
"title": "Dial",
118+
"url": "dial"
119+
},
120+
{
121+
"name": "dialog",
122+
"title": "Dialog",
123+
"url": "dialog"
124+
},
125+
{
126+
"name": "divider",
127+
"title": "Divider",
128+
"url": "divider"
129+
},
130+
{
131+
"name": "dropzone",
132+
"title": "Drop zone",
133+
"url": "drop-zone"
134+
},
135+
{
136+
"name": "fieldgroup",
137+
"title": "Field group",
138+
"url": "field-group"
139+
},
140+
{
141+
"name": "fieldlabel",
142+
"title": "Field label",
143+
"url": "field-label"
144+
},
145+
{
146+
"name": "form",
147+
"title": "Form",
148+
"url": "form"
149+
},
150+
{
151+
"name": "helptext",
152+
"title": "Help text",
153+
"url": "help-text"
154+
},
155+
{
156+
"name": "icon",
157+
"title": "Icon",
158+
"url": "icon"
159+
},
160+
{
161+
"name": "illustratedmessage",
162+
"title": "Illustrated message",
163+
"url": "illustrated-message"
164+
},
165+
{
166+
"name": "infieldbutton",
167+
"title": "In-field button",
168+
"url": "in-field-button"
169+
},
170+
{
171+
"name": "infieldprogresscircle",
172+
"title": "In-field progress circle",
173+
"url": "in-field-progress-circle"
174+
},
175+
{
176+
"name": "inlinealert",
177+
"title": "In-line alert",
178+
"url": "in-line-alert"
179+
},
180+
{
181+
"name": "link",
182+
"title": "Link",
183+
"url": "link"
184+
},
185+
{
186+
"name": "menu",
187+
"title": "Menu",
188+
"url": "menu"
189+
},
190+
{
191+
"name": "meter",
192+
"title": "Meter",
193+
"url": "meter"
194+
},
195+
{
196+
"name": "opacitycheckerboard",
197+
"title": "Opacity checkerboard",
198+
"url": "opacity-checkerboard"
199+
},
200+
{
201+
"name": "pagination",
202+
"title": "Pagination",
203+
"url": "pagination"
204+
},
205+
{
206+
"name": "picker",
207+
"title": "Picker",
208+
"url": "picker"
209+
},
210+
{
211+
"name": "popover",
212+
"title": "Popover",
213+
"url": "popover"
214+
},
215+
{
216+
"name": "progressbar",
217+
"title": "Progress bar",
218+
"url": "progress-bar"
219+
},
220+
{
221+
"name": "progresscircle",
222+
"title": "Progress circle",
223+
"url": "progress-circle"
224+
},
225+
{
226+
"name": "radio",
227+
"title": "Radio",
228+
"url": "radio"
229+
},
230+
{
231+
"name": "rating",
232+
"title": "Rating",
233+
"url": "rating"
234+
},
235+
{
236+
"name": "search",
237+
"title": "Search field",
238+
"url": "search-field"
239+
},
240+
{
241+
"name": "statuslight",
242+
"title": "Status light",
243+
"url": "status-light"
244+
},
245+
{
246+
"name": "stepper",
247+
"title": "Number field",
248+
"url": "number-field"
249+
},
250+
{
251+
"name": "swatch",
252+
"title": "Swatch",
253+
"url": "swatch"
254+
},
255+
{
256+
"name": "swatchgroup",
257+
"title": "Swatch group",
258+
"url": "swatch-group"
259+
},
260+
{
261+
"name": "switch",
262+
"title": "Switch",
263+
"url": "switch"
264+
},
265+
{
266+
"name": "table",
267+
"title": "Table",
268+
"url": "table"
269+
},
270+
{
271+
"name": "tag",
272+
"title": "Tag",
273+
"url": "tag"
274+
},
275+
{
276+
"name": "taggroup",
277+
"title": "Tag group",
278+
"url": "tag-group"
279+
},
280+
{
281+
"name": "textfield",
282+
"title": "Text area",
283+
"url": "text-area"
284+
},
285+
{
286+
"name": "thumbnail",
287+
"title": "Thumbnail",
288+
"url": "thumbnail"
289+
},
290+
{
291+
"name": "toast",
292+
"title": "Toast",
293+
"url": "toast"
294+
},
295+
{
296+
"name": "tooltip",
297+
"title": "Tooltip",
298+
"url": "tooltip"
299+
}
63300
],
64-
"generatedAt": "2025-07-10T15:15:49.411Z"
301+
"generatedAt": "2025-07-25T15:33:32.820Z"
65302
}

0 commit comments

Comments
 (0)