@spark-web/spinner 1.0.0 → 1.0.3

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 (10) hide show
  1. package/README.md +20 -7
  2. package/dist/declarations/src/Spinner.d.ts +4 -1
  3. package/dist/spark-web-spinner.cjs.dev.js +14 -12
  4. package/dist/spark-web-spinner.cjs.prod.js +14 -12
  5. package/dist/spark-web-spinner.esm.js +15 -13
  6. package/package.json +10 -6
  7. package/CHANGELOG.md +0 -18
  8. package/src/Spinner.stories.tsx +0 -43
  9. package/src/Spinner.tsx +0 -55
  10. package/src/index.ts +0 -5
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  title: Spinner
3
- storybookPath: feedback-overlays-spinner-—default
3
+ storybookPath: feedback-overlays-spinner--default
4
4
  ---
5
5
 
6
6
  Spinner indicates users that their request is in progress
@@ -19,22 +19,22 @@ const tones = ['secondary', 'critical', 'positive', 'neutral'];
19
19
  return (
20
20
  <Stack align="left" gap="xxlarge">
21
21
  <Inline gap="xxlarge">
22
- {tones.map((tone, index) => (
23
- <Button tone={tone} prominence="low" key={`low-btn-${index}`}>
22
+ {tones.map(tone => (
23
+ <Button tone={tone} prominence="low" key={tone}>
24
24
  <Spinner />
25
25
  </Button>
26
26
  ))}
27
27
  </Inline>
28
28
  <Inline gap="xxlarge">
29
- {tones.map((tone, index) => (
30
- <Button tone={tone} key={`btn-${index}`}>
29
+ {tones.map(tone => (
30
+ <Button tone={tone} key={tone}>
31
31
  <Spinner />
32
32
  </Button>
33
33
  ))}
34
34
  </Inline>
35
35
  <Inline gap="xxlarge">
36
- {tones.map((tone, index) => (
37
- <Spinner tone={tone} key={`spinner-${index}`} />
36
+ {tones.map(tone => (
37
+ <Spinner tone={tone} key={tone} />
38
38
  ))}
39
39
  </Inline>
40
40
  </Stack>
@@ -55,3 +55,16 @@ Defaults to `xsmall`.
55
55
  </Row>
56
56
  </Inline>
57
57
  ```
58
+
59
+ ## Props
60
+
61
+ ### Spinner
62
+
63
+ | Prop | Type | Default | Description |
64
+ | ----- | -------------------------------------- | --------- | ----------------------------------------------------------------- |
65
+ | size? | 'xxsmall' \| 'xsmall' | | The size of the nested radios. |
66
+ | tone? | 'critical' \| 'positive' \| 'neutral' | 'neutral' | Provide a tone to influence elements of the field, and its input. |
67
+ | data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
68
+
69
+ [data-attribute-map]:
70
+ https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
package/dist/declarations/src/Spinner.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  /// <reference types="react" />
2
2
  import type { IconProps } from '@spark-web/icon';
3
+ import type { DataAttributeMap } from '@spark-web/utils/internal';
3
4
  export declare type SpinnerProps = {
4
5
  tone?: IconProps['tone'];
5
6
  size?: 'xxsmall' | 'xsmall';
7
+ /** Allows setting of data attributes on the underlying element. */
8
+ data?: DataAttributeMap;
6
9
  };
7
- export declare function Spinner({ tone, size }: SpinnerProps): JSX.Element;
10
+ export declare function Spinner({ tone, size, data }: SpinnerProps): JSX.Element;
8
11
  export declare namespace Spinner {
9
12
  var displayName: string;
10
13
  }
package/dist/spark-web-spinner.cjs.dev.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var css = require('@emotion/css');
6
+ var a11y = require('@spark-web/a11y');
6
7
  var box = require('@spark-web/box');
7
8
  var icon = require('@spark-web/icon');
8
9
  var utils = require('@spark-web/utils');
@@ -11,11 +12,12 @@ var jsxRuntime = require('react/jsx-runtime');
11
12
  function Spinner(_ref) {
12
13
  var tone = _ref.tone,
13
14
  _ref$size = _ref.size,
14
- size = _ref$size === void 0 ? 'xxsmall' : _ref$size;
15
+ size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
16
+ data = _ref.data;
15
17
  var spinAnimationRef = utils.useSynchronizedAnimation(spinAnimation);
16
18
  var strokeAnimationRef = utils.useSynchronizedAnimation(strokeDashAnimation);
17
19
  var styles = useSpinnerStyles();
18
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
20
+ return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
19
21
  as: "span",
20
22
  ref: spinAnimationRef,
21
23
  className: css.css(styles),
@@ -24,11 +26,15 @@ function Spinner(_ref) {
24
26
  display: "inline-flex",
25
27
  alignItems: "center",
26
28
  justifyContent: "center",
27
- children: /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
29
+ data: data,
30
+ children: [/*#__PURE__*/jsxRuntime.jsx(a11y.VisuallyHidden, {
31
+ children: "Image of a partial circle indicating \"loading\"."
32
+ }), /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
28
33
  size: size,
29
34
  tone: tone,
30
- ref: strokeAnimationRef
31
- })
35
+ ref: strokeAnimationRef,
36
+ "aria-hidden": "true"
37
+ })]
32
38
  });
33
39
  }
34
40
  Spinner.displayName = 'Spinner';
@@ -50,13 +56,9 @@ var strokeDashAnimation = css.keyframes({
50
56
  strokeDasharray: '1px, 200px',
51
57
  strokeDashoffset: 0
52
58
  },
53
- '50%': {
54
- strokeDasharray: '100px, 200px',
55
- strokeDashoffset: '-15px'
56
- },
57
59
  '100%': {
58
- strokeDasharray: '100px, 200px',
59
- strokeDashoffset: '-125px'
60
+ strokeDasharray: '200px, 200px',
61
+ strokeDashoffset: '-55px'
60
62
  }
61
63
  });
62
64
 
@@ -64,7 +66,7 @@ function useSpinnerStyles() {
64
66
  return {
65
67
  animation: "".concat(spinAnimation, " 1.4s linear infinite"),
66
68
  '& circle': {
67
- animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
69
+ animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
68
70
  }
69
71
  };
70
72
  }
package/dist/spark-web-spinner.cjs.prod.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var css = require('@emotion/css');
6
+ var a11y = require('@spark-web/a11y');
6
7
  var box = require('@spark-web/box');
7
8
  var icon = require('@spark-web/icon');
8
9
  var utils = require('@spark-web/utils');
@@ -11,11 +12,12 @@ var jsxRuntime = require('react/jsx-runtime');
11
12
  function Spinner(_ref) {
12
13
  var tone = _ref.tone,
13
14
  _ref$size = _ref.size,
14
- size = _ref$size === void 0 ? 'xxsmall' : _ref$size;
15
+ size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
16
+ data = _ref.data;
15
17
  var spinAnimationRef = utils.useSynchronizedAnimation(spinAnimation);
16
18
  var strokeAnimationRef = utils.useSynchronizedAnimation(strokeDashAnimation);
17
19
  var styles = useSpinnerStyles();
18
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
20
+ return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
19
21
  as: "span",
20
22
  ref: spinAnimationRef,
21
23
  className: css.css(styles),
@@ -24,11 +26,15 @@ function Spinner(_ref) {
24
26
  display: "inline-flex",
25
27
  alignItems: "center",
26
28
  justifyContent: "center",
27
- children: /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
29
+ data: data,
30
+ children: [/*#__PURE__*/jsxRuntime.jsx(a11y.VisuallyHidden, {
31
+ children: "Image of a partial circle indicating \"loading\"."
32
+ }), /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
28
33
  size: size,
29
34
  tone: tone,
30
- ref: strokeAnimationRef
31
- })
35
+ ref: strokeAnimationRef,
36
+ "aria-hidden": "true"
37
+ })]
32
38
  });
33
39
  }
34
40
  Spinner.displayName = 'Spinner';
@@ -50,13 +56,9 @@ var strokeDashAnimation = css.keyframes({
50
56
  strokeDasharray: '1px, 200px',
51
57
  strokeDashoffset: 0
52
58
  },
53
- '50%': {
54
- strokeDasharray: '100px, 200px',
55
- strokeDashoffset: '-15px'
56
- },
57
59
  '100%': {
58
- strokeDasharray: '100px, 200px',
59
- strokeDashoffset: '-125px'
60
+ strokeDasharray: '200px, 200px',
61
+ strokeDashoffset: '-55px'
60
62
  }
61
63
  });
62
64
 
@@ -64,7 +66,7 @@ function useSpinnerStyles() {
64
66
  return {
65
67
  animation: "".concat(spinAnimation, " 1.4s linear infinite"),
66
68
  '& circle': {
67
- animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
69
+ animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
68
70
  }
69
71
  };
70
72
  }
package/dist/spark-web-spinner.esm.js CHANGED
@@ -1,17 +1,19 @@
1
1
  import { keyframes, css } from '@emotion/css';
2
+ import { VisuallyHidden } from '@spark-web/a11y';
2
3
  import { Box } from '@spark-web/box';
3
4
  import { createIcon } from '@spark-web/icon';
4
5
  import { useSynchronizedAnimation } from '@spark-web/utils';
5
- import { jsx } from 'react/jsx-runtime';
6
+ import { jsx, jsxs } from 'react/jsx-runtime';
6
7
 
7
8
  function Spinner(_ref) {
8
9
  var tone = _ref.tone,
9
10
  _ref$size = _ref.size,
10
- size = _ref$size === void 0 ? 'xxsmall' : _ref$size;
11
+ size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
12
+ data = _ref.data;
11
13
  var spinAnimationRef = useSynchronizedAnimation(spinAnimation);
12
14
  var strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
13
15
  var styles = useSpinnerStyles();
14
- return /*#__PURE__*/jsx(Box, {
16
+ return /*#__PURE__*/jsxs(Box, {
15
17
  as: "span",
16
18
  ref: spinAnimationRef,
17
19
  className: css(styles),
@@ -20,11 +22,15 @@ function Spinner(_ref) {
20
22
  display: "inline-flex",
21
23
  alignItems: "center",
22
24
  justifyContent: "center",
23
- children: /*#__PURE__*/jsx(SpinnerIcon, {
25
+ data: data,
26
+ children: [/*#__PURE__*/jsx(VisuallyHidden, {
27
+ children: "Image of a partial circle indicating \"loading\"."
28
+ }), /*#__PURE__*/jsx(SpinnerIcon, {
24
29
  size: size,
25
30
  tone: tone,
26
- ref: strokeAnimationRef
27
- })
31
+ ref: strokeAnimationRef,
32
+ "aria-hidden": "true"
33
+ })]
28
34
  });
29
35
  }
30
36
  Spinner.displayName = 'Spinner';
@@ -46,13 +52,9 @@ var strokeDashAnimation = keyframes({
46
52
  strokeDasharray: '1px, 200px',
47
53
  strokeDashoffset: 0
48
54
  },
49
- '50%': {
50
- strokeDasharray: '100px, 200px',
51
- strokeDashoffset: '-15px'
52
- },
53
55
  '100%': {
54
- strokeDasharray: '100px, 200px',
55
- strokeDashoffset: '-125px'
56
+ strokeDasharray: '200px, 200px',
57
+ strokeDashoffset: '-55px'
56
58
  }
57
59
  });
58
60
 
@@ -60,7 +62,7 @@ function useSpinnerStyles() {
60
62
  return {
61
63
  animation: "".concat(spinAnimation, " 1.4s linear infinite"),
62
64
  '& circle': {
63
- animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
65
+ animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
64
66
  }
65
67
  };
66
68
  }
package/package.json CHANGED
@@ -1,15 +1,19 @@
1
1
  {
2
2
  "name": "@spark-web/spinner",
3
- "version": "1.0.0",
3
+ "version": "1.0.3",
4
4
  "license": "MIT",
5
5
  "main": "dist/spark-web-spinner.cjs.js",
6
6
  "module": "dist/spark-web-spinner.esm.js",
7
+ "files": [
8
+ "dist"
9
+ ],
7
10
  "dependencies": {
8
- "@babel/runtime": "^7.14.6",
9
- "@emotion/css": "^11.7.1",
10
- "@spark-web/box": "^1.0.2",
11
- "@spark-web/icon": "^1.1.0",
12
- "@spark-web/utils": "^1.1.0"
11
+ "@babel/runtime": "^7.18.0",
12
+ "@emotion/css": "^11.9.0",
13
+ "@spark-web/a11y": "^1.0.5",
14
+ "@spark-web/box": "^1.0.5",
15
+ "@spark-web/icon": "^1.1.3",
16
+ "@spark-web/utils": "^1.1.3"
13
17
  },
14
18
  "devDependencies": {
15
19
  "@types/react": "^17.0.12",
package/CHANGELOG.md DELETED
@@ -1,18 +0,0 @@
1
- # @spark-web/spinner
2
-
3
- ## 1.0.0
4
-
5
- ### Major Changes
6
-
7
- - [#44](https://github.com/brighte-labs/spark-web/pull/44)
8
- [`11e7365`](https://github.com/brighte-labs/spark-web/commit/11e73659ff4a01a48a8761821bff34c6ec28568b)
9
- Thanks [@matildaPan](https://github.com/matildaPan)! - initial release of
10
- spinner component
11
-
12
- ### Patch Changes
13
-
14
- - Updated dependencies
15
- [[`11e7365`](https://github.com/brighte-labs/spark-web/commit/11e73659ff4a01a48a8761821bff34c6ec28568b),
16
- [`11e7365`](https://github.com/brighte-labs/spark-web/commit/11e73659ff4a01a48a8761821bff34c6ec28568b)]:
17
- - @spark-web/icon@1.1.0
18
- - @spark-web/utils@1.1.0
package/src/Spinner.stories.tsx DELETED
@@ -1,43 +0,0 @@
1
- import { Inline } from '@spark-web/inline';
2
- import { Stack } from '@spark-web/stack';
3
- import type { ComponentMeta, ComponentStory } from '@storybook/react';
4
-
5
- import type { SpinnerProps } from './Spinner';
6
- import { Spinner } from './Spinner';
7
-
8
- export default {
9
- title: 'Feedback & Overlays / Spinner',
10
- component: Spinner,
11
- } as ComponentMeta<typeof Spinner>;
12
-
13
- const SpinnerStory: ComponentStory<typeof Spinner> = (args: SpinnerProps) => (
14
- <Stack align="left" gap="xxlarge">
15
- <Inline gap="xxlarge">
16
- <Spinner {...args} />
17
- </Inline>
18
- </Stack>
19
- );
20
-
21
- export const Default = SpinnerStory.bind({});
22
- export const Critical = SpinnerStory.bind({});
23
- export const Caution = SpinnerStory.bind({});
24
- export const Positive = SpinnerStory.bind({});
25
- export const Primary = SpinnerStory.bind({});
26
-
27
- Default.args = {} as SpinnerProps;
28
-
29
- Caution.args = {
30
- tone: 'caution',
31
- } as SpinnerProps;
32
-
33
- Critical.args = {
34
- tone: 'critical',
35
- } as SpinnerProps;
36
-
37
- Positive.args = {
38
- tone: 'positive',
39
- } as SpinnerProps;
40
-
41
- Primary.args = {
42
- tone: 'primary',
43
- } as SpinnerProps;
package/src/Spinner.tsx DELETED
@@ -1,55 +0,0 @@
1
- import { css, keyframes } from '@emotion/css';
2
- import { Box } from '@spark-web/box';
3
- import type { IconProps } from '@spark-web/icon';
4
- import { createIcon } from '@spark-web/icon';
5
- import { useSynchronizedAnimation } from '@spark-web/utils';
6
-
7
- export type SpinnerProps = {
8
- // TODO: match tones to design in Figma
9
- tone?: IconProps['tone'];
10
- size?: 'xxsmall' | 'xsmall';
11
- };
12
-
13
- export function Spinner({ tone, size = 'xxsmall' }: SpinnerProps) {
14
- const spinAnimationRef = useSynchronizedAnimation(spinAnimation);
15
- const strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
16
- const styles = useSpinnerStyles();
17
-
18
- return (
19
- <Box
20
- as="span"
21
- ref={spinAnimationRef}
22
- className={css(styles)}
23
- height={size}
24
- width={size}
25
- display="inline-flex"
26
- alignItems="center"
27
- justifyContent="center"
28
- >
29
- <SpinnerIcon size={size} tone={tone} ref={strokeAnimationRef} />
30
- </Box>
31
- );
32
- }
33
- Spinner.displayName = 'Spinner';
34
-
35
- const SpinnerIcon = createIcon(<circle cx={12} cy={12} r={9} />, 'SpinnerIcon');
36
-
37
- const spinAnimation = keyframes({
38
- from: { transform: 'rotate(0deg)' },
39
- to: { transform: 'rotate(360deg)' },
40
- });
41
-
42
- const strokeDashAnimation = keyframes({
43
- '0%': { strokeDasharray: '1px, 200px', strokeDashoffset: 0 },
44
- '50%': { strokeDasharray: '100px, 200px', strokeDashoffset: '-15px' },
45
- '100%': { strokeDasharray: '100px, 200px', strokeDashoffset: '-125px' },
46
- });
47
-
48
- function useSpinnerStyles() {
49
- return {
50
- animation: `${spinAnimation} 1.4s linear infinite`,
51
- '& circle': {
52
- animation: `${strokeDashAnimation} 1.4s ease-in-out infinite`,
53
- },
54
- } as const;
55
- }
package/src/index.ts DELETED
@@ -1,5 +0,0 @@
1
- export { Spinner } from './Spinner';
2
-
3
- // types
4
-
5
- export type { SpinnerProps } from './Spinner';