@automattic/vip-design-system 0.23.7 → 0.25.0

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Inline = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = require("react");
+
+var Form = _interopRequireWildcard(require("."));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["label", "width", "onChange"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Form/Autocomplete',
+  argTypes: {
+    placeholder: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var defaultOptions = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry Chocolate Vanilla Chocolate Vanilla'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}]; // eslint-disable-next-line react/prop-types
+
+var DefaultComponent = function DefaultComponent(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Label' : _ref$label,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 250 : _ref$width,
+      onChange = _ref.onChange,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(Form.Root, {
+      children: (0, _jsxRuntime.jsx)("div", {
+        sx: {
+          width: width
+        },
+        children: (0, _jsxRuntime.jsx)(Form.Autocomplete, (0, _extends2["default"])({
+          id: "form-autocomplete",
+          label: label,
+          onChange: onChange
+        }, rest))
+      })
+    })
+  });
+};
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(defaultOptions),
+      options = _useState[0],
+      setOptions = _useState[1];
+
+  var onChange = (0, _react.useCallback)(function (value) {
+    setOptions(defaultOptions.filter(function (option) {
+      return !value || option.label.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+    }));
+  });
+  var args = {
+    label: 'Label',
+    options: options
+  };
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
+      onChange: onChange
+    }, args))
+  });
+};
+
+exports.Default = Default;
+
+var Inline = function Inline() {
+  var _useState2 = (0, _react.useState)(defaultOptions),
+      options = _useState2[0],
+      setOptions = _useState2[1];
+
+  var onChange = (0, _react.useCallback)(function (value) {
+    setOptions(defaultOptions.filter(function (option) {
+      return !value || option.label.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+    }));
+  });
+  var args = {
+    label: 'Label',
+    options: options
+  };
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
+      isInline: true,
+      onChange: onChange
+    }, args))
+  });
+};
+
+exports.Inline = Inline;

package/build/system/NewForm/FormAutocomplete.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _FormAutocomplete = require("./FormAutocomplete");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var options = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry Chocolate Vanilla Chocolate Vanilla'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}];
+var defaultProps = {
+  label: 'This is a label',
+  options: options
+};
+describe('<FormAutocomplete />', function () {
+  it('renders the FormAutocomplete component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_FormAutocomplete.FormAutocomplete, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, defaultProps))), container = _render.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewForm/index.js

@@ -1,10 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Select = exports.Root = void 0;
+exports["default"] = exports.Select = exports.Root = exports.Autocomplete = void 0;
 
 var _FormSelect = require("./FormSelect");
 
+var _FormAutocomplete = require("./FormAutocomplete");
+
 var _Form = require("./Form");
 
 /**
@@ -12,6 +14,8 @@ var _Form = require("./Form");
  */
 var Select = _FormSelect.FormSelect;
 exports.Select = Select;
+var Autocomplete = _FormAutocomplete.FormAutocomplete;
+exports.Autocomplete = Autocomplete;
 var Root = _Form.Form;
 exports.Root = Root;
 var _default = Root;

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.7",
+	"version": "0.25.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",
@@ -28,6 +29,7 @@
 		"@radix-ui/react-tooltip": "^1.0.0",
 		"@radix-ui/react-visually-hidden": "^1.0.0",
 		"@storybook/addon-storysource": "^6.5.10",
+		"accessible-autocomplete": "^2.0.4",
 		"babel-loader": "^8.2.2",
 		"classnames": "^2.3.1",
 		"framer-motion": "^3.9.1",
@@ -70,6 +72,9 @@
 		],
 		"transform": {
 			"\\.[jt]sx?$": "babel-jest"
+		},
+		"moduleNameMapper": {
+			"\\.(css|less)$": "<rootDir>/test/fileMock.js"
 		}
 	},
 	"devDependencies": {

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