@automattic/vip-design-system 0.7.0 → 0.9.0

package/build/system/theme/index.js

@@ -3,21 +3,66 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("./colors"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _colors = require("./colors");
 
 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 textStyles = {
+  h1: {
+    fontSize: 5,
+    marginBottom: 3,
+    letterSpacing: '-.02em',
+    fontWeight: 'body',
+    fontFamily: 'serif',
+    color: 'heading'
+  },
+  h2: {
+    fontSize: 4,
+    marginBottom: 2,
+    letterSpacing: '-.005em',
+    fontWeight: 400,
+    color: 'heading'
+  },
+  h3: {
+    fontSize: 3,
+    marginBottom: 3,
+    letterSpacing: '-.005em',
+    lineHeight: 1.4,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  h4: {
+    fontSize: 2,
+    marginBottom: 1,
+    lineHeight: 1.5,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  h5: {
+    fontSize: 1,
+    marginBottom: 1,
+    lineHeight: 1.5,
+    fontWeight: 'heading',
+    color: 'heading'
+  },
+  caps: {
+    fontSize: 1,
+    marginBottom: 2,
+    textTransform: 'uppercase',
+    color: 'muted',
+    fontWeight: 'bold',
+    letterSpacing: '.05em'
+  }
+};
 var _default = {
-  initialColorModeName: 'light',
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
-    body: '"SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
-    monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace'
+    monospace: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+    serif: 'recoletaregular, Georgia, serif'
   },
-  fontSizes: [11, 13, 15, 20, 32, 48, 56, 64, 96],
+  fontSizes: [10, 12, 14, 19, 32, 40, 56, 64, 96],
   fontWeights: {
     body: 400,
     heading: 500,
@@ -30,45 +75,64 @@ var _default = {
   sizes: {
     sidebar: 260
   },
-  radii: [0, 3, 5],
+  radii: [0, 5, 10],
+  config: {
+    useColorSchemeMediaQuery: false
+  },
+  initialColorModeName: 'light',
   colors: _extends({
-    text: _colors["default"].grey['70'],
-    heading: _colors["default"].grey['100'],
-    background: _colors["default"].brand['0'],
-    backgroundSecondary: _colors["default"].brand['3'],
-    primary: _colors["default"].brand['50'],
+    text: _colors.light.grey['90'],
+    heading: _colors.light.grey['100'],
+    background: '#fdfdfd',
+    backgroundSecondary: _colors.light.grey['10'],
+    primary: _colors.light.brand['70'],
     secondary: '#30c',
-    muted: _colors["default"].grey['60'],
-    link: _colors["default"].brand['70'],
-    card: '#fefefe',
-    border: _colors["default"].brand['7'],
-    hover: 'rgba(0,0,0,.025)',
+    muted: _colors.light.grey['90'],
+    link: _colors.light.brand['90'],
+    card: '#fff',
+    border: _colors.light.grey['20'],
+    hover: 'rgba(0,0,0,.02)',
     lightenBackground: 'rgba(255,255,255,.5)',
-    placeholder: _colors["default"].grey['40'],
+    darken: 'rgba(0,0,0,.05)',
+    placeholder: _colors.light.grey['70'],
     midnight: '#13191E',
+    navigationStart: _colors.light.grey['5'],
+    navigationEnd: _colors.light.grey['5'],
+    success: _colors.light.green['90'],
+    error: _colors.light.red['90'],
+    warning: _colors.light.yellow['90'],
+    dialog: _colors.light.grey['0'],
+    backgroundMuted: _colors.light.grey['5']
+  }, _colors.light, {
     modes: {
-      dark: {
-        text: _colors["default"].grey['30'],
-        heading: _colors["default"].grey['10'],
-        background: _colors["default"].grey['90'],
-        backgroundSecondary: _colors["default"].grey['80'],
-        lightenBackground: 'rgba(0,0,0,.1)',
-        primary: _colors["default"].brand['50'],
-        muted: _colors["default"].grey['40'],
-        link: _colors["default"].brand['30'],
-        card: _colors["default"].grey['80'],
-        placeholder: _colors["default"].grey['70'],
-        border: 'rgba(255,255,255,.08)',
+      dark: _extends({
+        text: _colors.dark.grey['90'],
+        heading: _colors.dark.grey['100'],
+        background: _colors.dark.grey['5'],
+        backgroundSecondary: _colors.dark.grey['10'],
+        primary: _colors.light.brand['70'],
+        secondary: '#30c',
+        muted: _colors.dark.grey['90'],
+        link: _colors.dark.brand['90'],
+        card: _colors.dark.grey['20'],
+        placeholder: _colors.dark.grey['70'],
+        border: _colors.dark.grey['30'],
         hover: 'rgba(255,255,255,.02)',
-        midnight: _colors["default"].grey['90']
-      }
+        midnight: _colors.dark.grey['90'],
+        navigationStart: _colors.dark.grey['5'],
+        navigationEnd: _colors.dark.grey['5'],
+        success: _colors.dark.green['90'],
+        error: _colors.dark.red['90'],
+        warning: _colors.dark.yellow['90'],
+        dialog: _colors.dark.grey['40'],
+        backgroundMuted: _colors.dark.grey['10']
+      }, _colors.dark)
     }
-  }, _colors["default"]),
+  }),
   shadows: {
-    low: // eslint-disable-next-line max-len
-    '0px 0.11069px 0.193708px rgba(0, 0, 0, 0.0196802), 0px 0.266004px 0.465507px rgba(0, 0, 0, 0.0282725), 0px 0.500862px 0.876509px rgba(0, 0, 0, 0.035), 0px 0.893452px 1.56354px rgba(0, 0, 0, 0.0417275), 0px 1.6711px 2.92443px rgba(0, 0, 0, 0.0503198), 0px 4px 7px rgba(0, 0, 0, 0.07)',
+    low: '0px 1px 5px rgba(0, 0, 0, 0.05), 0px 1px 1px rgba(0, 0, 0, 0.15)',
     medium: // eslint-disable-next-line max-len
-    '0px 1.97961px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 4.36146px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 7.34273px 10.0172px rgba(0, 0, 0, 0.035), 0px 11.2752px 17.869px rgba(0, 0, 0, 0.0417275), 0px 16.7372px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 24px 80px rgba(0, 0, 0, 0.07)',
+    '0px 15px 30px rgba(0, 0, 0, 0.07), 0px 1px 2px rgba(0, 0, 0, 0.03)',
     high: // eslint-disable-next-line max-len
     '0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07)'
   },
@@ -90,48 +154,54 @@ var _default = {
       borderRadius: 2,
       p: 3,
       boxShadow: 'none',
-      backgroundColor: 'backgroundSecondary'
+      backgroundColor: 'backgroundMuted'
     }
   },
   buttons: {
     primary: {
       // you can reference other values defined in the theme
-      color: 'white',
-      bg: _colors["default"].brand['70'],
+      color: 'grey.0',
+      bg: 'grey.100',
       cursor: 'pointer',
-      fontWeight: 'heading',
-      boxShadow: 'low',
+      fontWeight: 'bold',
+      boxShadow: 'none',
       borderRadius: 1,
       border: '1px solid transparent',
-      svg: {
-        position: 'relative',
-        top: '0.125em'
-      },
       '&:hover, &:focus': {
-        backgroundColor: 'brand.80',
-        color: 'white'
+        backgroundColor: 'grey.90',
+        color: 'grey.0'
+      }
+    },
+    border: {
+      background: 'none',
+      border: '1px solid',
+      borderColor: 'border',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      alignItems: 'center',
+      color: 'text',
+      '&:hover': {
+        bg: 'hover'
       }
     },
     danger: {
       // you can reference other values defined in the theme
       variant: 'buttons.primary',
-      bg: _colors["default"].red['70'],
+      bg: 'red.70',
       '&:hover, &:focus': {
         backgroundColor: 'red.80'
       }
     },
     secondary: {
-      color: 'inherit',
+      color: 'text',
       cursor: 'pointer',
       boxShadow: 'none',
+      fontWeight: 'heading',
       borderRadius: 1,
-      backgroundColor: 'backgroundSecondary',
-      svg: {
-        position: 'relative',
-        top: '0.125em'
-      },
+      bg: 'grey.10',
       '&:hover, &:focus': {
-        bg: 'brand.7'
+        color: 'grey.100',
+        bg: 'grey.20'
       }
     },
     text: {
@@ -152,9 +222,6 @@ var _default = {
       cursor: 'pointer',
       fontWeight: 'heading',
       padding: 1,
-      svg: {
-        display: 'block'
-      },
       '&:hover, &:focus': {
         backgroundColor: 'border'
       }
@@ -180,53 +247,15 @@ var _default = {
       }
     }
   },
-  text: {
-    h1: {
-      fontSize: 5,
-      marginBottom: 3,
-      letterSpacing: '-.02em',
-      fontWeight: 'heading'
-    },
-    h2: {
-      fontSize: 4,
-      marginBottom: 2,
-      letterSpacing: '-.005em',
-      fontWeight: 400
-    },
-    h3: {
-      fontSize: 3,
-      marginBottom: 3,
-      letterSpacing: '-.005em',
-      lineHeight: 1.25,
-      fontWeight: 'heading'
-    },
-    h4: {
-      fontSize: 2,
-      marginBottom: 1,
-      lineHeight: 1.5,
-      fontWeight: 'heading'
-    },
-    h5: {
-      fontSize: 1,
-      marginBottom: 1,
-      lineHeight: 1.5,
-      fontWeight: 'body'
-    },
-    caps: {
-      fontSize: 1,
-      marginBottom: 2,
-      textTransform: 'uppercase',
-      color: 'muted',
-      fontWeight: 'bold',
-      letterSpacing: '.05em'
-    }
-  },
+  text: textStyles,
   dialog: {
     modal: {
       position: 'fixed',
       top: '10vh',
       left: '50%',
-      maxWidth: '90%'
+      maxWidth: '90%',
+      backgroundColor: 'background',
+      boxShadow: 'high'
     },
     sidebar: {
       position: 'fixed',
@@ -236,6 +265,7 @@ var _default = {
       overflow: 'auto',
       margin: 0,
       borderRadius: 0,
+      boxShadow: 'high',
       backgroundColor: 'background'
     },
     cover: {
@@ -251,20 +281,23 @@ var _default = {
     }
   },
   styles: {
-    root: {
+    root: _extends({
       fontFamily: 'body',
       lineHeight: 'body',
       fontWeight: 'body',
-      letterSpacing: '-.011em',
       fontSize: 2,
       color: 'text',
       backgroundColor: 'background',
-      'WebkitFontSmoothing': 'antialiased',
-      'MozOsxFontSmoothing': 'grayscale',
+      '-webkit-font-smoothing': 'antialiased',
+      '-moz-osx-font-smoothing': 'grayscale',
       svg: {
-        fill: 'currentColor'
+        fill: 'currentColor',
+        display: 'block'
+      },
+      pre: {
+        fontFamily: 'body'
       }
-    }
+    }, textStyles)
   }
 };
 exports["default"] = _default;

package/package.json

@@ -1,14 +1,22 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.7.0",
+	"version": "0.9.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
 		"build": "cross-env NODE_ENV=production babel src --out-dir build",
-		"watch": "npm run build -- --watch",
-		"storybook": "start-storybook -p 6006"
+		"format": "eslint . --fix",
+		"jest": "NODE_ENV=test jest --detectOpenHandles",
+		"jest:watch": "npm run jest --watch",
+		"lint": "eslint . -f json | eslines --quiet",
+		"storybook": "start-storybook -p 6006",
+		"test": "npm run lint && npm run jest",
+		"watch": "npm run build -- --watch"
 	},
 	"dependencies": {
+		"@radix-ui/react-checkbox": "^0.1.0",
+		"@radix-ui/react-radio-group": "^0.1.0",
+		"@radix-ui/react-tooltip": "^0.1.0",
 		"babel-loader": "^8.2.2",
 		"framer-motion": "^3.9.1",
 		"react-icons": "^4.2.0",
@@ -17,7 +25,7 @@
 	"peerDependencies": {
 		"react": "*",
 		"react-dom": "*",
-		"theme-ui": "^0.6.2"
+		"theme-ui": "0.10.0"
 	},
 	"resolutions": {
 		"react": "17.0.1",
@@ -25,9 +33,27 @@
 		"**/react": "17.0.1",
 		"**/react-dom": "17.0.1"
 	},
+	"jest": {
+		"testURL": "http://localhost",
+		"setupFiles": [
+			"./test/setupTests.js"
+		],
+		"setupFilesAfterEnv": [
+			"./test/setupAfterEnv.js"
+		],
+		"transformIgnorePatterns": [
+			".*.stories.js$"
+		],
+		"transform": {
+			"\\.[jt]sx?$": "babel-jest"
+		}
+	},
 	"devDependencies": {
+		"immer": ">=9.0.6",
+		"@axe-core/react": "4.3.2",
 		"@babel/cli": "^7.14.3",
 		"@babel/core": "7.14.0",
+		"@babel/eslint-parser": "7.15.7",
 		"@babel/plugin-proposal-class-properties": "7.13.0",
 		"@babel/plugin-proposal-class-static-block": "^7.14.5",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
@@ -38,20 +64,31 @@
 		"@babel/preset-flow": "7.13.13",
 		"@babel/preset-react": "^7.12.13",
 		"@babel/runtime": "7.14.0",
-		"@material-ui/icons": "^4.11.2",
 		"@storybook/addon-actions": "5.3.21",
 		"@storybook/addon-links": "5.3.21",
 		"@storybook/addons": "5.3.21",
+		"@storybook/node-logger": "^6.4.0",
 		"@storybook/preset-create-react-app": "^3.2.0",
 		"@storybook/react": "5.3.21",
-		"@theme-ui/color-modes": "^0.10.0",
-		"@theme-ui/components": "^0.10.0",
-		"@theme-ui/core": "^0.10.0",
-		"@theme-ui/mdx": "^0.10.0",
+		"@testing-library/dom": "^8.11.1",
+		"@testing-library/jest-dom": "^5.15.0",
+		"@testing-library/react": "^12.1.2",
+		"babel-jest": "^27.3.1",
 		"cross-env": "^7.0.3",
+		"eslines": "2.1.0",
+		"eslint": "7.32.0",
+		"eslint-config-react-app": "6.0.0",
+		"eslint-config-wpvip": "automattic/eslint-config-wpvip#c6605d1c3a545d43ac2149cd464ec3c38ebc58d5",
+		"eslint-plugin-jest": "24.4.2",
+		"eslint-plugin-json": "3.1.0",
+		"eslint-plugin-jsx-a11y": "6.4.1",
+		"eslint-plugin-no-async-foreach": "0.1.1",
+		"eslint-plugin-react": "7.25.3",
+		"eslint-plugin-wpcalypso": "4.1.0",
+		"jest-axe": "5.0.1",
 		"optimize-css-assets-webpack-plugin": "^6.0.1",
 		"react-input-autosize": "^3.0.0",
-		"react-scripts": "^4.0.3",
-		"theme-ui": "^0.6.2"
+		"react-refresh": "^0.9.0",
+		"react-scripts": "^4.0.3"
 	}
 }

package/src/system/Avatar/Avatar.js

@@ -26,7 +26,10 @@ const Avatar = ( {
 			border: '2px solid',
 			borderColor: isVIP ? 'primary' : 'transparent',
 			overflow: 'hidden',
-			backgroundColor: 'white',
+			backgroundColor: 'primary',
+			display: 'inline-flex',
+			alignItems: 'center',
+			justifyContent: 'center',
 			color: 'white',
 			padding: '1px',
 			textAlign: 'center',
@@ -36,7 +39,7 @@ const Avatar = ( {
 		{ src ? (
 			<Image
 				src={ src }
-				alt={ name }
+				alt={ `Avatar image from ${ name }` }
 				sx={ {
 					borderRadius: 9999,
 					width: '100%',
@@ -48,6 +51,7 @@ const Avatar = ( {
 				as="span"
 				sx={ {
 					color: 'white',
+					mb: 0,
 					fontWeight: 'bold',
 					fontSize: 0,
 					textTransform: 'uppercase',

package/src/system/Avatar/Avatar.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Avatar/Avatar.test.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+/**
+ * Internal dependencies
+ */
+import { Avatar } from './Avatar';
+
+describe( '<Avatar />', () => {
+	it( 'renders the Avatar without an image', () => {
+		render( <Avatar name="John Doe" /> );
+
+		expect( screen.getByText( 'J' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders the Avatar with image', () => {
+		render( <Avatar name="John Doe" src="path/to/image" /> );
+
+		expect( screen.getByAltText( 'Avatar image from John Doe' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should not have basic accessibility issues', async () => {
+		const { container } = render( <Avatar name="John Doe" src="path/to/image" /> );
+		const results = await axe( container );
+
+		expect( results ).toHaveNoViolations();
+	} );
+} );

package/src/system/Badge/Badge.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
- import { Text } from '../';
+import { Text } from '../';
 
 const Badge = ( { variant = 'blue', sx, ...props } ) => (
 	<Text
@@ -16,8 +16,8 @@ const Badge = ( { variant = 'blue', sx, ...props } ) => (
 		sx={ {
 			fontSize: 0,
 			padding: 0,
-			bg: `${ variant }.10`,
-			color: `${ variant }.90`,
+			bg: `${ variant }.20`,
+			color: `${ variant }.100`,
 			py: 1,
 			verticalAlign: 'middle',
 			px: 2,

package/src/system/Badge/Badge.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/BlankState/BlankState.js

@@ -10,10 +10,10 @@ import PropTypes from 'prop-types';
  */
 import { Box, Heading, Text } from '..';
 
-const BlankState = ({ image, icon, title, body, cta }) => {
+const BlankState = ( { image, icon, title, body, cta } ) => {
 	return (
 		<Box sx={{ textAlign: 'center', padding: 5 }}>
-			{icon ? icon : <img src={image} sx={{ mb: 3 }} />}
+			{icon ? icon : <img src={image} sx={{ mb: 3 }} alt="Icon representing the blank state" />}
 			<Heading variant="h4">{title}</Heading>
 			<Text>{body}</Text>
 			<Box sx={{ mt: 3 }}>{cta}</Box>
@@ -22,10 +22,10 @@ const BlankState = ({ image, icon, title, body, cta }) => {
 };
 
 BlankState.propTypes = {
-	image: PropTypes.string,
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	icon: PropTypes.node,
-	title: PropTypes.string,
-	body: PropTypes.string,
+	title: PropTypes.node,
+	body: PropTypes.node,
 	cta: PropTypes.node,
 };
 

package/src/system/BlankState/BlankState.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Box/Box.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Button/Button.js

@@ -6,11 +6,15 @@
 import { Button as ThemeButton } from 'theme-ui';
 import PropTypes from 'prop-types';
 
-const Button = ({ sx, ...props }) => (
+const Button = ( { sx, ...props } ) => (
 	<ThemeButton
 		sx={{
 			verticalAlign: 'middle',
-			display: 'inline-block',
+			display: 'inline-flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			height: '36px',
+			py: 0,
 			'&:disabled': {
 				opacity: 0.5,
 				cursor: 'not-allowed',

package/src/system/Card/Card.js

@@ -11,22 +11,24 @@ import PropTypes from 'prop-types';
  */
 import { Box } from '..';
 
-const Card = React.forwardRef(({ variant = 'primary', sx = {}, ...props }, ref) => (
+const CardComponent = ( { variant = 'primary', sx = {}, ...props }, ref ) => (
 	<Box
 		ref={ref}
 		sx={{
 			// pass variant prop to sx
-			variant: `cards.${variant}`,
+			variant: `cards.${ variant }`,
 			overflow: 'hidden',
 			...sx,
 		}}
 		{...props}
 	/>
-));
+);
 
-Card.propTypes = {
+CardComponent.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,
 };
 
+const Card = React.forwardRef( CardComponent );
+
 export { Card };

package/src/system/Card/Card.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Code/Code.js

@@ -16,9 +16,9 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, ...props } ) =
 			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',
@@ -51,7 +51,7 @@ const Code = ( { prompt = false, showCopy = false, onCopy = null, ...props } ) =
 					sx={ {
 						position: 'absolute',
 						top: 0,
-						bg: 'modes.dark.heading',
+						bg: 'grey.10',
 						right: 0,
 						paddingRight: 2,
 						paddingLeft: 2,