@spectrum-icons/express 3.0.0-nightly.3854 → 3.0.0-nightly.3863

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/IconsExpress.chromatic.tsx +26 -22
  2. package/package.json +4 -4
  3. package/stories/IconsExpress.stories.tsx +43 -28
package/chromatic/IconsExpress.chromatic.tsx CHANGED
@@ -13,34 +13,38 @@
13
13
  import Add from '../Add';
14
14
  import Alert from '@spectrum-icons/express/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
 
19
- storiesOf('Icons/Express', module)
20
- .addParameters({chromaticProvider: {express: true}})
21
- .add(
22
- 'icon: Add with sizes',
23
- () => renderIconSizes(Add, {'aria-label': 'Add'})
24
- )
25
- .add('Colors',
26
- () => (
27
- <Flex gap="size-200">
28
- <Alert aria-label="info default" />
29
- <Alert color="informative" aria-label="info alert" />
30
- <Alert color="negative" aria-label="negative alert" />
31
- <Alert color="positive" aria-label="positive alert" />
32
- <Alert color="notice" aria-label="notice alert" />
33
- </Flex>
34
- )
35
- );
18
+ export default {
19
+ title: 'Icons/Express',
20
+ parameters: {
21
+ chromaticProvider: {express: true},
22
+ }
23
+ };
24
+
25
+ export const IconAddWithSizes = () => renderIconSizes(Add, { 'aria-label': 'Add' });
26
+
27
+ IconAddWithSizes.story = {
28
+ name: 'icon: Add with sizes',
29
+ };
30
+
31
+ export const Colors = () => (
32
+ <Flex gap="size-200">
33
+ <Alert aria-label="info default" />
34
+ <Alert color="informative" aria-label="info alert" />
35
+ <Alert color="negative" aria-label="negative alert" />
36
+ <Alert color="positive" aria-label="positive alert" />
37
+ <Alert color="notice" aria-label="notice alert" />
38
+ </Flex>
39
+ );
36
40
 
37
41
  function renderIconSizes(Component, props) {
38
42
  let sizes = ['XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'];
39
43
  return (
40
44
  <div>
41
- {sizes.map(size => {
42
- return <Component margin="15px" size={size} {...props} />
45
+ {sizes.map((size) => {
46
+ return <Component margin="15px" size={size} {...props} />;
43
47
  })}
44
48
  </div>
45
- )
49
+ );
46
50
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-icons/express",
3
- "version": "3.0.0-nightly.3854+2cb1d0d7e",
3
+ "version": "3.0.0-nightly.3863+424432c83",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -23,11 +23,11 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@adobe/spectrum-css-ccx-workflow-icons": "1.0.2",
26
- "@react-spectrum/icon": "3.0.0-nightly.2152+2cb1d0d7e",
26
+ "@react-spectrum/icon": "3.0.0-nightly.2161+424432c83",
27
27
  "@swc/helpers": "^0.4.14"
28
28
  },
29
29
  "devDependencies": {
30
- "@spectrum-icons/build-tools": "3.0.0-nightly.2152+2cb1d0d7e",
30
+ "@spectrum-icons/build-tools": "3.0.0-nightly.2161+424432c83",
31
31
  "fs-extra": "^10.0.0"
32
32
  },
33
33
  "peerDependencies": {
@@ -37,5 +37,5 @@
37
37
  "publishConfig": {
38
38
  "access": "public"
39
39
  },
40
- "gitHead": "2cb1d0d7ee48740f82e6f3b992c8379419bc1ed1"
40
+ "gitHead": "424432c832b5e16296e11e2c36aa23165a4812aa"
41
41
  }
package/stories/IconsExpress.stories.tsx CHANGED
@@ -14,39 +14,54 @@ import Add from '../Add';
14
14
  import Alert from '../Alert';
15
15
  import Bell from '../Bell';
16
16
  import React from 'react';
17
- import {storiesOf} from '@storybook/react';
18
-
19
- storiesOf('Icons/Express', module)
20
- .add(
21
- 'icon: Add with sizes',
22
- () => renderIconSizes(Add, {'aria-label': 'Add'})
23
- )
24
- .add(
25
- 'icon: Bell with sizes',
26
- () => renderIconSizes(Bell, {'aria-label': 'Bell'})
27
- )
28
- .add(
29
- 'icon: Alert negative',
30
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'})
31
- )
32
- .add(
33
- 'icon: Alert informative',
34
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'})
35
- )
36
- .add(
37
- 'icon: Alert positive',
38
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'})
39
- )
40
- .add(
41
- 'icon: Alert notice',
42
- () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'})
43
- );
17
+
18
+ export default {
19
+ title: 'Icons/Express'
20
+ };
21
+
22
+ export const IconAddWithSizes = () => renderIconSizes(Add, {'aria-label': 'Add'});
23
+
24
+ IconAddWithSizes.story = {
25
+ name: 'icon: Add with sizes'
26
+ };
27
+
28
+ export const IconBellWithSizes = () => renderIconSizes(Bell, {'aria-label': 'Bell'});
29
+
30
+ IconBellWithSizes.story = {
31
+ name: 'icon: Bell with sizes'
32
+ };
33
+
34
+ export const IconAlertNegative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'negative'});
35
+
36
+ IconAlertNegative.story = {
37
+ name: 'icon: Alert negative'
38
+ };
39
+
40
+ export const IconAlertInformative = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'informative'});
41
+
42
+ IconAlertInformative.story = {
43
+ name: 'icon: Alert informative'
44
+ };
45
+
46
+ export const IconAlertPositive = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'positive'});
47
+
48
+ IconAlertPositive.story = {
49
+ name: 'icon: Alert positive'
50
+ };
51
+
52
+ export const IconAlertNotice = () => renderIconSizes(Alert, {'aria-label': 'Alert', color: 'notice'});
53
+
54
+ IconAlertNotice.story = {
55
+ name: 'icon: Alert notice'
56
+ };
44
57
 
45
58
  function renderIconSizes(Component, props) {
46
59
  let sizes = ['XXS', 'XS', 'S', 'M', 'L', 'XL', 'XXL'];
47
60
  return (
48
61
  <div>
49
- {sizes.map(size => <Component margin="15px" size={size} {...props} />)}
62
+ {sizes.map((size) => (
63
+ <Component margin="15px" size={size} {...props} />
64
+ ))}
50
65
  </div>
51
66
  );
52
67
  }