@automattic/vip-design-system 1.2.3 → 1.3.1

package/build/system/Form/Input.js

@@ -1,73 +1,60 @@
-/** @jsxImportSource theme-ui */
+"use strict";
 
-/**
- * External dependencies
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { 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 Input = React.forwardRef(
-	(
-		{ variant, label, forLabel, hasError = false, required, sx = {}, errorMessage, ...props },
-		ref
-	) => (
-		<React.Fragment>
-			{ label && (
-				<Label required={ required } htmlFor={ forLabel }>
-					{ label }
-				</Label>
-			) }
-			<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 }
-			/>
-			{ hasError && errorMessage && (
-				<Validation isValid={ false } describedId={ forLabel }>
-					{ errorMessage }
-				</Validation>
-			) }
-		</React.Fragment>
-	)
-);
-
-Input.propTypes = {
-	variant: PropTypes.string,
-	label: PropTypes.string,
-	hasError: PropTypes.bool,
-	required: PropTypes.bool,
-	forLabel: PropTypes.string,
-	errorMessage: PropTypes.string,
-	sx: PropTypes.object,
-};
-
-Input.displayName = 'Input';
-
-export { Input };
+exports.__esModule = true;
+exports.Input = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../");
+var _themeUi = require("theme-ui");
+var _Input = require("./Input.styles");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["label", "forLabel", "hasError", "required", "sx", "errorMessage"];
+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 Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var 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,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [label && (0, _jsxRuntime.jsx)(_.Label, {
+      required: required,
+      htmlFor: forLabel,
+      children: label
+    }), (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)), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {
+      isValid: false,
+      describedId: forLabel,
+      children: errorMessage
+    })]
+  });
+});
+Input.displayName = 'Input';

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

@@ -1,5 +1,7 @@
-declare namespace _default {
-    let title: string;
-}
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
 export default _default;
-export function Default(): import("react").JSX.Element;
+export declare const Default: () => import("react").JSX.Element;

package/build/system/Form/Input.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _ = require("..");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+/** @jsxImportSource theme-ui */
+/**
+ * Internal dependencies
+ */
+var _default = exports["default"] = {
+  title: 'Form/Input'
+};
+var Default = exports.Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
+    children: [(0, _jsxRuntime.jsx)(_.Form.Input, {
+      placeholder: "Your input here...",
+      label: "Always add a label to inputs",
+      forLabel: "input-simple"
+    }), (0, _jsxRuntime.jsx)("hr", {
+      sx: {
+        my: 4
+      }
+    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
+      forLabel: "input-with-error",
+      label: "Error Input",
+      errorMessage: "Please type numeric characters only",
+      hasError: true
+    }), (0, _jsxRuntime.jsx)("hr", {
+      sx: {
+        my: 4
+      }
+    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
+      forLabel: "input-with-required",
+      label: "Required",
+      required: true
+    }), (0, _jsxRuntime.jsx)("hr", {
+      sx: {
+        my: 4
+      }
+    }), (0, _jsxRuntime.jsx)(_.Form.Label, {
+      htmlFor: "input-with-custom-label",
+      children: "Custom Label outside the Input"
+    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
+      forLabel: "input-with-custom-label",
+      required: true
+    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
+      forLabel: "input-readonly",
+      readOnly: true,
+      value: "This is a readonly input"
+    })]
+  });
+};

package/build/system/Form/Input.styles.d.ts

@@ -1,26 +1,34 @@
-export namespace baseControlBorderStyle {
-    let borderWidth: string;
-    let borderStyle: string;
-    let borderColor: string;
+import { Theme } from 'theme-ui';
+export declare const baseControlBorderStyle: {
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+};
+interface InputTheme extends Theme {
+    outline?: Record<string, string>;
 }
-export const inputBaseText: "input.text.default";
-export const inputBaseBackground: "input.background";
-export const baseControlFocusStyle: {
-    '&:focus': (theme: any) => any;
-    '&:focus-visible': (theme: any) => any;
-    '&:focus-within': (theme: any) => any;
+export declare const inputBaseText = "input.text.default";
+export declare const inputBaseBackground = "input.background.default";
+export declare const baseControlFocusStyle: {
+    '&:focus': (theme: InputTheme) => Record<string, string> | undefined;
+    '&:focus-visible': (theme: InputTheme) => Record<string, string> | undefined;
+    '&:focus-within': (theme: InputTheme) => Record<string, string> | undefined;
 };
-export const baseControlStyle: {
+export declare const baseControlStyle: {
     '&:disabled': {
         borderColor: string;
     };
+    '&:read-only': {
+        borderColor: string;
+        backgroundColor: string;
+    };
     '&::placeholder': {
         color: string;
         opacity: number;
     };
-    '&:focus': (theme: any) => any;
-    '&:focus-visible': (theme: any) => any;
-    '&:focus-within': (theme: any) => any;
+    '&:focus': (theme: InputTheme) => Record<string, string> | undefined;
+    '&:focus-visible': (theme: InputTheme) => Record<string, string> | undefined;
+    '&:focus-within': (theme: InputTheme) => Record<string, string> | undefined;
     backgroundColor: string;
     color: string;
     borderRadius: number;
@@ -30,3 +38,4 @@ export const baseControlStyle: {
     borderStyle: string;
     borderColor: string;
 };
+export {};

package/build/system/Form/Input.styles.js

@@ -1,32 +1,44 @@
-export const baseControlBorderStyle = {
-	borderWidth: '1px',
-	borderStyle: 'solid',
-	borderColor: 'input.border.default',
-};
+"use strict";
 
-export const inputBaseText = 'input.text.default';
-export const inputBaseBackground = 'input.background';
-export const baseControlFocusStyle = {
-	'&:focus': theme => theme.outline,
-	'&:focus-visible': theme => theme.outline,
-	'&:focus-within': theme => theme.outline,
+exports.__esModule = true;
+exports.inputBaseText = exports.inputBaseBackground = exports.baseControlStyle = exports.baseControlFocusStyle = exports.baseControlBorderStyle = void 0;
+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); }
+var baseControlBorderStyle = exports.baseControlBorderStyle = {
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'input.border.default'
 };
+// Temporary interface until we add types to the theme definition.
 
-export const baseControlStyle = {
-	...baseControlBorderStyle,
-	backgroundColor: inputBaseBackground,
-	color: inputBaseText,
-	borderRadius: 1,
-	display: 'block',
-	width: '100%',
-
-	...baseControlFocusStyle,
-	'&:disabled': {
-		borderColor: 'input.border.disabled',
-	},
-
-	'&::placeholder': {
-		color: 'input.text.placeholder',
-		opacity: 1,
-	},
+var inputBaseText = exports.inputBaseText = 'input.text.default';
+var inputBaseBackground = exports.inputBaseBackground = 'input.background.default';
+var baseControlFocusStyle = exports.baseControlFocusStyle = {
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  },
+  '&:focus-within': function focusWithin(theme) {
+    return theme.outline;
+  }
 };
+var baseControlStyle = exports.baseControlStyle = _extends({}, baseControlBorderStyle, {
+  backgroundColor: inputBaseBackground,
+  color: inputBaseText,
+  borderRadius: 1,
+  display: 'block',
+  width: '100%'
+}, baseControlFocusStyle, {
+  '&:disabled': {
+    borderColor: 'input.border.disabled'
+  },
+  '&:read-only': {
+    borderColor: 'input.border.disabled',
+    backgroundColor: 'input.background.read-only'
+  },
+  '&::placeholder': {
+    color: 'input.text.placeholder',
+    opacity: 1
+  }
+});

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

@@ -25,6 +25,13 @@ export const Default = () => {
 				forLabel="input-simple"
 				copyHandler={ value => setCopiedText( value ) }
 			/>
+			<Form.InputWithCopyButton
+				value="Copy me!"
+				label="This is a readonly input"
+				forLabel="input-simple"
+				readOnly
+				copyHandler={ value => setCopiedText( value ) }
+			/>
 		</Form.Root>
 	);
 };

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

@@ -1,9 +1,20 @@
-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>>;
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
 import React from 'react';
+import { BoxProps } from 'theme-ui';
+export declare const baseLabelColor = "input.label.default";
+export declare const baseLabelStyle: {
+    fontWeight: string;
+    fontSize: number;
+    lineHeight: number;
+    color: string;
+};
+interface LabelProps extends BoxProps {
+    children?: React.ReactNode;
+    required?: boolean;
+    htmlFor?: string;
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export {};

package/build/system/Form/Label.js

@@ -1,51 +1,47 @@
-/** @jsxImportSource theme-ui */
+"use strict";
 
+exports.__esModule = true;
+exports.baseLabelStyle = exports.baseLabelColor = exports.Label = void 0;
+var _react = _interopRequireDefault(require("react"));
+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
  */
-import { RequiredLabel } from './RequiredLabel';
-
-export const baseLabelColor = 'input.label.default';
-export const baseLabelStyle = {
-	fontWeight: 500,
-	fontSize: 2,
-	lineHeight: 1.5,
-	color: baseLabelColor,
-};
-
-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.any,
-	required: PropTypes.bool,
-	sx: PropTypes.object,
-	as: PropTypes.node,
+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 = exports.baseLabelColor = 'input.label.default';
+var baseLabelStyle = exports.baseLabelStyle = {
+  fontWeight: 'heading',
+  fontSize: 2,
+  lineHeight: 1.5,
+  color: baseLabelColor
 };
-
-Label.displayName = 'Label';
-
-export { Label };
+var Label = exports.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, {})]
+  }));
+});
+Label.displayName = 'Label';

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

@@ -1,6 +1,8 @@
-declare namespace _default {
-    let title: string;
-}
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
 export default _default;
-export function Default(): import("react").JSX.Element;
-export function Required(): import("react").JSX.Element;
+export declare const Default: () => import("react").JSX.Element;
+export declare const Required: () => import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Required = exports.Default = void 0;
+var _ = require("..");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+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 */ /**
+                                                                                                                                                                                                                                                                                                                                                                                      * Internal dependencies
+                                                                                                                                                                                                                                                                                                                                                                                      */
+var _default = exports["default"] = {
+  title: 'Form/Label'
+};
+var DefaultComponent = function DefaultComponent(props) {
+  return (0, _jsxRuntime.jsx)(_.Form.Root, {
+    children: (0, _jsxRuntime.jsx)(_.Label, _extends({}, props, {
+      children: "Label"
+    }))
+  });
+};
+var Default = exports.Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, {})
+  });
+};
+var Required = exports.Required = function Required() {
+  var args = {
+    required: true
+  };
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, _extends({}, args))
+  });
+};

package/build/system/Form/Radio.js

@@ -20,7 +20,7 @@ const itemStyle = {
 	my: 2,
 };
 
-const radioPosition = mainTheme.space[ 4 ] - mainTheme.space[ 1 ];
+const radioPosition = mainTheme.space[ 5 ];
 
 const inputStyle = {
 	...screenReaderTextClass,
@@ -47,11 +47,11 @@ const labelStyle = {
 	marginBottom: 0,
 	userSelect: 'none',
 	color: inputBaseText,
-	lineHeight: 1.5,
+	lineHeight: 'body',
 	'&:before, &:after': {
-		borderRadius: '50%',
+		borderRadius: '100%',
 		position: 'absolute',
-		top: 0,
+		top: 1,
 		left: `${ -1 * radioPosition }px`,
 		transition: 'all .3s ease-out',
 		zIndex: 2,

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

@@ -69,7 +69,7 @@ export const Default = () => {
 									<Label
 										htmlFor="option-custom-a"
 										className="custom-class"
-										sx={ { color: '#bf2a23' } }
+										sx={ { color: 'error' } }
 									>
 										(Custom) All domains listed on this environment, and all subdomains
 									</Label>

package/build/system/Form/RadioBoxGroup.js

@@ -64,7 +64,7 @@ const RadioOption = ( {
 				id={ forLabel }
 				onChange={ onChangeHandler }
 				value={ `${ value }` }
-				sx={ { mr: 3, mt: 3 } }
+				sx={ { mr: 5, mt: 3 } }
 				aria-describedby={ describedById }
 				{ ...restOption }
 			/>

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

@@ -1,5 +1,6 @@
 /** @jsxImportSource theme-ui */
+/// <reference types="react" />
 /**
  * External dependencies
  */
-export function RequiredLabel(): import("react").JSX.Element;
+export declare const RequiredLabel: () => import("react").JSX.Element;

package/build/system/Form/RequiredLabel.js

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

package/build/system/Form/Toggle.js

@@ -23,7 +23,7 @@ export const Toggle = React.forwardRef(
 				position: 'relative',
 				width: 40,
 				height: 20,
-				borderRadius: '32px',
+				borderRadius: 5,
 				backgroundColor: 'muted',
 				backgroundRepeat: 'no-repeat',
 				backgroundPosition: 'right 2px top 2px',
@@ -54,7 +54,7 @@ export const Toggle = React.forwardRef(
 					width: 16,
 					height: 16,
 					backgroundColor: 'white',
-					borderRadius: '50%',
+					borderRadius: '100%',
 					boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
 					transition: 'transform 100ms',
 					transform: 'translateX(2px)',

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

@@ -1,14 +1,9 @@
-export function Validation({ children, isValid, describedId, ...props }: {
-    [x: string]: any;
-    children: any;
-    isValid: any;
-    describedId?: null | undefined;
-}): import("react").JSX.Element;
-export namespace Validation {
-    namespace propTypes {
-        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let isValid: PropTypes.Requireable<boolean>;
-        let describedId: PropTypes.Requireable<string>;
-    }
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+interface ValidationProps {
+    children?: React.ReactNode;
+    isValid?: boolean;
+    describedId?: string;
 }
-import PropTypes from 'prop-types';
+export declare const Validation: ({ children, isValid, describedId, ...props }: ValidationProps) => import("react").JSX.Element;
+export {};