@automattic/vip-design-system 0.23.5 → 0.23.7

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

@@ -9,14 +9,14 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master ]
+    branches: [master]
   schedule:
     - cron: '32 21 * * 6'
 
@@ -32,40 +32,40 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        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
+      - name: Checkout repository
+        uses: actions/checkout@v3
 
-    # 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
+      # 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
+      # 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
+      # ℹ️ 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
+      # ✏️ 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
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

package/.github/workflows/nodejs.yaml

@@ -10,14 +10,14 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           persist-credentials: false
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install -g npm@7.24.2

package/build/system/Link/Link.js

@@ -24,11 +24,11 @@ var Link = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
       active = _ref$active === void 0 ? false : _ref$active,
       sx = _ref.sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(_themeUi.Link, (0, _extends2["default"])({}, props, {
+  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'
       },
@@ -47,7 +47,7 @@ var Link = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
       }
     }, sx),
     ref: forwardRef
-  }));
+  }, props));
 });
 
 exports.Link = Link;

package/build/system/Notice/Notice.js

@@ -21,7 +21,7 @@ var _ = require("../");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "inline", "children", "title", "sx", "className"];
+var _excluded = ["variant", "inline", "children", "title", "sx", "className", "headingVariant"];
 
 var NoticeIcon = function NoticeIcon(_ref) {
   var color = _ref.color,
@@ -68,6 +68,8 @@ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardR
       sx = _ref2$sx === void 0 ? {} : _ref2$sx,
       _ref2$className = _ref2.className,
       className = _ref2$className === void 0 ? null : _ref2$className,
+      _ref2$headingVariant = _ref2.headingVariant,
+      headingVariant = _ref2$headingVariant === void 0 ? 'p' : _ref2$headingVariant,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
   var color = 'yellow';
 
@@ -94,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),
@@ -117,11 +128,12 @@ var Notice = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardR
           ml: 3
         },
         children: [title && (0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          as: "p",
+          as: headingVariant,
           sx: {
             color: color + ".100",
-            mb: 0
+            mb: 0,
+            fontSize: 2,
+            fontWeight: 'bold'
           },
           children: title
         }), children]
@@ -139,5 +151,6 @@ Notice.propTypes = {
   sx: _propTypes["default"].object,
   title: _propTypes["default"].node,
   variant: _propTypes["default"].string,
+  headingVariant: _propTypes["default"].string,
   className: _propTypes["default"].any
 };

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

@@ -26,27 +26,26 @@ exports["default"] = _default;
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(_.Notice, {
+    children: [(0, _jsxRuntime.jsx)(_.Notice, {
       variant: "alert",
+      headingVariant: "h2",
       sx: {
         mb: 4
       },
-      children: [(0, _jsxRuntime.jsx)(_.Heading, {
-        variant: "h4",
-        children: "Your site is ready to launch!"
-      }), (0, _jsxRuntime.jsx)(_.Text, {
+      title: "Your site is ready to launch!",
+      children: (0, _jsxRuntime.jsx)(_.Text, {
         sx: {
           mb: 0
         },
         children: "It looks like you\u2018re ready to share your application with the world."
-      })]
+      })
     }), (0, _jsxRuntime.jsxs)(_.Notice, {
       variant: "success",
       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, {
@@ -66,15 +65,14 @@ var Default = function Default() {
         },
         children: "This notice has a title and children"
       })
-    }), (0, _jsxRuntime.jsxs)(_.Notice, {
+    }), (0, _jsxRuntime.jsx)(_.Notice, {
       variant: "alert",
       sx: {
         mb: 4
       },
-      children: [(0, _jsxRuntime.jsx)(_.Heading, {
-        variant: "h4",
-        children: "There are errors in your form"
-      }), (0, _jsxRuntime.jsxs)("ul", {
+      title: "There are errors in your form",
+      headingVariant: "h2",
+      children: (0, _jsxRuntime.jsxs)("ul", {
         sx: {
           mb: 0
         },
@@ -94,7 +92,7 @@ var Default = function Default() {
             children: "Please agree to the terms."
           })
         })]
-      })]
+      })
     })]
   });
 };

package/build/system/OptionRow/OptionRow.js

@@ -21,7 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className", "variant"];
+var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "small", "disabled", "order", "className", "variant"];
 var disabledStyles = {
   border: '1px solid',
   borderColor: 'borders.2',
@@ -53,7 +53,6 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
       subTitle = _ref.subTitle,
       body = _ref.body,
       meta = _ref.meta,
-      to = _ref.to,
       _ref$small = _ref.small,
       small = _ref$small === void 0 ? false : _ref$small,
       _ref$disabled = _ref.disabled,
@@ -67,19 +66,15 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var mergedCard = disabled ? disabledStyles : {};
   var inlineStyles = inline ? gridInlineStyle : regularGridStyle(small);
-  return (0, _jsxRuntime.jsxs)(_.Grid, (0, _extends2["default"])({
-    to: to,
+  return (0, _jsxRuntime.jsxs)(_.Grid, {
     columns: [1, 1, 'auto 1fr auto'],
     gap: [3, 3, "" + (small ? 3 : 4)],
     "data-order": order || undefined,
     className: (0, _classnames["default"])('vip-option-row-component', className),
-    ref: forwardRef
-  }, props, {
+    ref: forwardRef,
     sx: (0, _extends2["default"])({
+      position: 'relative',
       alignItems: 'center',
-      cursor: disabled ? 'auto' : 'pointer',
-      textDecoration: 'none',
-      color: 'text',
       '&:hover': !disabled && {
         backgroundColor: 'hover'
       }
@@ -107,19 +102,35 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
       sx: {
         flex: '1 1 auto'
       },
-      children: [(0, _jsxRuntime.jsxs)(_.Heading, {
+      children: [(0, _jsxRuntime.jsx)(_.Heading, {
         variant: variant,
         sx: {
           mb: subTitle || body ? 1 : 0,
           fontSize: 2,
           fontWeight: 'bold'
         },
-        children: [label, badge && (0, _jsxRuntime.jsx)(_.Badge, {
+        children: (0, _jsxRuntime.jsxs)(_.Link, (0, _extends2["default"])({
+          as: 'a',
           sx: {
-            marginLeft: 2
-          },
-          children: badge
-        })]
+            cursor: disabled ? 'auto' : 'pointer',
+            color: disabled ? 'text' : 'link',
+            '&:after': {
+              content: '""',
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0
+            }
+          }
+        }, props, {
+          children: [label, badge && (0, _jsxRuntime.jsx)(_.Badge, {
+            sx: {
+              marginLeft: 2
+            },
+            children: badge
+          })]
+        }))
       }), subTitle && (0, _jsxRuntime.jsx)(_.Text, {
         sx: {
           mb: 1,
@@ -142,7 +153,7 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
         "aria-hidden": "true"
       })
     })]
-  }));
+  });
 });
 
 exports.OptionRow = OptionRow;
@@ -156,7 +167,6 @@ OptionRow.propTypes = {
   subTitle: _propTypes["default"].node,
   body: _propTypes["default"].node,
   meta: _propTypes["default"].node,
-  to: _propTypes["default"].string,
   small: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
   order: _propTypes["default"].number,

package/build/system/OptionRow/OptionRow.stories.js

@@ -24,13 +24,13 @@ var Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_.Box, {
     children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
       image: image1,
-      label: "Option Row",
+      label: "Option Row 1",
       subTitle: "Mostly used to link off to other pages.",
       as: "a",
       href: "http://google.com/"
     }), (0, _jsxRuntime.jsx)(_.OptionRow, {
       image: image2,
-      label: "Option Row",
+      label: "Option Row 2",
       subTitle: "Mostly used to link off to other pages.",
       as: "a",
       href: "http://google.com/",
@@ -44,10 +44,11 @@ var Default = function Default() {
       meta: ""
     }), (0, _jsxRuntime.jsx)(_.OptionRow, {
       image: image2,
-      label: "Custom heading HTML h5",
+      label: "Custom heading HTML h2",
       subTitle: "Use the variant prop to adjust the heading structure",
-      as: _.Box,
-      variant: "h5",
+      as: "a",
+      href: "http://google.com/",
+      variant: "h2",
       meta: ""
     })]
   });

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.5",
+	"version": "0.23.7",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Link/Link.js

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

package/src/system/Notice/Notice.js

@@ -38,7 +38,16 @@ NoticeIcon.propTypes = {
 
 const Notice = React.forwardRef(
 	(
-		{ variant = 'warning', inline = false, children, title, sx = {}, className = null, ...props },
+		{
+			variant = 'warning',
+			inline = false,
+			children,
+			title,
+			sx = {},
+			className = null,
+			headingVariant = 'p',
+			...props
+		},
 		forwardRef
 	) => {
 		let color = 'yellow';
@@ -65,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,
 				} }
@@ -88,7 +106,10 @@ const Notice = React.forwardRef(
 
 					<Box sx={ { ml: 3 } }>
 						{ title && (
-							<Heading variant="h4" as="p" sx={ { color: `${ color }.100`, mb: 0 } }>
+							<Heading
+								as={ headingVariant }
+								sx={ { color: `${ color }.100`, mb: 0, fontSize: 2, fontWeight: 'bold' } }
+							>
 								{ title }
 							</Heading>
 						) }
@@ -109,6 +130,7 @@ Notice.propTypes = {
 	sx: PropTypes.object,
 	title: PropTypes.node,
 	variant: PropTypes.string,
+	headingVariant: PropTypes.string,
 	className: PropTypes.any,
 };
 

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

@@ -6,7 +6,7 @@
  * Internal dependencies
  */
 import React from 'react';
-import { Heading, Notice, Text } from '..';
+import { Notice, Text, Link } from '..';
 
 export default {
 	title: 'Notice',
@@ -15,15 +15,20 @@ export default {
 
 export const Default = () => (
 	<React.Fragment>
-		<Notice variant="alert" sx={ { mb: 4 } }>
-			<Heading variant="h4">Your site is ready to launch!</Heading>
+		<Notice
+			variant="alert"
+			headingVariant="h2"
+			sx={ { mb: 4 } }
+			title="Your site is ready to launch!"
+		>
 			<Text sx={ { mb: 0 } }>
 				It looks like you&lsquo;re ready to share your application with the world.
 			</Text>
 		</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" />
@@ -32,8 +37,12 @@ export const Default = () => (
 			<Text sx={ { mb: 0 } }>This notice has a title and children</Text>
 		</Notice>
 
-		<Notice variant="alert" sx={ { mb: 4 } }>
-			<Heading variant="h4">There are errors in your form</Heading>
+		<Notice
+			variant="alert"
+			sx={ { mb: 4 } }
+			title="There are errors in your form"
+			headingVariant="h2"
+		>
 			<ul sx={ { mb: 0 } }>
 				<li>
 					<a href="#name">Please enter your name.</a>

package/src/system/OptionRow/OptionRow.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Badge, Box, Grid, Heading, Text } from '..';
+import { Badge, Box, Grid, Heading, Text, Link } from '..';
 import classNames from 'classnames';
 
 const disabledStyles = {
@@ -44,7 +44,6 @@ const OptionRow = React.forwardRef(
 			subTitle,
 			body,
 			meta,
-			to,
 			small = false,
 			disabled = false,
 			order = null,
@@ -59,18 +58,14 @@ const OptionRow = React.forwardRef(
 
 		return (
 			<Grid
-				to={ to }
 				columns={ [ 1, 1, 'auto 1fr auto' ] }
 				gap={ [ 3, 3, `${ small ? 3 : 4 }` ] }
 				data-order={ order || undefined }
 				className={ classNames( 'vip-option-row-component', className ) }
 				ref={ forwardRef }
-				{ ...props }
 				sx={ {
+					position: 'relative',
 					alignItems: 'center',
-					cursor: disabled ? 'auto' : 'pointer',
-					textDecoration: 'none',
-					color: 'text',
 					'&:hover': ! disabled && {
 						backgroundColor: 'hover',
 					},
@@ -106,8 +101,25 @@ const OptionRow = React.forwardRef(
 						variant={ variant }
 						sx={ { mb: subTitle || body ? 1 : 0, fontSize: 2, fontWeight: 'bold' } }
 					>
-						{ label }
-						{ badge && <Badge sx={ { marginLeft: 2 } }>{ badge }</Badge> }
+						<Link
+							as={ 'a' }
+							sx={ {
+								cursor: disabled ? 'auto' : 'pointer',
+								color: disabled ? 'text' : 'link',
+								'&:after': {
+									content: '""',
+									position: 'absolute',
+									top: 0,
+									right: 0,
+									bottom: 0,
+									left: 0,
+								},
+							} }
+							{ ...props }
+						>
+							{ label }
+							{ badge && <Badge sx={ { marginLeft: 2 } }>{ badge }</Badge> }
+						</Link>
 					</Heading>
 					{ subTitle && <Text sx={ { mb: 1, color: 'text' } }>{ subTitle }</Text> }
 					{ body && <Text sx={ { mb: 0 } }>{ body }</Text> }
@@ -137,7 +149,6 @@ OptionRow.propTypes = {
 	subTitle: PropTypes.node,
 	body: PropTypes.node,
 	meta: PropTypes.node,
-	to: PropTypes.string,
 	small: PropTypes.bool,
 	disabled: PropTypes.bool,
 	order: PropTypes.number,

package/src/system/OptionRow/OptionRow.stories.jsx

@@ -19,19 +19,20 @@ export const Default = () => (
 	<Box>
 		<OptionRow
 			image={ image1 }
-			label="Option Row"
+			label="Option Row 1"
 			subTitle="Mostly used to link off to other pages."
 			as="a"
 			href="http://google.com/"
 		/>
 		<OptionRow
 			image={ image2 }
-			label="Option Row"
+			label="Option Row 2"
 			subTitle="Mostly used to link off to other pages."
 			as="a"
 			href="http://google.com/"
 			order={ 2 }
 		/>
+
 		<OptionRow
 			image={ image2 }
 			label="Option Row – Disabled"
@@ -40,12 +41,14 @@ export const Default = () => (
 			disabled
 			meta=""
 		/>
+
 		<OptionRow
 			image={ image2 }
-			label="Custom heading HTML h5"
+			label="Custom heading HTML h2"
 			subTitle="Use the variant prop to adjust the heading structure"
-			as={ Box }
-			variant="h5"
+			as="a"
+			href="http://google.com/"
+			variant="h2"
 			meta=""
 		/>
 	</Box>

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 };