@automattic/vip-design-system 0.19.1 → 0.20.0

package/README.md

@@ -102,3 +102,15 @@ git push origin trunk
 ```
 
 8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
+
+### Troubleshooting
+
+### Dialog + Dropdown usage
+
+If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
+
+```css
+div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
+	opacity: 0;
+}
+```

package/build/system/Button/Button.js

@@ -32,6 +32,10 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
       justifyContent: 'center',
       height: '36px',
       py: 0,
+      textDecoration: props != null && props.to ? 'underline' : 'none',
+      '&:hover': {
+        textDecoration: 'none'
+      },
       '&:focus': function focus(theme) {
         return theme.outline;
       },
@@ -54,5 +58,6 @@ exports.Button = Button;
 Button.displayName = 'Button';
 Button.propTypes = {
   sx: _propTypes["default"].object,
+  to: _propTypes["default"].any,
   className: _propTypes["default"].any
 };

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

@@ -37,6 +37,14 @@ var Default = function Default() {
         ml: 2
       },
       children: "Secondary"
+    }), (0, _jsxRuntime.jsx)(_.Button, {
+      variant: "text",
+      sx: {
+        ml: 2
+      },
+      as: "a",
+      href: "https://google/com",
+      children: "Button link"
     })]
   });
 };

package/build/system/Heading/Heading.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +21,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "sx", "className"];
 
-var Heading = function Heading(_ref) {
+var Heading = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
       sx = _ref.sx,
@@ -33,11 +35,13 @@ var Heading = function Heading(_ref) {
       // pass variant prop to sx
       variant: "text." + variant
     }, sx),
-    className: (0, _classnames["default"])('vip-heading-component', className)
+    className: (0, _classnames["default"])('vip-heading-component', className),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Heading = Heading;
+Heading.displayName = 'Heading';
 Heading.propTypes = {
   variant: _propTypes["default"].string,
   sx: _propTypes["default"].object,

package/build/system/Heading/Heading.stories.js

@@ -33,9 +33,6 @@ var Default = function Default() {
     }), (0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h5",
       children: "Heading Five"
-    }), (0, _jsxRuntime.jsx)(_.Heading, {
-      variant: "caps",
-      children: "Heading Caps"
     })]
   });
 };

package/build/system/Link/Link.js

@@ -34,7 +34,8 @@ var Link = function Link(_ref) {
         color: 'links.active'
       },
       '&:hover, &:focus': {
-        color: 'links.hover'
+        color: 'links.hover',
+        textDecoration: 'none'
       },
       '&:focus': function focus(theme) {
         return theme.outline;

package/build/system/NewForm/FormSelect.test.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -38,6 +38,15 @@ var defaultProps = {
   forLabel: 'my_desert_list',
   options: options
 };
+var groupedProps = (0, _extends2["default"])({}, defaultProps, {
+  options: [{
+    label: 'Group name',
+    options: [options[0]]
+  }, {
+    label: 'Another Group name',
+    options: [options[1], options[2]]
+  }]
+});
 describe('<FormSelect />', function () {
   it('renders the FormSelect component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
@@ -50,22 +59,85 @@ describe('<FormSelect />', function () {
               id: "my_desert_list"
             }, defaultProps))), container = _render.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
-            expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(_react.screen.getAllByRole('option')).toHaveLength(3);
+            expect(_react.screen.queryByRole('group')).not.toBeInTheDocument(); // Check for accessibility issues
 
             _context.t0 = expect;
-            _context.next = 6;
+            _context.next = 8;
             return (0, _jestAxe.axe)(container);
 
-          case 6:
+          case 8:
             _context.t1 = _context.sent;
-            _context.next = 9;
+            _context.next = 11;
             return (0, _context.t0)(_context.t1).toHaveNoViolations();
 
-          case 9:
+          case 11:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
   })));
+  it('renders the FormSelect component with optgroup when options are grouped', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, groupedProps))), container = _render2.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(_react.screen.getAllByRole('option')).toHaveLength(3);
+            expect(_react.screen.getAllByRole('group')).toHaveLength(2); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 8;
+            return (0, _jestAxe.axe)(container);
+
+          case 8:
+            _context2.t1 = _context2.sent;
+            _context2.next = 11;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders the FormSelect component when isInline is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, container;
+
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list",
+              isInline: true
+            }, defaultProps))), container = _render3.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context3.t0 = expect;
+            _context3.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context3.t1 = _context3.sent;
+            _context3.next = 9;
+            return (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
 });

package/build/system/Progress/Progress.js

@@ -9,49 +9,76 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Spinner = require("../Spinner");
 
-var _ = require("../");
+var _md = require("react-icons/md");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "sx", "className"];
+var _excluded = ["steps", "activeStep", "sx", "forLabel", "className"];
+var prefix = 'vip-progress-component';
+
+var uniqueID = function uniqueID() {
+  return Math.random().toString(36).substring(7);
+};
 
-var Progress = function Progress(_ref) {
+var Progress = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var steps = _ref.steps,
       activeStep = _ref.activeStep,
       sx = _ref.sx,
+      _ref$forLabel = _ref.forLabel,
+      forLabel = _ref$forLabel === void 0 ? '' : _ref$forLabel,
       className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var stepsTotal = steps.length;
+  var isDone = activeStep === stepsTotal - 1;
+  var instance = uniqueID();
+  var htmlFor = prefix + "-" + instance;
+  var currentValue = activeStep + 1;
   return (0, _jsxRuntime.jsxs)(_.Box, {
+    className: (0, _classnames["default"])(prefix, className),
     children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, (0, _extends2["default"])({
-      className: (0, _classnames["default"])('vip-progress-component', className)
-    }, props, {
       sx: (0, _extends2["default"])({
-        color: 'primary'
+        color: 'primary',
+        backgroundColor: 'background'
       }, sx),
-      max: steps.length,
-      value: activeStep + 1
-    })), steps && (0, _jsxRuntime.jsxs)(_.Flex, {
+      max: stepsTotal,
+      value: currentValue,
+      id: htmlFor,
+      "aria-label": forLabel,
+      ref: forwardRef
+    }, props)), steps && (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
         alignItems: 'center',
         mt: 2
       },
-      children: [(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
-        size: 24
-      }), (0, _jsxRuntime.jsxs)(_.Heading, {
-        variant: "h4",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-describedby": htmlFor,
+      children: [!isDone && (0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+        size: 24,
+        "aria-hidden": "true"
+      }), isDone && (0, _jsxRuntime.jsx)(_md.MdCheck, {
+        size: 24,
+        "aria-hidden": "true"
+      }), (0, _jsxRuntime.jsxs)(_.Text, {
         sx: {
           ml: 2,
           mb: 0
         },
-        children: [activeStep + 1 + " of " + steps.length, ":", ' ', (0, _jsxRuntime.jsx)(_.Text, {
+        children: [(0, _jsxRuntime.jsxs)("strong", {
+          children: [currentValue + " of " + stepsTotal, ": "]
+        }), (0, _jsxRuntime.jsx)(_.Text, {
           as: "span",
           sx: {
             color: 'muted'
@@ -61,12 +88,14 @@ var Progress = function Progress(_ref) {
       })]
     })]
   });
-};
+});
 
 exports.Progress = Progress;
+Progress.displayName = 'Progress';
 Progress.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,
+  forLabel: _propTypes["default"].node,
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any
 };

package/build/system/Progress/Progress.stories.js

@@ -3,10 +3,16 @@
 exports.__esModule = true;
 exports["default"] = exports.Default = void 0;
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
 /**
  * Internal dependencies
  */
@@ -17,11 +23,22 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default() {
+  var _React$useState = _react["default"].useState(0),
+      counter = _React$useState[0],
+      setCounter = _React$useState[1];
+
+  var steps = ['Downloading Data', 'Importing Data...', 'Finalizing', 'Done'];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (counter < steps.length - 1) {
+        setCounter(counter + 1);
+      }
+    }, 2000);
+  }, [counter, setCounter]);
   return (0, _jsxRuntime.jsx)(_.Progress, {
-    max: 1,
-    value: 1 / 2,
-    steps: ['Downloading Data', 'Importing Data...', 'Finalizing'],
-    activeStep: 1
+    forLabel: "Update site progress",
+    steps: steps,
+    activeStep: counter
   });
 };
 

package/build/system/Table/Table.js

@@ -9,6 +9,8 @@ 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 _classnames = _interopRequireDefault(require("classnames"));
@@ -17,7 +19,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "className"];
 
-var Table = function Table(_ref) {
+var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
@@ -28,11 +30,13 @@ var Table = function Table(_ref) {
     }, sx),
     cellPadding: 0,
     cellSpacing: 0,
-    className: (0, _classnames["default"])('vip-table-component', className)
+    className: (0, _classnames["default"])('vip-table-component', className),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Table = Table;
+Table.displayName = 'Table';
 Table.propTypes = {
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any

package/build/system/Wizard/Wizard.js

@@ -63,15 +63,13 @@ var Wizard = function Wizard(_ref) {
     }) : steps.map(function (_ref3, index) {
       var title = _ref3.title,
           subTitle = _ref3.subTitle,
-          children = _ref3.children,
-          titleVariant = _ref3.titleVariant;
+          children = _ref3.children;
       return (0, _jsxRuntime.jsx)(_.WizardStep, {
         active: index === activeStep,
         complete: completed.includes(index),
         order: index + 1,
         subTitle: subTitle,
         title: title,
-        titleVariant: titleVariant,
         children: children
       }, index);
     })

package/build/system/Wizard/Wizard.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Default = exports.CustomHeadingVariant = void 0;
+exports["default"] = exports.Default = exports.CustomTitle = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,6 +11,8 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+/** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
@@ -83,16 +85,24 @@ var Default = function Default() {
 
 exports.Default = Default;
 
-var CustomHeadingVariant = function CustomHeadingVariant() {
+var CustomTitle = function CustomTitle() {
   var steps = [{
-    title: 'Choose Domain',
-    titleVariant: 'h1',
-    subTitle: (0, _jsxRuntime.jsx)("h2", {
+    title: (0, _jsxRuntime.jsx)("h3", {
+      sx: {
+        m: 0
+      },
+      children: "Choose Domain"
+    }),
+    subTitle: (0, _jsxRuntime.jsx)("span", {
       children: "You can bring a domain name you already own, or buy a new one."
     })
   }, {
-    title: 'Configure DNS',
-    titleVariant: 'h1'
+    title: (0, _jsxRuntime.jsx)("h3", {
+      sx: {
+        m: 0
+      },
+      children: "Configure DNS"
+    })
   }];
   return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
     children: (0, _jsxRuntime.jsx)(_.Wizard, {
@@ -103,4 +113,4 @@ var CustomHeadingVariant = function CustomHeadingVariant() {
   });
 };
 
-exports.CustomHeadingVariant = CustomHeadingVariant;
+exports.CustomTitle = CustomTitle;

package/build/system/Wizard/WizardStep.js

@@ -29,10 +29,8 @@ var WizardStep = function WizardStep(_ref) {
       complete = _ref$complete === void 0 ? false : _ref$complete,
       children = _ref.children,
       active = _ref.active,
-      order = _ref.order,
-      _ref$titleVariant = _ref.titleVariant,
-      titleVariant = _ref$titleVariant === void 0 ? 'h4' : _ref$titleVariant;
-  var borderLeftColor = 'borders.2';
+      order = _ref.order;
+  var borderLeftColor = 'border';
 
   if (complete) {
     borderLeftColor = 'success';
@@ -66,20 +64,30 @@ var WizardStep = function WizardStep(_ref) {
     },
     "data-step": order,
     "data-active": active || undefined,
-    children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-      variant: titleVariant,
+    children: [typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
+      variant: "h4",
       sx: {
         mb: 0,
         display: 'flex',
         alignItems: 'center',
-        color: color,
-        fontSize: 2
+        color: color
       },
       children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+        "aria-hidden": "true",
         sx: {
           mr: 2
-        },
-        size: 18
+        }
+      }), title]
+    }) : (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        alignItems: 'center',
+        color: color
+      },
+      children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+        "aria-hidden": "true",
+        sx: {
+          mr: 2
+        }
       }), title]
     }), subTitle && active && (0, _jsxRuntime.jsx)(_.Text, {
       sx: {
@@ -97,6 +105,5 @@ WizardStep.propTypes = {
   complete: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node,
-  titleVariant: _propTypes["default"].string
+  title: _propTypes["default"].node
 };

package/build/system/Wizard/WizardStepHorizontal.js

@@ -25,20 +25,31 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 var WizardStepHorizontal = function WizardStepHorizontal(_ref) {
   var title = _ref.title,
       active = _ref.active,
-      order = _ref.order,
-      _ref$titleVariant = _ref.titleVariant,
-      titleVariant = _ref$titleVariant === void 0 ? 'h4' : _ref$titleVariant;
-  return (0, _jsxRuntime.jsxs)(_.Heading, {
-    variant: titleVariant,
+      order = _ref.order;
+  var color = active ? 'heading' : 'muted';
+  return typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
+    variant: "h4",
     sx: {
       mb: 0,
       display: 'flex',
       alignItems: 'center',
-      color: active ? 'heading' : 'muted'
+      color: color
     },
     "data-step": order,
     "data-active": active || undefined,
     children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+      "aria-hidden": "true",
+      sx: {
+        mr: 2
+      }
+    }), title]
+  }) : (0, _jsxRuntime.jsxs)(_.Flex, {
+    sx: {
+      alignItems: 'center',
+      color: color
+    },
+    children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+      "aria-hidden": "true",
       sx: {
         mr: 2
       }
@@ -51,6 +62,5 @@ WizardStepHorizontal.propTypes = {
   active: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node,
-  titleVariant: _propTypes["default"].string
+  title: _propTypes["default"].node
 };

package/build/system/index.js

@@ -105,11 +105,6 @@ var _Spinner = require("./Spinner");
 
 exports.Spinner = _Spinner.Spinner;
 
-var _ResourceList = require("./ResourceList");
-
-exports.ResourceList = _ResourceList.ResourceList;
-exports.ResourceItem = _ResourceList.ResourceItem;
-
 var _Tooltip = require("./Tooltip");
 
 exports.Tooltip = _Tooltip.Tooltip;

package/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.19.1",
+	"version": "0.20.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
+		"prepare": "npm run build",
 		"build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build && npm run theme-builder-copy",
 		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"format:check": "prettier --list-different -- \"src/system/**/*.{js,ts,tsx,md,mdx,json}\"",

package/src/system/Button/Button.js

@@ -17,6 +17,10 @@ const Button = React.forwardRef( ( { sx, ...props }, forwardRef ) => (
 			justifyContent: 'center',
 			height: '36px',
 			py: 0,
+			textDecoration: props?.to ? 'underline' : 'none',
+			'&:hover': {
+				textDecoration: 'none',
+			},
 			'&:focus': theme => theme.outline,
 			'&:focus-visible': theme => theme.outline,
 			'&:disabled': {
@@ -36,6 +40,7 @@ Button.displayName = 'Button';
 
 Button.propTypes = {
 	sx: PropTypes.object,
+	to: PropTypes.any,
 	className: PropTypes.any,
 };
 

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

@@ -19,5 +19,8 @@ export const Default = () => (
 		<Button variant="secondary" sx={ { ml: 2 } }>
 			Secondary
 		</Button>
+		<Button variant="text" sx={ { ml: 2 } } as="a" href="https://google/com">
+			Button link
+		</Button>
 	</React.Fragment>
 );