@automattic/vip-design-system 1.2.2 → 1.3.0

package/.eslintignore

@@ -4,4 +4,5 @@ coverage
 flow-typed
 jest_0
 node_modules
-storybook-static
+storybook-static
+tokens/

package/.prettierignore

@@ -3,3 +3,4 @@ coverage
 node_modules
 storybook-static
 src/system/theme/generated
+tokens/

package/.storybook/decorators/withBoundingBox.tsx

@@ -1,11 +1,37 @@
 import React from 'react';
 import { makeDecorator } from '@storybook/addons';
-import { Box, Heading } from '../../src/system';
+import { Box } from '../../src/system';
+import { Global, css } from '@emotion/react';
 
 export default makeDecorator( {
 	name: 'withBoundingBox',
 	parameterName: 'colorMode2',
-	wrapper: storyFn => {
-		return <Box sx={ { p: 3 } }>{ storyFn() }</Box>;
-	},
+	wrapper: storyFn => (
+		<>
+			<Global
+				styles={ css`
+					@font-face {
+						font-family: 'recoletaregular';
+						src: url( 'https://dashboard.wpvip.com/fonts/recoleta-regular-webfont.eot' );
+						src: url( 'https://dashboard.wpvip.com/fonts/recoleta-regular-webfont.eot?#iefix' )
+								format( 'embedded-opentype' ),
+							url( 'https://dashboard.wpvip.com/fonts/recoleta-regular-webfont.woff2' )
+								format( 'woff2' ),
+							url( 'https://dashboard.wpvip.com/fonts/recoleta-regular-webfont.woff' )
+								format( 'woff' ),
+							url( 'https://dashboard.wpvip.com/fonts/recoleta-regular-webfont.ttf' )
+								format( 'truetype' ),
+							url( 'https://dashboard.wpvip.com/fonts/recoleta-regular-webfont.svg#recoletaregular' )
+								format( 'svg' );
+						font-weight: normal;
+						font-style: normal;
+					}
+					body {
+						backgroundcolor: '#fbfbfb';
+					}
+				` }
+			/>
+			<Box sx={ { p: 3 } }>{ storyFn() }</Box>
+		</>
+	),
 } );

package/.storybook/decorators/withColorMode.tsx

@@ -9,16 +9,16 @@ import { useColorMode } from 'theme-ui';
 /**
  * Internal dependencies
  */
-import ThemeBuilder from '../../src/system/theme/getColor';
+import ThemeBuilder from '../../src/system/theme/getPropValue';
 
 import Valet from '../../src/system/theme/generated/valet-theme-light.json';
 import ValetDark from '../../src/system/theme/generated/valet-theme-dark.json';
-const { getColor } = ThemeBuilder( Valet );
-const { getColor: getColorDark } = ThemeBuilder( ValetDark );
+const { getPropValue } = ThemeBuilder( Valet );
+const { getPropValue: getPropValueDark } = ThemeBuilder( ValetDark );
 
 // These need to be updated to import VIP design tokens;
-const lightBackground = getColor( 'background', 'primary' );
-const darkBackground = getColorDark( 'background', 'primary' );
+const lightBackground = getPropValue( 'background', 'primary' );
+const darkBackground = getPropValueDark( 'background', 'primary' );
 
 export const backgrounds = {
 	default: 'Light',

package/CONTRIBUTING.md

@@ -43,7 +43,7 @@ You need to update the tokens once the VIP Design System updates the core files.
 
 We use the VIP Design System Tokens as our base theme structure. All colors, spaces, types should come from a dynamic token system provided by the VIP Design team, currently using Figma as the design software. When the design system is updated by the Design team, they push a file to the root of this repository: `tokens/valet-core.json`.
 
-By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-productive-color`, and the dark theme is called `wpvip-productive-color-dark`.
+By using the [Token Transformer](https://docs.tokens.studio/sync/github#7-how-to-use-tokens-stored-in-github-in-development) and a custom npm script, we parse this file getting only the VIP Dashboard theme we need for the react components. The light theme is called: `wpvip-product-core`, and the dark theme is called `wpvip-product-dark`.
 
 Once the new file is updated, we need to generate a custom theme file in `src/generated/valet-theme-light.json`. This operation generates a small json file with the colors we need already filled in.
 

package/build/system/Accordion/Accordion.js

@@ -56,12 +56,12 @@ var Item = exports.Item = function Item(_ref) {
       borderColor: 'borders.2',
       '&:first-of-type': {
         borderTopWidth: '1px',
-        borderTopLeftRadius: 4,
-        borderTopRightRadius: 4
+        borderTopLeftRadius: 1,
+        borderTopRightRadius: 1
       },
       '&:last-child': {
-        borderBottomLeftRadius: 4,
-        borderBottomRightRadius: 4
+        borderBottomLeftRadius: 1,
+        borderBottomRightRadius: 1
       },
       '&:focus-within': function focusWithin(theme) {
         return theme.outline;
@@ -97,7 +97,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react["default"].forwardRef(functi
         alignItems: 'center',
         justifyContent: 'space-between',
         fontSize: 1,
-        fontWeight: 600,
+        fontWeight: 'bold',
         '&[data-state="closed"]': {
           backgroundColor: 'accordion.background.closed'
         },
@@ -193,7 +193,7 @@ var Root = exports.Root = /*#__PURE__*/_react["default"].forwardRef(function (_r
     type: "single",
     ref: forwardRef,
     sx: _extends({
-      borderRadius: 6
+      borderRadius: 2
     }, sx)
   }, props, {
     children: children

package/build/system/Accordion/Accordion.stories.js

@@ -74,7 +74,7 @@ var WithLargeText = exports.WithLargeText = function WithLargeText() {
   return (0, _jsxRuntime.jsx)(_.Box, {
     sx: {
       '.vip-heading-component > button': {
-        fontSize: '25px'
+        fontSize: 4
       }
     },
     children: (0, _jsxRuntime.jsx)(ExampleAccordion, {})

package/build/system/Accordion/Accordion.test.js

@@ -10,11 +10,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                        * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                                                                        */ /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                            * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                                                                            */
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } // TODO: Fix this
+/* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-nocheck
+/** @jsxImportSource theme-ui */ /**
+                                  * External dependencies
+                                  */ /**
+                                      * Internal dependencies
+                                      */
 var renderWithTheme = function renderWithTheme(children) {
   return (0, _react.render)((0, _jsxRuntime.jsx)(_themeUi.ThemeUIProvider, {
     theme: _.theme,

package/build/system/Avatar/Avatar.js

@@ -28,7 +28,7 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
     sx: {
-      borderRadius: 9999,
+      borderRadius: '100%',
       height: size + 2,
       // +2 to compensate padding on both sides
       width: size + 2,
@@ -42,6 +42,7 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       justifyContent: 'center',
       color: 'white',
       padding: '1px',
+      // this should probably be replaced with a token
       textAlign: 'center'
     },
     className: (0, _classnames["default"])('vip-avatar-component', className),
@@ -52,7 +53,7 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       src: src,
       alt: "Avatar image from " + name,
       sx: {
-        borderRadius: 9999,
+        borderRadius: '100%',
         width: '100%',
         display: 'block'
       }

package/build/system/Badge/Badge.js

@@ -27,6 +27,7 @@ var Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     sx: _extends({
       fontSize: 0,
       padding: 0,
+      // do we need padding declared twice here?
       bg: "tag." + variant + ".background",
       color: "tag." + variant + ".text",
       py: 1,

package/build/system/Button/Button.d.ts

@@ -4,9 +4,20 @@
 import React from 'react';
 import { ButtonProps as ThemeButtonProps } from 'theme-ui';
 type ButtonClickType = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+export declare enum ButtonVariant {
+    'danger' = 0,
+    'display' = 1,
+    'ghost' = 2,
+    'icon' = 3,
+    'primary' = 4,
+    'secondary' = 5,
+    'tertiary' = 6,
+    'text' = 7
+}
 export interface ButtonProps extends ThemeButtonProps {
     disabled?: boolean;
     onClick?: (event: ButtonClickType) => void;
+    variant?: keyof typeof ButtonVariant;
 }
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/build/system/Button/Button.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Button = void 0;
+exports.ButtonVariant = exports.Button = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _themeUi = require("theme-ui");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -15,6 +15,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ButtonVariant = exports.ButtonVariant = /*#__PURE__*/function (ButtonVariant) {
+  ButtonVariant[ButtonVariant["danger"] = 0] = "danger";
+  ButtonVariant[ButtonVariant["display"] = 1] = "display";
+  ButtonVariant[ButtonVariant["ghost"] = 2] = "ghost";
+  ButtonVariant[ButtonVariant["icon"] = 3] = "icon";
+  ButtonVariant[ButtonVariant["primary"] = 4] = "primary";
+  ButtonVariant[ButtonVariant["secondary"] = 5] = "secondary";
+  ButtonVariant[ButtonVariant["tertiary"] = 6] = "tertiary";
+  ButtonVariant[ButtonVariant["text"] = 7] = "text";
+  return ButtonVariant;
+}({});
 var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -46,8 +57,10 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
       },
       '&[aria-disabled="true"]': {
         opacity: 0.7,
+        backgroundColor: 'input.border.disabled',
+        color: 'texts.secondary',
         cursor: 'not-allowed',
-        pointerEvents: 'all'
+        pointerEvents: 'none'
       }
     }, sx)
   }, rest, {

package/build/system/Button/Button.stories.d.ts

@@ -3,6 +3,7 @@
  * External dependencies
  */
 import React from 'react';
+import { ButtonVariant } from '..';
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<import("./Button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -15,7 +16,7 @@ declare const _default: {
         };
         variant: {
             type: string;
-            options: string[];
+            options: (string | ButtonVariant)[];
         };
     };
     parameters: {

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

@@ -6,7 +6,6 @@ var _react = _interopRequireDefault(require("react"));
 var _bi = require("react-icons/bi");
 var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 var _ = require("..");
-var _variants = _interopRequireDefault(require("./variants"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */ /**
@@ -26,7 +25,7 @@ var _default = exports["default"] = {
     },
     variant: {
       type: 'select',
-      options: _variants["default"]
+      options: Object.values(_.ButtonVariant)
     }
   },
   parameters: {
@@ -76,6 +75,14 @@ var Template = function Template(args) {
       }
     }, args, {
       children: "Danger"
+    })), (0, _jsxRuntime.jsx)(_.Button, _extends({
+      variant: "primary",
+      disabled: true,
+      sx: {
+        ml: 2
+      }
+    }, args, {
+      children: "Disabled"
     })), (0, _jsxRuntime.jsx)(_.Button, _extends({
       variant: "text",
       sx: {

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

@@ -1,48 +1,75 @@
-/**
- * External dependencies
- */
-import { fireEvent, render, screen } from '@testing-library/react';
-import { axe } from 'jest-axe';
+"use strict";
 
-/**
- * Internal dependencies
- */
-import { Button } from './Button';
+var _react = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Button = require("./Button");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                       * External dependencies
+                                                                                                                                                                                                                                                                                                                                                                                                       */ /**
+                                                                                                                                                                                                                                                                                                                                                                                                           * Internal dependencies
+                                                                                                                                                                                                                                                                                                                                                                                                           */
+var BUTTON_TEXT = 'Button Text';
+describe('<Button />', function () {
+  it('renders the Button component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var onClick, _render, container, component;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          onClick = jest.fn(function () {});
+          _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Button.Button, {
+            onClick: onClick,
+            children: BUTTON_TEXT
+          })), container = _render.container;
+          component = _react.screen.getByText(BUTTON_TEXT);
+          expect(component).toBeInTheDocument();
+          _react.fireEvent.click(component);
+          expect(onClick).toHaveBeenCalledTimes(1);
 
-const BUTTON_TEXT = 'Button Text';
+          // Check for accessibility issues
+          _context.t0 = expect;
+          _context.next = 9;
+          return (0, _jestAxe.axe)(container);
+        case 9:
+          _context.t1 = _context.sent;
+          (0, _context.t0)(_context.t1).toHaveNoViolations();
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('renders the Button with disabled prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var onClick, _render2, container, component;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          onClick = jest.fn(function () {});
+          _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Button.Button, {
+            disabled: true,
+            onClick: onClick,
+            children: BUTTON_TEXT
+          })), container = _render2.container;
+          component = _react.screen.getByText(BUTTON_TEXT);
+          expect(component).toBeInTheDocument();
+          expect(component).toHaveAttribute('aria-disabled', 'true');
+          expect(component).not.toHaveAttribute('disabled');
+          _react.fireEvent.click(component);
+          expect(onClick).toHaveBeenCalledTimes(0);
 
-describe( '<Button />', () => {
-	it( 'renders the Button component', async () => {
-		const onClick = jest.fn( () => {} );
-		const { container } = render( <Button onClick={ onClick }>{ BUTTON_TEXT }</Button> );
-		const component = screen.getByText( BUTTON_TEXT );
-
-		expect( component ).toBeInTheDocument();
-
-		fireEvent.click( component );
-		expect( onClick ).toHaveBeenCalledTimes( 1 );
-
-		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
-	} );
-
-	it( 'renders the Button with disabled prop', async () => {
-		const onClick = jest.fn( () => {} );
-		const { container } = render(
-			<Button disabled onClick={ onClick }>
-				{ BUTTON_TEXT }
-			</Button>
-		);
-		const component = screen.getByText( BUTTON_TEXT );
-
-		expect( component ).toBeInTheDocument();
-		expect( component ).toHaveAttribute( 'aria-disabled', 'true' );
-		expect( component ).not.toHaveAttribute( 'disabled' );
-
-		fireEvent.click( component );
-		expect( onClick ).toHaveBeenCalledTimes( 0 );
-
-		// Check for accessibility issues
-		await expect( await axe( container ) ).toHaveNoViolations();
-	} );
-} );
+          // Check for accessibility issues
+          _context2.t0 = expect;
+          _context2.next = 11;
+          return (0, _jestAxe.axe)(container);
+        case 11:
+          _context2.t1 = _context2.sent;
+          (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Button/ButtonSubmit.d.ts

@@ -1,2 +1,18 @@
-export const ButtonSubmit: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * External dependencies
+ */
 import React from 'react';
+import { ButtonProps } from './Button';
+interface DefaultSpinnerProps {
+    color?: string;
+    size: number;
+}
+export interface ButtonSubmitProps extends ButtonProps {
+    label: React.ReactNode;
+    loading?: boolean;
+    loadingIcon?: (props: DefaultSpinnerProps) => JSX.Element;
+    loadingIconSize?: number;
+    show?: boolean;
+}
+export declare const ButtonSubmit: React.ForwardRefExoticComponent<Omit<ButtonSubmitProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/build/system/Button/ButtonSubmit.js

@@ -1,69 +1,62 @@
-/** @jsxImportSource theme-ui */
-
+"use strict";
+
+exports.__esModule = true;
+exports.ButtonSubmit = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("./Button");
+var _Spinner = require("../Spinner");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["show", "variant", "label", "loading", "disabled", "loadingIcon", "loadingIconSize"];
 /**
  * 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 './variants';
-
-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,
-};
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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.displayName = 'DefaultSpinner';
-
-export const ButtonSubmit = React.forwardRef(
-	(
-		{
-			show = true,
-			variant = variants[ 1 ],
-			label,
-			loading = false,
-			disabled = false,
-			loadingIcon = DefaultSpinner,
-			loadingIconSize = 20,
-			...rest
-		},
-		forwardRef
-	) => {
-		if ( ! show ) {
-			return null;
-		}
-
-		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: `button.${ variant }.label.default` } ) }
-			</Button>
-		);
-	}
-);
-
-ButtonSubmit.displayName = 'ButtonSubmit';
-
-ButtonSubmit.propTypes = {
-	label: PropTypes.node.isRequired,
-	disabled: PropTypes.bool,
-	loading: PropTypes.bool,
-	variant: PropTypes.oneOf( variants ),
-	show: PropTypes.bool,
-	loadingIcon: PropTypes.any,
-	loadingIconSize: PropTypes.number,
-};
+var ButtonSubmit = exports.ButtonSubmit = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
+  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,
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  if (!show) {
+    return null;
+  }
+  return (0, _jsxRuntime.jsxs)(_Button.Button, _extends({
+    ref: ref,
+    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: "button." + variant + ".label.default"
+    })]
+  }));
+});
+ButtonSubmit.displayName = 'ButtonSubmit';