@automattic/vip-design-system 1.2.3 → 1.3.1

package/src/system/Button/{ButtonSubmit.js → ButtonSubmit.tsx}

@@ -1,39 +1,43 @@
-/** @jsxImportSource theme-ui */
-
 /**
  * External dependencies
  */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from './Button';
+import { Button, ButtonProps } from './Button';
 import { Spinner } from '../Spinner';
 import classNames from 'classnames';
-import variants from './variants';
 
-const DefaultSpinner = ( { size, color = 'link' } ) => (
-	<Spinner size={ size } sx={ { ml: 2, color } } className="vip-button-submit-spinner" />
-);
+interface DefaultSpinnerProps {
+	color?: string;
+	size: number;
+}
 
-DefaultSpinner.propTypes = {
-	size: PropTypes.number,
-	color: PropTypes.string,
-};
+function DefaultSpinner( { size, color = 'link' }: DefaultSpinnerProps ) {
+	return <Spinner size={ size } sx={ { ml: 2, color } } className="vip-button-submit-spinner" />;
+}
 
 DefaultSpinner.displayName = 'DefaultSpinner';
 
-export const ButtonSubmit = React.forwardRef(
+export interface ButtonSubmitProps extends ButtonProps {
+	label: React.ReactNode;
+	loading?: boolean;
+	loadingIcon?: ( props: DefaultSpinnerProps ) => JSX.Element;
+	loadingIconSize?: number;
+	show?: boolean;
+}
+
+export const ButtonSubmit = React.forwardRef< HTMLButtonElement, ButtonSubmitProps >(
 	(
 		{
 			show = true,
-			variant = variants[ 1 ],
+			variant = 'secondary',
 			label,
 			loading = false,
 			disabled = false,
 			loadingIcon = DefaultSpinner,
 			loadingIconSize = 20,
 			...rest
-		},
-		forwardRef
+		}: ButtonSubmitProps,
+		ref: React.Ref< HTMLButtonElement >
 	) => {
 		if ( ! show ) {
 			return null;
@@ -41,7 +45,7 @@ export const ButtonSubmit = React.forwardRef(
 
 		return (
 			<Button
-				ref={ forwardRef }
+				ref={ ref }
 				className={ classNames( 'vip-button-submit-component', `vip-button-submit-${ variant }` ) }
 				disabled={ disabled || loading }
 				variant={ variant }
@@ -57,13 +61,3 @@ export const ButtonSubmit = React.forwardRef(
 );
 
 ButtonSubmit.displayName = 'ButtonSubmit';
-
-ButtonSubmit.propTypes = {
-	label: PropTypes.node.isRequired,
-	disabled: PropTypes.bool,
-	loading: PropTypes.bool,
-	variant: PropTypes.oneOf( variants ),
-	show: PropTypes.bool,
-	loadingIcon: PropTypes.any,
-	loadingIconSize: PropTypes.number,
-};

package/src/system/Button/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+
+export { Button, ButtonVariant } from './Button';
+export type { ButtonProps } from './Button';
+export { ButtonSubmit } from './ButtonSubmit';
+export type { ButtonSubmitProps } from './ButtonSubmit';

package/src/system/Dropdown/DropdownContent.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 
 export const styles = {
 	minWidth: 220,
-	borderRadius: 6,
+	borderRadius: 2,
 	backgroundColor: 'background',
 	boxShadow: 'high',
 	px: 2,

package/src/system/Dropdown/DropdownItem.js

@@ -21,7 +21,7 @@ export const styles = {
 	m: 0,
 	color: 'heading',
 	px: 2,
-	paddingLeft: 10,
+	paddingLeft: 3,
 	py: 1,
 	'&:hover, &:focus': {
 		backgroundColor: 'hover',

package/src/system/Dropdown/DropdownLabel.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 export const styles = {
-	paddingLeft: 10,
+	paddingLeft: 3,
 	fontSize: 12,
 	lineHeight: '25px',
 	color: 'muted',

package/src/system/Form/{Checkbox.stories.jsx → Checkbox.stories.tsx}

@@ -10,6 +10,7 @@ import { Form } from '..';
 import { Checkbox } from './Checkbox';
 import { Label } from './Label';
 import { Flex } from '../Flex';
+import { CheckedState } from '@radix-ui/react-checkbox';
 
 export default {
 	title: 'Form/Checkbox',
@@ -17,8 +18,8 @@ export default {
 };
 
 export const Default = () => {
-	const [ checked, setChecked ] = useState( true );
-	const [ checked2, setChecked2 ] = useState( false );
+	const [ checked, setChecked ] = useState< CheckedState >( true );
+	const [ checked2, setChecked2 ] = useState< CheckedState >( false );
 
 	return (
 		<Form.Root>

package/src/system/Form/{Checkbox.js → Checkbox.tsx}

@@ -4,11 +4,13 @@
  * 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 => (
+export interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
+	disabled?: boolean;
+}
+const StyledCheckbox = ( props: CheckboxProps ) => (
 	<CheckboxPrimitive.Root
 		sx={ {
 			all: 'unset',
@@ -33,7 +35,7 @@ const StyledCheckbox = props => (
 	/>
 );
 
-const StyledIndicator = props => (
+const StyledIndicator = ( props: CheckboxPrimitive.CheckboxIndicatorProps ) => (
 	<CheckboxPrimitive.Indicator
 		sx={ {
 			color: 'white',
@@ -42,7 +44,7 @@ const StyledIndicator = props => (
 	/>
 );
 
-const Checkbox = ( { disabled, ...props } ) => (
+export const Checkbox = ( { disabled, ...props }: CheckboxProps ) => (
 	<StyledCheckbox
 		sx={ {
 			opacity: disabled ? 0.4 : 1,
@@ -55,9 +57,3 @@ const Checkbox = ( { disabled, ...props } ) => (
 		</StyledIndicator>
 	</StyledCheckbox>
 );
-
-Checkbox.propTypes = {
-	disabled: PropTypes.bool,
-};
-
-export { Checkbox };

package/src/system/Form/{Input.stories.jsx → Input.stories.tsx}

@@ -34,5 +34,6 @@ export const Default = () => (
 
 		<Form.Label htmlFor="input-with-custom-label">Custom Label outside the Input</Form.Label>
 		<Form.Input forLabel="input-with-custom-label" required />
+		<Form.Input forLabel="input-readonly" readOnly value="This is a readonly input" />
 	</Form.Root>
 );

package/src/system/Form/{Input.styles.js → Input.styles.ts}

@@ -1,15 +1,21 @@
+import { Theme } from 'theme-ui';
+
 export const baseControlBorderStyle = {
 	borderWidth: '1px',
 	borderStyle: 'solid',
 	borderColor: 'input.border.default',
 };
+// Temporary interface until we add types to the theme definition.
+interface InputTheme extends Theme {
+	outline?: Record< string, string >;
+}
 
 export const inputBaseText = 'input.text.default';
-export const inputBaseBackground = 'input.background';
+export const inputBaseBackground = 'input.background.default';
 export const baseControlFocusStyle = {
-	'&:focus': theme => theme.outline,
-	'&:focus-visible': theme => theme.outline,
-	'&:focus-within': theme => theme.outline,
+	'&:focus': ( theme: InputTheme ) => theme.outline,
+	'&:focus-visible': ( theme: InputTheme ) => theme.outline,
+	'&:focus-within': ( theme: InputTheme ) => theme.outline,
 };
 
 export const baseControlStyle = {
@@ -24,7 +30,10 @@ export const baseControlStyle = {
 	'&:disabled': {
 		borderColor: 'input.border.disabled',
 	},
-
+	'&:read-only': {
+		borderColor: 'input.border.disabled',
+		backgroundColor: 'input.background.read-only',
+	},
 	'&::placeholder': {
 		color: 'input.text.placeholder',
 		opacity: 1,

package/src/system/Form/{Input.js → Input.tsx}

@@ -4,13 +4,12 @@
  * 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 { Input as ThemeInput, InputProps as ThemeInputProps } from 'theme-ui';
 import { baseControlStyle } from './Input.styles';
 
 const inputStyles = {
@@ -25,11 +24,15 @@ const inputStyles = {
 	variant: 'inputs.default',
 };
 
-const Input = React.forwardRef(
-	(
-		{ variant, label, forLabel, hasError = false, required, sx = {}, errorMessage, ...props },
-		ref
-	) => (
+interface InputProps extends ThemeInputProps {
+	label?: string;
+	hasError?: boolean;
+	required?: boolean;
+	forLabel?: string;
+	errorMessage?: string;
+}
+export const Input = React.forwardRef< HTMLInputElement, InputProps >(
+	( { label, forLabel, hasError = false, required, sx = {}, errorMessage, ...props }, ref ) => (
 		<React.Fragment>
 			{ label && (
 				<Label required={ required } htmlFor={ forLabel }>
@@ -58,16 +61,4 @@ const Input = React.forwardRef(
 	)
 );
 
-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 };

package/src/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/src/system/Form/{Label.js → Label.tsx}

@@ -4,8 +4,7 @@
  * External dependencies
  */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from 'theme-ui';
+import { Box, BoxProps } from 'theme-ui';
 /**
  * Internal dependencies
  */
@@ -13,13 +12,18 @@ import { RequiredLabel } from './RequiredLabel';
 
 export const baseLabelColor = 'input.label.default';
 export const baseLabelStyle = {
-	fontWeight: 500,
+	fontWeight: 'heading',
 	fontSize: 2,
 	lineHeight: 1.5,
 	color: baseLabelColor,
 };
+interface LabelProps extends BoxProps {
+	children?: React.ReactNode;
+	required?: boolean;
+	htmlFor?: string;
+}
 
-const Label = React.forwardRef(
+export const Label = React.forwardRef< HTMLLabelElement, LabelProps >(
 	( { sx, children, required, as = 'label', ...rest }, forwardRef ) => (
 		<Box
 			as={ as }
@@ -39,13 +43,4 @@ const Label = React.forwardRef(
 	)
 );
 
-Label.propTypes = {
-	children: PropTypes.any,
-	required: PropTypes.bool,
-	sx: PropTypes.object,
-	as: PropTypes.node,
-};
-
 Label.displayName = 'Label';
-
-export { Label };

package/src/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/src/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/src/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/src/system/Form/{RequiredLabel.js → RequiredLabel.tsx}

@@ -4,10 +4,8 @@
  * External dependencies
  */
 
-const RequiredLabel = () => (
+export const RequiredLabel = () => (
 	<span sx={ { color: 'texts.helper', display: 'inline-block', ml: 2, fontSize: 1 } }>
 		(Required)
 	</span>
 );
-
-export { RequiredLabel };

package/src/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/src/system/Form/{Validation.js → Validation.tsx}

@@ -3,15 +3,18 @@
 /**
  * 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;
+interface ValidationProps {
+	children?: React.ReactNode;
+	isValid?: boolean;
+	describedId?: string;
+}
 
+export const Validation = ( { children, isValid, describedId, ...props }: ValidationProps ) => {
 	return (
 		<p
 			sx={ {
@@ -24,16 +27,12 @@ const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 			id={ describedId ? `describe-${ describedId }-validation` : undefined }
 			{ ...props }
 		>
-			<Icon sx={ { mr: 1 } } aria-hidden="true" />
+			{ isValid ? (
+				<MdCheckCircle sx={ { mr: 1 } } aria-hidden="true" />
+			) : (
+				<MdErrorOutline sx={ { mr: 1 } } aria-hidden="true" />
+			) }
 			{ children }
 		</p>
 	);
 };
-
-Validation.propTypes = {
-	children: PropTypes.node,
-	isValid: PropTypes.bool,
-	describedId: PropTypes.string,
-};
-
-export { Validation };

package/src/system/Heading/Heading.stories.tsx

@@ -15,5 +15,6 @@ export const Default = () => (
 		<Heading variant="h3">Heading Three</Heading>
 		<Heading variant="h4">Heading Four</Heading>
 		<Heading variant="h5">Heading Five</Heading>
+		<Heading variant="h6">Heading Six</Heading>
 	</Box>
 );

package/src/system/Link/Link.tsx

@@ -17,7 +17,7 @@ export const Link = forwardRef< HTMLAnchorElement, LinkProps >(
 	( { active = false, sx, ...props }: LinkProps, ref: Ref< HTMLAnchorElement > ) => (
 		<ThemeLink
 			sx={ {
-				textDdecorationThickness: '0.1em',
+				textDecorationThickness: '0.1em',
 				textUnderlineOffset: '0.1em',
 				color: active ? 'links.active' : 'link',
 				'&:visited': {

package/src/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/src/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/src/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/src/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/src/system/NewForm/Fieldset.tsx

@@ -0,0 +1,46 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+
+import { baseControlBorderStyle, inputBaseBackground, inputBaseText } from '../Form/Input.styles';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+interface FieldsetProps {
+	children?: React.ReactNode;
+	sx?: ThemeUIStyleObject;
+	className?: string;
+}
+export const Fieldset = React.forwardRef< HTMLFieldSetElement, FieldsetProps >(
+	( { 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.displayName = 'Fieldset';

package/src/system/NewForm/Form.tsx

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+export interface FormProps {
+	children?: React.ReactNode;
+	className?: string;
+}
+export const Form = React.forwardRef< HTMLFormElement, FormProps >(
+	( { children, className, ...props }, forwardRef ) => (
+		<form
+			ref={ forwardRef }
+			className={ classNames( 'vip-form-component', className ) }
+			noValidate
+			{ ...props }
+		>
+			{ children }
+		</form>
+	)
+);
+
+Form.displayName = 'Form';

package/src/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;