@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Form/InputWithCopyButton.js

@@ -1,108 +1,112 @@
-"use strict";
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MdContentCopy } from 'react-icons/md';
+
+/**
+ * Internal dependencies
+ */
+import { Button, Validation, Label } from '..';
+import { Input as ThemeInput } from 'theme-ui';
+import { baseControlStyle } from './Input.styles';
+
+const inputStyles = {
+	unset: 'all',
+	...baseControlStyle,
+	lineHeight: 'inherit',
+	minHeight: '36px',
+	px: 3,
+	py: 2,
+	fontSize: 2,
+	mb: 2,
+	variant: 'inputs.default',
+};
+
+const InputWithCopyButton = React.forwardRef(
+	(
+		{
+			variant,
+			label,
+			forLabel,
+			hasError = false,
+			required,
+			sx = {},
+			errorMessage,
+			copyHandler,
+			...props
+		},
+		ref
+	) => {
+		if ( ! ref ) {
+			ref = React.createRef();
+		}
+
+		const handleCopy = e => {
+			e.preventDefault();
+			const clipboard = navigator.clipboard; // eslint-disable-line no-undef
+			clipboard.writeText( ref.current.value );
+			if ( copyHandler ) {
+				copyHandler( ref.current.value );
+			}
+		};
+		return (
+			<React.Fragment>
+				{ label && (
+					<Label required={ required } htmlFor={ forLabel }>
+						{ label }
+					</Label>
+				) }
+				<div sx={ { display: 'flex' } }>
+					<ThemeInput
+						ref={ ref }
+						id={ forLabel }
+						required={ required }
+						aria-required={ required }
+						aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
+						sx={ {
+							...inputStyles,
+							...sx,
+							...( hasError ? { borderColor: 'input.border.error' } : {} ),
+						} }
+						{ ...props }
+					/>
+					<div sx={ { ml: 2 } }>
+						<Button
+							sx={ { height: '40px' } }
+							aria-label={ `Copy ${ label }` }
+							onClick={ handleCopy }
+							variant="ghost"
+						>
+							<MdContentCopy sx={ { mr: 2 } } />
+							Copy
+						</Button>
+					</div>
+				</div>
+				{ hasError && errorMessage && (
+					<Validation isValid={ false } describedId={ forLabel }>
+						{ errorMessage }
+					</Validation>
+				) }
+			</React.Fragment>
+		);
+	}
+);
 
-exports.__esModule = true;
-exports.InputWithCopyButton = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _md = require("react-icons/md");
-var _ = require("..");
-var _themeUi = require("theme-ui");
-var _Input = require("./Input.styles");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["variant", "label", "forLabel", "hasError", "required", "sx", "errorMessage", "copyHandler"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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; }
-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 inputStyles = _extends({
-  unset: 'all'
-}, _Input.baseControlStyle, {
-  lineHeight: 'inherit',
-  minHeight: '36px',
-  px: 3,
-  py: 2,
-  fontSize: 2,
-  mb: 2,
-  variant: 'inputs.default'
-});
-var InputWithCopyButton = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var variant = _ref.variant,
-    label = _ref.label,
-    forLabel = _ref.forLabel,
-    _ref$hasError = _ref.hasError,
-    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
-    required = _ref.required,
-    _ref$sx = _ref.sx,
-    sx = _ref$sx === void 0 ? {} : _ref$sx,
-    errorMessage = _ref.errorMessage,
-    copyHandler = _ref.copyHandler,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  if (!ref) {
-    ref = /*#__PURE__*/_react["default"].createRef();
-  }
-  var handleCopy = function handleCopy(e) {
-    e.preventDefault();
-    var clipboard = navigator.clipboard; // eslint-disable-line no-undef
-    clipboard.writeText(ref.current.value);
-    if (copyHandler) {
-      copyHandler(ref.current.value);
-    }
-  };
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [label && (0, _jsxRuntime.jsx)(_.Label, {
-      required: required,
-      htmlFor: forLabel,
-      children: label
-    }), (0, _jsxRuntime.jsxs)("div", {
-      sx: {
-        display: 'flex'
-      },
-      children: [(0, _jsxRuntime.jsx)(_themeUi.Input, _extends({
-        ref: ref,
-        id: forLabel,
-        required: required,
-        "aria-required": required,
-        "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
-        sx: _extends({}, inputStyles, sx, hasError ? {
-          borderColor: 'input.border.error'
-        } : {})
-      }, props)), (0, _jsxRuntime.jsx)("div", {
-        sx: {
-          ml: 2
-        },
-        children: (0, _jsxRuntime.jsxs)(_.Button, {
-          sx: {
-            height: '40px'
-          },
-          "aria-label": "Copy " + label,
-          onClick: handleCopy,
-          variant: "ghost",
-          children: [(0, _jsxRuntime.jsx)(_md.MdContentCopy, {
-            sx: {
-              mr: 2
-            }
-          }), "Copy"]
-        })
-      })]
-    }), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {
-      isValid: false,
-      describedId: forLabel,
-      children: errorMessage
-    })]
-  });
-});
-exports.InputWithCopyButton = InputWithCopyButton;
 InputWithCopyButton.propTypes = {
-  variant: _propTypes["default"].string,
-  label: _propTypes["default"].string,
-  hasError: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  forLabel: _propTypes["default"].string,
-  errorMessage: _propTypes["default"].string,
-  sx: _propTypes["default"].object,
-  copyHandler: _propTypes["default"].func
+	variant: PropTypes.string,
+	label: PropTypes.string,
+	hasError: PropTypes.bool,
+	required: PropTypes.bool,
+	forLabel: PropTypes.string,
+	errorMessage: PropTypes.string,
+	sx: PropTypes.object,
+	copyHandler: PropTypes.func,
 };
-InputWithCopyButton.displayName = 'InputWithCopyButton';
+
+InputWithCopyButton.displayName = 'InputWithCopyButton';
+
+export { InputWithCopyButton };

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

@@ -0,0 +1,5 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export function Default(): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import { Form, Notice } from '..';
+import { useState } from 'react';
+
+export default {
+	title: 'Form/InputWithCopyButton',
+};
+
+export const Default = () => {
+	const [ copiedText, setCopiedText ] = useState( '' );
+	return (
+		<Form.Root>
+			{ copiedText && (
+				<Notice variant="success" sx={ { mb: 4 } }>
+					Input successfully copied value! <strong>{ copiedText }</strong>
+				</Notice>
+			) }
+			<Form.InputWithCopyButton
+				placeholder="Your input here..."
+				label="Always add a label to inputs"
+				forLabel="input-simple"
+				copyHandler={ value => setCopiedText( value ) }
+			/>
+		</Form.Root>
+	);
+};

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

@@ -0,0 +1,9 @@
+export const baseLabelColor: "input.label.default";
+export namespace baseLabelStyle {
+    export let fontWeight: number;
+    export let fontSize: number;
+    export let lineHeight: number;
+    export { baseLabelColor as color };
+}
+export const Label: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/Form/Label.js

@@ -1,57 +1,51 @@
-"use strict";
-
-exports.__esModule = true;
-exports.baseLabelStyle = exports.baseLabelColor = exports.Label = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _themeUi = require("theme-ui");
-var _RequiredLabel = require("./RequiredLabel");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["sx", "children", "required", "as"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from 'theme-ui';
 /**
  * Internal dependencies
  */
-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); }
-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 baseLabelColor = 'input.label.default';
-exports.baseLabelColor = baseLabelColor;
-var baseLabelStyle = {
-  fontWeight: 500,
-  fontSize: 2,
-  lineHeight: 1.5,
-  color: baseLabelColor
+import { RequiredLabel } from './RequiredLabel';
+
+export const baseLabelColor = 'input.label.default';
+export const baseLabelStyle = {
+	fontWeight: 500,
+	fontSize: 2,
+	lineHeight: 1.5,
+	color: baseLabelColor,
 };
-exports.baseLabelStyle = baseLabelStyle;
-var Label = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var sx = _ref.sx,
-    children = _ref.children,
-    required = _ref.required,
-    _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'label' : _ref$as,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)(_themeUi.Box, _extends({
-    as: as,
-    sx: _extends({
-      all: 'unset'
-    }, baseLabelStyle, {
-      display: 'block',
-      mb: 2
-    }, sx),
-    ref: forwardRef
-  }, rest, {
-    children: [children, required && (0, _jsxRuntime.jsx)(_RequiredLabel.RequiredLabel, {})]
-  }));
-});
-exports.Label = Label;
+
+const Label = React.forwardRef(
+	( { sx, children, required, as = 'label', ...rest }, forwardRef ) => (
+		<Box
+			as={ as }
+			sx={ {
+				all: 'unset',
+				...baseLabelStyle,
+				display: 'block',
+				mb: 2,
+				...sx,
+			} }
+			ref={ forwardRef }
+			{ ...rest }
+		>
+			{ children }
+			{ required && <RequiredLabel /> }
+		</Box>
+	)
+);
+
 Label.propTypes = {
-  children: _propTypes["default"].any,
-  required: _propTypes["default"].bool,
-  sx: _propTypes["default"].object,
-  as: _propTypes["default"].node
+	children: PropTypes.any,
+	required: PropTypes.bool,
+	sx: PropTypes.object,
+	as: PropTypes.node,
 };
-Label.displayName = 'Label';
+
+Label.displayName = 'Label';
+
+export { Label };

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    let title: string;
+}
+export default _default;
+export function Default(): import("react").JSX.Element;
+export function Required(): import("react").JSX.Element;

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

@@ -0,0 +1,36 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import { Form, Label } from '..';
+
+export default {
+	title: 'Form/Label',
+};
+
+const DefaultComponent = props => (
+	<Form.Root>
+		<Label { ...props }>Label</Label>
+	</Form.Root>
+);
+
+export const Default = () => {
+	return (
+		<>
+			<DefaultComponent />
+		</>
+	);
+};
+
+export const Required = () => {
+	const args = {
+		required: true,
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...args } />
+		</>
+	);
+};

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

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