@spectrum-icons/workflow 4.1.0 → 4.2.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.
Files changed (3) hide show
  1. package/chromatic/Workflow.chromatic.tsx +58 -51
  2. package/package.json +4 -4
  3. package/stories/IconsWorkflow.stories.tsx +49 -35
package/chromatic/Workflow.chromatic.tsx CHANGED
@@ -13,67 +13,74 @@
13
13
  import Add from '../Add';
14
14
  import Alert from '@spectrum-icons/workflow/Alert';
15
15
  import React from 'react';
16
- import {storiesOf} from '@storybook/react';
17
- import {Flex} from "@react-spectrum/layout";
16
+ import {Flex} from '@react-spectrum/layout';
18
17
  import * as AllIcons from '../src';
19
18
 
20
19
  let allIcons = Object.keys(AllIcons);
21
- let alphabet = [...Array(26)]
22
- .map((val, i) => String.fromCharCode(i + 65));
20
+ let alphabet = [...Array(26)].map((val, i) => String.fromCharCode(i + 65));
23
21
  alphabet = ['_', ...alphabet];
24
- let alphabetizedIcons = alphabet
25
- .reduce((acc, char) => {
26
- acc[char] = allIcons.filter(iconName => iconName[0] === char).sort();
27
- return acc;
28
- }, {});
22
+ let alphabetizedIcons = alphabet.reduce((acc, char) => {
23
+ acc[char] = allIcons.filter((iconName) => iconName[0] === char).sort();
24
+ return acc;
25
+ }, {});
29
26
 
30
- storiesOf('Icons/Workflow', module)
31
- .addParameters({chromaticProvider: { express: false}})
32
- .add(
33
- 'icon: Add with sizes',
34
- () => renderIconSizes(Add, {'aria-label': 'Add'})
35
- )
36
- .add('Colors',
37
- () => (
38
- <Flex gap="size-200">
39
- <Alert aria-label="info default" />
40
- <Alert color="informative" aria-label="info alert" />
41
- <Alert color="negative" aria-label="negative alert" />
42
- <Alert color="positive" aria-label="positive alert" />
43
- <Alert color="notice" aria-label="notice alert" />
44
- </Flex>
45
- )
46
- )
47
- .add('All Workflow',
48
- () => (
49
- <Flex direction="column">
50
- {
51
- Object.keys(alphabetizedIcons).map(char => (
52
- <div style={{height: "calc(12 * var(--spectrum-global-dimension-size-300))"}}>
53
- <div>{char}</div>
54
- <Flex direction="row" gap="size-50" wrap>
55
- {
56
- alphabetizedIcons[char].map(iconName => {
57
- let Icon = AllIcons[iconName].default;
58
- return <Icon key={iconName} id={iconName} />;
59
- })
60
- }
61
- </Flex>
62
- </div>
63
- ))
64
- }
65
- </Flex>
66
- ),
67
- {chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['medium', 'large'], disableAnimations: true}}
68
- );
27
+ export default {
28
+ title: 'Icons/Workflow',
29
+ parameters: {
30
+ chromaticProvider: {express: false},
31
+ }
32
+ };
33
+
34
+ export const IconAddWithSizes = () => renderIconSizes(Add, { 'aria-label': 'Add' });
35
+
36
+ IconAddWithSizes.story = {
37
+ name: 'icon: Add with sizes',
38
+ };
39
+
40
+ export const Colors = () => (
41
+ <Flex gap="size-200">
42
+ <Alert aria-label="info default" />
43
+ <Alert color="informative" aria-label="info alert" />
44
+ <Alert color="negative" aria-label="negative alert" />
45
+ <Alert color="positive" aria-label="positive alert" />
46
+ <Alert color="notice" aria-label="notice alert" />
47
+ </Flex>
48
+ );
49
+
50
+ export const AllWorkflow = () => (
51
+ <Flex direction="column">
52
+ {Object.keys(alphabetizedIcons).map((char) => (
53
+ <div style={{ height: 'calc(12 * var(--spectrum-global-dimension-size-300))' }}>
54
+ <div>{char}</div>
55
+ <Flex direction="row" gap="size-50" wrap>
56
+ {alphabetizedIcons[char].map((iconName) => {
57
+ let Icon = AllIcons[iconName].default;
58
+ return <Icon key={iconName} id={iconName} />;
59
+ })}
60
+ </Flex>
61
+ </div>
62
+ ))}
63
+ </Flex>
64
+ );
65
+
66
+ AllWorkflow.story = {
67
+ parameters: {
68
+ chromaticProvider: {
69
+ colorSchemes: ['light'],
70
+ locales: ['en-US'],
71
+ scales: ['medium', 'large'],
72
+ disableAnimations: true,
73
+ }
74
+ }
75
+ };
69
76
 
70
77
  function renderIconSizes(Component, props) {
71
78
  let sizes = ['XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'];
72
79
  return (
73
80
  <div>
74
- {sizes.map(size => {
75
- return <Component margin="15px" size={size} {...props} />
81
+ {sizes.map((size) => {
82
+ return <Component margin="15px" size={size} {...props} />;
76
83
  })}
77
84
  </div>
78
- )
85
+ );
79
86
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-icons/workflow",
3
- "version": "4.1.0",
3
+ "version": "4.2.1",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -22,8 +22,8 @@
22
22
  "make-icons": "babel-node --extensions '.cjs,.js' --presets @babel/env ./scripts/generateIcons.cjs -i '[]' && yarn generate-types"
23
23
  },
24
24
  "dependencies": {
25
- "@adobe/react-spectrum-workflow": "2.3.3",
26
- "@react-spectrum/icon": "^3.7.0",
25
+ "@adobe/react-spectrum-workflow": "2.3.4",
26
+ "@react-spectrum/icon": "^3.7.2",
27
27
  "@swc/helpers": "^0.4.14"
28
28
  },
29
29
  "devDependencies": {
@@ -36,5 +36,5 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
39
+ "gitHead": "5911ed21de4b76d66f6254c02302519e02d50e16"
40
40
  }
package/stories/IconsWorkflow.stories.tsx CHANGED
@@ -15,46 +15,60 @@ import Add from '../Add';
15
15
  import Alert from '../Alert';
16
16
  import Bell from '../Bell';
17
17
  import React from 'react';
18
- import {storiesOf} from '@storybook/react';
19
-
20
- storiesOf('Icons/Workflow', module)
21
- .add(
22
- 'icon: Add with sizes',
23
- () => renderIconSizes(Add, {'aria-label': 'Add'})
24
- )
25
- .add(
26
- 'icon: Bell with sizes',
27
- () => renderIconSizes(Bell, {'aria-label': 'Bell'})
28
- )
29
- .add(
30
- 'icon: _3DMaterials with sizes',
31
-
32
- () => renderIconSizes(Icon3DMaterials, {'aria-label': '3D Materials'})
33
- )
34
- .add(
35
- 'icon: Alert negative',
36
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'})
37
- )
38
- .add(
39
- 'icon: Alert informative',
40
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'})
41
- )
42
- .add(
43
- 'icon: Alert positive',
44
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'})
45
- )
46
- .add(
47
- 'icon: Alert notice',
48
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'})
49
- );
18
+
19
+ export default {
20
+ title: 'Icons/Workflow'
21
+ };
22
+
23
+ export const IconAddWithSizes = () => renderIconSizes(Add, {'aria-label': 'Add'});
24
+
25
+ IconAddWithSizes.story = {
26
+ name: 'icon: Add with sizes'
27
+ };
28
+
29
+ export const IconBellWithSizes = () => renderIconSizes(Bell, {'aria-label': 'Bell'});
30
+
31
+ IconBellWithSizes.story = {
32
+ name: 'icon: Bell with sizes',
33
+ };
34
+
35
+ export const Icon3DMaterialsWithSizes = () => renderIconSizes(Icon3DMaterials, {'aria-label': '3D Materials'});
36
+
37
+ Icon3DMaterialsWithSizes.story = {
38
+ name: 'icon: _3DMaterials with sizes',
39
+ };
40
+
41
+ export const IconAlertNegative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'});
42
+
43
+ IconAlertNegative.story = {
44
+ name: 'icon: Alert negative',
45
+ };
46
+
47
+ export const IconAlertInformative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'});
48
+
49
+ IconAlertInformative.story = {
50
+ name: 'icon: Alert informative',
51
+ };
52
+
53
+ export const IconAlertPositive = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'});
54
+
55
+ IconAlertPositive.story = {
56
+ name: 'icon: Alert positive',
57
+ };
58
+
59
+ export const IconAlertNotice = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'});
60
+
61
+ IconAlertNotice.story = {
62
+ name: 'icon: Alert notice',
63
+ };
50
64
 
51
65
  function renderIconSizes(Component, props) {
52
66
  let sizes = ['XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'];
53
67
  return (
54
68
  <div>
55
- {sizes.map(size => {
56
- return <Component margin="15px" size={size} {...props} />
69
+ {sizes.map((size) => {
70
+ return <Component margin="15px" size={size} {...props} />;
57
71
  })}
58
72
  </div>
59
- )
73
+ );
60
74
  }