@spark-web/button 1.0.1 → 1.1.0

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

@@ -4,37 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var a11y = require('@spark-web/a11y');
 var box = require('@spark-web/box');
+var spinner = require('@spark-web/spinner');
 var internal = require('@spark-web/utils/internal');
-var React = require('react');
+var react = require('react');
+var css = require('@emotion/css');
 var text = require('@spark-web/text');
 var jsxRuntime = require('react/jsx-runtime');
-var css = require('@emotion/css');
-var a11y = require('@spark-web/a11y');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
 var ts = require('@spark-web/utils/ts');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
 var variants = {
   high: {
     primary: {
@@ -179,32 +160,39 @@ var mapTokens = {
 
 var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var children = _ref.children,
+      isLoading = _ref.isLoading,
       prominence = _ref.prominence,
       size = _ref.size,
       tone = _ref.tone;
   var variant = variants[prominence][tone];
-  return React.Children.map(children, function (child) {
+  return react.Children.map(children, function (child) {
     if (typeof child === 'string') {
-      return /*#__PURE__*/jsxRuntime.jsx(text.Text, {
-        as: "span",
-        baseline: false,
-        overflowStrategy: "nowrap",
-        weight: "strong",
-        size: mapTokens.fontSize[size],
-        tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
-        children: child
+      return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
+        isLoading: isLoading,
+        children: /*#__PURE__*/jsxRuntime.jsx(text.Text, {
+          as: "span",
+          baseline: false,
+          overflowStrategy: "nowrap",
+          weight: "semibold",
+          size: mapTokens.fontSize[size],
+          tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
+          children: child
+        })
       });
     }
 
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        // Dismiss buttons need to be `xxsmall`
-        // For everything else, we force them to be `xsmall`
-        size: child.props.size === 'xxsmall' ? child.props.size : 'xsmall',
-        // If the button is low prominence with a decorative tone we want to force
-        // the tone to be the same as the button
-        // We also don't want users to override the tone of the icon inside of the button
-        tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+    if ( /*#__PURE__*/react.isValidElement(child)) {
+      return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
+        isLoading: isLoading,
+        children: /*#__PURE__*/react.cloneElement(child, {
+          // Dismiss buttons need to be `xxsmall`
+          // For everything else, we force them to be `xsmall`
+          size: child.props.size === 'xxsmall' ? child.props.size : 'xsmall',
+          // If the button is low prominence with a decorative tone we want to force
+          // the tone to be the same as the button
+          // We also don't want users to override the tone of the icon inside of the button
+          tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+        })
       });
     }
 
@@ -212,6 +200,17 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   });
 };
 
+function HiddenWhenLoading(_ref2) {
+  var children = _ref2.children,
+      isLoading = _ref2.isLoading;
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: isLoading ? css.css({
+      opacity: 0
+    }) : undefined,
+    children: children
+  });
+}
+
 function useButtonStyles(_ref) {
   var iconOnly = _ref.iconOnly,
       prominence = _ref.prominence,
@@ -269,13 +268,13 @@ function useButtonStyles(_ref) {
   return buttonStyleProps;
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "onClick", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
 
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
+var Button = /*#__PURE__*/react.forwardRef(function (_ref, ref) {
   var ariaControls = _ref['aria-controls'],
       ariaDescribedBy = _ref['aria-describedby'],
       ariaExpanded = _ref['aria-expanded'],
@@ -283,6 +282,8 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       id = _ref.id,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       onClick = _ref.onClick,
       _ref$prominence = _ref.prominence,
       prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
@@ -300,18 +301,17 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
     size: size,
     tone: tone,
     prominence: prominence
-  }); // TODO: add loading state for button
-
-  var isDisabled = disabled;
-  /* || loading */
-
+  });
+  var isDisabled = disabled || loading;
+  var isLoading = loading && !disabled;
+  var variant = variants[prominence][tone];
   /**
    * handle "disabled" behaviour w/o disabling buttons
    * @see https://axesslab.com/disabled-buttons-suck/
    */
 
   var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
@@ -323,14 +323,17 @@ var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
     ref: ref,
     type: type
   }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
-    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+    children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      isLoading: isLoading,
       prominence: prominence,
       size: size,
       tone: tone
-    }))
+    })), isLoading && /*#__PURE__*/jsxRuntime.jsx(Loading, {
+      tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+    })]
   }));
 });
-Button.displayName = 'Buttton';
+Button.displayName = 'Button';
 /**
  * Prevent click events when the component is "disabled".
  * Note: we don't want to actually disable a button element for several reasons.
@@ -347,6 +350,27 @@ function getPreventableClickHandler(onClick, disabled) {
   };
 }
 
+function Loading(_ref2) {
+  var tone = _ref2.tone;
+  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
+    as: "span",
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    children: [/*#__PURE__*/jsxRuntime.jsx(a11y.VisuallyHidden, {
+      children: "button loading indicator"
+    }), /*#__PURE__*/jsxRuntime.jsx(spinner.Spinner, {
+      size: "xsmall",
+      tone: tone
+    })]
+  });
+}
+
 var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
 
 /** The appearance of a `Button`, with the semantics of a link. */
@@ -366,9 +390,9 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
   var iconOnly = Boolean(props.label);
   var buttonStyleProps = useButtonStyles({
     iconOnly: iconOnly,
+    prominence: prominence,
     size: size,
-    tone: tone,
-    prominence: prominence
+    tone: tone
   });
   return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-label": props.label,
@@ -379,6 +403,7 @@ var ButtonLink = ts.forwardRefWithAs(function (_ref, ref) {
     ref: ref
   }, buttonStyleProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
     children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      isLoading: false,
       prominence: prominence,
       size: size,
       tone: tone

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

@@ -1,13 +1,13 @@
 import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Box } from '@spark-web/box';
+import { Spinner } from '@spark-web/spinner';
 import { buildDataAttributes } from '@spark-web/utils/internal';
-import * as React from 'react';
-import { Children, isValidElement, cloneElement } from 'react';
-import { Text } from '@spark-web/text';
-import { jsx } from 'react/jsx-runtime';
+import { Children, isValidElement, cloneElement, forwardRef } from 'react';
 import { css } from '@emotion/css';
-import { useFocusRing } from '@spark-web/a11y';
+import { Text } from '@spark-web/text';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useTheme } from '@spark-web/theme';
 import { useLinkComponent } from '@spark-web/link';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
@@ -156,32 +156,39 @@ var mapTokens = {
 
 var resolveButtonChildren = function resolveButtonChildren(_ref) {
   var children = _ref.children,
+      isLoading = _ref.isLoading,
       prominence = _ref.prominence,
       size = _ref.size,
       tone = _ref.tone;
   var variant = variants[prominence][tone];
   return Children.map(children, function (child) {
     if (typeof child === 'string') {
-      return /*#__PURE__*/jsx(Text, {
-        as: "span",
-        baseline: false,
-        overflowStrategy: "nowrap",
-        weight: "strong",
-        size: mapTokens.fontSize[size],
-        tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
-        children: child
+      return /*#__PURE__*/jsx(HiddenWhenLoading, {
+        isLoading: isLoading,
+        children: /*#__PURE__*/jsx(Text, {
+          as: "span",
+          baseline: false,
+          overflowStrategy: "nowrap",
+          weight: "semibold",
+          size: mapTokens.fontSize[size],
+          tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
+          children: child
+        })
       });
     }
 
     if ( /*#__PURE__*/isValidElement(child)) {
-      return /*#__PURE__*/cloneElement(child, {
-        // Dismiss buttons need to be `xxsmall`
-        // For everything else, we force them to be `xsmall`
-        size: child.props.size === 'xxsmall' ? child.props.size : 'xsmall',
-        // If the button is low prominence with a decorative tone we want to force
-        // the tone to be the same as the button
-        // We also don't want users to override the tone of the icon inside of the button
-        tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+      return /*#__PURE__*/jsx(HiddenWhenLoading, {
+        isLoading: isLoading,
+        children: /*#__PURE__*/cloneElement(child, {
+          // Dismiss buttons need to be `xxsmall`
+          // For everything else, we force them to be `xsmall`
+          size: child.props.size === 'xxsmall' ? child.props.size : 'xsmall',
+          // If the button is low prominence with a decorative tone we want to force
+          // the tone to be the same as the button
+          // We also don't want users to override the tone of the icon inside of the button
+          tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+        })
       });
     }
 
@@ -189,6 +196,17 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
   });
 };
 
+function HiddenWhenLoading(_ref2) {
+  var children = _ref2.children,
+      isLoading = _ref2.isLoading;
+  return /*#__PURE__*/jsx("span", {
+    className: isLoading ? css({
+      opacity: 0
+    }) : undefined,
+    children: children
+  });
+}
+
 function useButtonStyles(_ref) {
   var iconOnly = _ref.iconOnly,
       prominence = _ref.prominence,
@@ -246,13 +264,13 @@ function useButtonStyles(_ref) {
   return buttonStyleProps;
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "onClick", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
 
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var ariaControls = _ref['aria-controls'],
       ariaDescribedBy = _ref['aria-describedby'],
       ariaExpanded = _ref['aria-expanded'],
@@ -260,6 +278,8 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       id = _ref.id,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
       onClick = _ref.onClick,
       _ref$prominence = _ref.prominence,
       prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
@@ -277,18 +297,17 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: size,
     tone: tone,
     prominence: prominence
-  }); // TODO: add loading state for button
-
-  var isDisabled = disabled;
-  /* || loading */
-
+  });
+  var isDisabled = disabled || loading;
+  var isLoading = loading && !disabled;
+  var variant = variants[prominence][tone];
   /**
    * handle "disabled" behaviour w/o disabling buttons
    * @see https://axesslab.com/disabled-buttons-suck/
    */
 
   var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
     "aria-disabled": isDisabled,
@@ -300,14 +319,17 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     type: type
   }, buttonStyleProps), data ? buildDataAttributes(data) : undefined), {}, {
-    children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+    children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      isLoading: isLoading,
       prominence: prominence,
       size: size,
       tone: tone
-    }))
+    })), isLoading && /*#__PURE__*/jsx(Loading, {
+      tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+    })]
   }));
 });
-Button.displayName = 'Buttton';
+Button.displayName = 'Button';
 /**
  * Prevent click events when the component is "disabled".
  * Note: we don't want to actually disable a button element for several reasons.
@@ -324,6 +346,27 @@ function getPreventableClickHandler(onClick, disabled) {
   };
 }
 
+function Loading(_ref2) {
+  var tone = _ref2.tone;
+  return /*#__PURE__*/jsxs(Box, {
+    as: "span",
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    children: [/*#__PURE__*/jsx(VisuallyHidden, {
+      children: "button loading indicator"
+    }), /*#__PURE__*/jsx(Spinner, {
+      size: "xsmall",
+      tone: tone
+    })]
+  });
+}
+
 var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
 
 /** The appearance of a `Button`, with the semantics of a link. */
@@ -343,9 +386,9 @@ var ButtonLink = forwardRefWithAs(function (_ref, ref) {
   var iconOnly = Boolean(props.label);
   var buttonStyleProps = useButtonStyles({
     iconOnly: iconOnly,
+    prominence: prominence,
     size: size,
-    tone: tone,
-    prominence: prominence
+    tone: tone
   });
   return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread(_objectSpread({
     "aria-label": props.label,
@@ -356,6 +399,7 @@ var ButtonLink = forwardRefWithAs(function (_ref, ref) {
     ref: ref
   }, buttonStyleProps), data ? buildDataAttributes(data) : undefined), {}, {
     children: resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      isLoading: false,
       prominence: prominence,
       size: size,
       tone: tone

package/package.json

@@ -1,24 +1,31 @@
 {
   "name": "@spark-web/button",
+  "version": "1.1.0",
   "license": "MIT",
-  "version": "1.0.1",
   "main": "dist/spark-web-button.cjs.js",
   "module": "dist/spark-web-button.esm.js",
-  "devDependencies": {
-    "@types/react": "^17.0.12"
-  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@emotion/css": "^11.7.1",
-    "@spark-web/a11y": "^1.0.1",
-    "@spark-web/box": "^1.0.1",
-    "@spark-web/icon": "^1.0.1",
-    "@spark-web/link": "^1.0.1",
-    "@spark-web/text": "^1.0.1",
-    "@spark-web/theme": "^2.0.0",
-    "@spark-web/utils": "^1.0.1",
+    "@spark-web/a11y": "^1.0.4",
+    "@spark-web/box": "^1.0.4",
+    "@spark-web/icon": "^1.1.2",
+    "@spark-web/link": "^1.0.4",
+    "@spark-web/spinner": "^1.0.1",
+    "@spark-web/text": "^1.0.4",
+    "@spark-web/theme": "^3.0.0",
+    "@spark-web/utils": "^1.1.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.12",
     "react": "^17.0.2"
   },
+  "peerDependencies": {
+    "react": ">=17.0.2"
+  },
   "engines": {
     "node": ">= 14.13"
   }

package/CHANGELOG.md

@@ -1,41 +0,0 @@
-# @spark-web/button
-
-## 1.0.1
-
-### Patch Changes
-
-- [#36](https://github.com/brighte-labs/spark-web/pull/36)
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
-  config
-
-- Updated dependencies
-  [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
-  - @spark-web/theme@2.0.0
-  - @spark-web/a11y@1.0.1
-  - @spark-web/box@1.0.1
-  - @spark-web/icon@1.0.1
-  - @spark-web/link@1.0.1
-  - @spark-web/text@1.0.1
-  - @spark-web/utils@1.0.1
-
-## 1.0.0
-
-### Major Changes
-
-- [#27](https://github.com/brighte-labs/spark-web/pull/27)
-  [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
-  Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
-
-### Patch Changes
-
-- Updated dependencies
-  [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
-  - @spark-web/a11y@1.0.0
-  - @spark-web/box@1.0.0
-  - @spark-web/icon@1.0.0
-  - @spark-web/link@1.0.0
-  - @spark-web/text@1.0.0
-  - @spark-web/theme@1.0.0
-  - @spark-web/utils@1.0.0

package/src/Button.stories.tsx

@@ -1,34 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import type { ButtonProps } from './Button';
-import { Button } from './Button';
-
-export default {
-  title: 'Forms / Buttons / Button',
-  component: Button,
-} as ComponentMeta<typeof Button>;
-
-const ButtonStory: ComponentStory<typeof Button> = (args: ButtonProps) => (
-  <Button {...args} />
-);
-export const Default = ButtonStory.bind({});
-export const Tone = ButtonStory.bind({});
-export const Disabled = ButtonStory.bind({});
-
-Default.args = {
-  children: 'Click me!',
-  tone: 'primary',
-  onClick: () => window.alert('Clicked!'),
-} as ButtonProps;
-
-Tone.args = {
-  children: 'Click me!',
-  tone: 'critical',
-  onClick: () => window.alert('Clicked!'),
-} as ButtonProps;
-
-Disabled.args = {
-  children: 'Click me!',
-  disabled: true,
-  onClick: () => window.alert('Clicked!'),
-} as ButtonProps;

package/src/Button.test.tsx

@@ -1,34 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/react';
-
-import { Button } from './Button';
-
-describe('button component', () => {
-  afterEach(cleanup);
-
-  it('should show a button with expected text', () => {
-    render(<Button>Test Button</Button>);
-
-    screen.getByText('Test Button');
-  });
-
-  it('should trigger button onClick function', () => {
-    const jsfn = jest.fn();
-
-    render(<Button onClick={jsfn}>Test Button</Button>);
-    screen.getByText('Test Button').click();
-
-    expect(jsfn).toBeCalled();
-  });
-
-  it('Build expected data attribute', () => {
-    const { container } = render(
-      <Button data={{ button: 'test-value' }} id="test-button">
-        More Test Text
-      </Button>
-    );
-
-    expect(container.querySelector('[data-button="test-value"]')?.id).toEqual(
-      'test-button'
-    );
-  });
-});