@carbon/upgrade 11.24.0-rc.0 → 11.25.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cli.js +82 -1
- package/package.json +2 -2
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.input.js +275 -0
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.input.tsx +275 -0
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.output.js +275 -0
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.output.tsx +275 -0
- package/transforms/__tests__/enable-v12-structured-list-visible-icons-test.js +12 -0
- package/transforms/enable-v12-structured-list-visible-icons.js +166 -0
package/cli.js
CHANGED
|
@@ -52285,6 +52285,7 @@ function listMigrations(migrations) {
|
|
|
52285
52285
|
}
|
|
52286
52286
|
}
|
|
52287
52287
|
async function runMigration(migration, workspaces, options) {
|
|
52288
|
+
var _a, _b;
|
|
52288
52289
|
const workspace = await getSelectedWorkspace2(workspaces);
|
|
52289
52290
|
logger.verbose(
|
|
52290
52291
|
"running migration: %s for workspace: %s",
|
|
@@ -52292,6 +52293,17 @@ async function runMigration(migration, workspaces, options) {
|
|
|
52292
52293
|
workspace.directory
|
|
52293
52294
|
);
|
|
52294
52295
|
await migration.migrate({ ...options, workspaceDir: workspace.directory });
|
|
52296
|
+
if (migration.messageConfig && !options.dry) {
|
|
52297
|
+
logger.log("\n");
|
|
52298
|
+
logger.log(`\u{1F389} ${migration.messageConfig.name} Migration Complete!`);
|
|
52299
|
+
logger.log("-".repeat(migration.messageConfig.name.length + 22));
|
|
52300
|
+
(_a = migration.messageConfig.changes) == null ? void 0 : _a.forEach((change) => {
|
|
52301
|
+
logger.log(change);
|
|
52302
|
+
});
|
|
52303
|
+
(_b = migration.messageConfig.nextSteps) == null ? void 0 : _b.forEach((step) => {
|
|
52304
|
+
logger.log(step);
|
|
52305
|
+
});
|
|
52306
|
+
}
|
|
52295
52307
|
}
|
|
52296
52308
|
async function getSelectedWorkspace2(workspaces) {
|
|
52297
52309
|
if (workspaces.length === 1) {
|
|
@@ -52939,6 +52951,75 @@ var upgrades = [
|
|
|
52939
52951
|
verbose: options.verbose
|
|
52940
52952
|
});
|
|
52941
52953
|
}
|
|
52954
|
+
},
|
|
52955
|
+
{
|
|
52956
|
+
name: "enable-v12-structured-list-visible-icons",
|
|
52957
|
+
description: `
|
|
52958
|
+
Updates selectable StructuredList components with new v12 selection pattern.
|
|
52959
|
+
https://react.carbondesignsystem.com/?path=/story/components-structuredlist-feature-flag--selection
|
|
52960
|
+
|
|
52961
|
+
Key Changes:
|
|
52962
|
+
\u2022 Replaces checkmark icons with radio buttons
|
|
52963
|
+
\u2022 Moves selection indicators to first column (previously last column)
|
|
52964
|
+
\u2022 Makes radio buttons always visible (not just on hover)
|
|
52965
|
+
\u2022 Identifies StructuredListWrapper components with the selection prop
|
|
52966
|
+
\u2022 Automatically adds selection prop to all child StructuredListRow components
|
|
52967
|
+
|
|
52968
|
+
|
|
52969
|
+
Transforms:
|
|
52970
|
+
Before migration:
|
|
52971
|
+
<StructuredListWrapper selection>
|
|
52972
|
+
<StructuredListRow>
|
|
52973
|
+
<StructuredListCell>Content</StructuredListCell>
|
|
52974
|
+
<StructuredListCell><CheckmarkFilled /></StructuredListCell>
|
|
52975
|
+
</StructuredListRow>
|
|
52976
|
+
</StructuredListWrapper>
|
|
52977
|
+
|
|
52978
|
+
After migration:
|
|
52979
|
+
<StructuredListWrapper selection>
|
|
52980
|
+
<StructuredListRow selection>
|
|
52981
|
+
<StructuredListCell>Content</StructuredListCell>
|
|
52982
|
+
</StructuredListRow>
|
|
52983
|
+
</StructuredListWrapper>
|
|
52984
|
+
`,
|
|
52985
|
+
messageConfig: {
|
|
52986
|
+
name: "StructuredList",
|
|
52987
|
+
nextSteps: [
|
|
52988
|
+
"\u26A0\uFE0F IMPORTANT: Additional SASS Changes Required!",
|
|
52989
|
+
'This migration requires enabling "enable-v12-structured-list-visible-icons" SASS feature flag in your stylesheet.',
|
|
52990
|
+
"$enable-v12-structured-list-visible-icons: true",
|
|
52991
|
+
"\u{1F4DA} For detailed instructions on enabling SASS feature flags, visit:",
|
|
52992
|
+
"https://react.carbondesignsystem.com/iframe.html?args=size%3Amini&viewMode=docs&id=getting-started-feature-flags--overview&globals=#turning-on-feature-flags-in-sass",
|
|
52993
|
+
""
|
|
52994
|
+
]
|
|
52995
|
+
},
|
|
52996
|
+
migrate: async (options) => {
|
|
52997
|
+
const transform = import_path2.default.join(
|
|
52998
|
+
TRANSFORM_DIR,
|
|
52999
|
+
"enable-v12-structured-list-visible-icons.js"
|
|
53000
|
+
);
|
|
53001
|
+
const paths = Array.isArray(options.paths) && options.paths.length > 0 ? options.paths : await (0, import_fast_glob2.default)(["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"], {
|
|
53002
|
+
cwd: options.workspaceDir,
|
|
53003
|
+
ignore: [
|
|
53004
|
+
"**/es/**",
|
|
53005
|
+
"**/lib/**",
|
|
53006
|
+
"**/umd/**",
|
|
53007
|
+
"**/node_modules/**",
|
|
53008
|
+
"**/storybook-static/**",
|
|
53009
|
+
"**/dist/**",
|
|
53010
|
+
"**/build/**",
|
|
53011
|
+
"**/*.d.ts",
|
|
53012
|
+
"**/coverage/**"
|
|
53013
|
+
]
|
|
53014
|
+
});
|
|
53015
|
+
await run2({
|
|
53016
|
+
dry: !options.write,
|
|
53017
|
+
transform,
|
|
53018
|
+
paths,
|
|
53019
|
+
verbose: options.verbose,
|
|
53020
|
+
parser: "tsx"
|
|
53021
|
+
});
|
|
53022
|
+
}
|
|
52942
53023
|
}
|
|
52943
53024
|
]
|
|
52944
53025
|
},
|
|
@@ -52967,7 +53048,7 @@ var upgrades = [
|
|
|
52967
53048
|
var package_default = {
|
|
52968
53049
|
name: "@carbon/upgrade",
|
|
52969
53050
|
description: "A tool for upgrading Carbon versions",
|
|
52970
|
-
version: "11.
|
|
53051
|
+
version: "11.25.0-rc.0",
|
|
52971
53052
|
license: "Apache-2.0",
|
|
52972
53053
|
bin: {
|
|
52973
53054
|
"carbon-upgrade": "./bin/carbon-upgrade.js"
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/upgrade",
|
|
3
3
|
"description": "A tool for upgrading Carbon versions",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.25.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"bin": {
|
|
7
7
|
"carbon-upgrade": "./bin/carbon-upgrade.js"
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"@ibm/telemetry-js": "^1.5.0",
|
|
62
62
|
"jscodeshift": "^17.0.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "9134345acdba15a2406b4a7df9781bccf0a32ab6"
|
|
65
65
|
}
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import {
|
|
10
|
+
StructuredListWrapper,
|
|
11
|
+
StructuredListHead,
|
|
12
|
+
StructuredListBody,
|
|
13
|
+
StructuredListRow,
|
|
14
|
+
StructuredListCell,
|
|
15
|
+
StructuredListInput,
|
|
16
|
+
} from '@carbon/react';
|
|
17
|
+
|
|
18
|
+
// Case 1: Direct usage with selection
|
|
19
|
+
export const BasicSelection = () => (
|
|
20
|
+
<StructuredListWrapper selection>
|
|
21
|
+
<StructuredListHead>
|
|
22
|
+
<StructuredListRow head selection>
|
|
23
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
24
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
25
|
+
</StructuredListRow>
|
|
26
|
+
</StructuredListHead>
|
|
27
|
+
<StructuredListBody>
|
|
28
|
+
<StructuredListRow selection>
|
|
29
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
30
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
31
|
+
<StructuredListInput
|
|
32
|
+
id="row-1"
|
|
33
|
+
value="row-1"
|
|
34
|
+
title="row-1"
|
|
35
|
+
name="row-1"
|
|
36
|
+
aria-label="row-1"
|
|
37
|
+
/>
|
|
38
|
+
</StructuredListRow>
|
|
39
|
+
</StructuredListBody>
|
|
40
|
+
</StructuredListWrapper>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
// Case 2: Row generator function
|
|
44
|
+
const generateRows = (count) => {
|
|
45
|
+
return Array.from({ length: count }, (_, i) => (
|
|
46
|
+
<StructuredListRow key={`row-${i}`} selection>
|
|
47
|
+
<StructuredListCell>Row {i}</StructuredListCell>
|
|
48
|
+
<StructuredListCell>Content {i}</StructuredListCell>
|
|
49
|
+
<StructuredListInput
|
|
50
|
+
id={`row-${i}`}
|
|
51
|
+
value={`row-${i}`}
|
|
52
|
+
title={`row-${i}`}
|
|
53
|
+
name="row-0"
|
|
54
|
+
aria-label={`row-${i}`}
|
|
55
|
+
/>
|
|
56
|
+
</StructuredListRow>
|
|
57
|
+
));
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export const WithRowGenerator = () => (
|
|
61
|
+
<StructuredListWrapper selection>
|
|
62
|
+
<StructuredListHead>
|
|
63
|
+
<StructuredListRow head selection>
|
|
64
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
65
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
66
|
+
</StructuredListRow>
|
|
67
|
+
</StructuredListHead>
|
|
68
|
+
<StructuredListBody>{generateRows(3)}</StructuredListBody>
|
|
69
|
+
</StructuredListWrapper>
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
// Case 3: Nested inside other components
|
|
73
|
+
export const NestedStructuredList = () => (
|
|
74
|
+
<div className="wrapper">
|
|
75
|
+
<div className="inner">
|
|
76
|
+
<StructuredListWrapper selection>
|
|
77
|
+
<StructuredListHead>
|
|
78
|
+
<StructuredListRow head selection>
|
|
79
|
+
<StructuredListCell head>Nested Column</StructuredListCell>
|
|
80
|
+
</StructuredListRow>
|
|
81
|
+
</StructuredListHead>
|
|
82
|
+
<StructuredListBody>
|
|
83
|
+
<StructuredListRow selection>
|
|
84
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
85
|
+
<StructuredListInput
|
|
86
|
+
id="nested-1"
|
|
87
|
+
value="nested-1"
|
|
88
|
+
title="nested-1"
|
|
89
|
+
name="nested-1"
|
|
90
|
+
aria-label="nested-1"
|
|
91
|
+
/>
|
|
92
|
+
</StructuredListRow>
|
|
93
|
+
</StructuredListBody>
|
|
94
|
+
</StructuredListWrapper>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
// Case 4: Without selection (should not be modified)
|
|
100
|
+
export const WithoutSelection = () => (
|
|
101
|
+
<StructuredListWrapper>
|
|
102
|
+
<StructuredListHead>
|
|
103
|
+
<StructuredListRow head>
|
|
104
|
+
<StructuredListCell head>No Selection</StructuredListCell>
|
|
105
|
+
</StructuredListRow>
|
|
106
|
+
</StructuredListHead>
|
|
107
|
+
<StructuredListBody>
|
|
108
|
+
<StructuredListRow>
|
|
109
|
+
<StructuredListCell>Should Not Change</StructuredListCell>
|
|
110
|
+
</StructuredListRow>
|
|
111
|
+
</StructuredListBody>
|
|
112
|
+
</StructuredListWrapper>
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
// Case 5: Mixed with and without selection
|
|
116
|
+
export const MixedSelectionUsage = () => (
|
|
117
|
+
<div>
|
|
118
|
+
<StructuredListWrapper selection>
|
|
119
|
+
<StructuredListHead>
|
|
120
|
+
<StructuredListRow head selection>
|
|
121
|
+
<StructuredListCell head>With Selection</StructuredListCell>
|
|
122
|
+
</StructuredListRow>
|
|
123
|
+
</StructuredListHead>
|
|
124
|
+
<StructuredListBody>
|
|
125
|
+
<StructuredListRow selection>
|
|
126
|
+
<StructuredListCell>Should Get Selection</StructuredListCell>
|
|
127
|
+
<StructuredListInput
|
|
128
|
+
id="mixed-1"
|
|
129
|
+
value="mixed-1"
|
|
130
|
+
title="mixed-1"
|
|
131
|
+
name="mixed-1"
|
|
132
|
+
aria-label="mixed-1"
|
|
133
|
+
/>
|
|
134
|
+
</StructuredListRow>
|
|
135
|
+
</StructuredListBody>
|
|
136
|
+
</StructuredListWrapper>
|
|
137
|
+
<StructuredListWrapper>
|
|
138
|
+
<StructuredListHead>
|
|
139
|
+
<StructuredListRow head>
|
|
140
|
+
<StructuredListCell head>Without Selection</StructuredListCell>
|
|
141
|
+
</StructuredListRow>
|
|
142
|
+
</StructuredListHead>
|
|
143
|
+
<StructuredListBody>
|
|
144
|
+
<StructuredListRow>
|
|
145
|
+
<StructuredListCell>Should Not Get Selection</StructuredListCell>
|
|
146
|
+
</StructuredListRow>
|
|
147
|
+
</StructuredListBody>
|
|
148
|
+
</StructuredListWrapper>
|
|
149
|
+
</div>
|
|
150
|
+
);
|
|
151
|
+
// Case 7: Conditional Rendering with Selection
|
|
152
|
+
export const ConditionalRendering = ({ showSelection = true }) => (
|
|
153
|
+
<StructuredListWrapper selection={showSelection}>
|
|
154
|
+
<StructuredListHead>
|
|
155
|
+
<StructuredListRow head selection>
|
|
156
|
+
<StructuredListCell head>Conditional</StructuredListCell>
|
|
157
|
+
</StructuredListRow>
|
|
158
|
+
</StructuredListHead>
|
|
159
|
+
<StructuredListBody>
|
|
160
|
+
<StructuredListRow selection>
|
|
161
|
+
<StructuredListCell>Conditional Row</StructuredListCell>
|
|
162
|
+
<StructuredListInput
|
|
163
|
+
id="conditional-1"
|
|
164
|
+
value="conditional-1"
|
|
165
|
+
title="conditional-1"
|
|
166
|
+
name="conditional"
|
|
167
|
+
aria-label="conditional-1"
|
|
168
|
+
/>
|
|
169
|
+
</StructuredListRow>
|
|
170
|
+
</StructuredListBody>
|
|
171
|
+
</StructuredListWrapper>
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
// Case 8: Multiple Nested StructuredLists
|
|
175
|
+
export const NestedLists = () => (
|
|
176
|
+
<StructuredListWrapper selection>
|
|
177
|
+
<StructuredListHead>
|
|
178
|
+
<StructuredListRow head selection>
|
|
179
|
+
<StructuredListCell head>Parent List</StructuredListCell>
|
|
180
|
+
</StructuredListRow>
|
|
181
|
+
</StructuredListHead>
|
|
182
|
+
<StructuredListBody>
|
|
183
|
+
<StructuredListRow selection>
|
|
184
|
+
<StructuredListCell>
|
|
185
|
+
<StructuredListWrapper selection>
|
|
186
|
+
<StructuredListHead>
|
|
187
|
+
<StructuredListRow head selection>
|
|
188
|
+
<StructuredListCell head>Nested List</StructuredListCell>
|
|
189
|
+
</StructuredListRow>
|
|
190
|
+
</StructuredListHead>
|
|
191
|
+
<StructuredListBody>
|
|
192
|
+
<StructuredListRow selection>
|
|
193
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
194
|
+
<StructuredListInput
|
|
195
|
+
id="nested-2"
|
|
196
|
+
value="nested-2"
|
|
197
|
+
title="nested-2"
|
|
198
|
+
name="nested-2"
|
|
199
|
+
aria-label="nested-2"
|
|
200
|
+
/>
|
|
201
|
+
</StructuredListRow>
|
|
202
|
+
</StructuredListBody>
|
|
203
|
+
</StructuredListWrapper>
|
|
204
|
+
</StructuredListCell>
|
|
205
|
+
<StructuredListInput
|
|
206
|
+
id="parent-1"
|
|
207
|
+
value="parent-1"
|
|
208
|
+
title="parent-1"
|
|
209
|
+
name="parent"
|
|
210
|
+
aria-label="parent-1"
|
|
211
|
+
/>
|
|
212
|
+
</StructuredListRow>
|
|
213
|
+
</StructuredListBody>
|
|
214
|
+
</StructuredListWrapper>
|
|
215
|
+
);
|
|
216
|
+
|
|
217
|
+
// Case 10: With Conditional StructuredListInput
|
|
218
|
+
export const ConditionalInput = ({ isSelectable = true }) => (
|
|
219
|
+
<StructuredListWrapper selection>
|
|
220
|
+
<StructuredListHead>
|
|
221
|
+
<StructuredListRow head selection>
|
|
222
|
+
<StructuredListCell head>Conditional Input</StructuredListCell>
|
|
223
|
+
</StructuredListRow>
|
|
224
|
+
</StructuredListHead>
|
|
225
|
+
<StructuredListBody>
|
|
226
|
+
<StructuredListRow selection>
|
|
227
|
+
<StructuredListCell>Row Content</StructuredListCell>
|
|
228
|
+
{isSelectable && (
|
|
229
|
+
<StructuredListInput
|
|
230
|
+
id="conditional-input-1"
|
|
231
|
+
value="conditional-input-1"
|
|
232
|
+
title="conditional-input-1"
|
|
233
|
+
name="conditional-input"
|
|
234
|
+
aria-label="conditional-input-1"
|
|
235
|
+
/>
|
|
236
|
+
)}
|
|
237
|
+
</StructuredListRow>
|
|
238
|
+
</StructuredListBody>
|
|
239
|
+
</StructuredListWrapper>
|
|
240
|
+
);
|
|
241
|
+
|
|
242
|
+
// Case 11: With Multiple Body Sections
|
|
243
|
+
export const MultipleBodySections = () => (
|
|
244
|
+
<StructuredListWrapper selection>
|
|
245
|
+
<StructuredListHead>
|
|
246
|
+
<StructuredListRow head selection>
|
|
247
|
+
<StructuredListCell head>Multiple Bodies</StructuredListCell>
|
|
248
|
+
</StructuredListRow>
|
|
249
|
+
</StructuredListHead>
|
|
250
|
+
<StructuredListBody>
|
|
251
|
+
<StructuredListRow selection>
|
|
252
|
+
<StructuredListCell>Section 1</StructuredListCell>
|
|
253
|
+
<StructuredListInput
|
|
254
|
+
id="section-1"
|
|
255
|
+
value="section-1"
|
|
256
|
+
title="section-1"
|
|
257
|
+
name="multi-section"
|
|
258
|
+
aria-label="section-1"
|
|
259
|
+
/>
|
|
260
|
+
</StructuredListRow>
|
|
261
|
+
</StructuredListBody>
|
|
262
|
+
<StructuredListBody>
|
|
263
|
+
<StructuredListRow selection>
|
|
264
|
+
<StructuredListCell>Section 2</StructuredListCell>
|
|
265
|
+
<StructuredListInput
|
|
266
|
+
id="section-2"
|
|
267
|
+
value="section-2"
|
|
268
|
+
title="section-2"
|
|
269
|
+
name="multi-section"
|
|
270
|
+
aria-label="section-2"
|
|
271
|
+
/>
|
|
272
|
+
</StructuredListRow>
|
|
273
|
+
</StructuredListBody>
|
|
274
|
+
</StructuredListWrapper>
|
|
275
|
+
);
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import React from 'react';
|
|
9
|
+
import {
|
|
10
|
+
StructuredListWrapper,
|
|
11
|
+
StructuredListHead,
|
|
12
|
+
StructuredListBody,
|
|
13
|
+
StructuredListRow,
|
|
14
|
+
StructuredListCell,
|
|
15
|
+
StructuredListInput,
|
|
16
|
+
} from '@carbon/react';
|
|
17
|
+
|
|
18
|
+
// Case 1: Direct usage with selection
|
|
19
|
+
export const BasicSelection = () => (
|
|
20
|
+
<StructuredListWrapper selection>
|
|
21
|
+
<StructuredListHead>
|
|
22
|
+
<StructuredListRow head selection>
|
|
23
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
24
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
25
|
+
</StructuredListRow>
|
|
26
|
+
</StructuredListHead>
|
|
27
|
+
<StructuredListBody>
|
|
28
|
+
<StructuredListRow selection>
|
|
29
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
30
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
31
|
+
<StructuredListInput
|
|
32
|
+
id="row-1"
|
|
33
|
+
value="row-1"
|
|
34
|
+
title="row-1"
|
|
35
|
+
name="row-1"
|
|
36
|
+
aria-label="row-1"
|
|
37
|
+
/>
|
|
38
|
+
</StructuredListRow>
|
|
39
|
+
</StructuredListBody>
|
|
40
|
+
</StructuredListWrapper>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
// Case 2: Row generator function
|
|
44
|
+
const generateRows = (count) => {
|
|
45
|
+
return Array.from({ length: count }, (_, i) => (
|
|
46
|
+
<StructuredListRow key={`row-${i}`} selection>
|
|
47
|
+
<StructuredListCell>Row {i}</StructuredListCell>
|
|
48
|
+
<StructuredListCell>Content {i}</StructuredListCell>
|
|
49
|
+
<StructuredListInput
|
|
50
|
+
id={`row-${i}`}
|
|
51
|
+
value={`row-${i}`}
|
|
52
|
+
title={`row-${i}`}
|
|
53
|
+
name="row-0"
|
|
54
|
+
aria-label={`row-${i}`}
|
|
55
|
+
/>
|
|
56
|
+
</StructuredListRow>
|
|
57
|
+
));
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export const WithRowGenerator = () => (
|
|
61
|
+
<StructuredListWrapper selection>
|
|
62
|
+
<StructuredListHead>
|
|
63
|
+
<StructuredListRow head selection>
|
|
64
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
65
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
66
|
+
</StructuredListRow>
|
|
67
|
+
</StructuredListHead>
|
|
68
|
+
<StructuredListBody>{generateRows(3)}</StructuredListBody>
|
|
69
|
+
</StructuredListWrapper>
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
// Case 3: Nested inside other components
|
|
73
|
+
export const NestedStructuredList = () => (
|
|
74
|
+
<div className="wrapper">
|
|
75
|
+
<div className="inner">
|
|
76
|
+
<StructuredListWrapper selection>
|
|
77
|
+
<StructuredListHead>
|
|
78
|
+
<StructuredListRow head selection>
|
|
79
|
+
<StructuredListCell head>Nested Column</StructuredListCell>
|
|
80
|
+
</StructuredListRow>
|
|
81
|
+
</StructuredListHead>
|
|
82
|
+
<StructuredListBody>
|
|
83
|
+
<StructuredListRow selection>
|
|
84
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
85
|
+
<StructuredListInput
|
|
86
|
+
id="nested-1"
|
|
87
|
+
value="nested-1"
|
|
88
|
+
title="nested-1"
|
|
89
|
+
name="nested-1"
|
|
90
|
+
aria-label="nested-1"
|
|
91
|
+
/>
|
|
92
|
+
</StructuredListRow>
|
|
93
|
+
</StructuredListBody>
|
|
94
|
+
</StructuredListWrapper>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
// Case 4: Without selection (should not be modified)
|
|
100
|
+
export const WithoutSelection = () => (
|
|
101
|
+
<StructuredListWrapper>
|
|
102
|
+
<StructuredListHead>
|
|
103
|
+
<StructuredListRow head>
|
|
104
|
+
<StructuredListCell head>No Selection</StructuredListCell>
|
|
105
|
+
</StructuredListRow>
|
|
106
|
+
</StructuredListHead>
|
|
107
|
+
<StructuredListBody>
|
|
108
|
+
<StructuredListRow>
|
|
109
|
+
<StructuredListCell>Should Not Change</StructuredListCell>
|
|
110
|
+
</StructuredListRow>
|
|
111
|
+
</StructuredListBody>
|
|
112
|
+
</StructuredListWrapper>
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
// Case 5: Mixed with and without selection
|
|
116
|
+
export const MixedSelectionUsage = () => (
|
|
117
|
+
<div>
|
|
118
|
+
<StructuredListWrapper selection>
|
|
119
|
+
<StructuredListHead>
|
|
120
|
+
<StructuredListRow head selection>
|
|
121
|
+
<StructuredListCell head>With Selection</StructuredListCell>
|
|
122
|
+
</StructuredListRow>
|
|
123
|
+
</StructuredListHead>
|
|
124
|
+
<StructuredListBody>
|
|
125
|
+
<StructuredListRow selection>
|
|
126
|
+
<StructuredListCell>Should Get Selection</StructuredListCell>
|
|
127
|
+
<StructuredListInput
|
|
128
|
+
id="mixed-1"
|
|
129
|
+
value="mixed-1"
|
|
130
|
+
title="mixed-1"
|
|
131
|
+
name="mixed-1"
|
|
132
|
+
aria-label="mixed-1"
|
|
133
|
+
/>
|
|
134
|
+
</StructuredListRow>
|
|
135
|
+
</StructuredListBody>
|
|
136
|
+
</StructuredListWrapper>
|
|
137
|
+
<StructuredListWrapper>
|
|
138
|
+
<StructuredListHead>
|
|
139
|
+
<StructuredListRow head>
|
|
140
|
+
<StructuredListCell head>Without Selection</StructuredListCell>
|
|
141
|
+
</StructuredListRow>
|
|
142
|
+
</StructuredListHead>
|
|
143
|
+
<StructuredListBody>
|
|
144
|
+
<StructuredListRow>
|
|
145
|
+
<StructuredListCell>Should Not Get Selection</StructuredListCell>
|
|
146
|
+
</StructuredListRow>
|
|
147
|
+
</StructuredListBody>
|
|
148
|
+
</StructuredListWrapper>
|
|
149
|
+
</div>
|
|
150
|
+
);
|
|
151
|
+
// Case 7: Conditional Rendering with Selection
|
|
152
|
+
export const ConditionalRendering = ({ showSelection = true }) => (
|
|
153
|
+
<StructuredListWrapper selection={showSelection}>
|
|
154
|
+
<StructuredListHead>
|
|
155
|
+
<StructuredListRow head selection>
|
|
156
|
+
<StructuredListCell head>Conditional</StructuredListCell>
|
|
157
|
+
</StructuredListRow>
|
|
158
|
+
</StructuredListHead>
|
|
159
|
+
<StructuredListBody>
|
|
160
|
+
<StructuredListRow selection>
|
|
161
|
+
<StructuredListCell>Conditional Row</StructuredListCell>
|
|
162
|
+
<StructuredListInput
|
|
163
|
+
id="conditional-1"
|
|
164
|
+
value="conditional-1"
|
|
165
|
+
title="conditional-1"
|
|
166
|
+
name="conditional"
|
|
167
|
+
aria-label="conditional-1"
|
|
168
|
+
/>
|
|
169
|
+
</StructuredListRow>
|
|
170
|
+
</StructuredListBody>
|
|
171
|
+
</StructuredListWrapper>
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
// Case 8: Multiple Nested StructuredLists
|
|
175
|
+
export const NestedLists = () => (
|
|
176
|
+
<StructuredListWrapper selection>
|
|
177
|
+
<StructuredListHead>
|
|
178
|
+
<StructuredListRow head selection>
|
|
179
|
+
<StructuredListCell head>Parent List</StructuredListCell>
|
|
180
|
+
</StructuredListRow>
|
|
181
|
+
</StructuredListHead>
|
|
182
|
+
<StructuredListBody>
|
|
183
|
+
<StructuredListRow selection>
|
|
184
|
+
<StructuredListCell>
|
|
185
|
+
<StructuredListWrapper selection>
|
|
186
|
+
<StructuredListHead>
|
|
187
|
+
<StructuredListRow head selection>
|
|
188
|
+
<StructuredListCell head>Nested List</StructuredListCell>
|
|
189
|
+
</StructuredListRow>
|
|
190
|
+
</StructuredListHead>
|
|
191
|
+
<StructuredListBody>
|
|
192
|
+
<StructuredListRow selection>
|
|
193
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
194
|
+
<StructuredListInput
|
|
195
|
+
id="nested-2"
|
|
196
|
+
value="nested-2"
|
|
197
|
+
title="nested-2"
|
|
198
|
+
name="nested-2"
|
|
199
|
+
aria-label="nested-2"
|
|
200
|
+
/>
|
|
201
|
+
</StructuredListRow>
|
|
202
|
+
</StructuredListBody>
|
|
203
|
+
</StructuredListWrapper>
|
|
204
|
+
</StructuredListCell>
|
|
205
|
+
<StructuredListInput
|
|
206
|
+
id="parent-1"
|
|
207
|
+
value="parent-1"
|
|
208
|
+
title="parent-1"
|
|
209
|
+
name="parent"
|
|
210
|
+
aria-label="parent-1"
|
|
211
|
+
/>
|
|
212
|
+
</StructuredListRow>
|
|
213
|
+
</StructuredListBody>
|
|
214
|
+
</StructuredListWrapper>
|
|
215
|
+
);
|
|
216
|
+
|
|
217
|
+
// Case 10: With Conditional StructuredListInput
|
|
218
|
+
export const ConditionalInput = ({ isSelectable = true }) => (
|
|
219
|
+
<StructuredListWrapper selection>
|
|
220
|
+
<StructuredListHead>
|
|
221
|
+
<StructuredListRow head selection>
|
|
222
|
+
<StructuredListCell head>Conditional Input</StructuredListCell>
|
|
223
|
+
</StructuredListRow>
|
|
224
|
+
</StructuredListHead>
|
|
225
|
+
<StructuredListBody>
|
|
226
|
+
<StructuredListRow selection>
|
|
227
|
+
<StructuredListCell>Row Content</StructuredListCell>
|
|
228
|
+
{isSelectable && (
|
|
229
|
+
<StructuredListInput
|
|
230
|
+
id="conditional-input-1"
|
|
231
|
+
value="conditional-input-1"
|
|
232
|
+
title="conditional-input-1"
|
|
233
|
+
name="conditional-input"
|
|
234
|
+
aria-label="conditional-input-1"
|
|
235
|
+
/>
|
|
236
|
+
)}
|
|
237
|
+
</StructuredListRow>
|
|
238
|
+
</StructuredListBody>
|
|
239
|
+
</StructuredListWrapper>
|
|
240
|
+
);
|
|
241
|
+
|
|
242
|
+
// Case 11: With Multiple Body Sections
|
|
243
|
+
export const MultipleBodySections = () => (
|
|
244
|
+
<StructuredListWrapper selection>
|
|
245
|
+
<StructuredListHead>
|
|
246
|
+
<StructuredListRow head selection>
|
|
247
|
+
<StructuredListCell head>Multiple Bodies</StructuredListCell>
|
|
248
|
+
</StructuredListRow>
|
|
249
|
+
</StructuredListHead>
|
|
250
|
+
<StructuredListBody>
|
|
251
|
+
<StructuredListRow selection>
|
|
252
|
+
<StructuredListCell>Section 1</StructuredListCell>
|
|
253
|
+
<StructuredListInput
|
|
254
|
+
id="section-1"
|
|
255
|
+
value="section-1"
|
|
256
|
+
title="section-1"
|
|
257
|
+
name="multi-section"
|
|
258
|
+
aria-label="section-1"
|
|
259
|
+
/>
|
|
260
|
+
</StructuredListRow>
|
|
261
|
+
</StructuredListBody>
|
|
262
|
+
<StructuredListBody>
|
|
263
|
+
<StructuredListRow selection>
|
|
264
|
+
<StructuredListCell>Section 2</StructuredListCell>
|
|
265
|
+
<StructuredListInput
|
|
266
|
+
id="section-2"
|
|
267
|
+
value="section-2"
|
|
268
|
+
title="section-2"
|
|
269
|
+
name="multi-section"
|
|
270
|
+
aria-label="section-2"
|
|
271
|
+
/>
|
|
272
|
+
</StructuredListRow>
|
|
273
|
+
</StructuredListBody>
|
|
274
|
+
</StructuredListWrapper>
|
|
275
|
+
);
|