@automattic/vip-design-system 1.2.3 → 1.3.1

package/build/system/Form/Validation.js

@@ -1,39 +1,43 @@
-/** @jsxImportSource theme-ui */
+"use strict";
 
+exports.__esModule = true;
+exports.Validation = void 0;
+var _md = require("react-icons/md");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["children", "isValid", "describedId"];
+/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
-import { MdErrorOutline, MdCheckCircle } from 'react-icons/md';
-
-const errorColor = 'texts.error';
-const helperColor = 'texts.helper';
-
-const Validation = ( { children, isValid, describedId = null, ...props } ) => {
-	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
-
-	return (
-		<p
-			sx={ {
-				color: isValid ? helperColor : errorColor,
-				display: 'flex',
-				alignItems: 'center',
-				m: 0,
-				fontSize: 1,
-			} }
-			id={ describedId ? `describe-${ describedId }-validation` : undefined }
-			{ ...props }
-		>
-			<Icon sx={ { mr: 1 } } aria-hidden="true" />
-			{ children }
-		</p>
-	);
-};
-
-Validation.propTypes = {
-	children: PropTypes.node,
-	isValid: PropTypes.bool,
-	describedId: PropTypes.string,
-};
-
-export { Validation };
+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 errorColor = 'texts.error';
+var helperColor = 'texts.helper';
+var Validation = exports.Validation = function Validation(_ref) {
+  var children = _ref.children,
+    isValid = _ref.isValid,
+    describedId = _ref.describedId,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsxs)("p", _extends({
+    sx: {
+      color: isValid ? helperColor : errorColor,
+      display: 'flex',
+      alignItems: 'center',
+      m: 0,
+      fontSize: 1
+    },
+    id: describedId ? "describe-" + describedId + "-validation" : undefined
+  }, props, {
+    children: [isValid ? (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
+      sx: {
+        mr: 1
+      },
+      "aria-hidden": "true"
+    }) : (0, _jsxRuntime.jsx)(_md.MdErrorOutline, {
+      sx: {
+        mr: 1
+      },
+      "aria-hidden": "true"
+    }), children]
+  }));
+};

package/build/system/Heading/Heading.stories.js

@@ -28,6 +28,9 @@ var Default = exports.Default = function Default() {
     }), (0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h5",
       children: "Heading Five"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h6",
+      children: "Heading Six"
     })]
   });
 };

package/build/system/Link/Link.js

@@ -19,7 +19,7 @@ var Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Link, _extends({
     sx: _extends({
-      textDdecorationThickness: '0.1em',
+      textDecorationThickness: '0.1em',
       textUnderlineOffset: '0.1em',
       color: active ? 'links.active' : 'link',
       '&:visited': {

package/build/system/NewDialog/DialogClose.js

@@ -39,8 +39,8 @@ export const DialogCloseDefault = React.forwardRef( ( props, forwardedRef ) => (
 				justifyContent: 'center',
 				color: 'icon.primary',
 				position: 'absolute',
-				top: 10,
-				right: 10,
+				top: 3,
+				right: 3,
 
 				'&:hover': {
 					backgroundColor: 'borders.2',

package/build/system/NewDialog/DialogContent.js

@@ -3,8 +3,8 @@
 export const contentStyles = {
 	background: 'dialog',
 	variant: 'dialog.modal',
-	borderRadius: 10,
-	boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
+	borderRadius: 2,
+	boxShadow: 'medium',
 	position: 'fixed',
 	top: '50%',
 	left: '50%',
@@ -12,6 +12,6 @@ export const contentStyles = {
 	width: '90vw',
 	maxWidth: '640px',
 	maxHeight: '85vh',
-	padding: 32,
+	padding: 6,
 	'> h1, > h2': { marginTop: '0 !important' },
 };

package/build/system/NewDialog/DialogTitle.js

@@ -19,7 +19,9 @@ export const DialogTitle = ( { title, hidden = false } ) => {
 	}
 
 	return (
-		<DialogPrimitive.Title sx={ { margin: 0, fontSize: 3, fontWeight: 500, color: 'heading' } }>
+		<DialogPrimitive.Title
+			sx={ { margin: 0, fontSize: 3, fontWeight: 'medium', color: 'heading' } }
+		>
 			{ titleNode }
 		</DialogPrimitive.Title>
 	);

package/build/system/NewDialog/NewDialog.stories.d.ts

@@ -30,7 +30,6 @@ declare namespace _default {
 }
 export default _default;
 export function Default(): import("react").JSX.Element;
-export function AutoOpen(): import("react").JSX.Element;
 export function HiddenHeadings(): import("react").JSX.Element;
 export function CustomStyling(): import("react").JSX.Element;
 export function CustomClose(): import("react").JSX.Element;

package/build/system/NewDialog/NewDialog.stories.jsx

@@ -10,7 +10,6 @@ import { useState } from 'react';
  * Internal dependencies
  */
 import { Button, Text, Input, Label } from '../../system';
-import ScreenReaderText from '../ScreenReaderText';
 import * as NewDialog from '.';
 
 export default {
@@ -33,31 +32,6 @@ export const Default = () => (
 	</>
 );
 
-export const AutoOpen = () => (
-	<>
-		<Text sx={ { fontSize: 3, mb: 3 } }>Auto Opens when rendered. Press escape to close it.</Text>
-		<NewDialog.Root
-			{ ...defaultProps }
-			defaultOpen={ true }
-			content={
-				<div>
-					<h3>Test</h3>
-					<p>
-						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-						has been the industry standard dummy text ever since the 1500s, when an unknown printer
-						took a galley of type and scrambled it to make a type specimen book. It has survived not
-						only five centuries, but also the leap into electronic typesetting, remaining
-						essentially unchanged. It was popularised in the 1960s with the release of Letraset
-						sheets containing Lorem Ipsum passages, and more recently with desktop publishing
-						software like Aldus PageMaker including versions of Lorem Ipsum.
-					</p>
-				</div>
-			}
-			trigger={ <ScreenReaderText>hey</ScreenReaderText> }
-		/>
-	</>
-);
-
 export const HiddenHeadings = () => (
 	<>
 		<Text sx={ { fontSize: 3, mb: 3 } }>
@@ -96,7 +70,6 @@ export const CustomStyling = () => (
 
 		<NewDialog.Root
 			{ ...defaultProps }
-			defaultOpen
 			trigger={ <Button>Trigger Dialog</Button> }
 			title="Custom dialog title"
 			style={ {

package/build/system/NewForm/Fieldset.d.ts

@@ -1,2 +1,13 @@
-export const Fieldset: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
 import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+interface FieldsetProps {
+    children?: React.ReactNode;
+    sx?: ThemeUIStyleObject;
+    className?: string;
+}
+export declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+export {};

package/build/system/NewForm/Fieldset.js

@@ -1,47 +1,45 @@
-/** @jsxImportSource theme-ui */
+"use strict";
 
+exports.__esModule = true;
+exports.Fieldset = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Input = require("../Form/Input.styles");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["children", "className", "sx"];
+/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
 /**
  * Internal dependencies
  */
-
-import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
-
-const Fieldset = React.forwardRef( ( { children, className, sx = {}, ...props }, forwardRef ) => (
-	<fieldset
-		ref={ forwardRef }
-		className={ classNames( 'vip-form-fieldset-component', className ) }
-		sx={ {
-			all: 'unset',
-			...baseControlBorderStyle,
-			backgroundColor: inputBaseBackground,
-			color: inputBaseText,
-			borderRadius: 1,
-			display: 'block',
-			pt: 1,
-			pb: 2,
-			px: 3,
-			mb: 3,
-			...sx,
-		} }
-		{ ...props }
-	>
-		{ children }
-	</fieldset>
-) );
-
-Fieldset.propTypes = {
-	children: PropTypes.any,
-	sx: PropTypes.any,
-	className: PropTypes.any,
-};
-
-Fieldset.displayName = 'Fieldset';
-
-export { Fieldset };
+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 Fieldset = exports.Fieldset = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)("fieldset", _extends({
+    ref: forwardRef,
+    className: (0, _classnames["default"])('vip-form-fieldset-component', className),
+    sx: _extends({
+      all: 'unset'
+    }, _Input.baseControlBorderStyle, {
+      backgroundColor: _Input.inputBaseBackground,
+      color: _Input.inputBaseText,
+      borderRadius: 1,
+      display: 'block',
+      pt: 1,
+      pb: 2,
+      px: 3,
+      mb: 3
+    }, sx)
+  }, props, {
+    children: children
+  }));
+});
+Fieldset.displayName = 'Fieldset';

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

@@ -1,2 +1,9 @@
-export const Form: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/**
+ * External dependencies
+ */
 import React from 'react';
+export interface FormProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;

package/build/system/NewForm/Form.js

@@ -1,26 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Form = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["children", "className"];
 /**
  * External dependencies
  */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Form = React.forwardRef( ( { children, className, ...props }, forwardRef ) => (
-	<form
-		ref={ forwardRef }
-		className={ classNames( 'vip-form-component', className ) }
-		noValidate
-		{ ...props }
-	>
-		{ children }
-	</form>
-) );
-
-Form.propTypes = {
-	children: PropTypes.any,
-	className: PropTypes.any,
-};
-
-Form.displayName = 'Form';
-
-export { Form };
+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 Form = exports.Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)("form", _extends({
+    ref: forwardRef,
+    className: (0, _classnames["default"])('vip-form-component', className),
+    noValidate: true
+  }, props, {
+    children: children
+  }));
+});
+Form.displayName = 'Form';

package/build/system/NewForm/FormAutocomplete.css

@@ -38,17 +38,6 @@
 	cursor: pointer;
 }
 
-/* .autocomplete__dropdown-arrow-down {
-	z-index: -1;
-	display: inline-block;
-	position: absolute;
-	right: 8px;
-	width: 24px;
-	height: 24px;
-	top: 10px;
-	pointer-events: none;
-} */
-
 .autocomplete__menu {
 	background-color: #fff;
 	border: 2px solid #0b0c0c;

package/build/system/NewForm/FormAutocomplete.js

@@ -17,12 +17,12 @@ import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
 import { FormSelectSearch } from './FormSelectSearch';
 import { FormSelectLoading } from './FormSelectLoading';
-import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
+import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Validation } from '../Form';
 
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
-	backgroundColor: inputBaseBackground,
+	backgroundColor: 'layer.2',
 	color: inputBaseText,
 	borderRadius: 1,
 };
@@ -51,7 +51,7 @@ const defaultStyles = {
 		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
 		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
 		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
-		'&.autocomplete__input--show-all-values': { paddingRight: '40px' },
+		'&.autocomplete__input--show-all-values': { paddingRight: 7 },
 	},
 	'& .autocomplete__menu': {
 		...baseBorderTextColors,
@@ -66,11 +66,11 @@ const defaultStyles = {
 		borderColor: baseControlBorderStyle.borderColor,
 	},
 	'& .autocomplete__option--odd': {
-		bg: 'backgroundSecondary',
+		bg: 'layer.1',
 	},
 	'& .autocomplete__option:hover, & .autocomplete__option--focused': {
-		bg: 'midnight',
-		borderColor: 'midnight',
+		bg: 'input.background.primary',
+		borderColor: 'input.background.primary',
 	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
@@ -89,7 +89,7 @@ const inlineStyles = {
 
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
-		paddingLeft: 4,
+		paddingLeft: 6,
 	},
 };
 
@@ -345,7 +345,7 @@ const FormAutocomplete = React.forwardRef(
 							{ ...props }
 						/>
 
-						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 40 : 10 } } /> }
+						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 7 : 3 } } /> }
 					</FormSelectContent>
 				</div>
 

package/build/system/NewForm/FormAutocomplete.stories.jsx

@@ -151,9 +151,7 @@ WithCustomArrow.args = {
 	showAllValues: true,
 	// eslint-disable-next-line react/display-name
 	dropdownArrow: () => (
-		<span sx={ { position: 'absolute', top: '2px', right: '10px', pointerEvents: 'none' } }>
-			👇
-		</span>
+		<span sx={ { position: 'absolute', top: 1, right: 3, pointerEvents: 'none' } }>👇</span>
 	),
 };
 WithCustomArrow.displayName = 'WithCustomArrow';

package/build/system/NewForm/FormAutocompleteMultiselect.js

@@ -16,14 +16,14 @@ import { FormSelectArrow } from './FormSelectArrow';
 import { Label } from '../Form/Label';
 import { FormSelectSearch } from './FormSelectSearch';
 import { FormSelectLoading } from './FormSelectLoading';
-import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
+import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Validation } from '../Form';
 import { Button, Flex } from '../';
 import { MdClose } from 'react-icons/md';
 
 const baseBorderTextColors = {
 	...baseControlBorderStyle,
-	backgroundColor: inputBaseBackground,
+	backgroundColor: 'layer.2',
 	color: inputBaseText,
 	borderRadius: 1,
 };
@@ -41,7 +41,7 @@ const defaultStyles = {
 	'&.autocomplete__input--focused': theme => theme.outline,
 	'& .autocomplete__input': {
 		width: '100%',
-		paddingLeft: 3,
+		paddingLeft: 4,
 		py: 0,
 		borderWidth: 0,
 		color: 'text',
@@ -51,7 +51,7 @@ const defaultStyles = {
 		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
 		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
 		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
-		'&.autocomplete__input--show-all-values': { paddingRight: '40px' },
+		'&.autocomplete__input--show-all-values': { paddingRight: 7 },
 		'&::placeholder': {
 			color: 'input.text.placeholder',
 			opacity: 1,
@@ -70,18 +70,18 @@ const defaultStyles = {
 		borderColor: baseControlBorderStyle.borderColor,
 	},
 	'& .autocomplete__option--odd': {
-		bg: 'backgroundSecondary',
+		bg: 'layer.1',
 	},
 	'& .autocomplete__option:hover, & .autocomplete__option--focused': {
-		bg: 'midnight',
-		borderColor: 'midnight',
+		bg: 'input.background.primary',
+		borderColor: 'input.background.primary',
 	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
 	},
 	'& .autocomplete__hint': {
 		border: 'none',
-		paddingLeft: 3,
+		paddingLeft: 4,
 		minHeight: '27px',
 		lineHeight: '27px',
 	},
@@ -93,7 +93,7 @@ const inlineStyles = {
 
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
-		paddingLeft: 4,
+		paddingLeft: 6,
 	},
 };
 
@@ -407,7 +407,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 							{ ...props }
 						/>
 						{ addStatus && <AddSelectionStatus status={ addStatus } /> }
-						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 40 : 10 } } /> }
+						{ loading && <FormSelectLoading sx={ { right: showAllValues ? 7 : 3 } } /> }
 					</FormSelectContent>
 				</div>
 				<Flex sx={ { mt: 2, justifyContent: 'space-between' } }>

package/build/system/NewForm/FormSelect.js

@@ -21,7 +21,7 @@ const isDev = process.env.NODE_ENV !== 'production';
 const defaultStyles = {
 	...baseControlStyle,
 	paddingLeft: 3,
-	paddingRight: 40, // 40px for the icon
+	paddingRight: 7,
 	py: 0,
 	appearance: 'none',
 	minHeight: '36px',

package/build/system/NewForm/FormSelectArrow.js

@@ -22,7 +22,7 @@ export const FormSelectArrow = React.forwardRef( ( props, forwardRef ) => (
 			borderLeftWidth: borderStyle.borderWidth,
 			borderLeftStyle: borderStyle.borderStyle,
 			borderLeftColor: borderStyle.borderColor,
-			right: '10px',
+			right: 3,
 			top: '7px',
 			pointerEvents: 'none',
 			svg: {

package/build/system/NewForm/FormSelectInline.js

@@ -14,7 +14,7 @@ export const inlineStyles = {
 	gridTemplateColumns: 'auto 1fr',
 	position: 'relative',
 	alignItems: 'center',
-	backgroundColor: 'input.background',
+	backgroundColor: 'input.background.default',
 	borderRadius: 1,
 	...baseControlBorderStyle,
 	paddingRight: 0,

package/build/system/NewForm/FormSelectLoading.js

@@ -25,7 +25,7 @@ export const FormSelectLoading = React.forwardRef( ( { sx = {}, ...rest }, forwa
 		size={ 18 }
 		sx={ {
 			position: 'absolute',
-			right: 10,
+			right: 3,
 			pointerEvents: 'none',
 			animation: `${ kf } 1s infinite linear`,
 			opacity: 0.5,

package/build/system/NewForm/FormSelectSearch.js

@@ -13,8 +13,8 @@ export const FormSelectSearch = React.forwardRef( ( props, forwardRef ) => (
 		size={ 24 }
 		sx={ {
 			position: 'absolute',
-			paddingRight: '10px',
-			left: '10px',
+			pr: 2,
+			left: 3,
 			pointerEvents: 'none',
 		} }
 		{ ...props }

package/build/system/NewForm/Legend.d.ts

@@ -1,2 +1,13 @@
-export const Legend: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
 import React from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+interface LegendProps {
+    children?: React.ReactNode;
+    sx?: ThemeUIStyleObject;
+    className?: string;
+}
+export declare const Legend: React.ForwardRefExoticComponent<LegendProps & React.RefAttributes<HTMLLegendElement>>;
+export {};