@kaizen/components 1.73.0 → 1.73.1
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/bin/codemod.sh +2 -0
- package/codemods/README.md +46 -0
- package/codemods/upgradeV1Buttons/index.ts +19 -0
- package/codemods/upgradeV1Buttons/transformV1ButtonAttributes.spec.ts +202 -0
- package/codemods/upgradeV1Buttons/transformV1ButtonAttributes.ts +146 -0
- package/codemods/upgradeV1Buttons/upgradeV1Buttons.spec.ts +658 -0
- package/codemods/upgradeV1Buttons/upgradeV1Buttons.ts +93 -0
- package/codemods/utils/createJsxElementWithChildren.spec.ts +119 -0
- package/codemods/utils/createJsxElementWithChildren.ts +55 -0
- package/codemods/utils/createProp.spec.ts +75 -19
- package/codemods/utils/createProp.ts +8 -1
- package/codemods/utils/getKaioTagName.ts +13 -5
- package/codemods/utils/index.ts +1 -0
- package/dist/styles.css +8788 -8788
- package/package.json +3 -3
- package/src/__next__/Button/_docs/Button--migration-guide.mdx +81 -0
|
@@ -0,0 +1,658 @@
|
|
|
1
|
+
import { parseJsx } from '../__tests__/utils'
|
|
2
|
+
import {
|
|
3
|
+
getKaioTagNamesMapByComponentName,
|
|
4
|
+
printAst,
|
|
5
|
+
transformSource,
|
|
6
|
+
type TransformSourceArgs,
|
|
7
|
+
} from '../utils'
|
|
8
|
+
import { upgradeV1Buttons } from './upgradeV1Buttons'
|
|
9
|
+
|
|
10
|
+
const transformIcons = (sourceFile: TransformSourceArgs['sourceFile']): string => {
|
|
11
|
+
const kaioTagNamesMap = getKaioTagNamesMapByComponentName(sourceFile, ['IconButton', 'Button'])
|
|
12
|
+
return transformSource({
|
|
13
|
+
sourceFile,
|
|
14
|
+
transformers: [upgradeV1Buttons(kaioTagNamesMap!)],
|
|
15
|
+
})
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
describe('upgradeV1Buttons()', () => {
|
|
19
|
+
describe('to Button', () => {
|
|
20
|
+
it('transforms Button v1 to Button (next) when href and component prop are not set', () => {
|
|
21
|
+
const inputAst = parseJsx(`
|
|
22
|
+
import { Button } from "@kaizen/components"
|
|
23
|
+
export const TestComponent = () => <Button label="Hello" onClick={handleClick} />
|
|
24
|
+
`)
|
|
25
|
+
const outputAst = parseJsx(`
|
|
26
|
+
import { Button } from "@kaizen/components/next"
|
|
27
|
+
export const TestComponent = () => <Button onPress={handleClick} variant="secondary" size="large">Hello</Button>
|
|
28
|
+
`)
|
|
29
|
+
|
|
30
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
it('transforms IconButton to Button (next) when href and component prop are not set', () => {
|
|
34
|
+
const inputAst = parseJsx(`
|
|
35
|
+
import { IconButton } from "@kaizen/components"
|
|
36
|
+
export const TestComponent = () => <IconButton icon={<Icon isPresentational name="more_horiz"/>} label="More pls" onClick={handleClick} />
|
|
37
|
+
`)
|
|
38
|
+
const outputAst = parseJsx(`
|
|
39
|
+
import { Button } from "@kaizen/components/next"
|
|
40
|
+
export const TestComponent = () => <Button icon={<Icon isPresentational name="more_horiz"/>} onPress={handleClick} variant="tertiary" size="large" hasHiddenLabel>More pls</Button>
|
|
41
|
+
`)
|
|
42
|
+
|
|
43
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
it('transforms both IconButton and Button v1 to Button (next) in the same iteration', () => {
|
|
47
|
+
const inputAst = parseJsx(`
|
|
48
|
+
import { Button, IconButton } from "@kaizen/components"
|
|
49
|
+
export const TestComponent = () => (
|
|
50
|
+
<>
|
|
51
|
+
<Button label="Hello" />
|
|
52
|
+
<IconButton icon={<Icon isPresentational name="more_horiz"/>} label="More pls" />
|
|
53
|
+
</>
|
|
54
|
+
)
|
|
55
|
+
`)
|
|
56
|
+
const outputAst = parseJsx(`
|
|
57
|
+
import { Button } from "@kaizen/components/next"
|
|
58
|
+
export const TestComponent = () => (
|
|
59
|
+
<>
|
|
60
|
+
<Button variant="secondary" size="large">Hello</Button>
|
|
61
|
+
<Button icon={<Icon isPresentational name="more_horiz"/>} variant="tertiary" size="large" hasHiddenLabel>More pls</Button>
|
|
62
|
+
</>
|
|
63
|
+
)
|
|
64
|
+
`)
|
|
65
|
+
|
|
66
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
it('transforms aliased V1 Buttons to Button when href and component prop are not set', () => {
|
|
70
|
+
const inputAst = parseJsx(`
|
|
71
|
+
import { IconButton as KzIconButton, Button as KzButton } from "@kaizen/components"
|
|
72
|
+
export const TestComponent = () => (
|
|
73
|
+
<>
|
|
74
|
+
<KzButton label="Waffle" />
|
|
75
|
+
<KzIconButton label="Pancake" />
|
|
76
|
+
</>
|
|
77
|
+
)
|
|
78
|
+
`)
|
|
79
|
+
const outputAst = parseJsx(`
|
|
80
|
+
import { Button } from "@kaizen/components/next"
|
|
81
|
+
export const TestComponent = () => (
|
|
82
|
+
<>
|
|
83
|
+
<Button variant="secondary" size="large">Waffle</Button>
|
|
84
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Pancake</Button>
|
|
85
|
+
</>
|
|
86
|
+
)
|
|
87
|
+
`)
|
|
88
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
it('transforms V1 Buttons to aliased Button', () => {
|
|
92
|
+
const inputAst = parseJsx(`
|
|
93
|
+
import { IconButton, Button } from "@kaizen/components"
|
|
94
|
+
import { Button as ButtonAlias } from "@kaizen/components/next"
|
|
95
|
+
export const TestComponent = () => (
|
|
96
|
+
<>
|
|
97
|
+
<Button label="Waffle" />
|
|
98
|
+
<IconButton label="Pancake" />
|
|
99
|
+
<ButtonAlias>Toast</ButtonAlias>
|
|
100
|
+
</>
|
|
101
|
+
)
|
|
102
|
+
`)
|
|
103
|
+
const outputAst = parseJsx(`
|
|
104
|
+
import { Button as ButtonAlias } from "@kaizen/components/next"
|
|
105
|
+
export const TestComponent = () => (
|
|
106
|
+
<>
|
|
107
|
+
<ButtonAlias variant="secondary" size="large">Waffle</ButtonAlias>
|
|
108
|
+
<ButtonAlias variant="tertiary" size="large" hasHiddenLabel>Pancake</ButtonAlias>
|
|
109
|
+
<ButtonAlias>Toast</ButtonAlias>
|
|
110
|
+
</>
|
|
111
|
+
)
|
|
112
|
+
`)
|
|
113
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
114
|
+
})
|
|
115
|
+
|
|
116
|
+
describe('import statements', () => {
|
|
117
|
+
it('updates V1 Buttons from @kaizen/components', () => {
|
|
118
|
+
const inputAst = parseJsx(`
|
|
119
|
+
import { Button, IconButton } from "@kaizen/components"
|
|
120
|
+
export const TestComponent = () => (
|
|
121
|
+
<>
|
|
122
|
+
<Button label="Pancakes" />
|
|
123
|
+
<IconButton label="Waffles" />
|
|
124
|
+
</>
|
|
125
|
+
)
|
|
126
|
+
`)
|
|
127
|
+
const outputAst = parseJsx(`
|
|
128
|
+
import { Button } from "@kaizen/components/next"
|
|
129
|
+
export const TestComponent = () => (
|
|
130
|
+
<>
|
|
131
|
+
<Button variant="secondary" size="large">Pancakes</Button>
|
|
132
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Waffles</Button>
|
|
133
|
+
</>
|
|
134
|
+
)
|
|
135
|
+
`)
|
|
136
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
137
|
+
})
|
|
138
|
+
|
|
139
|
+
it('updates V1 Buttons from @kaizen/components/v1/actions', () => {
|
|
140
|
+
const inputAst = parseJsx(`
|
|
141
|
+
import { Button, IconButton } from "@kaizen/components/v1/actions"
|
|
142
|
+
export const TestComponent = () => (
|
|
143
|
+
<>
|
|
144
|
+
<Button label="Pancakes" />
|
|
145
|
+
<IconButton label="Waffles" />
|
|
146
|
+
</>
|
|
147
|
+
)
|
|
148
|
+
`)
|
|
149
|
+
const outputAst = parseJsx(`
|
|
150
|
+
import { Button } from "@kaizen/components/next"
|
|
151
|
+
export const TestComponent = () => (
|
|
152
|
+
<>
|
|
153
|
+
<Button variant="secondary" size="large">Pancakes</Button>
|
|
154
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Waffles</Button>
|
|
155
|
+
</>
|
|
156
|
+
)
|
|
157
|
+
`)
|
|
158
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
159
|
+
})
|
|
160
|
+
|
|
161
|
+
it('updates V1 Buttons from @kaizen/components/v2/actions', () => {
|
|
162
|
+
const inputAst = parseJsx(`
|
|
163
|
+
import { Button, IconButton } from "@kaizen/components/v2/actions"
|
|
164
|
+
export const TestComponent = () => (
|
|
165
|
+
<>
|
|
166
|
+
<Button label="Pancakes" />
|
|
167
|
+
<IconButton label="Waffles" />
|
|
168
|
+
</>
|
|
169
|
+
)
|
|
170
|
+
`)
|
|
171
|
+
const outputAst = parseJsx(`
|
|
172
|
+
import { Button } from "@kaizen/components/next"
|
|
173
|
+
export const TestComponent = () => (
|
|
174
|
+
<>
|
|
175
|
+
<Button variant="secondary" size="large">Pancakes</Button>
|
|
176
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Waffles</Button>
|
|
177
|
+
</>
|
|
178
|
+
)
|
|
179
|
+
`)
|
|
180
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
181
|
+
})
|
|
182
|
+
|
|
183
|
+
it('updates aliased V1 Buttons to Button', () => {
|
|
184
|
+
const inputAst = parseJsx(`
|
|
185
|
+
import { Button as KzButton, IconButton as KzIconButton } from "@kaizen/components"
|
|
186
|
+
export const TestComponent = () => (
|
|
187
|
+
<>
|
|
188
|
+
<KzButton label="Pancakes" />
|
|
189
|
+
<KzIconButton label="Waffles" />
|
|
190
|
+
</>
|
|
191
|
+
)
|
|
192
|
+
`)
|
|
193
|
+
const outputAst = parseJsx(`
|
|
194
|
+
import { Button } from "@kaizen/components/next"
|
|
195
|
+
export const TestComponent = () => (
|
|
196
|
+
<>
|
|
197
|
+
<Button variant="secondary" size="large">Pancakes</Button>
|
|
198
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Waffles</Button>
|
|
199
|
+
</>
|
|
200
|
+
)
|
|
201
|
+
`)
|
|
202
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
203
|
+
})
|
|
204
|
+
|
|
205
|
+
it('updates imports of multiple V1 Buttons from different KAIO imports', () => {
|
|
206
|
+
const inputAst = parseJsx(`
|
|
207
|
+
import { Button as KzButton, IconButton as KzIconButton } from "@kaizen/components"
|
|
208
|
+
import { Button as ButtonV1, IconButton as IconButtonV1 } from "@kaizen/components/v1/actions"
|
|
209
|
+
export const TestComponent = () => (
|
|
210
|
+
<>
|
|
211
|
+
<KzButton label="Pancakes" />
|
|
212
|
+
<ButtonV1 label="Waffles" />
|
|
213
|
+
<KzIconButton label="Toasties" />
|
|
214
|
+
<IconButtonV1 label="Scones" />
|
|
215
|
+
</>
|
|
216
|
+
)
|
|
217
|
+
`)
|
|
218
|
+
const outputAst = parseJsx(`
|
|
219
|
+
import { Button } from "@kaizen/components/next"
|
|
220
|
+
export const TestComponent = () => (
|
|
221
|
+
<>
|
|
222
|
+
<Button variant="secondary" size="large">Pancakes</Button>
|
|
223
|
+
<Button variant="secondary" size="large">Waffles</Button>
|
|
224
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Toasties</Button>
|
|
225
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Scones</Button>
|
|
226
|
+
</>
|
|
227
|
+
)
|
|
228
|
+
`)
|
|
229
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
230
|
+
})
|
|
231
|
+
|
|
232
|
+
it('does not duplicate Button import if it already exists', () => {
|
|
233
|
+
const inputAst = parseJsx(`
|
|
234
|
+
import { IconButton, Button as KzButton } from "@kaizen/components"
|
|
235
|
+
import { Button } from "@kaizen/components/next"
|
|
236
|
+
export const TestComponent = () => (
|
|
237
|
+
<>
|
|
238
|
+
<IconButton label="Pancakes" />
|
|
239
|
+
<KzButton label="Scones" />
|
|
240
|
+
<Button>Waffles</Button>
|
|
241
|
+
</>
|
|
242
|
+
)
|
|
243
|
+
`)
|
|
244
|
+
const outputAst = parseJsx(`
|
|
245
|
+
import { Button } from "@kaizen/components/next"
|
|
246
|
+
export const TestComponent = () => (
|
|
247
|
+
<>
|
|
248
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Pancakes</Button>
|
|
249
|
+
<Button variant="secondary" size="large">Scones</Button>
|
|
250
|
+
<Button>Waffles</Button>
|
|
251
|
+
</>
|
|
252
|
+
)
|
|
253
|
+
`)
|
|
254
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
255
|
+
})
|
|
256
|
+
|
|
257
|
+
it('does not add Button if aliased Button exists', () => {
|
|
258
|
+
const inputAst = parseJsx(`
|
|
259
|
+
import { Button, IconButton } from "@kaizen/components"
|
|
260
|
+
import { Button as ButtonAlias } from "@kaizen/components/next"
|
|
261
|
+
export const TestComponent = () => (
|
|
262
|
+
<>
|
|
263
|
+
<Button label="Pancakes" />
|
|
264
|
+
<IconButton label="Scones" />
|
|
265
|
+
<ButtonAlias>Waffles</ButtonAlias>
|
|
266
|
+
</>
|
|
267
|
+
)
|
|
268
|
+
`)
|
|
269
|
+
const outputAst = parseJsx(`
|
|
270
|
+
import { Button as ButtonAlias } from "@kaizen/components/next"
|
|
271
|
+
export const TestComponent = () => (
|
|
272
|
+
<>
|
|
273
|
+
<ButtonAlias variant="secondary" size="large">Pancakes</ButtonAlias>
|
|
274
|
+
<ButtonAlias variant="tertiary" size="large" hasHiddenLabel>Scones</ButtonAlias>
|
|
275
|
+
<ButtonAlias>Waffles</ButtonAlias>
|
|
276
|
+
</>
|
|
277
|
+
)
|
|
278
|
+
`)
|
|
279
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
280
|
+
})
|
|
281
|
+
|
|
282
|
+
it('does not update import of irrelevant KAIO components', () => {
|
|
283
|
+
const inputAst = parseJsx(`
|
|
284
|
+
import { IconButton, FilterButton } from "@kaizen/components"
|
|
285
|
+
export const TestComponent = () => (
|
|
286
|
+
<>
|
|
287
|
+
<IconButton label="Pancakes" />
|
|
288
|
+
<FilterButton />
|
|
289
|
+
</>
|
|
290
|
+
)
|
|
291
|
+
`)
|
|
292
|
+
const outputAst = parseJsx(`
|
|
293
|
+
import { FilterButton } from "@kaizen/components"
|
|
294
|
+
import { Button } from "@kaizen/components/next"
|
|
295
|
+
export const TestComponent = () => (
|
|
296
|
+
<>
|
|
297
|
+
<Button variant="tertiary" size="large" hasHiddenLabel>Pancakes</Button>
|
|
298
|
+
<FilterButton />
|
|
299
|
+
</>
|
|
300
|
+
)
|
|
301
|
+
`)
|
|
302
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
303
|
+
})
|
|
304
|
+
})
|
|
305
|
+
})
|
|
306
|
+
|
|
307
|
+
describe('to LinkButton', () => {
|
|
308
|
+
it('transforms V1 Buttons to LinkButton when href prop is set', () => {
|
|
309
|
+
const inputAst = parseJsx(`
|
|
310
|
+
import { Button, IconButton } from "@kaizen/components"
|
|
311
|
+
export const TestComponent = () => (
|
|
312
|
+
<>
|
|
313
|
+
<Button label="Pancakes" href="#" />
|
|
314
|
+
<IconButton label="Waffles" href="#" />
|
|
315
|
+
</>
|
|
316
|
+
)
|
|
317
|
+
`)
|
|
318
|
+
const outputAst = parseJsx(`
|
|
319
|
+
import { LinkButton } from "@kaizen/components"
|
|
320
|
+
export const TestComponent = () => (
|
|
321
|
+
<>
|
|
322
|
+
<LinkButton href="#" variant="secondary" size="large">Pancakes</LinkButton>
|
|
323
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Waffles</LinkButton>
|
|
324
|
+
</>
|
|
325
|
+
)
|
|
326
|
+
`)
|
|
327
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
328
|
+
})
|
|
329
|
+
|
|
330
|
+
it('transforms V1 Buttons to LinkButton when component prop is set', () => {
|
|
331
|
+
const inputAst = parseJsx(`
|
|
332
|
+
import { Button, IconButton } from "@kaizen/components"
|
|
333
|
+
export const TestComponent = () => (
|
|
334
|
+
<>
|
|
335
|
+
<Button label="Pancakes" component={Component} />
|
|
336
|
+
<IconButton label="Waffles" component={Component} />
|
|
337
|
+
</>
|
|
338
|
+
)
|
|
339
|
+
`)
|
|
340
|
+
const outputAst = parseJsx(`
|
|
341
|
+
import { LinkButton } from "@kaizen/components"
|
|
342
|
+
export const TestComponent = () => (
|
|
343
|
+
<>
|
|
344
|
+
<LinkButton component={Component} variant="secondary" size="large">Pancakes</LinkButton>
|
|
345
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Waffles</LinkButton>
|
|
346
|
+
</>
|
|
347
|
+
)
|
|
348
|
+
`)
|
|
349
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
350
|
+
})
|
|
351
|
+
|
|
352
|
+
it('transforms both IconButton and Button to LinkButton in the same iteration', () => {
|
|
353
|
+
const inputAst = parseJsx(`
|
|
354
|
+
import { Button, IconButton } from "@kaizen/components"
|
|
355
|
+
export const TestComponent = () => (
|
|
356
|
+
<>
|
|
357
|
+
<Button label="Summer" href="#" />
|
|
358
|
+
<Button label="Autumn" component={Component} />
|
|
359
|
+
<IconButton label="Winter" href="#" />
|
|
360
|
+
<IconButton label="Spring" component={Component} />
|
|
361
|
+
</>
|
|
362
|
+
)
|
|
363
|
+
`)
|
|
364
|
+
const outputAst = parseJsx(`
|
|
365
|
+
import { LinkButton } from "@kaizen/components"
|
|
366
|
+
export const TestComponent = () => (
|
|
367
|
+
<>
|
|
368
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
369
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
370
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
371
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
372
|
+
</>
|
|
373
|
+
)
|
|
374
|
+
`)
|
|
375
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
376
|
+
})
|
|
377
|
+
|
|
378
|
+
it('transforms aliased V1 Buttons to LinkButton when href or component prop are set', () => {
|
|
379
|
+
const inputAst = parseJsx(`
|
|
380
|
+
import { IconButton as KzIconButton, Button as KzButton } from "@kaizen/components"
|
|
381
|
+
export const TestComponent = () => (
|
|
382
|
+
<>
|
|
383
|
+
<KzButton label="Summer" href="#" />
|
|
384
|
+
<KzButton label="Autumn" component={Component} />
|
|
385
|
+
<KzIconButton label="Winter" href="#" />
|
|
386
|
+
<KzIconButton label="Spring" component={Component} />
|
|
387
|
+
</>
|
|
388
|
+
)
|
|
389
|
+
`)
|
|
390
|
+
const outputAst = parseJsx(`
|
|
391
|
+
import { LinkButton } from "@kaizen/components"
|
|
392
|
+
export const TestComponent = () => (
|
|
393
|
+
<>
|
|
394
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
395
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
396
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
397
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
398
|
+
</>
|
|
399
|
+
)
|
|
400
|
+
`)
|
|
401
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
402
|
+
})
|
|
403
|
+
|
|
404
|
+
it('transforms V1 Buttons to aliased LinkButton', () => {
|
|
405
|
+
const inputAst = parseJsx(`
|
|
406
|
+
import { IconButton, Button } from "@kaizen/components"
|
|
407
|
+
import { LinkButton as LinkButtonAlias } from "@kaizen/components"
|
|
408
|
+
export const TestComponent = () => (
|
|
409
|
+
<>
|
|
410
|
+
<Button label="Summer" href="#" />
|
|
411
|
+
<Button label="Autumn" component={Component} />
|
|
412
|
+
<IconButton label="Winter" href="#" />
|
|
413
|
+
<IconButton label="Spring" component={Component} />
|
|
414
|
+
</>
|
|
415
|
+
)
|
|
416
|
+
`)
|
|
417
|
+
const outputAst = parseJsx(`
|
|
418
|
+
import { LinkButton as LinkButtonAlias } from "@kaizen/components"
|
|
419
|
+
export const TestComponent = () => (
|
|
420
|
+
<>
|
|
421
|
+
<LinkButtonAlias href="#" variant="secondary" size="large">Summer</LinkButtonAlias>
|
|
422
|
+
<LinkButtonAlias component={Component} variant="secondary" size="large">Autumn</LinkButtonAlias>
|
|
423
|
+
<LinkButtonAlias href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButtonAlias>
|
|
424
|
+
<LinkButtonAlias component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButtonAlias>
|
|
425
|
+
</>
|
|
426
|
+
)
|
|
427
|
+
`)
|
|
428
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
429
|
+
})
|
|
430
|
+
|
|
431
|
+
describe('import statements', () => {
|
|
432
|
+
it('updates V1 Buttons from @kaizen/components', () => {
|
|
433
|
+
const inputAst = parseJsx(`
|
|
434
|
+
import { Button, IconButton } from "@kaizen/components"
|
|
435
|
+
export const TestComponent = () => (
|
|
436
|
+
<>
|
|
437
|
+
<Button label="Summer" href="#" />
|
|
438
|
+
<Button label="Autumn" component={Component} />
|
|
439
|
+
<IconButton label="Winter" href="#" />
|
|
440
|
+
<IconButton label="Spring" component={Component} />
|
|
441
|
+
</>
|
|
442
|
+
)
|
|
443
|
+
`)
|
|
444
|
+
const outputAst = parseJsx(`
|
|
445
|
+
import { LinkButton } from "@kaizen/components"
|
|
446
|
+
export const TestComponent = () => (
|
|
447
|
+
<>
|
|
448
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
449
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
450
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
451
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
452
|
+
</>
|
|
453
|
+
)
|
|
454
|
+
`)
|
|
455
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
456
|
+
})
|
|
457
|
+
|
|
458
|
+
it('updates V1 Buttons from @kaizen/components/v1/actions', () => {
|
|
459
|
+
const inputAst = parseJsx(`
|
|
460
|
+
import { Button, IconButton } from "@kaizen/components/v1/actions"
|
|
461
|
+
export const TestComponent = () => (
|
|
462
|
+
<>
|
|
463
|
+
<Button label="Summer" href="#" />
|
|
464
|
+
<Button label="Autumn" component={Component} />
|
|
465
|
+
<IconButton label="Winter" href="#" />
|
|
466
|
+
<IconButton label="Spring" component={Component} />
|
|
467
|
+
</>
|
|
468
|
+
)
|
|
469
|
+
`)
|
|
470
|
+
const outputAst = parseJsx(`
|
|
471
|
+
import { LinkButton } from "@kaizen/components"
|
|
472
|
+
export const TestComponent = () => (
|
|
473
|
+
<>
|
|
474
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
475
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
476
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
477
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
478
|
+
</>
|
|
479
|
+
)
|
|
480
|
+
`)
|
|
481
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
482
|
+
})
|
|
483
|
+
|
|
484
|
+
it('updates V1 Buttons from @kaizen/components/v2/actions', () => {
|
|
485
|
+
const inputAst = parseJsx(`
|
|
486
|
+
import { Button, IconButton } from "@kaizen/components/v2/actions"
|
|
487
|
+
export const TestComponent = () => (
|
|
488
|
+
<>
|
|
489
|
+
<Button label="Summer" href="#" />
|
|
490
|
+
<Button label="Autumn" component={Component} />
|
|
491
|
+
<IconButton label="Winter" href="#" />
|
|
492
|
+
<IconButton label="Spring" component={Component} />
|
|
493
|
+
</>
|
|
494
|
+
)
|
|
495
|
+
`)
|
|
496
|
+
const outputAst = parseJsx(`
|
|
497
|
+
import { LinkButton } from "@kaizen/components"
|
|
498
|
+
export const TestComponent = () => (
|
|
499
|
+
<>
|
|
500
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
501
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
502
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
503
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
504
|
+
</>
|
|
505
|
+
)
|
|
506
|
+
`)
|
|
507
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
508
|
+
})
|
|
509
|
+
|
|
510
|
+
it('updates aliased V1 Buttons to LinkButton', () => {
|
|
511
|
+
const inputAst = parseJsx(`
|
|
512
|
+
import { Button as KzButton, IconButton as KzIconButton } from "@kaizen/components"
|
|
513
|
+
export const TestComponent = () => (
|
|
514
|
+
<>
|
|
515
|
+
<KzButton label="Summer" href="#" />
|
|
516
|
+
<KzButton label="Autumn" component={Component} />
|
|
517
|
+
<KzIconButton label="Winter" href="#" />
|
|
518
|
+
<KzIconButton label="Spring" component={Component} />
|
|
519
|
+
</>
|
|
520
|
+
)
|
|
521
|
+
`)
|
|
522
|
+
const outputAst = parseJsx(`
|
|
523
|
+
import { LinkButton } from "@kaizen/components"
|
|
524
|
+
export const TestComponent = () => (
|
|
525
|
+
<>
|
|
526
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
527
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
528
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
529
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
530
|
+
</>
|
|
531
|
+
)
|
|
532
|
+
`)
|
|
533
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
534
|
+
})
|
|
535
|
+
|
|
536
|
+
it('updates imports of multiple V1 Buttons from different KAIO imports', () => {
|
|
537
|
+
const inputAst = parseJsx(`
|
|
538
|
+
import { Button as KzButton, IconButton as KzIconButton } from "@kaizen/components"
|
|
539
|
+
import { Button as ButtonV1, IconButton as IconButtonV1 } from "@kaizen/components/v1/actions"
|
|
540
|
+
export const TestComponent = () => (
|
|
541
|
+
<>
|
|
542
|
+
<KzButton label="Summer" href="#" />
|
|
543
|
+
<KzButton label="Autumn" component={Component} />
|
|
544
|
+
<KzIconButton label="Winter" href="#" />
|
|
545
|
+
<KzIconButton label="Spring" component={Component} />
|
|
546
|
+
|
|
547
|
+
<ButtonV1 label="Summer" href="#" />
|
|
548
|
+
<ButtonV1 label="Autumn" component={Component} />
|
|
549
|
+
<IconButtonV1 label="Winter" href="#" />
|
|
550
|
+
<IconButtonV1 label="Spring" component={Component} />
|
|
551
|
+
</>
|
|
552
|
+
)
|
|
553
|
+
`)
|
|
554
|
+
const outputAst = parseJsx(`
|
|
555
|
+
import { LinkButton } from "@kaizen/components"
|
|
556
|
+
export const TestComponent = () => (
|
|
557
|
+
<>
|
|
558
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
559
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
560
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
561
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
562
|
+
|
|
563
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
564
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
565
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
566
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
567
|
+
</>
|
|
568
|
+
)
|
|
569
|
+
`)
|
|
570
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
571
|
+
})
|
|
572
|
+
|
|
573
|
+
it('does not duplicate LinkButton import if it already exists', () => {
|
|
574
|
+
const inputAst = parseJsx(`
|
|
575
|
+
import { IconButton, Button, LinkButton } from "@kaizen/components"
|
|
576
|
+
export const TestComponent = () => (
|
|
577
|
+
<>
|
|
578
|
+
<Button label="Summer" href="#" />
|
|
579
|
+
<Button label="Autumn" component={Component} />
|
|
580
|
+
<IconButton label="Winter" href="#" />
|
|
581
|
+
<IconButton label="Spring" component={Component} />
|
|
582
|
+
<LinkButton>Waffles</LinkButton>
|
|
583
|
+
</>
|
|
584
|
+
)
|
|
585
|
+
`)
|
|
586
|
+
const outputAst = parseJsx(`
|
|
587
|
+
import { LinkButton } from "@kaizen/components"
|
|
588
|
+
export const TestComponent = () => (
|
|
589
|
+
<>
|
|
590
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
591
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
592
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
593
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
594
|
+
<LinkButton>Waffles</LinkButton>
|
|
595
|
+
</>
|
|
596
|
+
)
|
|
597
|
+
`)
|
|
598
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
599
|
+
})
|
|
600
|
+
|
|
601
|
+
it('does not add LinkButton if aliased LinkButton exists', () => {
|
|
602
|
+
const inputAst = parseJsx(`
|
|
603
|
+
import { Button, IconButton, LinkButton as LinkButtonAlias } from "@kaizen/components"
|
|
604
|
+
export const TestComponent = () => (
|
|
605
|
+
<>
|
|
606
|
+
<Button label="Summer" href="#" />
|
|
607
|
+
<Button label="Autumn" component={Component} />
|
|
608
|
+
<IconButton label="Winter" href="#" />
|
|
609
|
+
<IconButton label="Spring" component={Component} />
|
|
610
|
+
<LinkButtonAlias>Waffles</LinkButtonAlias>
|
|
611
|
+
</>
|
|
612
|
+
)
|
|
613
|
+
`)
|
|
614
|
+
const outputAst = parseJsx(`
|
|
615
|
+
import { LinkButton as LinkButtonAlias } from "@kaizen/components"
|
|
616
|
+
export const TestComponent = () => (
|
|
617
|
+
<>
|
|
618
|
+
<LinkButtonAlias href="#" variant="secondary" size="large">Summer</LinkButtonAlias>
|
|
619
|
+
<LinkButtonAlias component={Component} variant="secondary" size="large">Autumn</LinkButtonAlias>
|
|
620
|
+
<LinkButtonAlias href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButtonAlias>
|
|
621
|
+
<LinkButtonAlias component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButtonAlias>
|
|
622
|
+
<LinkButtonAlias>Waffles</LinkButtonAlias>
|
|
623
|
+
</>
|
|
624
|
+
)
|
|
625
|
+
`)
|
|
626
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
627
|
+
})
|
|
628
|
+
|
|
629
|
+
it('does not update import of irrelevant KAIO components', () => {
|
|
630
|
+
const inputAst = parseJsx(`
|
|
631
|
+
import { Button, IconButton, FilterButton } from "@kaizen/components"
|
|
632
|
+
export const TestComponent = () => (
|
|
633
|
+
<>
|
|
634
|
+
<Button label="Summer" href="#" />
|
|
635
|
+
<Button label="Autumn" component={Component} />
|
|
636
|
+
<IconButton label="Winter" href="#" />
|
|
637
|
+
<IconButton label="Spring" component={Component} />
|
|
638
|
+
<FilterButton />
|
|
639
|
+
</>
|
|
640
|
+
)
|
|
641
|
+
`)
|
|
642
|
+
const outputAst = parseJsx(`
|
|
643
|
+
import { FilterButton, LinkButton } from "@kaizen/components"
|
|
644
|
+
export const TestComponent = () => (
|
|
645
|
+
<>
|
|
646
|
+
<LinkButton href="#" variant="secondary" size="large">Summer</LinkButton>
|
|
647
|
+
<LinkButton component={Component} variant="secondary" size="large">Autumn</LinkButton>
|
|
648
|
+
<LinkButton href="#" variant="tertiary" size="large" hasHiddenLabel>Winter</LinkButton>
|
|
649
|
+
<LinkButton component={Component} variant="tertiary" size="large" hasHiddenLabel>Spring</LinkButton>
|
|
650
|
+
<FilterButton />
|
|
651
|
+
</>
|
|
652
|
+
)
|
|
653
|
+
`)
|
|
654
|
+
expect(transformIcons(inputAst)).toEqual(printAst(outputAst))
|
|
655
|
+
})
|
|
656
|
+
})
|
|
657
|
+
})
|
|
658
|
+
})
|