@automattic/vip-design-system 0.23.5 → 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/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,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/package.json

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

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 = {
@@ -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>