@atlaskit/section-message 8.0.0 → 8.0.2
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/CHANGELOG.md +14 -0
- package/dist/cjs/internal/appearance-icon.js +1 -2
- package/dist/cjs/section-message-action.compiled.css +1 -1
- package/dist/cjs/section-message-action.js +1 -1
- package/dist/cjs/section-message.compiled.css +1 -1
- package/dist/cjs/section-message.js +1 -1
- package/dist/es2019/internal/appearance-icon.js +1 -1
- package/dist/es2019/section-message-action.compiled.css +1 -1
- package/dist/es2019/section-message-action.js +1 -1
- package/dist/es2019/section-message.compiled.css +1 -1
- package/dist/es2019/section-message.js +1 -1
- package/dist/esm/internal/appearance-icon.js +1 -1
- package/dist/esm/section-message-action.compiled.css +1 -1
- package/dist/esm/section-message-action.js +1 -1
- package/dist/esm/section-message.compiled.css +1 -1
- package/dist/esm/section-message.js +1 -1
- package/dist/types/internal/appearance-icon.d.ts +1 -10
- package/dist/types-ts4.5/internal/appearance-icon.d.ts +1 -10
- package/package.json +13 -11
- package/codemods/6.0.0-lite-mode.tsx +0 -18
- package/codemods/__tests__/6.0.0-lite-mode.tsx +0 -320
- package/codemods/__tests__/change-appearance-prop.tsx +0 -405
- package/codemods/__tests__/map-actions-prop.tsx +0 -580
- package/codemods/internal/change-appearance-prop.tsx +0 -101
- package/codemods/internal/constants.tsx +0 -13
- package/codemods/internal/map-actions-prop.tsx +0 -188
- package/codemods/internal/utils.tsx +0 -71
|
@@ -1,405 +0,0 @@
|
|
|
1
|
-
import { createTransformer } from '@atlaskit/codemod-utils';
|
|
2
|
-
|
|
3
|
-
import { changeAppearanceProp } from '../internal/change-appearance-prop';
|
|
4
|
-
|
|
5
|
-
const transformer = createTransformer([changeAppearanceProp]);
|
|
6
|
-
|
|
7
|
-
const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
|
|
8
|
-
|
|
9
|
-
describe('SectionMessage code-mods', () => {
|
|
10
|
-
defineInlineTest(
|
|
11
|
-
{ default: transformer, parser: 'tsx' },
|
|
12
|
-
{},
|
|
13
|
-
`
|
|
14
|
-
import React from 'react';
|
|
15
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
16
|
-
|
|
17
|
-
const App = () => {
|
|
18
|
-
return (
|
|
19
|
-
<SectionMessage
|
|
20
|
-
title="The Modern Prometheus"
|
|
21
|
-
appearance="info"
|
|
22
|
-
actions={[
|
|
23
|
-
{
|
|
24
|
-
key: 'mary',
|
|
25
|
-
href: 'https://en.wikipedia.org/wiki/Mary_Shelley',
|
|
26
|
-
text: 'Mary',
|
|
27
|
-
},
|
|
28
|
-
]}
|
|
29
|
-
testId="section-message"
|
|
30
|
-
>
|
|
31
|
-
<p>
|
|
32
|
-
Description
|
|
33
|
-
</p>
|
|
34
|
-
</SectionMessage>
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
`,
|
|
38
|
-
`
|
|
39
|
-
import React from 'react';
|
|
40
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
41
|
-
|
|
42
|
-
const App = () => {
|
|
43
|
-
return (
|
|
44
|
-
<SectionMessage
|
|
45
|
-
title="The Modern Prometheus"
|
|
46
|
-
appearance="information"
|
|
47
|
-
actions={[
|
|
48
|
-
{
|
|
49
|
-
key: 'mary',
|
|
50
|
-
href: 'https://en.wikipedia.org/wiki/Mary_Shelley',
|
|
51
|
-
text: 'Mary',
|
|
52
|
-
},
|
|
53
|
-
]}
|
|
54
|
-
testId="section-message"
|
|
55
|
-
>
|
|
56
|
-
<p>
|
|
57
|
-
Description
|
|
58
|
-
</p>
|
|
59
|
-
</SectionMessage>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
`,
|
|
63
|
-
`should change the value of appearance prop from "info" to "information"`,
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
defineInlineTest(
|
|
67
|
-
{ default: transformer, parser: 'tsx' },
|
|
68
|
-
{},
|
|
69
|
-
`
|
|
70
|
-
import React from 'react';
|
|
71
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
72
|
-
|
|
73
|
-
const App = () => {
|
|
74
|
-
return (
|
|
75
|
-
<SectionMessage
|
|
76
|
-
title="The Modern Prometheus"
|
|
77
|
-
appearance="confirmation"
|
|
78
|
-
actions={[]}
|
|
79
|
-
testId="section-message"
|
|
80
|
-
>
|
|
81
|
-
<p>
|
|
82
|
-
Description
|
|
83
|
-
</p>
|
|
84
|
-
</SectionMessage>
|
|
85
|
-
);
|
|
86
|
-
}
|
|
87
|
-
`,
|
|
88
|
-
`
|
|
89
|
-
import React from 'react';
|
|
90
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
91
|
-
|
|
92
|
-
const App = () => {
|
|
93
|
-
return (
|
|
94
|
-
<SectionMessage
|
|
95
|
-
title="The Modern Prometheus"
|
|
96
|
-
appearance="success"
|
|
97
|
-
actions={[]}
|
|
98
|
-
testId="section-message"
|
|
99
|
-
>
|
|
100
|
-
<p>
|
|
101
|
-
Description
|
|
102
|
-
</p>
|
|
103
|
-
</SectionMessage>
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
`,
|
|
107
|
-
`should change the value of appearance prop from "confirmation" to "success"`,
|
|
108
|
-
);
|
|
109
|
-
|
|
110
|
-
defineInlineTest(
|
|
111
|
-
{ default: transformer, parser: 'tsx' },
|
|
112
|
-
{},
|
|
113
|
-
`
|
|
114
|
-
import React from 'react';
|
|
115
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
116
|
-
|
|
117
|
-
const App = () => {
|
|
118
|
-
return (
|
|
119
|
-
<SectionMessage
|
|
120
|
-
appearance="change"
|
|
121
|
-
actions={[]}
|
|
122
|
-
testId="section-message"
|
|
123
|
-
>
|
|
124
|
-
<p>
|
|
125
|
-
Description
|
|
126
|
-
</p>
|
|
127
|
-
</SectionMessage>
|
|
128
|
-
);
|
|
129
|
-
}
|
|
130
|
-
`,
|
|
131
|
-
`
|
|
132
|
-
import React from 'react';
|
|
133
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
134
|
-
|
|
135
|
-
const App = () => {
|
|
136
|
-
return (
|
|
137
|
-
<SectionMessage
|
|
138
|
-
appearance="discovery"
|
|
139
|
-
actions={[]}
|
|
140
|
-
testId="section-message"
|
|
141
|
-
>
|
|
142
|
-
<p>
|
|
143
|
-
Description
|
|
144
|
-
</p>
|
|
145
|
-
</SectionMessage>
|
|
146
|
-
);
|
|
147
|
-
}
|
|
148
|
-
`,
|
|
149
|
-
`should change the value of appearance prop from "change" to "discovery"`,
|
|
150
|
-
);
|
|
151
|
-
|
|
152
|
-
defineInlineTest(
|
|
153
|
-
{ default: transformer, parser: 'tsx' },
|
|
154
|
-
{},
|
|
155
|
-
`
|
|
156
|
-
import React from 'react';
|
|
157
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
158
|
-
const App = () => {
|
|
159
|
-
return (
|
|
160
|
-
<SectionMessage
|
|
161
|
-
appearance={"change"}
|
|
162
|
-
actions={[]}
|
|
163
|
-
>
|
|
164
|
-
<p>
|
|
165
|
-
Description
|
|
166
|
-
</p>
|
|
167
|
-
</SectionMessage>
|
|
168
|
-
);
|
|
169
|
-
}
|
|
170
|
-
`,
|
|
171
|
-
`
|
|
172
|
-
import React from 'react';
|
|
173
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
174
|
-
const App = () => {
|
|
175
|
-
return (
|
|
176
|
-
<SectionMessage
|
|
177
|
-
appearance="discovery"
|
|
178
|
-
actions={[]}
|
|
179
|
-
>
|
|
180
|
-
<p>
|
|
181
|
-
Description
|
|
182
|
-
</p>
|
|
183
|
-
</SectionMessage>
|
|
184
|
-
);
|
|
185
|
-
}
|
|
186
|
-
`,
|
|
187
|
-
`should change the value of appearance prop from "change" to "discovery" when appearance value is string wrapped in JSX expression`,
|
|
188
|
-
);
|
|
189
|
-
|
|
190
|
-
defineInlineTest(
|
|
191
|
-
{ default: transformer, parser: 'tsx' },
|
|
192
|
-
{},
|
|
193
|
-
`
|
|
194
|
-
import React from 'react';
|
|
195
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
196
|
-
|
|
197
|
-
const App = () => {
|
|
198
|
-
return (
|
|
199
|
-
<SectionMessage
|
|
200
|
-
title="The Modern Prometheus"
|
|
201
|
-
appearance="warn"
|
|
202
|
-
>
|
|
203
|
-
<p>
|
|
204
|
-
Description
|
|
205
|
-
</p>
|
|
206
|
-
</SectionMessage>
|
|
207
|
-
);
|
|
208
|
-
}
|
|
209
|
-
`,
|
|
210
|
-
`
|
|
211
|
-
import React from 'react';
|
|
212
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
213
|
-
|
|
214
|
-
const App = () => {
|
|
215
|
-
return (
|
|
216
|
-
<SectionMessage
|
|
217
|
-
title="The Modern Prometheus"
|
|
218
|
-
appearance="warn"
|
|
219
|
-
>
|
|
220
|
-
<p>
|
|
221
|
-
Description
|
|
222
|
-
</p>
|
|
223
|
-
</SectionMessage>
|
|
224
|
-
);
|
|
225
|
-
}
|
|
226
|
-
`,
|
|
227
|
-
`should not change the value of appearance prop when it's not one of "info","confirmation","change"`,
|
|
228
|
-
);
|
|
229
|
-
|
|
230
|
-
defineInlineTest(
|
|
231
|
-
{ default: transformer, parser: 'tsx' },
|
|
232
|
-
{},
|
|
233
|
-
`
|
|
234
|
-
import React from 'react';
|
|
235
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
236
|
-
const App = () => {
|
|
237
|
-
return (
|
|
238
|
-
<SectionMessage
|
|
239
|
-
appearance={"warn"}
|
|
240
|
-
>
|
|
241
|
-
<p>
|
|
242
|
-
Description
|
|
243
|
-
</p>
|
|
244
|
-
</SectionMessage>
|
|
245
|
-
);
|
|
246
|
-
}
|
|
247
|
-
`,
|
|
248
|
-
`
|
|
249
|
-
import React from 'react';
|
|
250
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
251
|
-
const App = () => {
|
|
252
|
-
return (
|
|
253
|
-
<SectionMessage
|
|
254
|
-
appearance={"warn"}
|
|
255
|
-
>
|
|
256
|
-
<p>
|
|
257
|
-
Description
|
|
258
|
-
</p>
|
|
259
|
-
</SectionMessage>
|
|
260
|
-
);
|
|
261
|
-
}
|
|
262
|
-
`,
|
|
263
|
-
`should not change the value of appearance prop when it's not one of "info","confirmation","change" and value is string wrapped in JSX expression`,
|
|
264
|
-
);
|
|
265
|
-
|
|
266
|
-
defineInlineTest(
|
|
267
|
-
{ default: transformer, parser: 'tsx' },
|
|
268
|
-
{},
|
|
269
|
-
`
|
|
270
|
-
import React from 'react';
|
|
271
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
272
|
-
const appearanceValue = "change";
|
|
273
|
-
const App = () => {
|
|
274
|
-
const { appearanceValue } = props;
|
|
275
|
-
return (
|
|
276
|
-
<SectionMessage
|
|
277
|
-
appearance={appearanceValue}
|
|
278
|
-
actions={[]}
|
|
279
|
-
>
|
|
280
|
-
<p>
|
|
281
|
-
Description
|
|
282
|
-
</p>
|
|
283
|
-
</SectionMessage>
|
|
284
|
-
);
|
|
285
|
-
}
|
|
286
|
-
`,
|
|
287
|
-
`
|
|
288
|
-
import React from 'react';
|
|
289
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
290
|
-
const appearanceValue = "change";
|
|
291
|
-
const App = () => {
|
|
292
|
-
const { appearanceValue } = props;
|
|
293
|
-
return (
|
|
294
|
-
<SectionMessage
|
|
295
|
-
/* TODO: (from codemod) We have added this temporary appearance mapping here to make things work. Feel free to change it accordingly. We have also added @ts-ignore for typescript files.
|
|
296
|
-
@ts-ignore */
|
|
297
|
-
appearance={{
|
|
298
|
-
info: "information",
|
|
299
|
-
confirmation: "success",
|
|
300
|
-
change: "discovery"
|
|
301
|
-
}[appearanceValue] || appearanceValue}
|
|
302
|
-
actions={[]}
|
|
303
|
-
>
|
|
304
|
-
<p>
|
|
305
|
-
Description
|
|
306
|
-
</p>
|
|
307
|
-
</SectionMessage>
|
|
308
|
-
);
|
|
309
|
-
}
|
|
310
|
-
`,
|
|
311
|
-
`should add appearance mapping when appearance prop value is other than string`,
|
|
312
|
-
);
|
|
313
|
-
|
|
314
|
-
defineInlineTest(
|
|
315
|
-
{ default: transformer, parser: 'tsx' },
|
|
316
|
-
{},
|
|
317
|
-
`
|
|
318
|
-
import React from 'react';
|
|
319
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
320
|
-
const appearanceValue = "error";
|
|
321
|
-
const App = () => {
|
|
322
|
-
const { appearanceValue } = props;
|
|
323
|
-
return (
|
|
324
|
-
<SectionMessage
|
|
325
|
-
appearance={true ? appearanceValue : 'info'}
|
|
326
|
-
>
|
|
327
|
-
<p>
|
|
328
|
-
Description
|
|
329
|
-
</p>
|
|
330
|
-
</SectionMessage>
|
|
331
|
-
);
|
|
332
|
-
}
|
|
333
|
-
`,
|
|
334
|
-
`
|
|
335
|
-
import React from 'react';
|
|
336
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
337
|
-
const appearanceValue = "error";
|
|
338
|
-
const App = () => {
|
|
339
|
-
const { appearanceValue } = props;
|
|
340
|
-
return (
|
|
341
|
-
<SectionMessage
|
|
342
|
-
/* TODO: (from codemod) We have added this temporary appearance mapping here to make things work. Feel free to change it accordingly. We have also added @ts-ignore for typescript files.
|
|
343
|
-
@ts-ignore */
|
|
344
|
-
appearance={{
|
|
345
|
-
info: "information",
|
|
346
|
-
confirmation: "success",
|
|
347
|
-
change: "discovery"
|
|
348
|
-
}[true ? appearanceValue : 'info'] || (true ? appearanceValue : 'info')}
|
|
349
|
-
>
|
|
350
|
-
<p>
|
|
351
|
-
Description
|
|
352
|
-
</p>
|
|
353
|
-
</SectionMessage>
|
|
354
|
-
);
|
|
355
|
-
}
|
|
356
|
-
`,
|
|
357
|
-
`should add appearance mapping when appearance prop value is conditional type`,
|
|
358
|
-
);
|
|
359
|
-
|
|
360
|
-
defineInlineTest(
|
|
361
|
-
{ default: transformer, parser: 'tsx' },
|
|
362
|
-
{},
|
|
363
|
-
`
|
|
364
|
-
import React from 'react';
|
|
365
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
366
|
-
const appearance = { value: { ohRealValue: "error" } };
|
|
367
|
-
|
|
368
|
-
const App = () => {
|
|
369
|
-
return (
|
|
370
|
-
<SectionMessage
|
|
371
|
-
appearance={appearance.value.ohRealValue}
|
|
372
|
-
>
|
|
373
|
-
<p>
|
|
374
|
-
Description
|
|
375
|
-
</p>
|
|
376
|
-
</SectionMessage>
|
|
377
|
-
);
|
|
378
|
-
}
|
|
379
|
-
`,
|
|
380
|
-
`
|
|
381
|
-
import React from 'react';
|
|
382
|
-
import SectionMessage from '@atlaskit/section-message';
|
|
383
|
-
const appearance = { value: { ohRealValue: "error" } };
|
|
384
|
-
|
|
385
|
-
const App = () => {
|
|
386
|
-
return (
|
|
387
|
-
<SectionMessage
|
|
388
|
-
/* TODO: (from codemod) We have added this temporary appearance mapping here to make things work. Feel free to change it accordingly. We have also added @ts-ignore for typescript files.
|
|
389
|
-
@ts-ignore */
|
|
390
|
-
appearance={{
|
|
391
|
-
info: "information",
|
|
392
|
-
confirmation: "success",
|
|
393
|
-
change: "discovery"
|
|
394
|
-
}[appearance.value.ohRealValue] || appearance.value.ohRealValue}
|
|
395
|
-
>
|
|
396
|
-
<p>
|
|
397
|
-
Description
|
|
398
|
-
</p>
|
|
399
|
-
</SectionMessage>
|
|
400
|
-
);
|
|
401
|
-
}
|
|
402
|
-
`,
|
|
403
|
-
`should add appearance mapping when appearance prop value is complex object type`,
|
|
404
|
-
);
|
|
405
|
-
});
|