@automattic/vip-design-system 0.7.1 → 0.9.1

package/.eslines.json

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

package/.eslintignore

@@ -0,0 +1,7 @@
+.git
+build
+coverage
+flow-typed
+jest_0
+node_modules
+storybook-static

package/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+	"parser": "@babel/eslint-parser",
+	"parserOptions": {
+		"babelOptions": {
+			"presets": ["@babel/preset-react"]
+		}
+	},
+	"extends": [ "wpvip" ],
+	"plugins": [
+		"react",
+		"jsx-a11y"
+	],
+	"rules": {
+		"id-length": 0,
+		"react/jsx-uses-react": "off",
+		"react/react-in-jsx-scope": "off"
+	},
+	"settings": {
+		"react": {
+			"version": "16.4"
+		}
+	}
+}

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,22 @@
+## Description
+
+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.
+
+## Checklist
+
+- [ ] This PR has good automated test coverage
+- [ ] The storybook for the component has been updated
+
+## Steps to Test
+
+Outline the steps to test and verify the PR here.
+
+Example:
+
+1. Pull down PR.
+1. `npm run dev`.
+1. Open Storybook.
+1. Eat cookies.
+1. Verify cookies are delicious.

package/.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    - cron: '32 21 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

package/.github/workflows/nodejs.yaml

@@ -0,0 +1,29 @@
+name: Node.js CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    timeout-minutes: 5
+
+    strategy:
+      matrix:
+        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@latest
+    - run: npm install
+    - run: npm run test
+    - run: npm run build
+      env:
+        CI: true

package/.prettierrc

@@ -0,0 +1,9 @@
+arrowParens: "avoid"
+bracketSpacing: true
+jsxBracketSameLine: false
+printWidth: 100
+parenSpacing: true
+semi: true
+singleQuote: true
+tabWidth: 2
+useTabs: true

package/.storybook/preview.js

@@ -1,17 +1,15 @@
 import React from "react";
+import ReactDOM from 'react-dom';
 import { ThemeProvider, useColorMode } from "theme-ui";
 import { addDecorator } from "@storybook/react";
-import { Box, theme, Link } from "../src/system";
-import Brightness2Icon from "@material-ui/icons/Brightness2";
-import WbSunnyIcon from "@material-ui/icons/WbSunny";
+import { Button, Box, theme, Link } from "../src/system";
+import axe from '@axe-core/react'
 
 const ThemeChanger = () => {
 	const [colorMode, setColorMode] = useColorMode();
 
 	const setDarkMode = (isDark) => setColorMode(isDark ? "dark" : "default");
 
-	const ToggleIcon = colorMode == "dark" ? WbSunnyIcon : Brightness2Icon;
-
 	return (
 		<Link
 			href="#!"
@@ -20,13 +18,16 @@ const ThemeChanger = () => {
 				setDarkMode(colorMode == "dark" ? false : true);
 			}}
 		>
-			<ToggleIcon sx={{ position: "fixed", right: 106, top: 36 }}>
+			<Button sx={{ position: "fixed", right: 106, top: 36 }}>
 				Toggle
-			</ToggleIcon>
+			</Button>
 		</Link>
 	);
 };
 
+
+axe( React, ReactDOM, 1000 );
+
 addDecorator((story) => (
 	<React.Fragment>
 		<ThemeProvider theme={theme}>

package/README.md

@@ -2,6 +2,8 @@
 
 Design system components used throughout VIP.
 
+[Storybook Components](https://vip-design-system-components.netlify.app/)
+
 ## Development
 
 ### Prerequisites
@@ -13,7 +15,7 @@ Make sure you have [node.js](https://nodejs.org/) and [NPM](https://docs.npmjs.c
 To get setup run the following command in the `vip-design-system` directory:
 
 ```
-npm install 
+npm install
 ```
 
 ### Watching for changes
@@ -24,4 +26,52 @@ You can build it continuously so that every time you make a change, build files
 npm run watch
 ```
 
-This is very useful when used together with [npm link ](https://docs.npmjs.com/cli/v7/commands/npm-link) so that, when you are working on another project that depends on this design system, you can make changes here and changes will be immediately availabe there.
+### Testing
+
+We can test two ways:
+
+**Storybook**
+
+For components that include storybooks, we can run `npm run storybook` to view the components in a sandbox-ed storybook environment.
+
+**npm link**
+
+1. Run `npm link` in your checkout of this repo.
+2. Spin up a local copy of [the VIP Dashboard](https://github.com/automattic/vip-ui) and navigate to a page using the linked components from `@automattic/vip-design-system`
+
+Note: it's super useful to run `npm run watch` in another process, so any changes will be almost immediately available / testable.
+
+### Publish NPM Package Instructions
+
+Once all the changes needed are merged to master, and you are ready to release a new version, follow these steps:
+
+1. Make sure you have NPM access to our @automattic organization. Ask for #vip-platform-pâtisserie help in case you need it.
+2. Pull all the changes to your local master. Make sure you have the latest master locally.
+3. We follow the [https://semver.org/](https://semver.org/) versioning. You should run the specific version you are trying to publish:
+
+```bash
+npm version major|minor|patch
+```
+
+4. You should see a version bump in the `package.json` file.
+5. Build the application:
+
+```bash
+npm run build
+```
+
+6. Publish the application
+```
+npm publish
+```
+
+Note: You need to have two-factor enabled in your npm account. The publish command will request a two-factor code to complete the publishing process.
+
+7. Push the tags to the repository and master updates.
+
+```
+git push --tags
+git push origin master
+```
+
+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.

package/babel.config.js

@@ -1,20 +1,20 @@
 module.exports = {
-	"ignore": [
-		"**/*.stories.js"
+	ignore: [
+		'**/*.stories.js',
 	],
-	"presets": [
+	presets: [
 		[
-			"@babel/preset-env",
+			'@babel/preset-env',
 			{
-				"loose": true
-			}
+				loose: true,
+			},
 		],
 		[
-			"@babel/preset-react",
+			'@babel/preset-react',
 			{
-				"importSource": "theme-ui",
-				"runtime": "automatic",
-				"throwIfNamespace": false,
+				importSource: 'theme-ui',
+				runtime: 'automatic',
+				throwIfNamespace: false,
 			},
 		],
 	],

package/build/system/Avatar/Avatar.js

@@ -41,6 +41,9 @@ var Avatar = function Avatar(_ref) {
       borderColor: isVIP ? 'primary' : 'transparent',
       overflow: 'hidden',
       backgroundColor: 'primary',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       color: 'white',
       padding: '1px',
       textAlign: 'center'
@@ -48,7 +51,7 @@ var Avatar = function Avatar(_ref) {
   }, props, {
     children: src ? (0, _jsxRuntime.jsx)(_themeUi.Image, {
       src: src,
-      alt: name,
+      alt: "Avatar image from " + name,
       sx: {
         borderRadius: 9999,
         width: '100%',
@@ -58,6 +61,7 @@ var Avatar = function Avatar(_ref) {
       as: "span",
       sx: {
         color: 'white',
+        mb: 0,
         fontWeight: 'bold',
         fontSize: 0,
         textTransform: 'uppercase'

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+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); }); }; }
+
+describe('<Avatar />', function () {
+  it('renders the Avatar without an image', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "John Doe"
+    }));
+    expect(_react.screen.getByText('J')).toBeInTheDocument();
+  });
+  it('renders the Avatar with image', function () {
+    (0, _react.render)((0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+      name: "John Doe",
+      src: "path/to/image"
+    }));
+    expect(_react.screen.getByAltText('Avatar image from John Doe')).toBeInTheDocument();
+  });
+  it('should not have basic accessibility issues', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container, results;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+              name: "John Doe",
+              src: "path/to/image"
+            })), container = _render.container;
+            _context.next = 3;
+            return (0, _jestAxe.axe)(container);
+
+          case 3:
+            results = _context.sent;
+            expect(results).toHaveNoViolations();
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/Badge/Badge.js

@@ -28,8 +28,8 @@ var Badge = function Badge(_ref) {
     sx: _extends({
       fontSize: 0,
       padding: 0,
-      bg: variant + ".10",
-      color: variant + ".90",
+      bg: variant + ".20",
+      color: variant + ".100",
       py: 1,
       verticalAlign: 'middle',
       px: 2,

package/build/system/BlankState/BlankState.js

@@ -35,7 +35,8 @@ var BlankState = function BlankState(_ref) {
       src: image,
       sx: {
         mb: 3
-      }
+      },
+      alt: "Icon representing the blank state"
     }), (0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h4",
       children: title
@@ -52,9 +53,9 @@ var BlankState = function BlankState(_ref) {
 
 exports.BlankState = BlankState;
 BlankState.propTypes = {
-  image: _propTypes["default"].string,
+  image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
   icon: _propTypes["default"].node,
-  title: _propTypes["default"].string,
-  body: _propTypes["default"].string,
+  title: _propTypes["default"].node,
+  body: _propTypes["default"].node,
   cta: _propTypes["default"].node
 };

package/build/system/Button/Button.js

@@ -24,7 +24,11 @@ var Button = function Button(_ref) {
   return (0, _jsxRuntime.jsx)(_themeUi.Button, _extends({
     sx: _extends({
       verticalAlign: 'middle',
-      display: 'inline-block',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '36px',
+      py: 0,
       '&:disabled': {
         opacity: 0.5,
         cursor: 'not-allowed',

package/build/system/Card/Card.js

@@ -40,4 +40,5 @@ exports.Card = Card;
 Card.propTypes = {
   variant: _propTypes["default"].string,
   sx: _propTypes["default"].object
-};
+};
+Card.displayName = 'Card';

package/build/system/Code/Code.js

@@ -34,9 +34,9 @@ var Code = function Code(_ref) {
     sx: {
       fontSize: 1,
       display: 'block',
-      bg: 'modes.dark.card',
-      color: 'modes.dark.heading',
-      borderRadius: 2,
+      bg: 'grey.90',
+      color: 'grey.10',
+      borderRadius: 1,
       py: 2,
       px: 3,
       verticalAlign: 'middle',
@@ -65,7 +65,7 @@ var Code = function Code(_ref) {
       sx: {
         position: 'absolute',
         top: 0,
-        bg: 'modes.dark.heading',
+        bg: 'grey.10',
         right: 0,
         paddingRight: 2,
         paddingLeft: 2,

package/build/system/ConfirmationDialog/ConfirmationDialog.js

@@ -62,7 +62,7 @@ var ConfirmationDialogContent = function ConfirmationDialogContent(_ref) {
 
 exports.ConfirmationDialogContent = ConfirmationDialogContent;
 ConfirmationDialogContent.propTypes = {
-  title: _propTypes["default"].string,
+  title: _propTypes["default"].node,
   body: _propTypes["default"].node,
   label: _propTypes["default"].string,
   onClose: _propTypes["default"].func,

package/build/system/Dialog/DialogButton.js

@@ -5,8 +5,6 @@ exports.DialogButton = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _md = require("react-icons/md");
 
 var _ = require("../");
@@ -54,10 +52,10 @@ var DialogButton = function DialogButton(_ref) {
       sx: {
         mb: 0,
         flex: '1 1 auto',
-        'white-space': 'nowrap',
+        whiteSpace: 'nowrap',
         overflow: 'hidden',
         color: 'heading',
-        'text-overflow': 'ellipsis'
+        textOverflow: 'ellipsis'
       },
       children: value
     }), (0, _jsxRuntime.jsx)(_md.MdExpandMore, {

package/build/system/Dialog/DialogContent.js

@@ -57,8 +57,8 @@ var DialogContent = function DialogContent(_ref) {
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: 'grey.50',
-        opacity: 0.7
+        opacity: 0.7,
+        background: "linear-gradient(\n\t\t\t\t\t\t\t198.09deg,\n\t\t\t\t\t\t\t#E5F0F6 2.01%,\n\t\t\t\t\t\t\trgba(235, 238, 242, 0) 43.18%,\n\t\t\t\t\t\t\trgba(249, 234, 232, 0) 47.86%,\n\t\t\t\t\t\t\t#FFE9D1 94.31%\n\t\t\t\t\t\t),\n\t\t\t\t\t\tlinear-gradient(\n\t\t\t\t\t\t\t98.65deg,\n\t\t\t\t\t\t\t#FFE8E6 0.58%,\n\t\t\t\t\t\t\trgba(255, 233, 214, 0) 52.45%,\n\t\t\t\t\t\t\trgba(255, 233, 219, 0) 53.76%,\n\t\t\t\t\t\t\t#FFE9D1 105.86%\n\t\t\t\t\t\t), #F5F2F1"
       }
     }), variant === 'sidebar' ? (0, _jsxRuntime.jsx)(SidebarMotion, _extends({}, props)) : (0, _jsxRuntime.jsx)(DialogMotion, _extends({
       position: position,
@@ -89,8 +89,8 @@ var SidebarMotion = function SidebarMotion(props) {
     sx: {
       marginTop: 2,
       borderRadius: 2,
-      backgroundColor: 'card',
-      boxShadow: 'low',
+      backgroundColor: 'dialog',
+      boxShadow: 'medium',
       position: 'absolute',
       top: '100%',
       zIndex: 100,
@@ -138,7 +138,7 @@ var DialogMotion = function DialogMotion(_ref2) {
       marginTop: 2,
       transformOrigin: transformOrigin,
       borderRadius: 2,
-      backgroundColor: 'card',
+      backgroundColor: 'dialog',
       boxShadow: 'low',
       position: 'absolute',
       top: '100%',

package/build/system/Form/InlineSelect.js

@@ -28,8 +28,7 @@ var selectStyles = {
       margin: 0,
       border: 0,
       padding: 0,
-      boxShadow: 'none',
-      fontSize: _.theme.fontSizes[2]
+      boxShadow: 'none'
     });
   },
   container: function container(provided) {
@@ -52,7 +51,7 @@ var selectStyles = {
   menu: function menu() {
     return {
       boxShadow: 'none',
-      borderTop: "1px solid " + _.theme.colors.border
+      borderTop: '1px solid'
     };
   }
 };
@@ -64,7 +63,7 @@ var InlineSelect = function InlineSelect(_ref) {
       _ref$noneLabel = _ref.noneLabel,
       noneLabel = _ref$noneLabel === void 0 ? 'All' : _ref$noneLabel,
       _ref$position = _ref.position,
-      position = _ref$position === void 0 ? "left" : _ref$position,
+      position = _ref$position === void 0 ? 'left' : _ref$position,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var valueLabel = noneLabel;
@@ -92,22 +91,35 @@ var InlineSelect = function InlineSelect(_ref) {
       hideSelectedOptions: false,
       isClearable: false,
       menuIsOpen: true,
-      options: options,
       styles: selectStyles,
+      classNamePrefix: 'select',
+      options: options,
       placeholder: "Search...",
       tabSelectsValue: false,
-      value: value
-    }, props, {
-      theme: function theme(_theme) {
-        return _extends({}, _theme, {
-          colors: _extends({}, _theme.colors, {
-            primary25: _.theme.colors.hover,
-            primary50: _.theme.colors.brand['7'],
-            primary: _.theme.colors.heading
-          })
-        });
+      value: value,
+      sx: {
+        '.select__control': {
+          background: 'none',
+          color: 'heading'
+        },
+        '.select__single-value': {
+          color: 'heading',
+          px: 1
+        },
+        '.react-select__option': {
+          bg: 'grey.10',
+          '&:hover': {
+            bg: 'grey.10'
+          }
+        },
+        '.select__option--is-focused': {
+          bg: 'grey.10'
+        },
+        '.select__menu': {
+          borderColor: 'border'
+        }
       }
-    }))
+    }, props))
   });
   return (0, _jsxRuntime.jsx)(_.Dialog, {
     content: Content,

package/build/system/Form/Input.js

@@ -38,7 +38,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       required: required,
       sx: {
         border: '1px solid',
-        borderColor: 'border',
+        borderColor: 'grey.60',
         backgroundColor: 'card',
         borderRadius: 1,
         lineHeight: 'inherit',
@@ -74,4 +74,5 @@ Input.propTypes = {
   required: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   errorMessage: _propTypes["default"].string
-};
+};
+Input.displayName = 'Input';

package/build/system/Form/Label.js

@@ -11,12 +11,12 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 var Label = function Label(props) {
   return (0, _jsxRuntime.jsx)(_.Heading, _extends({
-    variant: "caps",
+    variant: "h4",
     as: "label",
     sx: {
       display: 'block',
       mb: 2,
-      color: 'text'
+      color: 'muted'
     }
   }, props));
 };

package/build/system/Form/RadioBoxGroup.js

@@ -3,8 +3,6 @@
 exports.__esModule = true;
 exports.RadioBoxGroup = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));