@cypress-design/react-statusicon 0.4.14 → 0.4.16
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/.turbo/turbo-build.log +1 -1
- package/CHANGELOG.md +14 -0
- package/StatusIcon.rootstory.tsx +38 -46
- package/StatusIconReact.cy.tsx +30 -10
- package/dist/compileProps.d.ts +53 -53
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +3 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -8,5 +8,5 @@ $ rollup -c ./rollup.config.mjs
|
|
|
8
8
|
index.ts
|
|
9
9
|
|
|
10
10
|
Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
|
|
11
|
-
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [
|
|
11
|
+
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [1m12.5s[22m[39m
|
|
12
12
|
$ tsc --project ./tsconfig.build.json
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @cypress-design/react-statusicon
|
|
2
2
|
|
|
3
|
+
## 0.4.16
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`04bd296`](https://github.com/cypress-io/cypress-design/commit/04bd296f515ad300450deb2f838dc3ac6bae26f7)]:
|
|
8
|
+
- @cypress-design/react-icon@0.31.0
|
|
9
|
+
|
|
10
|
+
## 0.4.15
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies [[`17ce6d9`](https://github.com/cypress-io/cypress-design/commit/17ce6d9421ea37235058e5ca26b4e244d5d5b335)]:
|
|
15
|
+
- @cypress-design/react-icon@0.30.0
|
|
16
|
+
|
|
3
17
|
## 0.4.14
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/StatusIcon.rootstory.tsx
CHANGED
|
@@ -5,7 +5,7 @@ import { statuses } from '../constants'
|
|
|
5
5
|
|
|
6
6
|
const sizes = ['4', '8', '12', '16', '24']
|
|
7
7
|
|
|
8
|
-
export
|
|
8
|
+
export const Story = () => (
|
|
9
9
|
<table className="w-full">
|
|
10
10
|
<thead>
|
|
11
11
|
<tr key="h0">
|
|
@@ -30,54 +30,46 @@ export default () => (
|
|
|
30
30
|
</tr>
|
|
31
31
|
</thead>
|
|
32
32
|
<tbody>
|
|
33
|
-
{Object.entries(statuses).map(([status, statusInfo]) =>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
{
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
) : (
|
|
57
|
-
<td />
|
|
58
|
-
)}
|
|
33
|
+
{Object.entries(statuses).map(([status, statusInfo]) =>
|
|
34
|
+
statusInfo.variants.map((variant, i) => (
|
|
35
|
+
<tr
|
|
36
|
+
className={clsx(i === 0 && 'border-t')}
|
|
37
|
+
key={`${status}-${variant}`}
|
|
38
|
+
>
|
|
39
|
+
{i === 0 ? (
|
|
40
|
+
<td>
|
|
41
|
+
{statusInfo.link ? (
|
|
42
|
+
<a
|
|
43
|
+
href={statusInfo.link}
|
|
44
|
+
className="text-indigo-500 underline"
|
|
45
|
+
target="_blank"
|
|
46
|
+
>
|
|
47
|
+
{status}
|
|
48
|
+
</a>
|
|
49
|
+
) : (
|
|
50
|
+
status
|
|
51
|
+
)}
|
|
52
|
+
</td>
|
|
53
|
+
) : (
|
|
54
|
+
<td />
|
|
55
|
+
)}
|
|
59
56
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
)
|
|
71
|
-
})}
|
|
72
|
-
<td className="py-2 align-top">
|
|
73
|
-
{i === 0 ? statusInfo.use : ''}
|
|
74
|
-
</td>
|
|
75
|
-
</tr>
|
|
57
|
+
<td>{variant}</td>
|
|
58
|
+
{sizes.map((size) => {
|
|
59
|
+
return (
|
|
60
|
+
<td key={`${status}-${size}-${variant}`} className="py-2">
|
|
61
|
+
<StatusIcon
|
|
62
|
+
status={status as any}
|
|
63
|
+
size={size as any}
|
|
64
|
+
variant={variant}
|
|
65
|
+
/>
|
|
66
|
+
</td>
|
|
76
67
|
)
|
|
77
68
|
})}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
69
|
+
<td className="py-2 align-top">{i === 0 ? statusInfo.use : ''}</td>
|
|
70
|
+
</tr>
|
|
71
|
+
)),
|
|
72
|
+
)}
|
|
81
73
|
</tbody>
|
|
82
74
|
</table>
|
|
83
75
|
)
|
package/StatusIconReact.cy.tsx
CHANGED
|
@@ -3,15 +3,25 @@
|
|
|
3
3
|
import * as React from 'react'
|
|
4
4
|
import { mount } from 'cypress/react18'
|
|
5
5
|
import StatusIcon from './StatusIcon'
|
|
6
|
-
import StatusIconStory from './StatusIcon.rootstory'
|
|
6
|
+
import { Story as StatusIconStory } from './StatusIcon.rootstory'
|
|
7
7
|
|
|
8
8
|
describe('StatusIcon', () => {
|
|
9
9
|
it('defaults to a variant that exists if the one provided does not exist', () => {
|
|
10
10
|
mount(
|
|
11
11
|
<div>
|
|
12
|
-
<StatusIcon
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
<StatusIcon
|
|
13
|
+
key="simple"
|
|
14
|
+
variant="simple"
|
|
15
|
+
size="16"
|
|
16
|
+
status="placeholder"
|
|
17
|
+
/>
|
|
18
|
+
<StatusIcon
|
|
19
|
+
key="solid"
|
|
20
|
+
variant="solid"
|
|
21
|
+
size="16"
|
|
22
|
+
status="placeholder"
|
|
23
|
+
/>
|
|
24
|
+
</div>,
|
|
15
25
|
)
|
|
16
26
|
|
|
17
27
|
cy.get('svg').first().invoke('html').as('firstIcon')
|
|
@@ -24,9 +34,14 @@ describe('StatusIcon', () => {
|
|
|
24
34
|
it('displays a placeholder icon if no status is passed', () => {
|
|
25
35
|
mount(
|
|
26
36
|
<div>
|
|
27
|
-
<StatusIcon variant="simple" size="16" />
|
|
28
|
-
<StatusIcon
|
|
29
|
-
|
|
37
|
+
<StatusIcon key="simple" variant="simple" size="16" />
|
|
38
|
+
<StatusIcon
|
|
39
|
+
key="solid"
|
|
40
|
+
variant="solid"
|
|
41
|
+
size="16"
|
|
42
|
+
status="placeholder"
|
|
43
|
+
/>
|
|
44
|
+
</div>,
|
|
30
45
|
)
|
|
31
46
|
|
|
32
47
|
cy.get('svg').first().invoke('html').as('firstIcon')
|
|
@@ -39,9 +54,14 @@ describe('StatusIcon', () => {
|
|
|
39
54
|
it('displays a placeholder icon if null status is passed', () => {
|
|
40
55
|
mount(
|
|
41
56
|
<div>
|
|
42
|
-
<StatusIcon variant="simple" size="16" status={null} />
|
|
43
|
-
<StatusIcon
|
|
44
|
-
|
|
57
|
+
<StatusIcon key="simple-1" variant="simple" size="16" status={null} />
|
|
58
|
+
<StatusIcon
|
|
59
|
+
key="simple-2"
|
|
60
|
+
variant="simple"
|
|
61
|
+
size="16"
|
|
62
|
+
status="placeholder"
|
|
63
|
+
/>
|
|
64
|
+
</div>,
|
|
45
65
|
)
|
|
46
66
|
|
|
47
67
|
cy.get('svg').first().invoke('html').as('firstIcon')
|
package/dist/compileProps.d.ts
CHANGED
|
@@ -266,59 +266,59 @@ export declare const compileProps: ({ status, statuses, className, size, variant
|
|
|
266
266
|
yChannelSelector?: string | undefined;
|
|
267
267
|
z?: string | number | undefined;
|
|
268
268
|
zoomAndPan?: string | undefined;
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
269
|
+
"aria-activedescendant"?: string | undefined;
|
|
270
|
+
"aria-atomic"?: boolean | "true" | "false" | undefined;
|
|
271
|
+
"aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
|
|
272
|
+
"aria-braillelabel"?: string | undefined;
|
|
273
|
+
"aria-brailleroledescription"?: string | undefined;
|
|
274
|
+
"aria-busy"?: boolean | "true" | "false" | undefined;
|
|
275
|
+
"aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
276
|
+
"aria-colcount"?: number | undefined;
|
|
277
|
+
"aria-colindex"?: number | undefined;
|
|
278
|
+
"aria-colindextext"?: string | undefined;
|
|
279
|
+
"aria-colspan"?: number | undefined;
|
|
280
|
+
"aria-controls"?: string | undefined;
|
|
281
|
+
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
282
|
+
"aria-describedby"?: string | undefined;
|
|
283
|
+
"aria-description"?: string | undefined;
|
|
284
|
+
"aria-details"?: string | undefined;
|
|
285
|
+
"aria-disabled"?: boolean | "true" | "false" | undefined;
|
|
286
|
+
"aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
287
|
+
"aria-errormessage"?: string | undefined;
|
|
288
|
+
"aria-expanded"?: boolean | "true" | "false" | undefined;
|
|
289
|
+
"aria-flowto"?: string | undefined;
|
|
290
|
+
"aria-grabbed"?: boolean | "true" | "false" | undefined;
|
|
291
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
|
|
292
|
+
"aria-hidden"?: boolean | "true" | "false" | undefined;
|
|
293
|
+
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
294
|
+
"aria-keyshortcuts"?: string | undefined;
|
|
295
|
+
"aria-label"?: string | undefined;
|
|
296
|
+
"aria-labelledby"?: string | undefined;
|
|
297
|
+
"aria-level"?: number | undefined;
|
|
298
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
299
|
+
"aria-modal"?: boolean | "true" | "false" | undefined;
|
|
300
|
+
"aria-multiline"?: boolean | "true" | "false" | undefined;
|
|
301
|
+
"aria-multiselectable"?: boolean | "true" | "false" | undefined;
|
|
302
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
303
|
+
"aria-owns"?: string | undefined;
|
|
304
|
+
"aria-placeholder"?: string | undefined;
|
|
305
|
+
"aria-posinset"?: number | undefined;
|
|
306
|
+
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
307
|
+
"aria-readonly"?: boolean | "true" | "false" | undefined;
|
|
308
|
+
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
|
|
309
|
+
"aria-required"?: boolean | "true" | "false" | undefined;
|
|
310
|
+
"aria-roledescription"?: string | undefined;
|
|
311
|
+
"aria-rowcount"?: number | undefined;
|
|
312
|
+
"aria-rowindex"?: number | undefined;
|
|
313
|
+
"aria-rowindextext"?: string | undefined;
|
|
314
|
+
"aria-rowspan"?: number | undefined;
|
|
315
|
+
"aria-selected"?: boolean | "true" | "false" | undefined;
|
|
316
|
+
"aria-setsize"?: number | undefined;
|
|
317
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
318
|
+
"aria-valuemax"?: number | undefined;
|
|
319
|
+
"aria-valuemin"?: number | undefined;
|
|
320
|
+
"aria-valuenow"?: number | undefined;
|
|
321
|
+
"aria-valuetext"?: string | undefined;
|
|
322
322
|
children?: import("react").ReactNode;
|
|
323
323
|
dangerouslySetInnerHTML: {
|
|
324
324
|
__html: string | TrustedHTML;
|