@automattic/vip-design-system 0.10.3 → 0.11.0

package/.eslines.json

@@ -1,10 +1,10 @@
 {
-    "branches": {
-        "default": ["downgrade-unmodified-lines"]
-    },
-    "processors": {
-        "downgrade-unmodified-lines": {
-            "remote": "origin/master"
-        }
-    }
+	"branches": {
+		"default": [ "downgrade-unmodified-lines" ]
+	},
+	"processors": {
+		"downgrade-unmodified-lines": {
+			"remote": "origin/master"
+		}
+	}
 }

package/.eslintrc.json

@@ -2,15 +2,20 @@
 	"parser": "@babel/eslint-parser",
 	"parserOptions": {
 		"babelOptions": {
-			"presets": ["@babel/preset-react"]
+			"presets": [ "@babel/preset-react" ]
 		}
 	},
-	"extends": ["plugin:storybook/recommended", "wpvip"],
-	"plugins": ["react", "jsx-a11y"],
+	"extends": [ "plugin:storybook/recommended", "prettier", "wpvip" ],
+	"plugins": [ "react", "jsx-a11y", "prettier" ],
 	"rules": {
 		"id-length": 0,
 		"react/jsx-uses-react": "off",
-		"react/react-in-jsx-scope": "off"
+		"react/react-in-jsx-scope": "off",
+		"no-use-before-define": "off",
+		"prettier/prettier": "error",
+		"@typescript-eslint/no-empty-function": "off",
+		"@typescript-eslint/no-var-requires": "off",
+		"@typescript-eslint/no-explicit-any": "off"
 	},
 	"settings": {
 		"react": {

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 ## Description
 
-A few sentences describing the overall goals of the pull request. Any special considerations and decisions. 
+A few sentences describing the overall goals of the pull request. Any special considerations and decisions.
 
 Also include any references to relevant discussions and documentation.
 

package/.github/workflows/nodejs.yaml

@@ -4,7 +4,6 @@ on: [push]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     timeout-minutes: 5
@@ -14,16 +13,17 @@ jobs:
         node-version: [14.x]
 
     steps:
-    - uses: actions/checkout@v2
-      with:
-        persist-credentials: false
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install -g npm@7.24.2
-    - run: npm install
-    - run: npm run test
-    - run: npm run build
-      env:
-        CI: true
+      - uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install -g npm@7.24.2
+      - run: npm install
+      - run: npm run format:check
+      - run: npm run test
+      - run: npm run build
+        env:
+          CI: true

package/.prettierrc

@@ -1,6 +1,5 @@
-arrowParens: "avoid"
+arrowParens: 'avoid'
 bracketSpacing: true
-jsxBracketSameLine: false
 printWidth: 100
 parenSpacing: true
 semi: true

package/.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-	stories: ['../src/**/*.stories.jsx'],
+	stories: [ '../src/**/*.stories.jsx' ],
 	addons: [
 		'@storybook/addon-a11y',
 		'@storybook/addon-docs',

package/.storybook/preview.js

@@ -1,19 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import axe from '@axe-core/react'
+import axe from '@axe-core/react';
 import withBoundingBox from './decorators/withBoundingBox';
 import withColorMode, { backgrounds } from './decorators/withColorMode';
 import withThemeProvider from './decorators/withThemeProvider';
 
 axe( React, ReactDOM, 1000 );
 
-export const decorators = [
-  withBoundingBox,
-  withColorMode,
-	withThemeProvider,
-];
+export const decorators = [ withBoundingBox, withColorMode, withThemeProvider ];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  backgrounds,
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	backgrounds,
 };

package/README.md

@@ -61,6 +61,7 @@ npm run build
 ```
 
 6. Publish the application
+
 ```
 npm publish
 ```

package/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
 	ignore: [],
-	plugins: ['@babel/plugin-transform-runtime'],
+	plugins: [ '@babel/plugin-transform-runtime' ],
 	presets: [
 		[
 			'@babel/preset-env',

package/build/system/Avatar/Avatar.js

@@ -51,7 +51,8 @@ var Avatar = function Avatar(_ref) {
       padding: '1px',
       textAlign: 'center'
     },
-    className: (0, _classnames["default"])('vip-avatar-component', className)
+    className: (0, _classnames["default"])('vip-avatar-component', className),
+    "aria-hidden": "true"
   }, props, {
     children: src ? (0, _jsxRuntime.jsx)(_themeUi.Image, {
       src: src,

package/build/system/BlankState/BlankState.stories.js

@@ -13,10 +13,10 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _default = {
   title: 'BlankState',
   component: _.BlankState
-}; // eslint-disable-next-line max-len
-
+};
 exports["default"] = _default;
-var image2 = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
+var image2 = // eslint-disable-next-line max-len
+"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsx)(_.BlankState, {

package/build/system/BlankState/BlankState.test.js

@@ -27,8 +27,8 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-// eslint-disable-next-line max-len
-var image = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
+var image = // eslint-disable-next-line max-len
+"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
 var defaultProps = {
   body: "Sorry, there's nothing here yet.",
   cta: (0, _jsxRuntime.jsx)(_Link.Link, {

package/build/system/Card/Card.test.js

@@ -12,8 +12,6 @@ var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
 
-var _md = require("react-icons/md");
-
 var _Card = require("./Card");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");

package/build/system/Code/Code.js

@@ -65,7 +65,7 @@ var Code = function Code(_ref) {
       position: 'relative'
     },
     children: [codeDom, (0, _jsxRuntime.jsx)("button", {
-      "aria-label": "Copy",
+      "aria-label": "Copy code",
       sx: {
         bg: 'grey.10',
         borderTopRightRadius: 1,
@@ -94,7 +94,12 @@ var Code = function Code(_ref) {
           onCopy();
         }
       },
-      children: copied ? 'Copied!' : (0, _jsxRuntime.jsx)(_md.MdContentCopy, {})
+      children: copied ? (0, _jsxRuntime.jsx)("span", {
+        role: "alert",
+        children: "Code copied to clipboard"
+      }) : (0, _jsxRuntime.jsx)(_md.MdContentCopy, {
+        "aria-hidden": "true"
+      })
     })]
   });
 };

package/build/system/Code/Code.test.js

@@ -12,8 +12,6 @@ var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
 
-var _md = require("react-icons/md");
-
 var _Code = require("./Code");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -62,41 +60,41 @@ describe('<Code />', function () {
         }
       }
     }, _callee);
-  }))); // jsdom currently doesn't support pseudo-elements with getComputedStyle
-
-  it.skip('renders "$" in front of the code when in prompt mode', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var props, _render2, container, codeElement;
+  })));
+  it('renders the Code component with a copy button', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var props, _render2, container;
 
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             props = (0, _extends2["default"])({}, defaultProps, {
-              prompt: true
+              showCopy: true
             });
             _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, (0, _extends2["default"])({}, props, {
               children: "This is a code"
             }))), container = _render2.container;
-            codeElement = _react.screen.getByText('This is a code');
-            expect(window.getComputedStyle(codeElement, ':before').content).toEqual('$'); // Check for accessibility issues
+            expect(_react.screen.getByRole('button', {
+              name: 'Copy code'
+            })).toBeInTheDocument(); // Check for accessibility issues
 
             _context2.t0 = expect;
-            _context2.next = 7;
+            _context2.next = 6;
             return (0, _jestAxe.axe)(container);
 
-          case 7:
+          case 6:
             _context2.t1 = _context2.sent;
-            _context2.next = 10;
+            _context2.next = 9;
             return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
 
-          case 10:
+          case 9:
           case "end":
             return _context2.stop();
         }
       }
     }, _callee2);
   })));
-  it('renders the Code component with a copy button', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+  it('updates the the UI after clicking on "Copy"', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
     var props, _render3, container;
 
     return _regenerator["default"].wrap(function _callee3$(_context3) {
@@ -109,45 +107,12 @@ describe('<Code />', function () {
             _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, (0, _extends2["default"])({}, props, {
               children: "This is a code"
             }))), container = _render3.container;
-            expect(_react.screen.getByRole('button', {
-              name: 'Copy'
-            })).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);
-  })));
-  it('updates the the UI after clicking on "Copy"', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var props, _render4, container;
-
-    return _regenerator["default"].wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            props = (0, _extends2["default"])({}, defaultProps, {
-              showCopy: true
-            });
-            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, (0, _extends2["default"])({}, props, {
-              children: "This is a code"
-            }))), container = _render4.container;
 
             _react.fireEvent.click(_react.screen.getByRole('button', {
-              name: 'Copy'
+              name: 'Copy code'
             }));
 
-            _context4.next = 5;
+            _context3.next = 5;
             return (0, _react.waitFor)(function () {
               return new Promise(function (res) {
                 return setTimeout(res, 0);
@@ -155,22 +120,22 @@ describe('<Code />', function () {
             });
 
           case 5:
-            expect(_react.screen.getByText('Copied!')).toBeInTheDocument(); // Check for accessibility issues
+            expect(_react.screen.getByText('Code copied to clipboard')).toBeInTheDocument(); // Check for accessibility issues
 
-            _context4.t0 = expect;
-            _context4.next = 9;
+            _context3.t0 = expect;
+            _context3.next = 9;
             return (0, _jestAxe.axe)(container);
 
           case 9:
-            _context4.t1 = _context4.sent;
-            _context4.next = 12;
-            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+            _context3.t1 = _context3.sent;
+            _context3.next = 12;
+            return (0, _context3.t0)(_context3.t1).toHaveNoViolations();
 
           case 12:
           case "end":
-            return _context4.stop();
+            return _context3.stop();
         }
       }
-    }, _callee4);
+    }, _callee3);
   })));
 });

package/build/system/Form/MultiSelect.js

@@ -1,38 +1,58 @@
-"use strict";
+'use strict';
 
 exports.__esModule = true;
 exports.MultiSelect = void 0;
 
-var _reactSelect = _interopRequireDefault(require("react-select"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || 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); }
+var _reactSelect = _interopRequireDefault( require( 'react-select' ) );
+
+var _jsxRuntime = require( 'theme-ui/jsx-runtime' );
+
+function _interopRequireDefault( obj ) {
+	return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function _extends() {
+	_extends =
+		Object.assign ||
+		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 );
+}
 
 var vipGold = '#c29c69'; // hardcoding for now
 
 var vipGrey2 = '#d7dee2';
 var customStyles = {
-  control: function control(styles) {
-    return _extends({}, styles, {
-      border: "1px solid " + vipGrey2,
-      boxShadow: 'none',
-      '&:hover': {
-        border: "1px solid " + vipGold
-      },
-      '&:focus': {
-        border: "1px solid " + vipGold
-      }
-    });
-  }
+	control: function control( styles ) {
+		return _extends( {}, styles, {
+			border: '1px solid ' + vipGrey2,
+			boxShadow: 'none',
+			'&:hover': {
+				border: '1px solid ' + vipGold,
+			},
+			'&:focus': {
+				border: '1px solid ' + vipGold,
+			},
+		} );
+	},
 };
 
-var MultiSelect = function MultiSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
-    styles: customStyles
-  }));
+var MultiSelect = function MultiSelect( props ) {
+	return ( 0, _jsxRuntime.jsx )(
+		_reactSelect[ 'default' ],
+		_extends( {}, props, {
+			styles: customStyles,
+		} )
+	);
 };
 
-exports.MultiSelect = MultiSelect;
+exports.MultiSelect = MultiSelect;

package/build/system/Form/Select.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.usePortal = exports["default"] = exports.Single = exports.Multi = exports.Inline = exports.DropdownMenu = exports.Async = void 0;
+exports["default"] = exports.UsePortal = exports.Single = exports.Multi = exports.Inline = exports.DropdownMenu = exports.Async = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -82,7 +82,7 @@ var Multi = function Multi() {
 
 exports.Multi = Multi;
 
-var usePortal = function usePortal() {
+var UsePortal = function UsePortal() {
   var _useState2 = (0, _react.useState)([]),
       value = _useState2[0],
       setValue = _useState2[1];
@@ -106,7 +106,7 @@ var usePortal = function usePortal() {
   });
 };
 
-exports.usePortal = usePortal;
+exports.UsePortal = UsePortal;
 
 var Single = function Single() {
   var _useState3 = (0, _react.useState)([]),
@@ -203,7 +203,6 @@ var Async = function Async() {
       label: "Async Select",
       value: value,
       isAsync: true,
-      usePortal: true,
       loadOptions: loadOptions,
       noneLabel: "Everyone",
       placeholder: "Load async...",

package/build/system/Form/Select.test.js

@@ -19,8 +19,8 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  */
 
 /**
-  * Internal dependencies
-  */
+ * Internal dependencies
+ */
 describe('<Select />', function () {
   it('renders the Select component with the specified placeholder', function () {
     (0, _react.render)((0, _jsxRuntime.jsx)(_Select.Select, {

package/build/system/Notification/Notification.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("../");
 
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText/ScreenReaderText"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 /** @jsxImportSource theme-ui */
@@ -29,6 +31,7 @@ var Notification = function Notification(_ref) {
       status = _ref$status === void 0 ? 'success' : _ref$status,
       onClose = _ref.onClose;
   return (0, _jsxRuntime.jsxs)(_.Card, {
+    role: "alert",
     className: "vip-notification-component",
     sx: {
       boxShadow: 'medium',
@@ -36,16 +39,8 @@ var Notification = function Notification(_ref) {
       position: 'relative',
       variant: "notification." + status
     },
-    children: [(0, _jsxRuntime.jsx)(_.Button, {
-      onClick: onClose,
-      variant: "icon",
-      sx: {
-        color: 'muted',
-        position: 'absolute',
-        top: 2,
-        right: 2
-      },
-      children: (0, _jsxRuntime.jsx)(_md.MdClose, {})
+    children: [(0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
+      children: "Alert,"
     }), (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
         alignItems: 'center'
@@ -54,21 +49,24 @@ var Notification = function Notification(_ref) {
         sx: {
           color: 'error',
           flex: '0 0 auto'
-        }
+        },
+        "aria-hidden": "true"
       }) : (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         sx: {
           color: 'success',
           flex: '0 0 auto'
-        }
+        },
+        "aria-hidden": "true"
       }), (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {
           flex: '1 1 auto',
           ml: 3
         },
-        children: [(0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
+        children: [(0, _jsxRuntime.jsx)("p", {
           sx: {
-            mb: 0
+            my: 0,
+            color: 'heading',
+            fontWeight: 'bold'
           },
           children: title
         }), body && (0, _jsxRuntime.jsx)(_.Text, {
@@ -79,6 +77,17 @@ var Notification = function Notification(_ref) {
           children: body
         })]
       })]
+    }), onClose && (0, _jsxRuntime.jsx)(_.Button, {
+      onClick: onClose,
+      variant: "icon",
+      sx: {
+        color: 'muted',
+        position: 'absolute',
+        top: 2,
+        right: 2
+      },
+      "aria-hidden": "true",
+      children: (0, _jsxRuntime.jsx)(_md.MdClose, {})
     })]
   });
 };

package/build/system/Notification/Notification.stories.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Error = exports.Default = void 0;
 
 var _ = require("..");
 
@@ -18,9 +18,19 @@ exports["default"] = _default;
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsx)(_.Notification, {
-    title: "My first notification",
-    subTitle: "Use when providing success or error feedback on global action"
+    title: "Awesome!",
+    body: "Your message has been sent successfully."
   });
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+var Error = function Error() {
+  return (0, _jsxRuntime.jsx)(_.Notification, {
+    status: "error",
+    title: "Snag!",
+    body: "Your message could not be sent."
+  });
+};
+
+exports.Error = Error;