@spark-web/spinner 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @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/README.md

@@ -0,0 +1,57 @@
+---
+title: Spinner
+storybookPath: feedback-overlays-spinner-—default
+---
+
+Spinner indicates users that their request is in progress
+
+## Examples
+
+### Tones
+
+The appearance of Spinner can be cutomised with the tone prop.
+
+Defaults to `primary`.
+
+```jsx live
+const tones = ['secondary', 'critical', 'positive', 'neutral'];
+
+return (
+  <Stack align="left" gap="xxlarge">
+    <Inline gap="xxlarge">
+      {tones.map((tone, index) => (
+        <Button tone={tone} prominence="low" key={`low-btn-${index}`}>
+          <Spinner />
+        </Button>
+      ))}
+    </Inline>
+    <Inline gap="xxlarge">
+      {tones.map((tone, index) => (
+        <Button tone={tone} key={`btn-${index}`}>
+          <Spinner />
+        </Button>
+      ))}
+    </Inline>
+    <Inline gap="xxlarge">
+      {tones.map((tone, index) => (
+        <Spinner tone={tone} key={`spinner-${index}`} />
+      ))}
+    </Inline>
+  </Stack>
+);
+```
+
+## Size
+
+Spinners available in two size: `xxsmall` and `xsmall`.
+
+Defaults to `xsmall`.
+
+```jsx live
+<Inline gap="xxlarge">
+  <Row gap="xxlarge">
+    <Spinner size="xxsmall" />
+    <Spinner size="xsmall" />
+  </Row>
+</Inline>
+```

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { IconProps } from '@spark-web/icon';
+export declare type SpinnerProps = {
+    tone?: IconProps['tone'];
+    size?: 'xxsmall' | 'xsmall';
+};
+export declare function Spinner({ tone, size }: SpinnerProps): JSX.Element;
+export declare namespace Spinner {
+    var displayName: string;
+}

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

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

package/dist/spark-web-spinner.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

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

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = require('@emotion/css');
+var box = require('@spark-web/box');
+var icon = require('@spark-web/icon');
+var utils = require('@spark-web/utils');
+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;
+  var spinAnimationRef = utils.useSynchronizedAnimation(spinAnimation);
+  var strokeAnimationRef = utils.useSynchronizedAnimation(strokeDashAnimation);
+  var styles = useSpinnerStyles();
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    as: "span",
+    ref: spinAnimationRef,
+    className: css.css(styles),
+    height: size,
+    width: size,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    children: /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
+      size: size,
+      tone: tone,
+      ref: strokeAnimationRef
+    })
+  });
+}
+Spinner.displayName = 'Spinner';
+var SpinnerIcon = icon.createIcon( /*#__PURE__*/jsxRuntime.jsx("circle", {
+  cx: 12,
+  cy: 12,
+  r: 9
+}), 'SpinnerIcon');
+var spinAnimation = css.keyframes({
+  from: {
+    transform: 'rotate(0deg)'
+  },
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var strokeDashAnimation = css.keyframes({
+  '0%': {
+    strokeDasharray: '1px, 200px',
+    strokeDashoffset: 0
+  },
+  '50%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-15px'
+  },
+  '100%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-125px'
+  }
+});
+
+function useSpinnerStyles() {
+  return {
+    animation: "".concat(spinAnimation, " 1.4s linear infinite"),
+    '& circle': {
+      animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
+    }
+  };
+}
+
+exports.Spinner = Spinner;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-spinner.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-spinner.cjs.dev.js");
+}

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

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css = require('@emotion/css');
+var box = require('@spark-web/box');
+var icon = require('@spark-web/icon');
+var utils = require('@spark-web/utils');
+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;
+  var spinAnimationRef = utils.useSynchronizedAnimation(spinAnimation);
+  var strokeAnimationRef = utils.useSynchronizedAnimation(strokeDashAnimation);
+  var styles = useSpinnerStyles();
+  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    as: "span",
+    ref: spinAnimationRef,
+    className: css.css(styles),
+    height: size,
+    width: size,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    children: /*#__PURE__*/jsxRuntime.jsx(SpinnerIcon, {
+      size: size,
+      tone: tone,
+      ref: strokeAnimationRef
+    })
+  });
+}
+Spinner.displayName = 'Spinner';
+var SpinnerIcon = icon.createIcon( /*#__PURE__*/jsxRuntime.jsx("circle", {
+  cx: 12,
+  cy: 12,
+  r: 9
+}), 'SpinnerIcon');
+var spinAnimation = css.keyframes({
+  from: {
+    transform: 'rotate(0deg)'
+  },
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var strokeDashAnimation = css.keyframes({
+  '0%': {
+    strokeDasharray: '1px, 200px',
+    strokeDashoffset: 0
+  },
+  '50%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-15px'
+  },
+  '100%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-125px'
+  }
+});
+
+function useSpinnerStyles() {
+  return {
+    animation: "".concat(spinAnimation, " 1.4s linear infinite"),
+    '& circle': {
+      animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
+    }
+  };
+}
+
+exports.Spinner = Spinner;

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

@@ -0,0 +1,68 @@
+import { keyframes, css } from '@emotion/css';
+import { Box } from '@spark-web/box';
+import { createIcon } from '@spark-web/icon';
+import { useSynchronizedAnimation } from '@spark-web/utils';
+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;
+  var spinAnimationRef = useSynchronizedAnimation(spinAnimation);
+  var strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
+  var styles = useSpinnerStyles();
+  return /*#__PURE__*/jsx(Box, {
+    as: "span",
+    ref: spinAnimationRef,
+    className: css(styles),
+    height: size,
+    width: size,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    children: /*#__PURE__*/jsx(SpinnerIcon, {
+      size: size,
+      tone: tone,
+      ref: strokeAnimationRef
+    })
+  });
+}
+Spinner.displayName = 'Spinner';
+var SpinnerIcon = createIcon( /*#__PURE__*/jsx("circle", {
+  cx: 12,
+  cy: 12,
+  r: 9
+}), 'SpinnerIcon');
+var spinAnimation = keyframes({
+  from: {
+    transform: 'rotate(0deg)'
+  },
+  to: {
+    transform: 'rotate(360deg)'
+  }
+});
+var strokeDashAnimation = keyframes({
+  '0%': {
+    strokeDasharray: '1px, 200px',
+    strokeDashoffset: 0
+  },
+  '50%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-15px'
+  },
+  '100%': {
+    strokeDasharray: '100px, 200px',
+    strokeDashoffset: '-125px'
+  }
+});
+
+function useSpinnerStyles() {
+  return {
+    animation: "".concat(spinAnimation, " 1.4s linear infinite"),
+    '& circle': {
+      animation: "".concat(strokeDashAnimation, " 1.4s ease-in-out infinite")
+    }
+  };
+}
+
+export { Spinner };

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@spark-web/spinner",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "dist/spark-web-spinner.cjs.js",
+  "module": "dist/spark-web-spinner.esm.js",
+  "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"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.12",
+    "react": "^17.0.2"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.2"
+  },
+  "engines": {
+    "node": ">= 14.13"
+  }
+}

package/src/Spinner.stories.tsx

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,55 @@
+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

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