@automattic/vip-design-system 0.28.6 → 0.28.7

package/build/system/Button/Button.js

@@ -62,11 +62,11 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }
-    }, sx),
+    }, sx)
+  }, props, {
     "aria-disabled": disabled,
+    onClick: handleOnClick,
     className: (0, _classnames["default"])('vip-button-component', props.className),
-    onClick: handleOnClick
-  }, props, {
     ref: forwardRef
   }));
 });

package/build/system/Button/Button.stories.js

@@ -15,6 +15,8 @@ var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _ = require("..");
 
+var _2 = require(".");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /**
@@ -36,7 +38,7 @@ var _default = {
     },
     variant: {
       type: 'select',
-      options: ['primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display']
+      options: _2.variants
     }
   }
 };

package/build/system/Button/ButtonSubmit.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.ButtonSubmit = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = require("./Button");
+
+var _Spinner = require("../Spinner");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ = require(".");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["show", "variant", "label", "loading", "disabled", "loadingIcon", "loadingIconSize", "loadingIconColor"];
+
+var DefaultSpinner = function DefaultSpinner(_ref) {
+  var size = _ref.size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'link' : _ref$color;
+  return (0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+    size: size,
+    sx: {
+      ml: 2,
+      color: color
+    },
+    className: "vip-button-submit-spinner"
+  });
+};
+
+DefaultSpinner.propTypes = {
+  size: _propTypes["default"].number,
+  color: _propTypes["default"].string
+};
+DefaultSpinner.displayName = 'DefaultSpinner';
+
+var ButtonSubmit = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var _ref2$show = _ref2.show,
+      show = _ref2$show === void 0 ? true : _ref2$show,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'secondary' : _ref2$variant,
+      label = _ref2.label,
+      _ref2$loading = _ref2.loading,
+      loading = _ref2$loading === void 0 ? false : _ref2$loading,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$loadingIcon = _ref2.loadingIcon,
+      loadingIcon = _ref2$loadingIcon === void 0 ? DefaultSpinner : _ref2$loadingIcon,
+      _ref2$loadingIconSize = _ref2.loadingIconSize,
+      loadingIconSize = _ref2$loadingIconSize === void 0 ? 20 : _ref2$loadingIconSize,
+      _ref2$loadingIconColo = _ref2.loadingIconColor,
+      loadingIconColor = _ref2$loadingIconColo === void 0 ? undefined : _ref2$loadingIconColo,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
+
+  if (!show) {
+    return null;
+  }
+
+  if (!loadingIconColor && variant === 'display') {
+    loadingIconColor = 'button.display.label.default';
+  }
+
+  return (0, _jsxRuntime.jsxs)(_Button.Button, (0, _extends2["default"])({
+    ref: forwardRef,
+    className: (0, _classnames["default"])('vip-button-submit-component', "vip-button-submit-" + variant),
+    disabled: disabled || loading,
+    variant: variant,
+    "aria-busy": loading
+  }, rest, {
+    children: [label, ' ', !!loading && loadingIcon({
+      size: loadingIconSize,
+      color: loadingIconColor
+    })]
+  }));
+});
+
+exports.ButtonSubmit = ButtonSubmit;
+ButtonSubmit.displayName = 'ButtonSubmit';
+ButtonSubmit.propTypes = {
+  label: _propTypes["default"].string.isRequired,
+  disabled: _propTypes["default"].bool,
+  loading: _propTypes["default"].bool,
+  variant: _propTypes["default"].oneOf(_.variants),
+  show: _propTypes["default"].bool,
+  loadingIcon: _propTypes["default"].any,
+  loadingIconSize: _propTypes["default"].number,
+  loadingIconColor: _propTypes["default"].string
+};

package/build/system/Button/ButtonSubmit.stories.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _2 = require(".");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'ButtonSubmit',
+  component: _.ButtonSubmit,
+  argTypes: {
+    label: {
+      defaultValue: 'Load more items'
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+        defaultValue: true
+      }
+    },
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    show: {
+      control: {
+        type: 'boolean',
+        "default": true
+      }
+    },
+    variant: {
+      type: 'select',
+      options: _2.variants
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
+    children: _2.variants.map(function (v) {
+      return (0, _jsxRuntime.jsx)(_.ButtonSubmit, (0, _extends2["default"])({
+        sx: {
+          m: 3
+        },
+        variant: v
+      }, args), v);
+    })
+  });
+};
+
+var Default = Template.bind({});
+exports.Default = Default;

package/build/system/Button/ButtonSubmit.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _ButtonSubmit = require("./ButtonSubmit");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultProps = {
+  label: 'Load more items'
+};
+describe('<ButtonSubmit />', function () {
+  it('renders the ButtonSubmit component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_ButtonSubmit.ButtonSubmit, (0, _extends2["default"])({}, defaultProps))), container = _render.container;
+            expect(_react.screen.getByRole('button', {
+              label: 'Load more items'
+            })).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the ButtonSubmit loading', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var button;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            (0, _react.render)((0, _jsxRuntime.jsx)(_ButtonSubmit.ButtonSubmit, (0, _extends2["default"])({}, defaultProps, {
+              loading: true
+            })));
+            button = _react.screen.getByRole('button', {
+              label: 'Load more items'
+            }); // Button
+
+            expect(button).toHaveAttribute('aria-disabled', 'true'); // Spinner
+
+            expect(_react.screen.getByTitle('Loading...')).toBeInTheDocument();
+
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Button/index.js

@@ -1,7 +1,18 @@
 "use strict";
 
 exports.__esModule = true;
+exports.variants = void 0;
 
 var _Button = require("./Button");
 
-exports.Button = _Button.Button;
+exports.Button = _Button.Button;
+
+var _ButtonSubmit = require("./ButtonSubmit");
+
+exports.ButtonSubmit = _ButtonSubmit.ButtonSubmit;
+
+/**
+ * Internal dependencies
+ */
+var variants = ['primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display'];
+exports.variants = variants;

package/build/system/Spinner/Spinner.js

@@ -19,18 +19,20 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx", "className"];
+var _excluded = ["sx", "className", "color"];
 
 var Spinner = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'icon.helper' : _ref$color,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Spinner, (0, _extends2["default"])({
     strokeWidth: 2,
     sx: {
       fill: 'none',
-      color: 'link'
+      color: color
     },
     className: (0, _classnames["default"])('vip-spinner-component', className),
     ref: forwardRef
@@ -41,5 +43,6 @@ exports.Spinner = Spinner;
 Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   sx: _propTypes["default"].object,
-  className: _propTypes["default"].any
+  className: _propTypes["default"].any,
+  color: _propTypes["default"].string
 };

package/build/system/index.js

@@ -24,6 +24,7 @@ exports.Box = _Box.Box;
 var _Button = require("./Button");
 
 exports.Button = _Button.Button;
+exports.ButtonSubmit = _Button.ButtonSubmit;
 
 var _Card = require("./Card");
 

package/build/system/theme/index.js

@@ -235,6 +235,19 @@ var _default = {
         borderColor: 'button.tertiary.border.hover'
       }
     },
+    display: {
+      variant: 'buttons.primary',
+      color: 'button.display.label.default',
+      bg: 'button.display.background.default',
+      border: '1px solid',
+      borderColor: 'transparent',
+      '&:hover, &:focus': {
+        backgroundColor: 'button.display.background.hover',
+        color: 'button.display.label.hover',
+        border: '1px solid',
+        borderColor: 'transparent'
+      }
+    },
     ghost: {
       variant: 'buttons.primary',
       color: 'button.ghost.label.default',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.28.6",
+	"version": "0.28.7",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Button/Button.js

@@ -43,10 +43,10 @@ const Button = React.forwardRef( ( { disabled, onClick, sx, ...props }, forwardR
 				},
 				...sx,
 			} }
+			{ ...props }
 			aria-disabled={ disabled }
-			className={ classNames( 'vip-button-component', props.className ) }
 			onClick={ handleOnClick }
-			{ ...props }
+			className={ classNames( 'vip-button-component', props.className ) }
 			ref={ forwardRef }
 		/>
 	);

package/src/system/Button/Button.stories.jsx

@@ -9,6 +9,7 @@ import { BiCalendarHeart } from 'react-icons/bi';
  */
 import ScreenReaderText from '../ScreenReaderText';
 import { Button } from '..';
+import { variants } from '.';
 
 export default {
 	title: 'Button',
@@ -20,7 +21,7 @@ export default {
 		},
 		variant: {
 			type: 'select',
-			options: [ 'primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display' ],
+			options: variants,
 		},
 	},
 };

package/src/system/Button/ButtonSubmit.js

@@ -0,0 +1,74 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from './Button';
+import { Spinner } from '../Spinner';
+import classNames from 'classnames';
+import { variants } from '.';
+
+const DefaultSpinner = ( { size, color = 'link' } ) => (
+	<Spinner size={ size } sx={ { ml: 2, color } } className="vip-button-submit-spinner" />
+);
+
+DefaultSpinner.propTypes = {
+	size: PropTypes.number,
+	color: PropTypes.string,
+};
+
+DefaultSpinner.displayName = 'DefaultSpinner';
+
+export const ButtonSubmit = React.forwardRef(
+	(
+		{
+			show = true,
+			variant = 'secondary',
+			label,
+			loading = false,
+			disabled = false,
+			loadingIcon = DefaultSpinner,
+			loadingIconSize = 20,
+			loadingIconColor = undefined,
+			...rest
+		},
+		forwardRef
+	) => {
+		if ( ! show ) {
+			return null;
+		}
+
+		if ( ! loadingIconColor && variant === 'display' ) {
+			loadingIconColor = 'button.display.label.default';
+		}
+
+		return (
+			<Button
+				ref={ forwardRef }
+				className={ classNames( 'vip-button-submit-component', `vip-button-submit-${ variant }` ) }
+				disabled={ disabled || loading }
+				variant={ variant }
+				aria-busy={ loading }
+				{ ...rest }
+			>
+				{ label }{ ' ' }
+				{ !! loading && loadingIcon( { size: loadingIconSize, color: loadingIconColor } ) }
+			</Button>
+		);
+	}
+);
+
+ButtonSubmit.displayName = 'ButtonSubmit';
+
+ButtonSubmit.propTypes = {
+	label: PropTypes.string.isRequired,
+	disabled: PropTypes.bool,
+	loading: PropTypes.bool,
+	variant: PropTypes.oneOf( variants ),
+	show: PropTypes.bool,
+	loadingIcon: PropTypes.any,
+	loadingIconSize: PropTypes.number,
+	loadingIconColor: PropTypes.string,
+};

package/src/system/Button/ButtonSubmit.stories.jsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { ButtonSubmit } from '..';
+import { variants } from '.';
+
+export default {
+	title: 'ButtonSubmit',
+	component: ButtonSubmit,
+	argTypes: {
+		label: { defaultValue: 'Load more items' },
+		loading: {
+			control: { type: 'boolean', defaultValue: true },
+		},
+		disabled: {
+			control: { type: 'boolean' },
+		},
+		show: {
+			control: { type: 'boolean', default: true },
+		},
+		variant: {
+			type: 'select',
+			options: variants,
+		},
+	},
+};
+
+const Template = args => (
+	<React.Fragment>
+		{ variants.map( v => (
+			<ButtonSubmit sx={ { m: 3 } } key={ v } variant={ v } { ...args } />
+		) ) }
+	</React.Fragment>
+);
+
+export const Default = Template.bind( {} );

package/src/system/Button/ButtonSubmit.test.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { ButtonSubmit } from './ButtonSubmit';
+
+const defaultProps = {
+	label: 'Load more items',
+};
+
+describe( '<ButtonSubmit />', () => {
+	it( 'renders the ButtonSubmit component', async () => {
+		const { container } = render( <ButtonSubmit { ...defaultProps } /> );
+
+		expect( screen.getByRole( 'button', { label: 'Load more items' } ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the ButtonSubmit loading', async () => {
+		render( <ButtonSubmit { ...defaultProps } loading={ true } /> );
+		const button = screen.getByRole( 'button', { label: 'Load more items' } );
+
+		// Button
+		expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		// Spinner
+		expect( screen.getByTitle( 'Loading...' ) ).toBeInTheDocument();
+	} );
+} );

package/src/system/Button/index.js

@@ -1,6 +1,19 @@
 /**
  * Internal dependencies
  */
+
+const variants = [
+	'primary',
+	'secondary',
+	'text',
+	'icon',
+	'tertiary',
+	'ghost',
+	'danger',
+	'display',
+];
+
 import { Button } from './Button';
+import { ButtonSubmit } from './ButtonSubmit';
 
-export { Button };
+export { Button, ButtonSubmit, variants };

package/src/system/Spinner/Spinner.js

@@ -8,24 +8,27 @@ import { Spinner as ThemeSpinner } from 'theme-ui';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Spinner = React.forwardRef( ( { sx, className = null, ...props }, forwardRef ) => (
-	<ThemeSpinner
-		strokeWidth={ 2 }
-		sx={ {
-			fill: 'none',
-			color: 'link',
-		} }
-		className={ classNames( 'vip-spinner-component', className ) }
-		ref={ forwardRef }
-		{ ...props }
-	/>
-) );
+const Spinner = React.forwardRef(
+	( { sx, className = null, color = 'icon.helper', ...props }, forwardRef ) => (
+		<ThemeSpinner
+			strokeWidth={ 2 }
+			sx={ {
+				fill: 'none',
+				color,
+			} }
+			className={ classNames( 'vip-spinner-component', className ) }
+			ref={ forwardRef }
+			{ ...props }
+		/>
+	)
+);
 
 Spinner.displayName = 'Spinner';
 
 Spinner.propTypes = {
 	sx: PropTypes.object,
 	className: PropTypes.any,
+	color: PropTypes.string,
 };
 
 export { Spinner };

package/src/system/index.js

@@ -5,7 +5,7 @@ import { Avatar } from './Avatar';
 import { Badge } from './Badge';
 import { BlankState } from './BlankState';
 import { Box } from './Box';
-import { Button } from './Button';
+import { Button, ButtonSubmit } from './Button';
 import { Card } from './Card';
 import { Code } from './Code';
 import {
@@ -63,6 +63,7 @@ export {
 	Box,
 	BlankState,
 	Button,
+	ButtonSubmit,
 	Card,
 	Checkbox,
 	Code,

package/src/system/theme/index.js

@@ -291,6 +291,21 @@ export default {
 			},
 		},
 
+		display: {
+			variant: 'buttons.primary',
+			color: 'button.display.label.default',
+			bg: 'button.display.background.default',
+			border: '1px solid',
+			borderColor: 'transparent',
+
+			'&:hover, &:focus': {
+				backgroundColor: 'button.display.background.hover',
+				color: 'button.display.label.hover',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
+		},
+
 		ghost: {
 			variant: 'buttons.primary',
 			color: 'button.ghost.label.default',