@cypress-design/react-statusicon 0.4.15 → 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.
Files changed (7) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +7 -0
  3. package/StatusIcon.rootstory.tsx +38 -46
  4. package/StatusIconReact.cy.tsx +30 -10
  5. package/dist/index.es.mjs.map +1 -1
  6. package/dist/index.umd.js.map +1 -1
  7. 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
- created ./dist/index.umd.js, ./dist/index.es.mjs in 14.4s
11
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 12.5s
12
12
  $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
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
+
3
10
  ## 0.4.15
4
11
 
5
12
  ### 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 default () => (
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
- return (
35
- <>
36
- {statusInfo.variants.map((variant, i) => {
37
- return (
38
- <tr
39
- className={clsx(i === 0 && 'border-t')}
40
- key={`${status}-${variant}`}
41
- >
42
- {i === 0 ? (
43
- <td>
44
- {statusInfo.link ? (
45
- <a
46
- href={statusInfo.link}
47
- className="text-indigo-500 underline"
48
- target="_blank"
49
- >
50
- {status}
51
- </a>
52
- ) : (
53
- status
54
- )}
55
- </td>
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
- <td>{variant}</td>
61
- {sizes.map((size) => {
62
- return (
63
- <td key={`${status}-${size}-${variant}`} className="py-2">
64
- <StatusIcon
65
- status={status as any}
66
- size={size as any}
67
- variant={variant}
68
- />
69
- </td>
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 variant="simple" size="16" status="placeholder" />
13
- <StatusIcon variant="solid" size="16" status="placeholder" />
14
- </div>
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 variant="solid" size="16" status="placeholder" />
29
- </div>
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 variant="simple" size="16" status="placeholder" />
44
- </div>
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')