@automattic/vip-design-system 0.10.1 → 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,18 +2,20 @@
 	"parser": "@babel/eslint-parser",
 	"parserOptions": {
 		"babelOptions": {
-			"presets": ["@babel/preset-react"]
+			"presets": [ "@babel/preset-react" ]
 		}
 	},
-	"extends": [ "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/decorators/withBoundingBox.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { makeDecorator } from '@storybook/addons';
+import { Box } from "../../src/system";
+
+export default makeDecorator( {
+	name: 'withBoundingBox',
+	parameterName: 'colorMode2',
+	wrapper: ( storyFn, context ) => {
+		return (
+			<Box sx={{ p: 4, height: "100vh" }}>
+				{storyFn()}
+			</Box>
+		);
+	}
+} );

package/.storybook/decorators/withColorMode.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import { makeDecorator } from '@storybook/addons';
+import { useColorMode } from 'theme-ui';
+
+// These need to be updated to import VIP design tokens;
+const lightBackground = '#ffffff';
+const darkBackground = '#333333';
+
+export const backgrounds = {
+	default: 'Light',
+	values: [
+		{
+			name: 'Light',
+			value: lightBackground,
+		},
+		{
+			name: 'Dark',
+			value: darkBackground,
+		},
+	],
+};
+
+function ThemeChanger( { background } ) {
+	const [colorMode, setColorMode] = useColorMode();
+	const newColorMode = darkBackground === background ? 'dark' : 'default';
+
+	useEffect( () => {
+		setColorMode( newColorMode );
+	}, [ newColorMode ] );
+
+	return null;
+};
+
+export default makeDecorator( {
+	name: 'withColorMode',
+	parameterName: 'colorMode',
+	wrapper: ( storyFn, context ) => {
+		return (
+			<>
+				<ThemeChanger background={context.globals?.backgrounds?.value} />
+				{storyFn()}
+			</>
+		);
+	}
+} );

package/.storybook/decorators/withThemeProvider.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { makeDecorator } from '@storybook/addons';
+import { ThemeProvider } from 'theme-ui';
+import { Box, theme } from "../../src/system";
+
+export default makeDecorator( {
+	name: 'withThemeProvider',
+	parameterName: 'themeUi',
+	wrapper: ( storyFn, context ) => {
+		return (
+			<ThemeProvider theme={theme}>
+				<Box sx={{ p: 4, height: "100vh" }}>
+					{storyFn( context )}
+				</Box>
+			</ThemeProvider>
+		);
+	}
+} );

package/.storybook/main.js

@@ -1,10 +1,9 @@
 module.exports = {
-	presets: ["@storybook/preset-create-react-app"],
-	stories: ["../src/**/*.stories.js"],
-	addons: ["@storybook/addon-actions", "@storybook/addon-links"],
-	webpackFinal: async (config) => {
-		// do mutation to the config
-
-		return config;
-	},
+	stories: [ '../src/**/*.stories.jsx' ],
+	addons: [
+		'@storybook/addon-a11y',
+		'@storybook/addon-docs',
+		'@storybook/addon-essentials',
+		'@storybook/addon-links',
+	],
 };

package/.storybook/preview.js

@@ -1,38 +1,15 @@
-import React from "react";
+import React from 'react';
 import ReactDOM from 'react-dom';
-import { ThemeProvider, useColorMode } from "theme-ui";
-import { addDecorator } from "@storybook/react";
-import { Button, Box, theme, Link } from "../src/system";
-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';
 
-const ThemeChanger = () => {
-	const [colorMode, setColorMode] = useColorMode();
+axe( React, ReactDOM, 1000 );
 
-	const setDarkMode = (isDark) => setColorMode(isDark ? "dark" : "default");
+export const decorators = [ withBoundingBox, withColorMode, withThemeProvider ];
 
-	return (
-		<Link
-			href="#!"
-			onClick={(e) => {
-				e.preventDefault();
-				setDarkMode(colorMode == "dark" ? false : true);
-			}}
-		>
-			<Button sx={{ position: "fixed", right: 106, top: 36 }}>
-				Toggle
-			</Button>
-		</Link>
-	);
+export const parameters = {
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	backgrounds,
 };
-
-
-axe( React, ReactDOM, 1000 );
-
-addDecorator((story) => (
-	<React.Fragment>
-		<ThemeProvider theme={theme}>
-			<ThemeChanger />
-			<Box sx={{ p: 4, height: "100vh" }}>{story()}</Box>
-		</ThemeProvider>
-	</React.Fragment>
-));

package/README.md

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

package/babel.config.js

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

package/build/system/Avatar/Avatar.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Avatar = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _themeUi = require("theme-ui");
@@ -15,12 +21,6 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["isVIP", "name", "size", "src", "className"];
 
-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); }
-
-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 Avatar = function Avatar(_ref) {
   var _ref$isVIP = _ref.isVIP,
       isVIP = _ref$isVIP === void 0 ? false : _ref$isVIP,
@@ -32,9 +32,8 @@ var Avatar = function Avatar(_ref) {
       src = _ref$src === void 0 ? null : _ref$src,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_.Box, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_.Box, (0, _extends2["default"])({
     sx: {
       borderRadius: 9999,
       height: size + 2,
@@ -52,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/Avatar/Avatar.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Avatar',
+  component: _.Avatar
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Avatar, {});
+};
+
+exports.Default = Default;

package/build/system/Avatar/Avatar.test.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -8,15 +14,18 @@ var _Avatar = require("./Avatar");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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
+ */
 describe('<Avatar />', function () {
-  it('renders the Avatar without an image', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  it('renders the Avatar without an image', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
 
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
@@ -41,10 +50,10 @@ describe('<Avatar />', function () {
       }
     }, _callee);
   })));
-  it('renders the Avatar with image', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  it('renders the Avatar with image', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var _render2, container;
 
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:

package/build/system/Badge/Badge.js

@@ -1,8 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.Badge = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,23 +19,16 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "sx", "className"];
 
-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); }
-
-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 Badge = function Badge(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'blue' : _ref$variant,
       sx = _ref.sx,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return (0, _jsxRuntime.jsx)(_.Text, _extends({
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_.Text, (0, _extends2["default"])({
     as: "span",
-    sx: _extends({
+    sx: (0, _extends2["default"])({
       fontSize: 0,
       padding: 0,
       bg: variant + ".20",

package/build/system/Badge/Badge.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Badge',
+  component: _.Badge
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_.Badge, {
+    children: "Badge"
+  });
+};
+
+exports.Default = Default;

package/build/system/Badge/Badge.test.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = require("@testing-library/react");
 
 var _jestAxe = require("jest-axe");
@@ -8,15 +14,18 @@ var _Badge = require("./Badge");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-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
+ */
 describe('<Badge />', function () {
-  it('renders the Badge component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+  it('renders the Badge component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container;
 
-    return regeneratorRuntime.wrap(function _callee$(_context) {
+    return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
@@ -41,10 +50,10 @@ describe('<Badge />', function () {
       }
     }, _callee);
   })));
-  it('renders the Badge component with a different variant', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+  it('renders the Badge component with a different variant', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var _render2, container;
 
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:

package/build/system/BlankState/BlankState.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.BlankState = void 0;
 
@@ -11,8 +13,6 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /** @jsxImportSource theme-ui */
 
 /**

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

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _ = require("..");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'BlankState',
+  component: _.BlankState
+};
+exports["default"] = _default;
+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, {
+    image: image2,
+    title: "Power up your application",
+    body: "Add-ons give you the ability to bolt on extra capabilities to\nyour application, including logging, analytics and performance\nmonitoring.",
+    cta: (0, _jsxRuntime.jsx)(_.Link, {
+      as: "a",
+      children: "Explore add-ons \u2192"
+    })
+  });
+};
+
+exports.Default = Default;