@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Form/Checkbox.js

@@ -1,64 +1,63 @@
-"use strict";
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import PropTypes from 'prop-types';
+import { MdDone } from 'react-icons/md';
+import { baseControlBorderStyle, baseControlFocusStyle, inputBaseBackground } from './Input.styles';
+
+const StyledCheckbox = props => (
+	<CheckboxPrimitive.Root
+		sx={ {
+			all: 'unset',
+			backgroundColor: inputBaseBackground,
+			...baseControlBorderStyle,
+			...baseControlFocusStyle,
+			width: 16,
+			height: 16,
+			borderRadius: 1,
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			'&[data-state=checked]': {
+				backgroundColor: 'link',
+				color: 'link',
+			},
+			svg: {
+				display: 'block',
+			},
+		} }
+		{ ...props }
+	/>
+);
+
+const StyledIndicator = props => (
+	<CheckboxPrimitive.Indicator
+		sx={ {
+			color: 'white',
+		} }
+		{ ...props }
+	/>
+);
+
+const Checkbox = ( { disabled, ...props } ) => (
+	<StyledCheckbox
+		sx={ {
+			opacity: disabled ? 0.4 : 1,
+		} }
+		disabled={ disabled }
+		{ ...props }
+	>
+		<StyledIndicator>
+			<MdDone />
+		</StyledIndicator>
+	</StyledCheckbox>
+);
 
-exports.__esModule = true;
-exports.Checkbox = void 0;
-var CheckboxPrimitive = _interopRequireWildcard(require("@radix-ui/react-checkbox"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _md = require("react-icons/md");
-var _Input = require("./Input.styles");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["disabled"];
-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 _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
-                                                                                                                                                                                                                                                                                                                                                                                      */
-var StyledCheckbox = function StyledCheckbox(props) {
-  return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Root, _extends({
-    sx: _extends({
-      all: 'unset',
-      backgroundColor: _Input.inputBaseBackground
-    }, _Input.baseControlBorderStyle, _Input.baseControlFocusStyle, {
-      width: 16,
-      height: 16,
-      borderRadius: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      '&[data-state=checked]': {
-        backgroundColor: 'link',
-        color: 'link'
-      },
-      svg: {
-        display: 'block'
-      }
-    })
-  }, props));
-};
-var StyledIndicator = function StyledIndicator(props) {
-  return (0, _jsxRuntime.jsx)(CheckboxPrimitive.Indicator, _extends({
-    sx: {
-      color: 'white'
-    }
-  }, props));
-};
-var Checkbox = function Checkbox(_ref) {
-  var disabled = _ref.disabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return (0, _jsxRuntime.jsx)(StyledCheckbox, _extends({
-    sx: {
-      opacity: disabled ? 0.4 : 1
-    },
-    disabled: disabled
-  }, props, {
-    children: (0, _jsxRuntime.jsx)(StyledIndicator, {
-      children: (0, _jsxRuntime.jsx)(_md.MdDone, {})
-    })
-  }));
-};
-exports.Checkbox = Checkbox;
 Checkbox.propTypes = {
-  disabled: _propTypes["default"].bool
-};
+	disabled: PropTypes.bool,
+};
+
+export { Checkbox };

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

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

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

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Form } from '..';
+import { Checkbox } from './Checkbox';
+import { Label } from './Label';
+import { Flex } from '../Flex';
+
+export default {
+	title: 'Form/Checkbox',
+	component: Checkbox,
+};
+
+export const Default = () => {
+	const [ checked, setChecked ] = useState( true );
+	const [ checked2, setChecked2 ] = useState( false );
+
+	return (
+		<Form.Root>
+			<Form.Fieldset>
+				<Form.Legend>Tell me your prefereces</Form.Legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Checkbox
+						id="check1"
+						checked={ checked }
+						aria-labelledby="label-check1"
+						onCheckedChange={ setChecked }
+					/>
+					<Label sx={ { m: 0, ml: 2 } } htmlFor="check1" id="label-check1">
+						This option
+					</Label>
+				</Flex>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Checkbox
+						id="check2"
+						checked={ checked2 }
+						aria-labelledby="label-check2"
+						onCheckedChange={ setChecked2 }
+					/>
+					<Label sx={ { m: 0, ml: 2 } } htmlFor="check2" id="label-check2">
+						This option too
+					</Label>
+				</Flex>
+			</Form.Fieldset>
+		</Form.Root>
+	);
+};

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

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

package/build/system/Form/Input.js

@@ -1,72 +1,73 @@
-"use strict";
+/** @jsxImportSource theme-ui */
+
+/**
+ * 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>
+	)
+);
 
-exports.__esModule = true;
-exports.Input = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-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"];
-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 = /*#__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,
-    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
-    })]
-  });
-});
-exports.Input = Input;
 Input.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
+	variant: PropTypes.string,
+	label: PropTypes.string,
+	hasError: PropTypes.bool,
+	required: PropTypes.bool,
+	forLabel: PropTypes.string,
+	errorMessage: PropTypes.string,
+	sx: PropTypes.object,
 };
-Input.displayName = 'Input';
+
+Input.displayName = 'Input';
+
+export { Input };

package/build/system/Form/Input.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/Input.stories.jsx

@@ -0,0 +1,38 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import { Form } from '..';
+
+export default {
+	title: 'Form/Input',
+};
+
+export const Default = () => (
+	<Form.Root>
+		<Form.Input
+			placeholder="Your input here..."
+			label="Always add a label to inputs"
+			forLabel="input-simple"
+		/>
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Input
+			forLabel="input-with-error"
+			label="Error Input"
+			errorMessage="Please type numeric characters only"
+			hasError
+		/>
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Input forLabel="input-with-required" label="Required" required />
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Label htmlFor="input-with-custom-label">Custom Label outside the Input</Form.Label>
+		<Form.Input forLabel="input-with-custom-label" required />
+	</Form.Root>
+);

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

@@ -0,0 +1,32 @@
+export namespace baseControlBorderStyle {
+    let borderWidth: string;
+    let borderStyle: string;
+    let borderColor: 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 const baseControlStyle: {
+    '&:disabled': {
+        borderColor: string;
+    };
+    '&::placeholder': {
+        color: string;
+        opacity: number;
+    };
+    '&:focus': (theme: any) => any;
+    '&:focus-visible': (theme: any) => any;
+    '&:focus-within': (theme: any) => any;
+    backgroundColor: string;
+    color: string;
+    borderRadius: number;
+    display: string;
+    width: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+};

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

@@ -1,43 +1,32 @@
-"use strict";
+export const baseControlBorderStyle = {
+	borderWidth: '1px',
+	borderStyle: 'solid',
+	borderColor: 'input.border.default',
+};
 
-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 = {
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  borderColor: 'input.border.default'
+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.baseControlBorderStyle = baseControlBorderStyle;
-var inputBaseText = 'input.text.default';
-exports.inputBaseText = inputBaseText;
-var inputBaseBackground = 'input.background';
-exports.inputBaseBackground = inputBaseBackground;
-var baseControlFocusStyle = {
-  '&:focus': function focus(theme) {
-    return theme.outline;
-  },
-  '&:focus-visible': function focusVisible(theme) {
-    return theme.outline;
-  },
-  '&:focus-within': function focusWithin(theme) {
-    return theme.outline;
-  }
+
+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,
+	},
 };
-exports.baseControlFocusStyle = baseControlFocusStyle;
-var baseControlStyle = _extends({}, baseControlBorderStyle, {
-  backgroundColor: inputBaseBackground,
-  color: inputBaseText,
-  borderRadius: 1,
-  display: 'block',
-  width: '100%'
-}, baseControlFocusStyle, {
-  '&:disabled': {
-    borderColor: 'input.border.disabled'
-  },
-  '&::placeholder': {
-    color: 'input.text.placeholder',
-    opacity: 1
-  }
-});
-exports.baseControlStyle = baseControlStyle;

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

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