@automattic/vip-design-system 0.8.0 → 0.9.2

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,7 +1,9 @@
 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'
 
 const ThemeChanger = () => {
 	const [colorMode, setColorMode] = useColorMode();
@@ -23,6 +25,9 @@ const ThemeChanger = () => {
 	);
 };
 
+
+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
@@ -38,3 +40,38 @@ For components that include storybooks, we can run `npm run storybook` to view t
 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

@@ -51,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%',

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/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/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("../");

package/build/system/Dialog/DialogContent.js

@@ -58,7 +58,7 @@ var DialogContent = function DialogContent(_ref) {
         right: 0,
         bottom: 0,
         opacity: 0.7,
-        background: 'linear-gradient(198.09deg, #E5F0F6 2.01%, rgba(235, 238, 242, 0) 43.18%, rgba(249, 234, 232, 0) 47.86%, #FFE9D1 94.31%), linear-gradient(98.65deg, #FFE8E6 0.58%, rgba(255, 233, 214, 0) 52.45%, rgba(255, 233, 219, 0) 53.76%, #FFE9D1 105.86%), #F5F2F1'
+        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,

package/build/system/Form/InlineSelect.js

@@ -51,7 +51,7 @@ var selectStyles = {
   menu: function menu() {
     return {
       boxShadow: 'none',
-      borderTop: "1px solid"
+      borderTop: '1px solid'
     };
   }
 };
@@ -63,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;

package/build/system/Form/Input.js

@@ -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/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"));

package/build/system/Form/SearchSelect.js

@@ -110,7 +110,7 @@ var SearchSelect = function SearchSelect(props) {
       '.select__control': {
         background: 'none',
         color: 'heading',
-        border: "1px solid",
+        border: '1px solid',
         borderColor: 'border',
         margin: 0,
         padding: 0,

package/build/system/Form/Select.js

@@ -45,9 +45,9 @@ var Select = function Select(_ref) {
 
 exports.Select = Select;
 Select.propTypes = {
-  isMulti: _propTypes["default"].bool,
   isInline: _propTypes["default"].bool,
+  isMulti: _propTypes["default"].bool,
   isSearch: _propTypes["default"].bool,
-  options: _propTypes["default"].array,
-  label: _propTypes["default"].string
+  label: _propTypes["default"].string,
+  options: _propTypes["default"].array
 };

package/build/system/Form/Textarea.js

@@ -30,7 +30,7 @@ var Textarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
 
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [label && (0, _jsxRuntime.jsxs)(_.Label, {
-      "for": forLabel,
+      htmlFor: forLabel,
       children: [label, required && '*']
     }), (0, _jsxRuntime.jsx)("textarea", _extends({}, props, {
       ref: ref,
@@ -69,4 +69,5 @@ Textarea.propTypes = {
   required: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
   errorMessage: _propTypes["default"].string
-};
+};
+Textarea.displayName = 'Textarea';

package/build/system/Form/ToggleGroup.js

@@ -3,14 +3,10 @@
 exports.__esModule = true;
 exports.ToggleGroup = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var RadioGroupPrimitive = _interopRequireWildcard(require("@radix-ui/react-radio-group"));
 
-var _md = require("react-icons/md");
-
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["onChange", "groupLabel", "value", "options"];

package/build/system/Notice/Notice.js

@@ -19,47 +19,65 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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 Notice = function Notice(_ref) {
-  var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'warning' : _ref$variant,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      children = _ref.children,
-      title = _ref.title,
-      _ref$sx = _ref.sx,
-      sx = _ref$sx === void 0 ? {} : _ref$sx,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var color = 'yellow';
+var NoticeIcon = function NoticeIcon(_ref) {
+  var color = _ref.color,
+      variant = _ref.variant;
   var Icon = _md.MdWarning;
 
   switch (variant) {
     case 'info':
-      color = 'blue';
       Icon = _md.MdInfo;
       break;
 
     case 'alert':
-      color = 'red';
       Icon = _md.MdError;
       break;
 
     case 'success':
-      color = 'green';
       Icon = _md.MdCheckCircle;
       break;
   }
 
-  var NoticeIcon = function NoticeIcon(_ref2) {
-    var color = _ref2.color;
-    return (0, _jsxRuntime.jsx)(Icon, {
-      sx: {
-        marginRight: 2,
-        color: color,
-        flex: '0 0 auto'
-      }
-    });
-  };
+  return (0, _jsxRuntime.jsx)(Icon, {
+    sx: {
+      marginRight: 2,
+      color: color,
+      flex: '0 0 auto'
+    }
+  });
+};
+
+NoticeIcon.propTypes = {
+  color: _propTypes["default"].string,
+  variant: _propTypes["default"].string
+};
+
+var Notice = function Notice(_ref2) {
+  var _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
+      _ref2$inline = _ref2.inline,
+      inline = _ref2$inline === void 0 ? false : _ref2$inline,
+      children = _ref2.children,
+      title = _ref2.title,
+      _ref2$sx = _ref2.sx,
+      sx = _ref2$sx === void 0 ? {} : _ref2$sx,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  var color = 'yellow';
+
+  switch (variant) {
+    case 'info':
+      color = 'blue';
+      break;
+
+    case 'alert':
+      color = 'red';
+      break;
+
+    case 'success':
+      color = 'green';
+      break;
+  }
 
   return (0, _jsxRuntime.jsx)(_.Card, _extends({
     sx: _extends({
@@ -84,7 +102,8 @@ var Notice = function Notice(_ref) {
           alignItems: 'center'
         },
         children: (0, _jsxRuntime.jsx)(NoticeIcon, {
-          color: color + ".100"
+          color: color + ".100",
+          variant: variant
         })
       }), (0, _jsxRuntime.jsxs)(_.Box, {
         sx: {
@@ -106,8 +125,10 @@ var Notice = function Notice(_ref) {
 
 exports.Notice = Notice;
 Notice.propTypes = {
-  variant: _propTypes["default"].string,
-  title: _propTypes["default"].node,
+  children: _propTypes["default"].node,
+  color: _propTypes["default"].string,
   inline: _propTypes["default"].bool,
-  children: _propTypes["default"].node
+  sx: _propTypes["default"].object,
+  title: _propTypes["default"].node,
+  variant: _propTypes["default"].string
 };