@automattic/vip-design-system 0.19.2 → 0.20.0

package/build/system/Button/Button.js

@@ -32,6 +32,10 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
       justifyContent: 'center',
       height: '36px',
       py: 0,
+      textDecoration: props != null && props.to ? 'underline' : 'none',
+      '&:hover': {
+        textDecoration: 'none'
+      },
       '&:focus': function focus(theme) {
         return theme.outline;
       },
@@ -54,5 +58,6 @@ exports.Button = Button;
 Button.displayName = 'Button';
 Button.propTypes = {
   sx: _propTypes["default"].object,
+  to: _propTypes["default"].any,
   className: _propTypes["default"].any
 };

package/build/system/Button/Button.stories.js

@@ -37,6 +37,14 @@ var Default = function Default() {
         ml: 2
       },
       children: "Secondary"
+    }), (0, _jsxRuntime.jsx)(_.Button, {
+      variant: "text",
+      sx: {
+        ml: 2
+      },
+      as: "a",
+      href: "https://google/com",
+      children: "Button link"
     })]
   });
 };

package/build/system/Heading/Heading.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -19,7 +21,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["variant", "sx", "className"];
 
-var Heading = function Heading(_ref) {
+var Heading = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
       sx = _ref.sx,
@@ -33,11 +35,13 @@ var Heading = function Heading(_ref) {
       // pass variant prop to sx
       variant: "text." + variant
     }, sx),
-    className: (0, _classnames["default"])('vip-heading-component', className)
+    className: (0, _classnames["default"])('vip-heading-component', className),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Heading = Heading;
+Heading.displayName = 'Heading';
 Heading.propTypes = {
   variant: _propTypes["default"].string,
   sx: _propTypes["default"].object,

package/build/system/Heading/Heading.stories.js

@@ -33,9 +33,6 @@ var Default = function Default() {
     }), (0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h5",
       children: "Heading Five"
-    }), (0, _jsxRuntime.jsx)(_.Heading, {
-      variant: "caps",
-      children: "Heading Caps"
     })]
   });
 };

package/build/system/Link/Link.js

@@ -34,7 +34,8 @@ var Link = function Link(_ref) {
         color: 'links.active'
       },
       '&:hover, &:focus': {
-        color: 'links.hover'
+        color: 'links.hover',
+        textDecoration: 'none'
       },
       '&:focus': function focus(theme) {
         return theme.outline;

package/build/system/Progress/Progress.js

@@ -9,49 +9,76 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Spinner = require("../Spinner");
 
-var _ = require("../");
+var _md = require("react-icons/md");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "sx", "className"];
+var _excluded = ["steps", "activeStep", "sx", "forLabel", "className"];
+var prefix = 'vip-progress-component';
+
+var uniqueID = function uniqueID() {
+  return Math.random().toString(36).substring(7);
+};
 
-var Progress = function Progress(_ref) {
+var Progress = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var steps = _ref.steps,
       activeStep = _ref.activeStep,
       sx = _ref.sx,
+      _ref$forLabel = _ref.forLabel,
+      forLabel = _ref$forLabel === void 0 ? '' : _ref$forLabel,
       className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var stepsTotal = steps.length;
+  var isDone = activeStep === stepsTotal - 1;
+  var instance = uniqueID();
+  var htmlFor = prefix + "-" + instance;
+  var currentValue = activeStep + 1;
   return (0, _jsxRuntime.jsxs)(_.Box, {
+    className: (0, _classnames["default"])(prefix, className),
     children: [(0, _jsxRuntime.jsx)(_themeUi.Progress, (0, _extends2["default"])({
-      className: (0, _classnames["default"])('vip-progress-component', className)
-    }, props, {
       sx: (0, _extends2["default"])({
-        color: 'primary'
+        color: 'primary',
+        backgroundColor: 'background'
       }, sx),
-      max: steps.length,
-      value: activeStep + 1
-    })), steps && (0, _jsxRuntime.jsxs)(_.Flex, {
+      max: stepsTotal,
+      value: currentValue,
+      id: htmlFor,
+      "aria-label": forLabel,
+      ref: forwardRef
+    }, props)), steps && (0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {
         alignItems: 'center',
         mt: 2
       },
-      children: [(0, _jsxRuntime.jsx)(_Spinner.Spinner, {
-        size: 24
-      }), (0, _jsxRuntime.jsxs)(_.Heading, {
-        variant: "h4",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-describedby": htmlFor,
+      children: [!isDone && (0, _jsxRuntime.jsx)(_Spinner.Spinner, {
+        size: 24,
+        "aria-hidden": "true"
+      }), isDone && (0, _jsxRuntime.jsx)(_md.MdCheck, {
+        size: 24,
+        "aria-hidden": "true"
+      }), (0, _jsxRuntime.jsxs)(_.Text, {
         sx: {
           ml: 2,
           mb: 0
         },
-        children: [activeStep + 1 + " of " + steps.length, ":", ' ', (0, _jsxRuntime.jsx)(_.Text, {
+        children: [(0, _jsxRuntime.jsxs)("strong", {
+          children: [currentValue + " of " + stepsTotal, ": "]
+        }), (0, _jsxRuntime.jsx)(_.Text, {
           as: "span",
           sx: {
             color: 'muted'
@@ -61,12 +88,14 @@ var Progress = function Progress(_ref) {
       })]
     })]
   });
-};
+});
 
 exports.Progress = Progress;
+Progress.displayName = 'Progress';
 Progress.propTypes = {
   steps: _propTypes["default"].array,
   activeStep: _propTypes["default"].number,
+  forLabel: _propTypes["default"].node,
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any
 };

package/build/system/Progress/Progress.stories.js

@@ -3,10 +3,16 @@
 exports.__esModule = true;
 exports["default"] = exports.Default = void 0;
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * Internal dependencies
  */
@@ -17,11 +23,22 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default() {
+  var _React$useState = _react["default"].useState(0),
+      counter = _React$useState[0],
+      setCounter = _React$useState[1];
+
+  var steps = ['Downloading Data', 'Importing Data...', 'Finalizing', 'Done'];
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (counter < steps.length - 1) {
+        setCounter(counter + 1);
+      }
+    }, 2000);
+  }, [counter, setCounter]);
   return (0, _jsxRuntime.jsx)(_.Progress, {
-    max: 1,
-    value: 1 / 2,
-    steps: ['Downloading Data', 'Importing Data...', 'Finalizing'],
-    activeStep: 1
+    forLabel: "Update site progress",
+    steps: steps,
+    activeStep: counter
   });
 };
 

package/build/system/ResourceList/ResourceList.js

@@ -53,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       listStyleType: 'none',
       margin: 0,
       px: 0

package/build/system/Table/Table.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,7 +19,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 
 var _excluded = ["sx", "className"];
 
-var Table = function Table(_ref) {
+var Table = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var sx = _ref.sx,
       className = _ref.className,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
@@ -28,11 +30,13 @@ var Table = function Table(_ref) {
     }, sx),
     cellPadding: 0,
     cellSpacing: 0,
-    className: (0, _classnames["default"])('vip-table-component', className)
+    className: (0, _classnames["default"])('vip-table-component', className),
+    ref: forwardRef
   }, props));
-};
+});
 
 exports.Table = Table;
+Table.displayName = 'Table';
 Table.propTypes = {
   sx: _propTypes["default"].object,
   className: _propTypes["default"].any

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.19.2",
+	"version": "0.20.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Button/Button.js

@@ -17,6 +17,10 @@ const Button = React.forwardRef( ( { sx, ...props }, forwardRef ) => (
 			justifyContent: 'center',
 			height: '36px',
 			py: 0,
+			textDecoration: props?.to ? 'underline' : 'none',
+			'&:hover': {
+				textDecoration: 'none',
+			},
 			'&:focus': theme => theme.outline,
 			'&:focus-visible': theme => theme.outline,
 			'&:disabled': {
@@ -36,6 +40,7 @@ Button.displayName = 'Button';
 
 Button.propTypes = {
 	sx: PropTypes.object,
+	to: PropTypes.any,
 	className: PropTypes.any,
 };
 

package/src/system/Button/Button.stories.jsx

@@ -19,5 +19,8 @@ export const Default = () => (
 		<Button variant="secondary" sx={ { ml: 2 } }>
 			Secondary
 		</Button>
+		<Button variant="text" sx={ { ml: 2 } } as="a" href="https://google/com">
+			Button link
+		</Button>
 	</React.Fragment>
 );

package/src/system/Heading/Heading.js

@@ -3,24 +3,30 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Heading as ThemeHeading } from 'theme-ui';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Heading = ( { variant = 'h3', sx, className = null, ...props } ) => (
-	<ThemeHeading
-		as={ variant }
-		sx={ {
-			color: 'heading',
-			// pass variant prop to sx
-			variant: `text.${ variant }`,
-			...sx,
-		} }
-		className={ classNames( 'vip-heading-component', className ) }
-		{ ...props }
-	/>
+const Heading = React.forwardRef(
+	( { variant = 'h3', sx, className = null, ...props }, forwardRef ) => (
+		<ThemeHeading
+			as={ variant }
+			sx={ {
+				color: 'heading',
+				// pass variant prop to sx
+				variant: `text.${ variant }`,
+				...sx,
+			} }
+			className={ classNames( 'vip-heading-component', className ) }
+			ref={ forwardRef }
+			{ ...props }
+		/>
+	)
 );
 
+Heading.displayName = 'Heading';
+
 Heading.propTypes = {
 	variant: PropTypes.string,
 	sx: PropTypes.object,

package/src/system/Heading/Heading.stories.jsx

@@ -15,6 +15,5 @@ export const Default = () => (
 		<Heading variant="h3">Heading Three</Heading>
 		<Heading variant="h4">Heading Four</Heading>
 		<Heading variant="h5">Heading Five</Heading>
-		<Heading variant="caps">Heading Caps</Heading>
 	</Box>
 );

package/src/system/Link/Link.js

@@ -21,6 +21,7 @@ const Link = ( { active = false, sx, ...props } ) => (
 			},
 			'&:hover, &:focus': {
 				color: 'links.hover',
+				textDecoration: 'none',
 			},
 			'&:focus': theme => theme.outline,
 			'&:focus-visible': theme => theme.outline,

package/src/system/Progress/Progress.js

@@ -3,45 +3,74 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { Progress as ThemeProgress } from 'theme-ui';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
  */
 import { Spinner } from '../Spinner';
-import { Box, Heading, Text, Flex } from '../';
-import classNames from 'classnames';
+import { MdCheck } from 'react-icons/md';
+import { Box, Text, Flex } from '../';
+
+const prefix = 'vip-progress-component';
+const uniqueID = () => Math.random().toString( 36 ).substring( 7 );
+
+const Progress = React.forwardRef(
+	( { steps, activeStep, sx, forLabel = '', className, ...props }, forwardRef ) => {
+		const stepsTotal = steps.length;
+		const isDone = activeStep === stepsTotal - 1;
+		const instance = uniqueID();
+		const htmlFor = `${ prefix }-${ instance }`;
+		const currentValue = activeStep + 1;
 
-const Progress = ( { steps, activeStep, sx, className, ...props } ) => (
-	<Box>
-		<ThemeProgress
-			className={ classNames( 'vip-progress-component', className ) }
-			{ ...props }
-			sx={ {
-				color: 'primary',
-				...sx,
-			} }
-			max={ steps.length }
-			value={ activeStep + 1 }
-		/>
-		{ steps && (
-			<Flex sx={ { alignItems: 'center', mt: 2 } }>
-				<Spinner size={ 24 } />
-				<Heading variant="h4" sx={ { ml: 2, mb: 0 } }>
-					{ `${ activeStep + 1 } of ${ steps.length }` }:{ ' ' }
-					<Text as="span" sx={ { color: 'muted' } }>
-						{ steps[ activeStep ] }
-					</Text>
-				</Heading>
-			</Flex>
-		) }
-	</Box>
+		return (
+			<Box className={ classNames( prefix, className ) }>
+				<ThemeProgress
+					sx={ {
+						color: 'primary',
+						backgroundColor: 'background',
+						...sx,
+					} }
+					max={ stepsTotal }
+					value={ currentValue }
+					id={ htmlFor }
+					aria-label={ forLabel }
+					ref={ forwardRef }
+					{ ...props }
+				/>
+
+				{ steps && (
+					<Flex
+						sx={ { alignItems: 'center', mt: 2 } }
+						aria-live="polite"
+						aria-atomic="true"
+						aria-describedby={ htmlFor }
+					>
+						{ ! isDone && <Spinner size={ 24 } aria-hidden="true" /> }
+						{ isDone && <MdCheck size={ 24 } aria-hidden="true" /> }
+
+						<Text sx={ { ml: 2, mb: 0 } }>
+							<strong>{ `${ currentValue } of ${ stepsTotal }` }: </strong>
+							<Text as="span" sx={ { color: 'muted' } }>
+								{ steps[ activeStep ] }
+							</Text>
+						</Text>
+					</Flex>
+				) }
+			</Box>
+		);
+	}
 );
 
+Progress.displayName = 'Progress';
+
 Progress.propTypes = {
 	steps: PropTypes.array,
 	activeStep: PropTypes.number,
+	forLabel: PropTypes.node,
 	sx: PropTypes.object,
 	className: PropTypes.any,
 };

package/src/system/Progress/Progress.stories.jsx

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import React, { useEffect } from 'react';
 import { Progress } from '..';
 
 export default {
@@ -8,11 +9,17 @@ export default {
 	component: Progress,
 };
 
-export const Default = () => (
-	<Progress
-		max={ 1 }
-		value={ 1 / 2 }
-		steps={ [ 'Downloading Data', 'Importing Data...', 'Finalizing' ] }
-		activeStep={ 1 }
-	/>
-);
+export const Default = () => {
+	const [ counter, setCounter ] = React.useState( 0 );
+	const steps = [ 'Downloading Data', 'Importing Data...', 'Finalizing', 'Done' ];
+
+	useEffect( () => {
+		setTimeout( () => {
+			if ( counter < steps.length - 1 ) {
+				setCounter( counter + 1 );
+			}
+		}, 2000 );
+	}, [ counter, setCounter ] );
+
+	return <Progress forLabel="Update site progress" steps={ steps } activeStep={ counter } />;
+};

package/src/system/Table/Table.js

@@ -3,18 +3,22 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const Table = ( { sx, className, ...props } ) => (
+const Table = React.forwardRef( ( { sx, className, ...props }, forwardRef ) => (
 	<table
 		sx={ { width: '100%', minWidth: 1024, ...sx } }
 		cellPadding={ 0 }
 		cellSpacing={ 0 }
 		className={ classNames( 'vip-table-component', className ) }
+		ref={ forwardRef }
 		{ ...props }
 	/>
-);
+) );
+
+Table.displayName = 'Table';
 
 Table.propTypes = {
 	sx: PropTypes.object,

package/build/system/Form/MultiSelect.js

@@ -1,38 +0,0 @@
-"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 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
-      }
-    });
-  }
-};
-
-var MultiSelect = function MultiSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
-    styles: customStyles
-  }));
-};
-
-exports.MultiSelect = MultiSelect;

package/build/system/UsageChart/UsageChart.js

@@ -1,60 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.UsageChart = void 0;
-
-var _framerMotion = require("framer-motion");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-var UsageChart = function UsageChart(_ref) {
-  var total = _ref.total,
-      max = _ref.max,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
-  var width = total / max * 100 + '%';
-  var formattedTotal = total;
-
-  if (total > 1000000) {
-    formattedTotal = (total / 1000000).toFixed(2) + "M";
-  } else if (total > 1000) {
-    formattedTotal = (total / 1000).toFixed(2) + "K";
-  }
-
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      height: variant === 'primary' ? 32 : 8,
-      overflow: 'hidden',
-      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
-    },
-    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
-      initial: {
-        width: 0
-      },
-      animate: {
-        width: width
-      },
-      transition: {
-        duration: 0.7
-      },
-      sx: {
-        height: '100%',
-        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
-      }
-    })
-  });
-};
-
-exports.UsageChart = UsageChart;
-UsageChart.propTypes = {
-  total: _propTypes["default"].number,
-  max: _propTypes["default"].number,
-  variant: _propTypes["default"].string
-};

package/build/system/UsageChart/index.js

@@ -1,7 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-
-var _UsageChart = require("./UsageChart");
-
-exports.UsageChart = _UsageChart.UsageChart;