@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Form/RadioBoxGroup.js

@@ -1,199 +1,205 @@
-"use strict";
-
-exports.__esModule = true;
-exports.RadioBoxGroup = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
-var _Validation = require("./Validation");
-var _RequiredLabel = require("./RequiredLabel");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["id", "value", "className", "label", "description", "labelProps"],
-  _excluded2 = ["optionWidth", "name", "onChange", "groupLabel", "defaultValue", "options", "disabled", "errorMessage", "hasError", "required"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import ScreenReaderText from '../ScreenReaderText';
+import { Validation } from './Validation';
+import { RequiredLabel } from './RequiredLabel';
+
 /**
  * Internal dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var RadioOption = function RadioOption(_ref) {
-  var width = _ref.width,
-    disabled = _ref.disabled,
-    defaultValue = _ref.defaultValue,
-    _ref$option = _ref.option,
-    id = _ref$option.id,
-    value = _ref$option.value,
-    className = _ref$option.className,
-    label = _ref$option.label,
-    description = _ref$option.description,
-    _ref$option$labelProp = _ref$option.labelProps,
-    labelProps = _ref$option$labelProp === void 0 ? {} : _ref$option$labelProp,
-    restOption = _objectWithoutPropertiesLoose(_ref$option, _excluded),
-    name = _ref.name,
-    onChangeHandler = _ref.onChangeHandler;
-  var forLabel = id || value;
-  var checked = "" + defaultValue === "" + value;
-  var ref = _react["default"].useRef(null);
-  var describedById = "input-radio-box-" + forLabel + "-description";
-  return (0, _jsxRuntime.jsxs)("div", {
-    id: "o" + forLabel,
-    sx: _extends({
-      width: width,
-      display: 'flex',
-      flexDirection: 'row-reverse',
-      alignItems: 'flex-start',
-      backgroundColor: 'input.radio-box.background.default',
-      cursor: 'pointer',
-      borderRadius: 2,
-      textAlign: 'left',
-      border: '1px solid',
-      borderColor: 'input.radio-box.border.default',
-      position: 'relative',
-      '&:hover': {
-        backgroundColor: 'input.radio-box.background.hover',
-        borderColor: 'input.radio-box.border.default'
-      }
-    }, checked && {
-      borderColor: 'input.radio-box.border.active'
-    }, disabled && {
-      borderColor: 'input.radio-box.border.disabled'
-    }),
-    onClick: function onClick() {
-      var _ref$current;
-      (_ref$current = ref.current) == null ? void 0 : _ref$current.click();
-    },
-    children: [(0, _jsxRuntime.jsx)("input", _extends({
-      ref: ref,
-      checked: checked,
-      type: "radio",
-      name: name,
-      id: forLabel,
-      onChange: onChangeHandler,
-      value: "" + value,
-      sx: {
-        mr: 3,
-        mt: 3
-      },
-      "aria-describedby": describedById
-    }, restOption)), (0, _jsxRuntime.jsxs)("div", {
-      sx: {
-        mb: 0,
-        color: 'input.radio-box.label.primary.default',
-        p: 3,
-        pr: 0,
-        flex: 'auto'
-      },
-      children: [(0, _jsxRuntime.jsx)("label", _extends({
-        htmlFor: forLabel
-      }, labelProps, {
-        children: label
-      })), description && (0, _jsxRuntime.jsx)("span", {
-        sx: {
-          color: 'input.radio-box.label.secondary.default',
-          mb: 0,
-          fontSize: 1,
-          display: 'block'
-        },
-        id: describedById,
-        children: description
-      })]
-    })]
-  });
+
+const RadioOption = ( {
+	width,
+	disabled,
+	defaultValue,
+	option: { id, value, className, label, description, labelProps = {}, ...restOption },
+	name,
+	onChangeHandler,
+} ) => {
+	const forLabel = id || value;
+	const checked = `${ defaultValue }` === `${ value }`;
+	const ref = React.useRef( null );
+	const describedById = `input-radio-box-${ forLabel }-description`;
+
+	return (
+		<div
+			id={ `o${ forLabel }` }
+			sx={ {
+				width,
+				display: 'flex',
+				flexDirection: 'row-reverse',
+				alignItems: 'flex-start',
+				backgroundColor: 'input.radio-box.background.default',
+				cursor: 'pointer',
+				borderRadius: 2,
+				textAlign: 'left',
+				border: '1px solid',
+				borderColor: 'input.radio-box.border.default',
+				position: 'relative',
+				'&:hover': {
+					backgroundColor: 'input.radio-box.background.hover',
+					borderColor: 'input.radio-box.border.default',
+				},
+				...( checked && {
+					borderColor: 'input.radio-box.border.active',
+				} ),
+				...( disabled && {
+					borderColor: 'input.radio-box.border.disabled',
+				} ),
+			} }
+			onClick={ () => {
+				ref.current?.click();
+			} }
+		>
+			<input
+				ref={ ref }
+				checked={ checked }
+				type="radio"
+				name={ name }
+				id={ forLabel }
+				onChange={ onChangeHandler }
+				value={ `${ value }` }
+				sx={ { mr: 3, mt: 3 } }
+				aria-describedby={ describedById }
+				{ ...restOption }
+			/>
+			<div
+				sx={ { mb: 0, color: 'input.radio-box.label.primary.default', p: 3, pr: 0, flex: 'auto' } }
+			>
+				<label htmlFor={ forLabel } { ...labelProps }>
+					{ label }
+				</label>
+				{ description && (
+					<span
+						sx={ {
+							color: 'input.radio-box.label.secondary.default',
+							mb: 0,
+							fontSize: 1,
+							display: 'block',
+						} }
+						id={ describedById }
+					>
+						{ description }
+					</span>
+				) }
+			</div>
+		</div>
+	);
 };
+
 RadioOption.propTypes = {
-  defaultValue: _propTypes["default"].string,
-  option: _propTypes["default"].object,
-  name: _propTypes["default"].string,
-  onChangeHandler: _propTypes["default"].func,
-  checked: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  width: _propTypes["default"].string
+	defaultValue: PropTypes.string,
+	option: PropTypes.object,
+	name: PropTypes.string,
+	onChangeHandler: PropTypes.func,
+	checked: PropTypes.bool,
+	disabled: PropTypes.bool,
+	width: PropTypes.string,
 };
-var RadioBoxGroup = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
-  var _ref2$optionWidth = _ref2.optionWidth,
-    optionWidth = _ref2$optionWidth === void 0 ? 'auto' : _ref2$optionWidth,
-    _ref2$name = _ref2.name,
-    name = _ref2$name === void 0 ? '' : _ref2$name,
-    onChange = _ref2.onChange,
-    groupLabel = _ref2.groupLabel,
-    defaultValue = _ref2.defaultValue,
-    options = _ref2.options,
-    disabled = _ref2.disabled,
-    errorMessage = _ref2.errorMessage,
-    hasError = _ref2.hasError,
-    required = _ref2.required,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  var onChangeHandler = (0, _react.useCallback)(function (e) {
-    var optionTriggered = options.find(function (option) {
-      return "" + option.value === "" + e.target.value;
-    });
-    onChange(e, optionTriggered);
-  }, [onChange]);
-  var renderedOptions = options.map(function (option) {
-    return (0, _jsxRuntime.jsx)(RadioOption, {
-      defaultValue: defaultValue,
-      disabled: disabled,
-      name: name,
-      option: option,
-      onChangeHandler: onChangeHandler,
-      width: optionWidth
-    }, (option == null ? void 0 : option.id) || (option == null ? void 0 : option.value));
-  });
-  return (0, _jsxRuntime.jsxs)("div", {
-    children: [(0, _jsxRuntime.jsxs)("fieldset", _extends({
-      sx: _extends({
-        border: 0,
-        p: hasError ? 2 : 0,
-        display: 'inline-block',
-        mb: 2
-      }, hasError ? {
-        border: '1px solid',
-        borderColor: 'input.border.error',
-        borderRadius: 2
-      } : {}),
-      ref: forwardRef,
-      "aria-required": required,
-      role: "radiogroup"
-    }, props, {
-      children: [groupLabel ? (0, _jsxRuntime.jsxs)("legend", {
-        sx: {
-          mb: 2
-        },
-        children: [groupLabel, required ? (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {}) : null]
-      }) : (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
-        children: "Choose an option"
-      }), (0, _jsxRuntime.jsx)("div", {
-        sx: {
-          display: 'flex',
-          gap: 2
-        },
-        children: renderedOptions
-      })]
-    })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Validation.Validation, {
-      isValid: false,
-      describedId: groupLabel,
-      children: errorMessage
-    })]
-  });
-});
-exports.RadioBoxGroup = RadioBoxGroup;
+
+const RadioBoxGroup = React.forwardRef(
+	(
+		{
+			optionWidth = 'auto',
+			name = '',
+			onChange,
+			groupLabel,
+			defaultValue,
+			options,
+			disabled,
+			errorMessage,
+			hasError,
+			required,
+			...props
+		},
+		forwardRef
+	) => {
+		const onChangeHandler = useCallback(
+			e => {
+				const optionTriggered = options.find(
+					option => `${ option.value }` === `${ e.target.value }`
+				);
+				onChange( e, optionTriggered );
+			},
+			[ onChange ]
+		);
+
+		const renderedOptions = options.map( option => (
+			<RadioOption
+				defaultValue={ defaultValue }
+				disabled={ disabled }
+				key={ option?.id || option?.value }
+				name={ name }
+				option={ option }
+				onChangeHandler={ onChangeHandler }
+				width={ optionWidth }
+			/>
+		) );
+
+		return (
+			<div>
+				<fieldset
+					sx={ {
+						border: 0,
+						p: hasError ? 2 : 0,
+						display: 'inline-block',
+						mb: 2,
+						...( hasError
+							? { border: '1px solid', borderColor: 'input.border.error', borderRadius: 2 }
+							: {} ),
+					} }
+					ref={ forwardRef }
+					aria-required={ required }
+					role="radiogroup"
+					{ ...props }
+				>
+					{ groupLabel ? (
+						<legend sx={ { mb: 2 } }>
+							{ groupLabel }
+							{ required ? <RequiredLabel /> : null }
+						</legend>
+					) : (
+						<ScreenReaderText>Choose an option</ScreenReaderText>
+					) }
+					<div
+						sx={ {
+							display: 'flex',
+							gap: 2,
+						} }
+					>
+						{ renderedOptions }
+					</div>
+				</fieldset>
+
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ groupLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
+			</div>
+		);
+	}
+);
+
 RadioBoxGroup.displayName = 'RadioBoxGroup';
+
 RadioBoxGroup.propTypes = {
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].array,
-  defaultValue: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  groupLabel: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  optionWidth: _propTypes["default"].string,
-  errorMessage: _propTypes["default"].string,
-  hasError: _propTypes["default"].bool,
-  required: _propTypes["default"].bool
-};
+	onChange: PropTypes.func,
+	options: PropTypes.array,
+	defaultValue: PropTypes.string,
+	name: PropTypes.string,
+	disabled: PropTypes.bool,
+	groupLabel: PropTypes.string,
+	id: PropTypes.string,
+	optionWidth: PropTypes.string,
+	errorMessage: PropTypes.string,
+	hasError: PropTypes.bool,
+	required: PropTypes.bool,
+};
+
+export { RadioBoxGroup };

package/build/system/Form/RadioBoxGroup.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export let title: string;
+    export { RadioBoxGroup as component };
+}
+export default _default;
+export function Default(): import("react").JSX.Element;
+export function Errors(): import("react").JSX.Element;
+import { RadioBoxGroup } from '..';

package/build/system/Form/RadioBoxGroup.stories.jsx

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { RadioBoxGroup } from '..';
+
+export default {
+	title: 'RadioBoxGroup',
+	component: RadioBoxGroup,
+};
+
+const options = [
+	{
+		label: 'One',
+		value: 'one',
+		description: 'This is a description',
+	},
+	{
+		label: 'Two',
+		value: 'two',
+		description: 'This is a description',
+	},
+	{
+		label: 'Three',
+		value: 'three',
+		description: 'This is a description',
+	},
+];
+
+export const Default = () => {
+	const [ value, setValue ] = useState( 'one' );
+	return (
+		<RadioBoxGroup
+			defaultValue={ value }
+			onChange={ e => setValue( e.target.value ) }
+			options={ options }
+			optionWidth="350px"
+		/>
+	);
+};
+
+export const Errors = () => {
+	const [ value, setValue ] = useState( null );
+
+	return (
+		<RadioBoxGroup
+			defaultValue={ value }
+			onChange={ e => setValue( e.target.value ) }
+			options={ options }
+			required
+			groupLabel="Radio Box Group"
+			hasError={ true }
+			errorMessage="This is an error message"
+		/>
+	);
+};

package/build/system/Form/RequiredLabel.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
+export function RequiredLabel(): import("react").JSX.Element;

package/build/system/Form/RequiredLabel.js

@@ -1,23 +1,13 @@
-"use strict";
-
-exports.__esModule = true;
-exports.RequiredLabel = void 0;
-var _jsxRuntime = require("theme-ui/jsx-runtime");
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
 
-var RequiredLabel = function RequiredLabel() {
-  return (0, _jsxRuntime.jsx)("span", {
-    sx: {
-      color: 'texts.helper',
-      display: 'inline-block',
-      ml: 2,
-      fontSize: 1
-    },
-    children: "(Required)"
-  });
-};
-exports.RequiredLabel = RequiredLabel;
+const RequiredLabel = () => (
+	<span sx={ { color: 'texts.helper', display: 'inline-block', ml: 2, fontSize: 1 } }>
+		(Required)
+	</span>
+);
+
+export { RequiredLabel };

package/build/system/Form/Textarea.d.ts

@@ -0,0 +1,2 @@
+export const Textarea: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/Form/Textarea.js

@@ -1,21 +1,19 @@
-"use strict";
+/** @jsxImportSource theme-ui */
 
-exports.__esModule = true;
-exports.Textarea = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Input = require("./Input");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */ /**
-                                                                                                                                                                                                                                                                                                                                                                                          * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                          */
-var Textarea = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  return (0, _jsxRuntime.jsx)(_Input.Input, _extends({
-    ref: ref,
-    as: "textarea"
-  }, props));
-});
-exports.Textarea = Textarea;
-Textarea.displayName = 'Textarea';
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Input } from './Input';
+
+const Textarea = React.forwardRef( ( props, ref ) => (
+	<Input ref={ ref } as="textarea" { ...props } />
+) );
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/build/system/Form/Textarea.stories.d.ts

@@ -0,0 +1,34 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace placeholder {
+            namespace type {
+                let name: string;
+                let required: boolean;
+            }
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+        }
+        namespace label {
+            export namespace type_2 {
+                let name_1: string;
+                export { name_1 as name };
+                let required_1: boolean;
+                export { required_1 as required };
+            }
+            export { type_2 as type };
+            export namespace control_1 {
+                let type_3: string;
+                export { type_3 as type };
+            }
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export function Default(): import("react").JSX.Element;
+export namespace Default {
+    let args: {};
+}

package/build/system/Form/Textarea.stories.jsx

@@ -0,0 +1,40 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import * as Form from '../NewForm';
+
+export default {
+	title: 'Form/Textarea',
+	argTypes: {
+		placeholder: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+		label: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+	},
+};
+
+const DefaultComponent = () => (
+	<Form.Root>
+		<Form.Textarea forLabel="my-text-area" rows="5" label="Regular textarea" />
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Textarea
+			forLabel="my-text-area-error"
+			rows="5"
+			label="Error textarea"
+			errorMessage="Please type numeric characters only"
+			required
+			hasError
+		/>
+	</Form.Root>
+);
+
+export const Default = DefaultComponent.bind( {} );
+Default.args = {};

package/build/system/Form/Toggle.d.ts

@@ -0,0 +1,2 @@
+export const Toggle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';