@automattic/vip-design-system 0.23.6 → 0.24.0

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/build/system/index.js

@@ -81,6 +81,10 @@ exports.Select = _Form.Select;
 exports.Textarea = _Form.Textarea;
 exports.Checkbox = _Form.Checkbox;
 
+var _Accordion = require("./Accordion");
+
+exports.Accordion = _Accordion.Accordion;
+
 var _Grid = require("./Grid");
 
 exports.Grid = _Grid.Grid;

package/build/system/theme/getColor.js

@@ -3,7 +3,9 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.getColor = void 0;
+exports.getVariants = exports.getColor = void 0;
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _valetTheme = _interopRequireDefault(require("./generated/valet-theme.json"));
 
@@ -22,4 +24,21 @@ var getColor = function getColor(color, variant) {
   return _valetTheme["default"][color][variant].value;
 };
 
-exports.getColor = getColor;
+exports.getColor = getColor;
+
+var resolvePath = function resolvePath(object, path, defaultValue) {
+  return path.split('.').reduce(function (acc, property) {
+    return acc ? acc[property] : defaultValue;
+  }, object);
+};
+
+var getVariants = function getVariants(color) {
+  var property = resolvePath(_valetTheme["default"], color, {});
+  return Object.keys(property).reduce(function (variants, variant) {
+    var _extends2;
+
+    return (0, _extends3["default"])({}, variants, (_extends2 = {}, _extends2[variant] = property[variant].value, _extends2));
+  }, {});
+};
+
+exports.getVariants = getVariants;

package/build/system/theme/index.js

@@ -98,6 +98,8 @@ var _default = {
     text: (0, _getColor.getColor)('text', 'secondary'),
     heading: (0, _getColor.getColor)('text', 'primary'),
     background: (0, _getColor.getColor)('background', 'primary'),
+    gold: (0, _getColor.getVariants)('color.gold'),
+    gray: (0, _getColor.getVariants)('color.gray'),
     backgroundSecondary: _colors.light.grey['10'],
     primary: _colors.light.brand['70'],
     secondary: '#30c',
@@ -163,6 +165,9 @@ var _default = {
     high: // eslint-disable-next-line max-len
     '0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 100px 80px rgba(0, 0, 0, 0.07)'
   },
+  tag: {
+    gold: (0, _getColor.getVariants)('tag.gold')
+  },
   cards: {
     primary: {
       padding: 3,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.23.6",
+	"version": "0.24.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -20,6 +20,7 @@
 		"watch": "npm run build -- --watch"
 	},
 	"dependencies": {
+		"@radix-ui/react-accordion": "^1.0.1",
 		"@radix-ui/react-checkbox": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.0.0",
 		"@radix-ui/react-dropdown-menu": "^1.0.1-rc.6",

package/src/system/Accordion/Accordion.js

@@ -0,0 +1,198 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MdChevronRight } from 'react-icons/md';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { keyframes } from '@emotion/react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '../Heading';
+
+const slideDown = keyframes( {
+	from: { height: 0 },
+	to: { height: 'var(--radix-accordion-content-height)' },
+} );
+
+const slideUp = keyframes( {
+	from: { height: 'var(--radix-accordion-content-height)' },
+	to: { height: 0 },
+} );
+
+export const Item = ( { children, ...props } ) => (
+	<AccordionPrimitive.Item
+		{ ...props }
+		sx={ {
+			overflow: 'hidden',
+			borderWidth: '0 1px 1px 1px',
+			borderStyle: 'solid',
+			borderColor: 'border',
+
+			'&:first-of-type': {
+				borderTopWidth: '1px',
+				borderTopLeftRadius: 4,
+				borderTopRightRadius: 4,
+			},
+			'&:last-child': {
+				borderBottomLeftRadius: 4,
+				borderBottomRightRadius: 4,
+			},
+			'&:focus-within': theme => theme.outline,
+		} }
+	>
+		{ children }
+	</AccordionPrimitive.Item>
+);
+
+Item.displayName = 'Accordion.Item';
+
+Item.propTypes = {
+	children: PropTypes.node.isRequired,
+};
+
+export const Trigger = React.forwardRef(
+	( { children, headingVariant = 'h3', ...props }, forwardedRef ) => (
+		<Heading
+			sx={ {
+				all: 'unset',
+				display: 'flex',
+			} }
+			variant={ headingVariant }
+		>
+			<AccordionPrimitive.Trigger
+				sx={ {
+					color: 'heading',
+					cursor: 'pointer',
+					all: 'unset',
+					fontFamily: 'inherit',
+					px: 3,
+					height: 45,
+					flex: 1,
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+					fontSize: 1,
+					fontWeight: 600,
+					textTransform: 'uppercase',
+
+					'&[data-state="closed"]': { backgroundColor: 'transparent' },
+					'&[data-state="open"]': {
+						backgroundColor: 'backgroundSecondary',
+						borderBottom: theme => `1px solid ${ theme.colors.border }`,
+					},
+					'&:hover': { backgroundColor: 'backgroundSecondary' },
+				} }
+				{ ...props }
+				ref={ forwardedRef }
+			>
+				{ children }
+				<MdChevronRight
+					sx={ {
+						fontSize: 3,
+						color: 'text',
+						transform: 'rotate(90deg)',
+						transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+						'[data-state=open] &': { transform: 'rotate(270deg)' },
+					} }
+					aria-hidden
+				/>
+			</AccordionPrimitive.Trigger>
+		</Heading>
+	)
+);
+
+Trigger.displayName = 'Accordion.Trigger';
+
+Trigger.propTypes = {
+	children: PropTypes.node.isRequired,
+	headingVariant: PropTypes.string,
+};
+
+export const TriggerWithIcon = React.forwardRef( ( { children, icon, ...props }, forwardedRef ) => (
+	<Trigger { ...props } ref={ forwardedRef }>
+		<span sx={ { color: 'text', fontSize: 3 } }>{ icon }</span>
+		<div sx={ { color: 'heading', flexGrow: 1, textAlign: 'left', ml: 3 } }>{ children }</div>
+	</Trigger>
+) );
+
+TriggerWithIcon.displayName = 'Accordion.TriggerWithIcon';
+
+TriggerWithIcon.propTypes = {
+	children: PropTypes.node.isRequired,
+	icon: PropTypes.node.isRequired,
+};
+
+export const Content = React.forwardRef( ( { children, sx = {}, ...props }, forwardedRef ) => {
+	return (
+		<AccordionPrimitive.Content
+			sx={ {
+				backgroundColor: 'transparent',
+				color: 'text',
+				fontSize: 2,
+				overflow: 'hidden',
+
+				'&[data-state="open"]': {
+					animation: `${ slideDown } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
+				},
+				'&[data-state="closed"]': {
+					animation: `${ slideUp } 300ms cubic-bezier(0.87, 0, 0.13, 1)`,
+				},
+				...sx,
+			} }
+			{ ...props }
+			ref={ forwardedRef }
+		>
+			<div
+				sx={ {
+					px: 3,
+					py: 2,
+				} }
+			>
+				{ children }
+			</div>
+		</AccordionPrimitive.Content>
+	);
+} );
+
+Content.displayName = 'Accordion.Content';
+
+Content.propTypes = {
+	children: PropTypes.node.isRequired,
+	sx: PropTypes.object,
+};
+
+const Root = React.forwardRef(
+	( { sx = {}, defaultValue, type, children, className }, forwardRef ) => (
+		<AccordionPrimitive.Root
+			className={ classNames( 'vip-accordion-component', className ) }
+			collapsible
+			defaultValue={ defaultValue }
+			ref={ forwardRef }
+			sx={ {
+				borderRadius: 6,
+				...sx,
+			} }
+			type={ type }
+		>
+			{ children }
+		</AccordionPrimitive.Root>
+	)
+);
+
+Root.displayName = 'Accordion';
+
+Root.propTypes = {
+	children: PropTypes.node,
+	className: PropTypes.any,
+	defaultValue: PropTypes.any,
+	sx: PropTypes.object,
+	type: PropTypes.oneOf( [ 'single', 'multiple' ] ),
+};
+
+export { Root };

package/src/system/Accordion/Accordion.stories.jsx

@@ -0,0 +1,55 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { RiUserAddLine, RiCodeSSlashFill } from 'react-icons/ri';
+import { BiBookContent } from 'react-icons/bi';
+/**
+ * Internal dependencies
+ */
+import { Box, Accordion } from '..';
+
+export default {
+	title: 'Accordion',
+	component: Accordion,
+};
+
+const ExampleContent = () => (
+	<Box>
+		<p sx={ { mt: 0 } }>Add your key team members to the VIP Dashboard.</p>
+		<p>Add developers to GitHub.</p>
+		<p sx={ { mb: 0 } }>Add content editors and developers to WordPress admin.</p>
+	</Box>
+);
+
+export const Default = () => (
+	<Box>
+		<Accordion.Root defaultValue="teamPermissions" sx={ { width: '450px' } }>
+			<Accordion.Item value="teamPermissions">
+				<Accordion.TriggerWithIcon icon={ <RiUserAddLine /> }>
+					Team & Permissions
+				</Accordion.TriggerWithIcon>
+				<Accordion.Content>
+					<ExampleContent />
+				</Accordion.Content>
+			</Accordion.Item>
+			<Accordion.Item value="addContentMedia">
+				<Accordion.TriggerWithIcon icon={ <BiBookContent /> }>
+					Add Content & Media
+				</Accordion.TriggerWithIcon>
+				<Accordion.Content>
+					<ExampleContent />
+				</Accordion.Content>
+			</Accordion.Item>
+			<Accordion.Item value="addCode">
+				<Accordion.TriggerWithIcon icon={ <RiCodeSSlashFill /> }>
+					Add Code
+				</Accordion.TriggerWithIcon>
+				<Accordion.Content>
+					<ExampleContent />
+				</Accordion.Content>
+			</Accordion.Item>
+		</Accordion.Root>
+	</Box>
+);

package/src/system/Accordion/Accordion.test.js

@@ -0,0 +1,61 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { ThemeProvider } from 'theme-ui';
+
+/**
+ * Internal dependencies
+ */
+import * as Accordion from './Accordion';
+import { theme } from '../';
+
+const renderWithTheme = children =>
+	render( <ThemeProvider theme={ theme }>{ children }</ThemeProvider> );
+
+const renderComponent = () =>
+	renderWithTheme(
+		<Accordion.Root defaultValue="one" sx={ { width: '400px' } }>
+			<Accordion.Item value="one">
+				<Accordion.Trigger>trigger one</Accordion.Trigger>
+				<Accordion.Content>content one</Accordion.Content>
+			</Accordion.Item>
+			<Accordion.Item value="two">
+				<Accordion.Trigger>trigger two</Accordion.Trigger>
+				<Accordion.Content>content two</Accordion.Content>
+			</Accordion.Item>
+		</Accordion.Root>
+	);
+
+describe( '<Accordion />', () => {
+	it( 'renders the Accordion component with default value visible', async () => {
+		const { container } = renderComponent();
+
+		// Should find the open content
+		expect( screen.getByText( 'content one' ) ).toBeInTheDocument();
+
+		// Should not find the closed content
+		expect( screen.queryByText( 'content two' ) ).toBeNull();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'should open the content when clicking on its trigger', async () => {
+		const { container } = renderComponent();
+
+		fireEvent.click( screen.getByRole( 'button', { name: 'trigger two' } ) );
+
+		// Should find the open content
+		expect( screen.queryByText( 'content one' ) ).toBeNull();
+
+		// Should not find the closed content
+		expect( screen.queryByText( 'content two' ) ).toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+} );

package/src/system/Accordion/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import * as Accordion from './Accordion';
+
+export { Accordion };

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>