@spark-web/spinner 1.0.0 → 1.0.1

package/README.md

@@ -55,3 +55,16 @@ Defaults to `xsmall`.
   </Row>
 </Inline>
 ```
+
+## Props
+
+### Spinner
+
+| Prop  | Type                                   | Default   | Description                                                       |
+| ----- | -------------------------------------- | --------- | ----------------------------------------------------------------- |
+| size? | 'xxsmall' \| 'xsmall'                  |           | The size of the nested radios.                                    |
+| tone? | 'critical' \| 'positive' \| 'neutral'  | 'neutral' | Provide a tone to influence elements of the field, and its input. |
+| data? | [DataAttributeMap][data-attribute-map] |           | Sets data attributes on the component.                            |
+
+[data-attribute-map]:
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

package/dist/declarations/src/Spinner.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import type { IconProps } from '@spark-web/icon';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
 export declare type SpinnerProps = {
     tone?: IconProps['tone'];
     size?: 'xxsmall' | 'xsmall';
+    /** Allows setting of data attributes on the underlying element. */
+    data?: DataAttributeMap;
 };
-export declare function Spinner({ tone, size }: SpinnerProps): JSX.Element;
+export declare function Spinner({ tone, size, data }: SpinnerProps): JSX.Element;
 export declare namespace Spinner {
     var displayName: string;
 }

package/dist/spark-web-spinner.cjs.dev.js

@@ -11,7 +11,8 @@ var jsxRuntime = require('react/jsx-runtime');
 function Spinner(_ref) {
   var tone = _ref.tone,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xxsmall' : _ref$size;
+      size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
+      data = _ref.data;
   var spinAnimationRef = utils.useSynchronizedAnimation(spinAnimation);
   var strokeAnimationRef = utils.useSynchronizedAnimation(strokeDashAnimation);
   var styles = useSpinnerStyles();
@@ -24,6 +25,7 @@ function Spinner(_ref) {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
+    data: data,
     children: /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
       size: size,
       tone: tone,
@@ -50,13 +52,9 @@ var strokeDashAnimation = css.keyframes({
     strokeDasharray: '1px, 200px',
     strokeDashoffset: 0
   },
-  '50%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-15px'
-  },
   '100%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-125px'
+    strokeDasharray: '200px, 200px',
+    strokeDashoffset: '-55px'
   }
 });
 
@@ -64,7 +62,7 @@ function useSpinnerStyles() {
   return {
     animation: "".concat(spinAnimation, " 1.4s linear infinite"),
     '& circle': {
-      animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
+      animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
     }
   };
 }

package/dist/spark-web-spinner.cjs.prod.js

@@ -11,7 +11,8 @@ var jsxRuntime = require('react/jsx-runtime');
 function Spinner(_ref) {
   var tone = _ref.tone,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xxsmall' : _ref$size;
+      size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
+      data = _ref.data;
   var spinAnimationRef = utils.useSynchronizedAnimation(spinAnimation);
   var strokeAnimationRef = utils.useSynchronizedAnimation(strokeDashAnimation);
   var styles = useSpinnerStyles();
@@ -24,6 +25,7 @@ function Spinner(_ref) {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
+    data: data,
     children: /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
       size: size,
       tone: tone,
@@ -50,13 +52,9 @@ var strokeDashAnimation = css.keyframes({
     strokeDasharray: '1px, 200px',
     strokeDashoffset: 0
   },
-  '50%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-15px'
-  },
   '100%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-125px'
+    strokeDasharray: '200px, 200px',
+    strokeDashoffset: '-55px'
   }
 });
 
@@ -64,7 +62,7 @@ function useSpinnerStyles() {
   return {
     animation: "".concat(spinAnimation, " 1.4s linear infinite"),
     '& circle': {
-      animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
+      animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
     }
   };
 }

package/dist/spark-web-spinner.esm.js

@@ -7,7 +7,8 @@ import { jsx } from 'react/jsx-runtime';
 function Spinner(_ref) {
   var tone = _ref.tone,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xxsmall' : _ref$size;
+      size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
+      data = _ref.data;
   var spinAnimationRef = useSynchronizedAnimation(spinAnimation);
   var strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
   var styles = useSpinnerStyles();
@@ -20,6 +21,7 @@ function Spinner(_ref) {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
+    data: data,
     children: /*#__PURE__*/jsx(SpinnerIcon, {
       size: size,
       tone: tone,
@@ -46,13 +48,9 @@ var strokeDashAnimation = keyframes({
     strokeDasharray: '1px, 200px',
     strokeDashoffset: 0
   },
-  '50%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-15px'
-  },
   '100%': {
-    strokeDasharray: '100px, 200px',
-    strokeDashoffset: '-125px'
+    strokeDasharray: '200px, 200px',
+    strokeDashoffset: '-55px'
   }
 });
 
@@ -60,7 +58,7 @@ function useSpinnerStyles() {
   return {
     animation: "".concat(spinAnimation, " 1.4s linear infinite"),
     '& circle': {
-      animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
+      animation: "".concat(strokeDashAnimation, " 1.6s cubic-bezier(0.47, 0, 0.75, 0.72) infinite")
     }
   };
 }

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@spark-web/spinner",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "main": "dist/spark-web-spinner.cjs.js",
   "module": "dist/spark-web-spinner.esm.js",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/box": "^1.0.2",
-    "@spark-web/icon": "^1.1.0",
-    "@spark-web/utils": "^1.1.0"
+    "@spark-web/box": "^1.0.4",
+    "@spark-web/icon": "^1.1.2",
+    "@spark-web/utils": "^1.1.2"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",

package/CHANGELOG.md

@@ -1,18 +0,0 @@
-# @spark-web/spinner
-
-## 1.0.0
-
-### Major Changes
-
-- [#44](https://github.com/brighte-labs/spark-web/pull/44)
-  [`11e7365`](https://github.com/brighte-labs/spark-web/commit/11e73659ff4a01a48a8761821bff34c6ec28568b)
-  Thanks [@matildaPan](https://github.com/matildaPan)! - initial release of
-  spinner component
-
-### Patch Changes
-
-- Updated dependencies
-  [[`11e7365`](https://github.com/brighte-labs/spark-web/commit/11e73659ff4a01a48a8761821bff34c6ec28568b),
-  [`11e7365`](https://github.com/brighte-labs/spark-web/commit/11e73659ff4a01a48a8761821bff34c6ec28568b)]:
-  - @spark-web/icon@1.1.0
-  - @spark-web/utils@1.1.0

package/src/Spinner.stories.tsx

@@ -1,43 +0,0 @@
-import { Inline } from '@spark-web/inline';
-import { Stack } from '@spark-web/stack';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import type { SpinnerProps } from './Spinner';
-import { Spinner } from './Spinner';
-
-export default {
-  title: 'Feedback & Overlays / Spinner',
-  component: Spinner,
-} as ComponentMeta<typeof Spinner>;
-
-const SpinnerStory: ComponentStory<typeof Spinner> = (args: SpinnerProps) => (
-  <Stack align="left" gap="xxlarge">
-    <Inline gap="xxlarge">
-      <Spinner {...args} />
-    </Inline>
-  </Stack>
-);
-
-export const Default = SpinnerStory.bind({});
-export const Critical = SpinnerStory.bind({});
-export const Caution = SpinnerStory.bind({});
-export const Positive = SpinnerStory.bind({});
-export const Primary = SpinnerStory.bind({});
-
-Default.args = {} as SpinnerProps;
-
-Caution.args = {
-  tone: 'caution',
-} as SpinnerProps;
-
-Critical.args = {
-  tone: 'critical',
-} as SpinnerProps;
-
-Positive.args = {
-  tone: 'positive',
-} as SpinnerProps;
-
-Primary.args = {
-  tone: 'primary',
-} as SpinnerProps;

package/src/Spinner.tsx

@@ -1,55 +0,0 @@
-import { css, keyframes } from '@emotion/css';
-import { Box } from '@spark-web/box';
-import type { IconProps } from '@spark-web/icon';
-import { createIcon } from '@spark-web/icon';
-import { useSynchronizedAnimation } from '@spark-web/utils';
-
-export type SpinnerProps = {
-  // TODO: match tones to design in Figma
-  tone?: IconProps['tone'];
-  size?: 'xxsmall' | 'xsmall';
-};
-
-export function Spinner({ tone, size = 'xxsmall' }: SpinnerProps) {
-  const spinAnimationRef = useSynchronizedAnimation(spinAnimation);
-  const strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
-  const styles = useSpinnerStyles();
-
-  return (
-    <Box
-      as="span"
-      ref={spinAnimationRef}
-      className={css(styles)}
-      height={size}
-      width={size}
-      display="inline-flex"
-      alignItems="center"
-      justifyContent="center"
-    >
-      <SpinnerIcon size={size} tone={tone} ref={strokeAnimationRef} />
-    </Box>
-  );
-}
-Spinner.displayName = 'Spinner';
-
-const SpinnerIcon = createIcon(<circle cx={12} cy={12} r={9} />, 'SpinnerIcon');
-
-const spinAnimation = keyframes({
-  from: { transform: 'rotate(0deg)' },
-  to: { transform: 'rotate(360deg)' },
-});
-
-const strokeDashAnimation = keyframes({
-  '0%': { strokeDasharray: '1px, 200px', strokeDashoffset: 0 },
-  '50%': { strokeDasharray: '100px, 200px', strokeDashoffset: '-15px' },
-  '100%': { strokeDasharray: '100px, 200px', strokeDashoffset: '-125px' },
-});
-
-function useSpinnerStyles() {
-  return {
-    animation: `${spinAnimation} 1.4s linear infinite`,
-    '& circle': {
-      animation: `${strokeDashAnimation} 1.4s ease-in-out infinite`,
-    },
-  } as const;
-}

package/src/index.ts

@@ -1,5 +0,0 @@
-export { Spinner } from './Spinner';
-
-// types
-
-export type { SpinnerProps } from './Spinner';