@automattic/vip-design-system 0.23.4 → 0.23.6

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/Button/Button.js

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

package/build/system/Link/Link.js

@@ -24,7 +24,7 @@ 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',
@@ -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';
 
@@ -117,11 +119,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 +142,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,20 +26,19 @@ 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: {
@@ -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,24 +21,23 @@ 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"];
+var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "small", "disabled", "order", "className", "variant"];
 var disabledStyles = {
   border: '1px solid',
   borderColor: 'borders.2',
   background: 'none',
   boxShadow: 'none',
-  color: 'grey.70'
+  color: 'text'
 };
 var gridInlineStyle = {
   py: 2,
-  px: 2,
-  mx: -2
+  px: 2
 };
 
-var regularGridStyle = function regularGridStyle(small) {
+var regularGridStyle = function regularGridStyle() {
   return {
     py: 3,
-    px: [3, 3, small ? 3 : 5],
+    px: 3,
     borderBottom: '1px solid',
     borderColor: 'borders.2'
   };
@@ -54,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,
@@ -63,22 +61,20 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
       order = _ref$order === void 0 ? null : _ref$order,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
       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: 'inherit',
       '&:hover': !disabled && {
         backgroundColor: 'hover'
       }
@@ -99,28 +95,46 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
           sx: {
             display: 'block'
           },
-          alt: "Image representing the list item"
+          alt: ""
         })
       }) : icon && icon
     }), (0, _jsxRuntime.jsxs)(_.Box, {
       sx: {
         flex: '1 1 auto'
       },
-      children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-        variant: "h4",
+      children: [(0, _jsxRuntime.jsx)(_.Heading, {
+        variant: variant,
         sx: {
-          mb: subTitle || body ? 1 : 0
+          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,
-          color: 'muted'
+          color: 'text'
         },
         children: subTitle
       }), body && (0, _jsxRuntime.jsx)(_.Text, {
@@ -132,10 +146,14 @@ var OptionRow = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwar
     }), false !== meta && '' !== meta && (0, _jsxRuntime.jsx)(_.Box, {
       "data-testid": "meta",
       children: meta ? meta : (0, _jsxRuntime.jsx)(_md.MdArrowForward, {
-        size: 24
+        size: 24,
+        sx: {
+          color: 'text'
+        },
+        "aria-hidden": "true"
       })
     })]
-  }));
+  });
 });
 
 exports.OptionRow = OptionRow;
@@ -149,9 +167,9 @@ 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,
-  className: _propTypes["default"].any
+  className: _propTypes["default"].any,
+  variant: _propTypes["default"].string
 };

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

@@ -22,19 +22,18 @@ var image2 = // eslint-disable-next-line max-len
 
 var Default = function Default() {
   return (0, _jsxRuntime.jsxs)(_.Box, {
-    sx: {
-      mx: -5
-    },
     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"
+      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/",
       order: 2
     }), (0, _jsxRuntime.jsx)(_.OptionRow, {
       image: image2,
@@ -43,6 +42,14 @@ var Default = function Default() {
       as: _.Box,
       disabled: true,
       meta: ""
+    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
+      image: image2,
+      label: "Custom heading HTML h2",
+      subTitle: "Use the variant prop to adjust the heading structure",
+      as: "a",
+      href: "http://google.com/",
+      variant: "h2",
+      meta: ""
     })]
   });
 };

package/build/system/OptionRow/OptionRow.test.js

@@ -53,37 +53,32 @@ describe('<OptionRow />', function () {
     }, _callee);
   })));
   it('renders a disabled OptionRow', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var image1, _render2, container;
+    var _render2, container;
 
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            image1 = // eslint-disable-next-line max-len
-            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E";
             _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_OptionRow.OptionRow, {
-              image: image1,
               label: "Option Row",
               subTitle: "Mostly used to link off to other pages.",
               as: "a",
               disabled: true,
+              variant: "h3",
               meta: ""
             })), container = _render2.container;
-            expect(_react.screen.getByAltText('Image representing the list item').closest('div')).toHaveStyle({
-              background: 'none'
-            });
             expect(_react.screen.queryByTestId('meta')).not.toBeInTheDocument(); // Check for accessibility issues
 
             _context2.t0 = expect;
-            _context2.next = 7;
+            _context2.next = 5;
             return (0, _jestAxe.axe)(container);
 
-          case 7:
+          case 5:
             _context2.t1 = _context2.sent;
-            _context2.next = 10;
+            _context2.next = 8;
             return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
 
-          case 10:
+          case 8:
           case "end":
             return _context2.stop();
         }

package/package.json

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

package/src/system/Button/Button.js

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

package/src/system/Link/Link.js

@@ -9,7 +9,6 @@ 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',
@@ -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';
@@ -88,7 +97,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 +121,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 } from '..';
 
 export default {
 	title: 'Notice',
@@ -15,8 +15,12 @@ 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>
@@ -32,8 +36,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 = {
@@ -18,18 +18,17 @@ const disabledStyles = {
 	borderColor: 'borders.2',
 	background: 'none',
 	boxShadow: 'none',
-	color: 'grey.70',
+	color: 'text',
 };
 
 const gridInlineStyle = {
 	py: 2,
 	px: 2,
-	mx: -2,
 };
 
-const regularGridStyle = small => ( {
+const regularGridStyle = () => ( {
 	py: 3,
-	px: [ 3, 3, small ? 3 : 5 ],
+	px: 3,
 	borderBottom: '1px solid',
 	borderColor: 'borders.2',
 } );
@@ -45,11 +44,11 @@ const OptionRow = React.forwardRef(
 			subTitle,
 			body,
 			meta,
-			to,
 			small = false,
 			disabled = false,
 			order = null,
 			className = null,
+			variant = 'h3',
 			...props
 		},
 		forwardRef
@@ -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: 'inherit',
 					'&:hover': ! disabled && {
 						backgroundColor: 'hover',
 					},
@@ -93,12 +88,7 @@ const OptionRow = React.forwardRef(
 							{ React.isValidElement( image ) ? (
 								image
 							) : (
-								<img
-									src={ image }
-									width={ small ? 32 : 48 }
-									sx={ { display: 'block' } }
-									alt="Image representing the list item"
-								/>
+								<img src={ image } width={ small ? 32 : 48 } sx={ { display: 'block' } } alt="" />
 							) }
 						</Box>
 					) : (
@@ -107,15 +97,41 @@ const OptionRow = React.forwardRef(
 				</Box>
 
 				<Box sx={ { flex: '1 1 auto' } }>
-					<Heading variant="h4" sx={ { mb: subTitle || body ? 1 : 0 } }>
-						{ label }
-						{ badge && <Badge sx={ { marginLeft: 2 } }>{ badge }</Badge> }
+					<Heading
+						variant={ variant }
+						sx={ { mb: subTitle || body ? 1 : 0, fontSize: 2, fontWeight: 'bold' } }
+					>
+						<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: 'muted' } }>{ subTitle }</Text> }
+					{ subTitle && <Text sx={ { mb: 1, color: 'text' } }>{ subTitle }</Text> }
 					{ body && <Text sx={ { mb: 0 } }>{ body }</Text> }
 				</Box>
 				{ false !== meta && '' !== meta && (
-					<Box data-testid="meta">{ meta ? meta : <MdArrowForward size={ 24 } /> }</Box>
+					<Box data-testid="meta">
+						{ meta ? (
+							meta
+						) : (
+							<MdArrowForward size={ 24 } sx={ { color: 'text' } } aria-hidden="true" />
+						) }
+					</Box>
 				) }
 			</Grid>
 		);
@@ -133,11 +149,11 @@ OptionRow.propTypes = {
 	subTitle: PropTypes.node,
 	body: PropTypes.node,
 	meta: PropTypes.node,
-	to: PropTypes.string,
 	small: PropTypes.bool,
 	disabled: PropTypes.bool,
 	order: PropTypes.number,
 	className: PropTypes.any,
+	variant: PropTypes.string,
 };
 
 export { OptionRow };

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

@@ -16,20 +16,23 @@ const image2 =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
 
 export const Default = () => (
-	<Box sx={ { mx: -5 } }>
+	<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"
@@ -38,5 +41,15 @@ export const Default = () => (
 			disabled
 			meta=""
 		/>
+
+		<OptionRow
+			image={ image2 }
+			label="Custom heading HTML h2"
+			subTitle="Use the variant prop to adjust the heading structure"
+			as="a"
+			href="http://google.com/"
+			variant="h2"
+			meta=""
+		/>
 	</Box>
 );

package/src/system/OptionRow/OptionRow.test.js

@@ -22,26 +22,17 @@ describe( '<OptionRow />', () => {
 	} );
 
 	it( 'renders a disabled OptionRow', async () => {
-		const image1 =
-			// eslint-disable-next-line max-len
-			"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none' %3E%3Cpath d='M71.4 15.3L54.2 4.2C54 4 53.7 4 53.4 4H26.4C26.1 4 25.8 4.1 25.6 4.2L8.29997 15.3C7.89997 15.6 7.59998 16 7.59998 16.5V32.1V63C7.59998 63.5 7.89997 64 8.29997 64.2L25.5 75.3C25.5 75.3 25.6 75.3 25.6 75.4C25.6 75.4 25.7 75.4 25.7 75.5C25.9 75.6 26 75.6 26.2 75.6H53.2C53.4 75.6 53.5 75.6 53.7 75.5C53.8 75.5 53.8 75.5 53.8 75.4C53.8 75.4 53.9 75.4 53.9 75.3L71.4 64.2C71.5 64.1 71.7 64 71.8 63.8C71.8 63.8 71.8 63.7 71.9 63.7C72 63.6 72.1 63.4 72.1 63.2V63.1C72.1 63 72.1 62.9 72.1 62.8V32.1V16.5C72.1 16 71.8 15.6 71.4 15.3ZM24.9 71.4L10.6 62.2V34.8L24.9 44V71.4ZM51.9 72.6H27.8V44.7H51.9V72.6ZM69.1 31.3L52.9 41.7H26.8L10.6 31.3V17.3L26.8 6.9H52.9L69.1 17.3V31.3Z' fill='%23BD9D70' /%3E%3C/svg%3E";
-
 		const { container } = render(
 			<OptionRow
-				image={ image1 }
 				label="Option Row"
 				subTitle="Mostly used to link off to other pages."
 				as="a"
 				disabled
+				variant="h3"
 				meta=""
 			/>
 		);
 
-		expect(
-			screen.getByAltText( 'Image representing the list item' ).closest( 'div' )
-		).toHaveStyle( {
-			background: 'none',
-		} );
 		expect( screen.queryByTestId( 'meta' ) ).not.toBeInTheDocument();
 
 		// Check for accessibility issues