@automattic/vip-design-system 0.27.9 → 0.27.11

package/build/system/Button/Button.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,11 +19,26 @@ var _themeUi = require("theme-ui");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["sx"];
+var _excluded = ["disabled", "onClick", "sx"];
+
+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 Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var sx = _ref.sx,
+  var disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      sx = _ref.sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var handleOnClick = (0, _react.useCallback)(function (event) {
+    if (disabled) {
+      return event.preventDefault();
+    }
+
+    if (onClick) {
+      return onClick(event);
+    }
+  }, [disabled, onClick]);
   return (0, _jsxRuntime.jsx)(_themeUi.Button, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       verticalAlign: 'middle',
@@ -42,13 +57,15 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
       '&:focus-visible': function focusVisible(theme) {
         return theme.outline;
       },
-      '&:disabled': {
+      '&[aria-disabled="true"]': {
         opacity: 0.7,
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }
     }, sx),
-    className: (0, _classnames["default"])('vip-button-component', props.className)
+    "aria-disabled": disabled,
+    className: (0, _classnames["default"])('vip-button-component', props.className),
+    onClick: handleOnClick
   }, props, {
     ref: forwardRef
   }));
@@ -57,6 +74,8 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
 exports.Button = Button;
 Button.displayName = 'Button';
 Button.propTypes = {
-  sx: _propTypes["default"].object,
-  className: _propTypes["default"].any
+  className: _propTypes["default"].any,
+  disabled: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  sx: _propTypes["default"].object
 };

package/build/system/Button/Button.stories.js

@@ -3,9 +3,9 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithOnClick = exports.Link = exports.Default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _ = require("..");
 
@@ -20,33 +20,59 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  */
 var _default = {
   title: 'Button',
-  component: _.Button
-};
-exports["default"] = _default;
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Button, {
-      sx: {
-        mr: 2
+  component: _.Button,
+  argTypes: {
+    children: {
+      table: {
+        type: {
+          summary: 'node'
+        }
       },
-      children: "Primary"
-    }), (0, _jsxRuntime.jsx)(_.Button, {
-      variant: "secondary",
-      sx: {
-        ml: 2
+      control: {
+        type: 'text'
       },
-      children: "Secondary"
-    }), (0, _jsxRuntime.jsx)(_.Button, {
-      variant: "text",
-      sx: {
-        ml: 2
+      type: {
+        required: true
+      }
+    },
+    variant: {
+      table: {
+        type: {
+          summary: 'string'
+        },
+        defaultValue: {
+          summary: 'primary'
+        }
       },
-      as: "a",
-      href: "https://google/com",
-      children: "Button link"
-    })]
-  });
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'text']
+      }
+    }
+  }
 };
+exports["default"] = _default;
 
-exports.Default = Default;
+var Template = function Template(args) {
+  return (0, _jsxRuntime.jsx)(_.Button, (0, _extends2["default"])({}, args, {
+    children: "Submit"
+  }));
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+var Link = Template.bind({});
+exports.Link = Link;
+Link.args = {
+  variant: 'text',
+  as: 'a',
+  href: 'https://www.google.com'
+};
+var WithOnClick = Template.bind({});
+exports.WithOnClick = WithOnClick;
+Link.args = {
+  onClick: function onClick() {
+    // eslint-disable-next-line no-undef
+    alert('Clicked');
+  }
+};

package/build/system/Button/Button.test.js

@@ -21,33 +21,79 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
+var BUTTON_TEXT = 'Button Text';
 describe('<Button />', function () {
   it('renders the Button component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _render, container;
+    var onClick, _render, container, component;
 
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
+            onClick = jest.fn(function () {});
             _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Button.Button, {
-              children: "Button text"
+              onClick: onClick,
+              children: BUTTON_TEXT
             })), container = _render.container;
-            expect(_react.screen.getByText('Button text')).toBeInTheDocument(); // Check for accessibility issues
+            component = _react.screen.getByText(BUTTON_TEXT);
+            expect(component).toBeInTheDocument();
+
+            _react.fireEvent.click(component);
+
+            expect(onClick).toHaveBeenCalledTimes(1); // Check for accessibility issues
 
             _context.t0 = expect;
-            _context.next = 5;
+            _context.next = 9;
             return (0, _jestAxe.axe)(container);
 
-          case 5:
+          case 9:
             _context.t1 = _context.sent;
-            _context.next = 8;
+            _context.next = 12;
             return (0, _context.t0)(_context.t1).toHaveNoViolations();
 
-          case 8:
+          case 12:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
   })));
+  it('renders the Button with disabled prop', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var onClick, _render2, container, component;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            onClick = jest.fn(function () {});
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Button.Button, {
+              disabled: true,
+              onClick: onClick,
+              children: BUTTON_TEXT
+            })), container = _render2.container;
+            component = _react.screen.getByText(BUTTON_TEXT);
+            expect(component).toBeInTheDocument();
+            expect(component).toHaveAttribute('aria-disabled', 'true');
+            expect(component).not.toHaveAttribute('disabled');
+
+            _react.fireEvent.click(component);
+
+            expect(onClick).toHaveBeenCalledTimes(0); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 11;
+            return (0, _jestAxe.axe)(container);
+
+          case 11:
+            _context2.t1 = _context2.sent;
+            _context2.next = 14;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/build/system/NewForm/FormAutocomplete.js

@@ -226,15 +226,22 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     }
   }, [onInputChange, debounce, minLength]);
   var suggest = (0, _react.useCallback)(function (query, populateResults) {
+    var _data;
+
+    var data = options;
+
     if (isDirty && onInputChange) {
       handleInputChange(query);
     }
 
-    var data = autoFilter ? handleTypeChange(query) : options;
-    populateResults(data == null ? void 0 : data.map(function (option) {
+    if (isDirty && autoFilter) {
+      data = handleTypeChange(query);
+    }
+
+    populateResults((_data = data) == null ? void 0 : _data.map(function (option) {
       return optionLabel(option);
     }));
-  }, [options, isDirty]);
+  }, [autoFilter, isDirty, onInputChange, options]);
   (0, _react.useEffect)(function () {
     global.document.querySelector('.autocomplete__input').setAttribute('aria-activedescendant', '');
   }, []);

package/build/system/NewTabs/TabsTrigger.js

@@ -7,6 +7,8 @@ exports.TabsTrigger = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var TabsPrimitive = _interopRequireWildcard(require("@radix-ui/react-tabs"));
@@ -59,7 +61,7 @@ var styles = {
   }
 };
 
-var TabsTrigger = function TabsTrigger(_ref) {
+var TabsTrigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var value = _ref.value,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -70,9 +72,10 @@ var TabsTrigger = function TabsTrigger(_ref) {
     value: value,
     disabled: disabled,
     sx: (0, _extends2["default"])({}, styles, sx),
+    ref: forwardRef,
     children: children
   });
-};
+});
 
 exports.TabsTrigger = TabsTrigger;
 TabsTrigger.propTypes = {
@@ -80,4 +83,5 @@ TabsTrigger.propTypes = {
   value: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   children: _propTypes["default"].node.isRequired
-};
+};
+TabsTrigger.displayName = 'TabsTrigger';

package/package.json

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

package/src/system/Button/Button.js

@@ -3,44 +3,62 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Button as ThemeButton } from 'theme-ui';
 
-const Button = React.forwardRef( ( { sx, ...props }, forwardRef ) => (
-	<ThemeButton
-		sx={ {
-			verticalAlign: 'middle',
-			display: 'inline-flex',
-			alignItems: 'center',
-			justifyContent: 'center',
-			height: '36px',
-			py: 0,
-			textDecoration: 'none',
-			'&:hover': {
+const Button = React.forwardRef( ( { disabled, onClick, sx, ...props }, forwardRef ) => {
+	const handleOnClick = useCallback(
+		event => {
+			if ( disabled ) {
+				return event.preventDefault();
+			}
+
+			if ( onClick ) {
+				return onClick( event );
+			}
+		},
+		[ disabled, onClick ]
+	);
+	return (
+		<ThemeButton
+			sx={ {
+				verticalAlign: 'middle',
+				display: 'inline-flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				height: '36px',
+				py: 0,
 				textDecoration: 'none',
-			},
-			'&:focus': theme => theme.outline,
-			'&:focus-visible': theme => theme.outline,
-			'&:disabled': {
-				opacity: 0.7,
-				cursor: 'not-allowed',
-				pointerEvents: 'all',
-			},
-			...sx,
-		} }
-		className={ classNames( 'vip-button-component', props.className ) }
-		{ ...props }
-		ref={ forwardRef }
-	/>
-) );
+				'&:hover': {
+					textDecoration: 'none',
+				},
+				'&:focus': theme => theme.outline,
+				'&:focus-visible': theme => theme.outline,
+				'&[aria-disabled="true"]': {
+					opacity: 0.7,
+					cursor: 'not-allowed',
+					pointerEvents: 'all',
+				},
+				...sx,
+			} }
+			aria-disabled={ disabled }
+			className={ classNames( 'vip-button-component', props.className ) }
+			onClick={ handleOnClick }
+			{ ...props }
+			ref={ forwardRef }
+		/>
+	);
+} );
 
 Button.displayName = 'Button';
 
 Button.propTypes = {
-	sx: PropTypes.object,
 	className: PropTypes.any,
+	disabled: PropTypes.bool,
+	onClick: PropTypes.func,
+	sx: PropTypes.object,
 };
 
 export { Button };

package/src/system/Button/Button.stories.jsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import React from 'react';
 
 /**
  * Internal dependencies
@@ -11,16 +10,42 @@ import { Button } from '..';
 export default {
 	title: 'Button',
 	component: Button,
+	argTypes: {
+		children: {
+			table: {
+				type: { summary: 'node' },
+			},
+			control: { type: 'text' },
+			type: { required: true },
+		},
+		variant: {
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'primary' },
+			},
+			control: {
+				type: 'select',
+				options: [ 'primary', 'secondary', 'text' ],
+			},
+		},
+	},
 };
 
-export const Default = () => (
-	<React.Fragment>
-		<Button sx={ { mr: 2 } }>Primary</Button>
-		<Button variant="secondary" sx={ { ml: 2 } }>
-			Secondary
-		</Button>
-		<Button variant="text" sx={ { ml: 2 } } as="a" href="https://google/com">
-			Button link
-		</Button>
-	</React.Fragment>
-);
+const Template = args => <Button { ...args }>Submit</Button>;
+
+export const Default = Template.bind( {} );
+
+export const Link = Template.bind( {} );
+Link.args = {
+	variant: 'text',
+	as: 'a',
+	href: 'https://www.google.com',
+};
+
+export const WithOnClick = Template.bind( {} );
+Link.args = {
+	onClick: () => {
+		// eslint-disable-next-line no-undef
+		alert( 'Clicked' );
+	},
+};

package/src/system/Button/Button.test.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 /**
@@ -9,11 +9,38 @@ import { axe } from 'jest-axe';
  */
 import { Button } from './Button';
 
+const BUTTON_TEXT = 'Button Text';
+
 describe( '<Button />', () => {
 	it( 'renders the Button component', async () => {
-		const { container } = render( <Button>Button text</Button> );
+		const onClick = jest.fn( () => {} );
+		const { container } = render( <Button onClick={ onClick }>{ BUTTON_TEXT }</Button> );
+		const component = screen.getByText( BUTTON_TEXT );
+
+		expect( component ).toBeInTheDocument();
+
+		fireEvent.click( component );
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
+
+	it( 'renders the Button with disabled prop', async () => {
+		const onClick = jest.fn( () => {} );
+		const { container } = render(
+			<Button disabled onClick={ onClick }>
+				{ BUTTON_TEXT }
+			</Button>
+		);
+		const component = screen.getByText( BUTTON_TEXT );
+
+		expect( component ).toBeInTheDocument();
+		expect( component ).toHaveAttribute( 'aria-disabled', 'true' );
+		expect( component ).not.toHaveAttribute( 'disabled' );
 
-		expect( screen.getByText( 'Button text' ) ).toBeInTheDocument();
+		fireEvent.click( component );
+		expect( onClick ).toHaveBeenCalledTimes( 0 );
 
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();

package/src/system/NewForm/FormAutocomplete.js

@@ -185,13 +185,16 @@ const FormAutocomplete = React.forwardRef(
 
 		const suggest = useCallback(
 			( query, populateResults ) => {
+				let data = options;
 				if ( isDirty && onInputChange ) {
 					handleInputChange( query );
 				}
-				const data = autoFilter ? handleTypeChange( query ) : options;
+				if ( isDirty && autoFilter ) {
+					data = handleTypeChange( query );
+				}
 				populateResults( data?.map( option => optionLabel( option ) ) );
 			},
-			[ options, isDirty ]
+			[ autoFilter, isDirty, onInputChange, options ]
 		);
 
 		useEffect( () => {

package/src/system/NewTabs/TabsTrigger.js

@@ -3,6 +3,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import classNames from 'classnames';
@@ -33,7 +34,7 @@ const styles = {
 	'&:focus-visible': theme => theme.outline,
 };
 
-const TabsTrigger = ( { value, disabled = false, sx, children } ) => (
+const TabsTrigger = React.forwardRef( ( { value, disabled = false, sx, children }, forwardRef ) => (
 	<TabsPrimitive.TabsTrigger
 		className={ classNames( 'vip-tabs-trigger', `vip-tabs-trigger-${ value }` ) }
 		value={ value }
@@ -42,10 +43,11 @@ const TabsTrigger = ( { value, disabled = false, sx, children } ) => (
 			...styles,
 			...sx,
 		} }
+		ref={ forwardRef }
 	>
 		{ children }
 	</TabsPrimitive.TabsTrigger>
-);
+) );
 
 TabsTrigger.propTypes = {
 	sx: PropTypes.object,
@@ -54,4 +56,5 @@ TabsTrigger.propTypes = {
 	children: PropTypes.node.isRequired,
 };
 
+TabsTrigger.displayName = 'TabsTrigger';
 export { TabsTrigger };