@spark-web/spinner 1.0.7 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,182 @@
+# @spark-web/spinner
+
+## 1.1.0
+
+### Minor Changes
+
+- [#382](https://github.com/brighte-labs/spark-web/pull/382)
+  [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
+  Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
+  version to latest (18.2.0)
+
+### Patch Changes
+
+- Updated dependencies
+  [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
+  - @spark-web/a11y@1.4.0
+  - @spark-web/box@1.2.0
+  - @spark-web/icon@1.3.0
+  - @spark-web/utils@1.3.0
+
+## 1.0.8
+
+### Patch Changes
+
+- [#218](https://github.com/brighte-labs/spark-web/pull/218)
+  [`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
+  Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
+
+- [#222](https://github.com/brighte-labs/spark-web/pull/222)
+  [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
+  dependencies
+
+- [#242](https://github.com/brighte-labs/spark-web/pull/242)
+  [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
+  and repository keys to package.json
+  - Add CHANGELOG and README to files key in package.json
+- Updated dependencies
+  [[`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b),
+  [`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c),
+  [`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
+  [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
+  [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
+  - @spark-web/box@1.1.0
+  - @spark-web/icon@1.2.2
+  - @spark-web/a11y@1.3.2
+  - @spark-web/utils@1.2.3
+
+## 1.0.7
+
+### Patch Changes
+
+- [#208](https://github.com/brighte-labs/spark-web/pull/208)
+  [`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
+  node version
+
+- Updated dependencies
+  [[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
+  - @spark-web/a11y@1.3.1
+  - @spark-web/box@1.0.9
+  - @spark-web/icon@1.2.1
+  - @spark-web/utils@1.2.2
+
+## 1.0.6
+
+### Patch Changes
+
+- [#197](https://github.com/brighte-labs/spark-web/pull/197)
+  [`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
+
+- Updated dependencies
+  [[`51b6c7a`](https://github.com/brighte-labs/spark-web/commit/51b6c7a43f441e02b90403b13af9cfa11e5438ef),
+  [`07286b5`](https://github.com/brighte-labs/spark-web/commit/07286b52f897909b1a806d736e1040351c93078f),
+  [`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
+  - @spark-web/a11y@1.3.0
+  - @spark-web/icon@1.2.0
+  - @spark-web/box@1.0.8
+  - @spark-web/utils@1.2.1
+
+## 1.0.5
+
+### Patch Changes
+
+- [#173](https://github.com/brighte-labs/spark-web/pull/173)
+  [`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
+  dependency
+
+- Updated dependencies
+  [[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
+  [`be99536`](https://github.com/brighte-labs/spark-web/commit/be99536abb56dd26e5c9a1703e6df9c7860b449b),
+  [`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
+  - @spark-web/a11y@1.2.0
+  - @spark-web/box@1.0.7
+  - @spark-web/icon@1.1.5
+  - @spark-web/utils@1.2.0
+
+## 1.0.4
+
+### Patch Changes
+
+- [#167](https://github.com/brighte-labs/spark-web/pull/167)
+  [`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
+
+- Updated dependencies
+  [[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
+  [`f524009`](https://github.com/brighte-labs/spark-web/commit/f5240098cf731b0a2e351b7b585711e893a33736)]:
+  - @spark-web/a11y@1.1.0
+  - @spark-web/box@1.0.6
+  - @spark-web/icon@1.1.4
+  - @spark-web/utils@1.1.5
+
+## 1.0.3
+
+### Patch Changes
+
+- [#142](https://github.com/brighte-labs/spark-web/pull/142)
+  [`500939d`](https://github.com/brighte-labs/spark-web/commit/500939de7c45c93d48078f39151035ab9eba057f)
+  Thanks [@clothoo](https://github.com/clothoo)! - Add role 'progressbar'
+
+## 1.0.2
+
+### Patch Changes
+
+- [#113](https://github.com/brighte-labs/spark-web/pull/113)
+  [`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
+  dependencies
+
+- Updated dependencies
+  [[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
+  - @spark-web/box@1.0.5
+  - @spark-web/icon@1.1.3
+  - @spark-web/utils@1.1.3
+
+## 1.0.1
+
+### Patch Changes
+
+- [#87](https://github.com/brighte-labs/spark-web/pull/87)
+  [`5744b68`](https://github.com/brighte-labs/spark-web/commit/5744b6820f626b93a14e11e1fbd96bcbe1b12b27)
+  Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
+  Data attribute added to component props to allow consumers to attach
+  customattributes to components
+
+* [#52](https://github.com/brighte-labs/spark-web/pull/52)
+  [`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
+  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
+  to package.json files
+
+- [#63](https://github.com/brighte-labs/spark-web/pull/63)
+  [`58a7284`](https://github.com/brighte-labs/spark-web/commit/58a728457bbbda86ac406a72d8ec4ad6c1c16630)
+  Thanks [@jordangeizer](https://github.com/jordangeizer)! - Patched loader
+  animation so that it doesn't disappear on last keyframe.
+
+- Updated dependencies
+  [[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e),
+  [`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)]:
+  - @spark-web/box@1.0.4
+  - @spark-web/icon@1.1.2
+  - @spark-web/utils@1.1.2
+
+## 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

@@ -4,13 +4,14 @@ storybookPath: feedback-overlays-spinner--default
 isExperimentalPackage: true
 ---
 
-Spinner indicates users that their request is in progress
+Spinner indicates to users that their request is in progress. In most cases
+[you should use the `loading` prop on a Button instead of using this component directly](/package/button#loading).
 
 ## Examples
 
 ### Tones
 
-The appearance of Spinner can be cutomised with the tone prop.
+The appearance of Spinner can be customised with the tone prop.
 
 Defaults to `primary`.
 
@@ -18,30 +19,49 @@ Defaults to `primary`.
 const tones = ['secondary', 'critical', 'positive', 'neutral'];
 
 return (
-  <Stack align="left" gap="xxlarge">
-    <Inline gap="xxlarge">
+  <Stack align="left" gap="large">
+    <Inline gap="large">
       {tones.map(tone => (
-        <Button tone={tone} prominence="low" key={tone}>
-          <Spinner />
-        </Button>
-      ))}
-    </Inline>
-    <Inline gap="xxlarge">
-      {tones.map(tone => (
-        <Button tone={tone} key={tone}>
-          <Spinner />
-        </Button>
-      ))}
-    </Inline>
-    <Inline gap="xxlarge">
-      {tones.map(tone => (
-        <Spinner tone={tone} key={tone} />
+        <Spinner key={tone} tone={tone} />
       ))}
     </Inline>
   </Stack>
 );
 ```
 
+```jsx live
+const backgrounds = [
+  // Light
+  ['surface', 'positiveLight', 'infoLight', 'cautionLight', 'criticalLight'],
+  // Dark
+  ['muted', 'positive', 'info', 'caution', 'critical'],
+];
+
+return (
+  <Stack gap="large">
+    {backgrounds.map((backgroundLightness, index) => (
+      <Inline key={index} gap="large">
+        {backgroundLightness.map(background => (
+          <Box
+            key={background}
+            background={background}
+            shadow="medium"
+            height="medium"
+            width="medium"
+            display="flex"
+            flexShrink={0}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <Spinner />
+          </Box>
+        ))}
+      </Inline>
+    ))}
+  </Stack>
+);
+```
+
 ## Size
 
 Spinners available in two size: `xxsmall` and `xsmall`.
@@ -49,23 +69,17 @@ 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>
+<Row gap="large">
+  <Spinner size="xxsmall" />
+  <Spinner size="xsmall" />
+</Row>
 ```
 
 ## 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.                            |
+<PropsTable displayName="Spinner" />
 
 [data-attribute-map]:
   https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

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

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

package/dist/declarations/src/{Spinner.d.ts → spinner.d.ts}

@@ -2,9 +2,11 @@
 import type { IconProps } from '@spark-web/icon';
 import type { DataAttributeMap } from '@spark-web/utils/internal';
 export declare type SpinnerProps = {
+    /** Provide a tone to influence elements of the field, and its input. */
     tone?: IconProps['tone'];
+    /** The size of the nested radios. */
     size?: 'xxsmall' | 'xsmall';
-    /** Allows setting of data attributes on the underlying element. */
+    /** Sets data attributes for the element. */
     data?: DataAttributeMap;
 };
 export declare function Spinner({ tone, size, data }: SpinnerProps): JSX.Element;

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

@@ -11,9 +11,9 @@ 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,
-      data = _ref.data;
+    _ref$size = _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();
@@ -61,7 +61,6 @@ var strokeDashAnimation = css.keyframes({
     strokeDashoffset: '-55px'
   }
 });
-
 function useSpinnerStyles() {
   return {
     animation: "".concat(spinAnimation, " 1.4s linear infinite"),

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

@@ -11,9 +11,9 @@ 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,
-      data = _ref.data;
+    _ref$size = _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();
@@ -61,7 +61,6 @@ var strokeDashAnimation = css.keyframes({
     strokeDashoffset: '-55px'
   }
 });
-
 function useSpinnerStyles() {
   return {
     animation: "".concat(spinAnimation, " 1.4s linear infinite"),

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

@@ -7,9 +7,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 function Spinner(_ref) {
   var tone = _ref.tone,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
-      data = _ref.data;
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xxsmall' : _ref$size,
+    data = _ref.data;
   var spinAnimationRef = useSynchronizedAnimation(spinAnimation);
   var strokeAnimationRef = useSynchronizedAnimation(strokeDashAnimation);
   var styles = useSpinnerStyles();
@@ -57,7 +57,6 @@ var strokeDashAnimation = keyframes({
     strokeDashoffset: '-55px'
   }
 });
-
 function useSpinnerStyles() {
   return {
     animation: "".concat(spinAnimation, " 1.4s linear infinite"),

package/package.json

@@ -1,23 +1,30 @@
 {
   "name": "@spark-web/spinner",
-  "version": "1.0.7",
-  "license": "MIT",
+  "version": "1.1.0",
+  "homepage": "https://github.com/brighte-labs/spark-web#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brighte-labs/spark-web.git",
+    "directory": "packages/spinner"
+  },
   "main": "dist/spark-web-spinner.cjs.js",
   "module": "dist/spark-web-spinner.esm.js",
   "files": [
-    "dist"
+    "CHANGELOG.md",
+    "dist",
+    "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.19.0",
     "@emotion/css": "^11.9.0",
-    "@spark-web/a11y": "^1.3.1",
-    "@spark-web/box": "^1.0.9",
-    "@spark-web/icon": "^1.2.1",
-    "@spark-web/utils": "^1.2.2"
+    "@spark-web/a11y": "^1.4.0",
+    "@spark-web/box": "^1.2.0",
+    "@spark-web/icon": "^1.3.0",
+    "@spark-web/utils": "^1.3.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2"