@automattic/vip-design-system 0.23.6 → 0.23.7

package/build/system/Link/Link.js

@@ -26,9 +26,9 @@ var Link = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Link, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
-      color: active ? 'links.active' : 'link',
       textDdecorationThickness: '0.1em',
       textUnderlineOffset: '0.1em',
+      color: active ? 'links.active' : 'link',
       '&:visited': {
         color: 'links.visited'
       },

package/build/system/Notice/Notice.js

@@ -96,7 +96,16 @@ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardR
       color: color + ".90",
       a: {
         color: color + ".90",
-        border: 'none'
+        '&:visited': {
+          color: color + ".90"
+        },
+        '&:active': {
+          color: color + ".90"
+        },
+        '&:hover, &:focus': {
+          color: color + ".90",
+          textDecoration: 'none'
+        }
       }
     }, sx),
     className: (0, _classnames["default"])('vip-notice-component', className),

package/build/system/Notice/Notice.stories.js

@@ -44,8 +44,8 @@ var Default = function Default() {
       sx: {
         mb: 4
       },
-      children: ["It looks like you\u2018re ready to share your ", (0, _jsxRuntime.jsx)("a", {
-        href: "#",
+      children: ["It looks like you\u2018re ready to share your", ' ', (0, _jsxRuntime.jsx)(_.Link, {
+        href: "https://google.com/",
         children: "application with the world."
       })]
     }), (0, _jsxRuntime.jsx)(_.Notice, {

package/build/system/Wizard/Wizard.js

@@ -64,13 +64,15 @@ var Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
     }) : steps.map(function (_ref3, index) {
       var title = _ref3.title,
           subTitle = _ref3.subTitle,
-          children = _ref3.children;
+          children = _ref3.children,
+          titleVariant = _ref3.titleVariant;
       return (0, _jsxRuntime.jsx)(_.WizardStep, {
         active: index === activeStep,
         complete: completed.includes(index),
         order: index + 1,
         subTitle: subTitle,
         title: title,
+        titleVariant: titleVariant,
         children: children
       }, index);
     })

package/build/system/Wizard/Wizard.stories.js

@@ -29,6 +29,7 @@ exports["default"] = _default;
 var Default = function Default() {
   var steps = [{
     title: 'Choose Domain',
+    titleVariant: 'h2',
     subTitle: 'You can bring a domain name you already own, or buy a new one.',
     children: (0, _jsxRuntime.jsxs)(_.Box, {
       children: [(0, _jsxRuntime.jsx)(_.Label, {
@@ -41,45 +42,24 @@ var Default = function Default() {
       })]
     })
   }, {
-    title: 'Configure DNS'
+    title: 'Configure DNS',
+    titleVariant: 'h2'
   }, {
-    title: 'Configure Certificate'
+    title: 'Configure Certificate',
+    titleVariant: 'h2'
   }, {
-    title: 'Verify Domain'
+    title: 'Verify Domain',
+    titleVariant: 'h2'
   }];
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Flex, {
-      sx: {
-        alignItems: 'center'
-      },
-      children: (0, _jsxRuntime.jsx)(_.Box, {
-        sx: {
-          flex: '1 1 auto'
-        },
-        children: (0, _jsxRuntime.jsxs)(_.Heading, {
-          variant: "h1",
-          sx: {
-            display: 'flex',
-            alignItems: 'center',
-            mb: 1
-          },
-          children: ["Add Domain: ", (0, _jsxRuntime.jsx)("span", {
-            sx: {
-              color: 'muted',
-              ml: 2
-            },
-            children: "Production"
-          })]
-        })
-      })
-    }), (0, _jsxRuntime.jsx)(_.Box, {
+  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
+    children: (0, _jsxRuntime.jsx)(_.Box, {
       mt: 4,
       children: (0, _jsxRuntime.jsx)(_.Wizard, {
         activeStep: 0,
         steps: steps,
         className: "vip-wizard-xyz"
       })
-    })]
+    })
   });
 };
 

package/build/system/Wizard/WizardStep.js

@@ -31,7 +31,9 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
       complete = _ref$complete === void 0 ? false : _ref$complete,
       children = _ref.children,
       active = _ref.active,
-      order = _ref.order;
+      order = _ref.order,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant;
   var borderLeftColor = 'border';
 
   if (complete) {
@@ -49,6 +51,7 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
   }
 
   return (0, _jsxRuntime.jsxs)(_.Card, {
+    as: "section",
     sx: {
       boxShadow: active ? 'low' : 'none',
       borderLeft: '2px solid',
@@ -68,12 +71,14 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     "data-active": active || undefined,
     ref: forwardRef,
     children: [typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
-      variant: "h4",
+      variant: titleVariant,
       sx: {
         mb: 0,
         display: 'flex',
         alignItems: 'center',
-        color: color
+        color: color,
+        fontSize: 2,
+        fontWeight: active ? 'bold' : 'normal'
       },
       children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         "aria-hidden": "true",
@@ -109,5 +114,6 @@ WizardStep.propTypes = {
   complete: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node
+  title: _propTypes["default"].node,
+  titleVariant: _propTypes["default"].string
 };

package/build/system/Wizard/WizardStepHorizontal.js

@@ -27,14 +27,17 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 var WizardStepHorizontal = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var title = _ref.title,
       active = _ref.active,
-      order = _ref.order;
+      order = _ref.order,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant;
   var color = active ? 'heading' : 'muted';
   return typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
-    variant: "h4",
+    variant: titleVariant,
     sx: {
       mb: 0,
       display: 'flex',
       alignItems: 'center',
+      fontSize: 2,
       color: color
     },
     "data-step": order,
@@ -66,5 +69,6 @@ WizardStepHorizontal.propTypes = {
   active: _propTypes["default"].bool,
   order: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node
+  title: _propTypes["default"].node,
+  titleVariant: _propTypes["default"].string
 };

package/package.json

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

package/src/system/Link/Link.js

@@ -10,9 +10,9 @@ import PropTypes from 'prop-types';
 const Link = React.forwardRef( ( { active = false, sx, ...props }, forwardRef ) => (
 	<ThemeLink
 		sx={ {
-			color: active ? 'links.active' : 'link',
 			textDdecorationThickness: '0.1em',
 			textUnderlineOffset: '0.1em',
+			color: active ? 'links.active' : 'link',
 			'&:visited': {
 				color: 'links.visited',
 			},

package/src/system/Notice/Notice.js

@@ -74,7 +74,16 @@ const Notice = React.forwardRef(
 					color: `${ color }.90`,
 					a: {
 						color: `${ color }.90`,
-						border: 'none',
+						'&:visited': {
+							color: `${ color }.90`,
+						},
+						'&:active': {
+							color: `${ color }.90`,
+						},
+						'&:hover, &:focus': {
+							color: `${ color }.90`,
+							textDecoration: 'none',
+						},
 					},
 					...sx,
 				} }

package/src/system/Notice/Notice.stories.jsx

@@ -6,7 +6,7 @@
  * Internal dependencies
  */
 import React from 'react';
-import { Notice, Text } from '..';
+import { Notice, Text, Link } from '..';
 
 export default {
 	title: 'Notice',
@@ -27,7 +27,8 @@ export const Default = () => (
 		</Notice>
 
 		<Notice variant="success" sx={ { mb: 4 } }>
-			It looks like you&lsquo;re ready to share your <a href="#">application with the world.</a>
+			It looks like you&lsquo;re ready to share your{ ' ' }
+			<Link href="https://google.com/">application with the world.</Link>
 		</Notice>
 
 		<Notice sx={ { mb: 4 } } title="This notice has only the title prop passed" />

package/src/system/Wizard/Wizard.js

@@ -43,7 +43,7 @@ const Wizard = React.forwardRef(
 						{ steps[ activeStep ].children }
 					</Box>
 				) : (
-					steps.map( ( { title, subTitle, children }, index ) => (
+					steps.map( ( { title, subTitle, children, titleVariant }, index ) => (
 						<WizardStep
 							active={ index === activeStep }
 							complete={ completed.includes( index ) }
@@ -51,6 +51,7 @@ const Wizard = React.forwardRef(
 							order={ index + 1 }
 							subTitle={ subTitle }
 							title={ title }
+							titleVariant={ titleVariant }
 						>
 							{ children }
 						</WizardStep>

package/src/system/Wizard/Wizard.stories.jsx

@@ -8,7 +8,7 @@ import React from 'react';
 /**
  * Internal dependencies
  */
-import { Wizard, Flex, Box, Heading, Label, Input, Button } from '..';
+import { Wizard, Box, Label, Input, Button } from '..';
 
 export default {
 	title: 'Wizard',
@@ -19,6 +19,7 @@ export const Default = () => {
 	const steps = [
 		{
 			title: 'Choose Domain',
+			titleVariant: 'h2',
 			subTitle: 'You can bring a domain name you already own, or buy a new one.',
 			children: (
 				<Box>
@@ -30,23 +31,19 @@ export const Default = () => {
 		},
 		{
 			title: 'Configure DNS',
+			titleVariant: 'h2',
 		},
 		{
 			title: 'Configure Certificate',
+			titleVariant: 'h2',
 		},
 		{
 			title: 'Verify Domain',
+			titleVariant: 'h2',
 		},
 	];
 	return (
 		<React.Fragment>
-			<Flex sx={ { alignItems: 'center' } }>
-				<Box sx={ { flex: '1 1 auto' } }>
-					<Heading variant="h1" sx={ { display: 'flex', alignItems: 'center', mb: 1 } }>
-						Add Domain: <span sx={ { color: 'muted', ml: 2 } }>Production</span>
-					</Heading>
-				</Box>
-			</Flex>
 			<Box mt={ 4 }>
 				<Wizard activeStep={ 0 } steps={ steps } className="vip-wizard-xyz" />
 			</Box>

package/src/system/Wizard/WizardStep.js

@@ -13,7 +13,10 @@ import PropTypes from 'prop-types';
 import { Card, Heading, Text, Flex } from '..';
 
 const WizardStep = React.forwardRef(
-	( { title, subTitle, complete = false, children, active, order }, forwardRef ) => {
+	(
+		{ title, subTitle, complete = false, children, active, order, titleVariant = 'h3' },
+		forwardRef
+	) => {
 		let borderLeftColor = 'border';
 
 		if ( complete ) {
@@ -32,6 +35,7 @@ const WizardStep = React.forwardRef(
 
 		return (
 			<Card
+				as="section"
 				sx={ {
 					boxShadow: active ? 'low' : 'none',
 					borderLeft: '2px solid',
@@ -53,12 +57,14 @@ const WizardStep = React.forwardRef(
 			>
 				{ typeof title === 'string' ? (
 					<Heading
-						variant="h4"
+						variant={ titleVariant }
 						sx={ {
 							mb: 0,
 							display: 'flex',
 							alignItems: 'center',
-							color: color,
+							color,
+							fontSize: 2,
+							fontWeight: active ? 'bold' : 'normal',
 						} }
 					>
 						<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
@@ -88,6 +94,7 @@ WizardStep.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
+	titleVariant: PropTypes.string,
 };
 
 export { WizardStep };

package/src/system/Wizard/WizardStepHorizontal.js

@@ -12,32 +12,35 @@ import PropTypes from 'prop-types';
  */
 import { Heading, Flex } from '..';
 
-const WizardStepHorizontal = React.forwardRef( ( { title, active, order }, forwardRef ) => {
-	const color = active ? 'heading' : 'muted';
+const WizardStepHorizontal = React.forwardRef(
+	( { title, active, order, titleVariant = 'h3' }, forwardRef ) => {
+		const color = active ? 'heading' : 'muted';
 
-	return typeof title === 'string' ? (
-		<Heading
-			variant="h4"
-			sx={ {
-				mb: 0,
-				display: 'flex',
-				alignItems: 'center',
-				color,
-			} }
-			data-step={ order }
-			data-active={ active || undefined }
-			ref={ forwardRef }
-		>
-			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-			{ title }
-		</Heading>
-	) : (
-		<Flex sx={ { alignItems: 'center', color } }>
-			<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-			{ title }
-		</Flex>
-	);
-} );
+		return typeof title === 'string' ? (
+			<Heading
+				variant={ titleVariant }
+				sx={ {
+					mb: 0,
+					display: 'flex',
+					alignItems: 'center',
+					fontSize: 2,
+					color,
+				} }
+				data-step={ order }
+				data-active={ active || undefined }
+				ref={ forwardRef }
+			>
+				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+				{ title }
+			</Heading>
+		) : (
+			<Flex sx={ { alignItems: 'center', color } }>
+				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+				{ title }
+			</Flex>
+		);
+	}
+);
 
 WizardStepHorizontal.displayName = 'WizardStepHorizontal';
 
@@ -46,6 +49,7 @@ WizardStepHorizontal.propTypes = {
 	order: PropTypes.number.isRequired,
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
+	titleVariant: PropTypes.string,
 };
 
 export { WizardStepHorizontal };