@automattic/vip-design-system 1.2.3 → 1.3.1

package/tsconfig.json

@@ -9,7 +9,8 @@
     "noEmit": true,
     // Disallow features that require cross-file information for emit.
     "isolatedModules": true,
-
+    // Allow to import *.json files
+    "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "jsx": "react-jsx",

package/build/system/Button/ButtonSubmit.stories.jsx

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import { ButtonSubmit } from '..';
-import variants from './variants';
-
-export default {
-	title: 'ButtonSubmit',
-	component: ButtonSubmit,
-	argTypes: {
-		loading: {
-			control: { type: 'boolean', defaultValue: true },
-		},
-		disabled: {
-			control: { type: 'boolean' },
-		},
-		show: {
-			control: { type: 'boolean', default: true },
-		},
-		variant: {
-			type: 'select',
-			options: variants,
-		},
-	},
-};
-
-const Template = args => (
-	<React.Fragment>
-		{ variants.map( v => (
-			<ButtonSubmit sx={ { m: 3 } } key={ v } variant={ v } { ...args } label="Loading…" />
-		) ) }
-	</React.Fragment>
-);
-
-export const Default = Template.bind( {} );

package/build/system/Button/variants.d.ts

@@ -1,2 +0,0 @@
-declare const _default: string[];
-export default _default;

package/build/system/Button/variants.js

@@ -1 +0,0 @@
-export default [ 'primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display' ];

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

@@ -1,54 +0,0 @@
-/**
- * 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.stories.jsx

@@ -1,38 +0,0 @@
-/** @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/Wizard/WizardStepHorizontal.d.ts

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

package/build/system/Wizard/WizardStepHorizontal.js

@@ -1,55 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import { MdCheckCircle } from 'react-icons/md';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { Heading, Flex } from '..';
-
-const WizardStepHorizontal = React.forwardRef(
-	( { title, active, order, titleVariant = 'h3' }, forwardRef ) => {
-		const color = active ? 'heading' : 'muted';
-
-		return typeof title === 'string' ? (
-			<Heading
-				variant={ titleVariant }
-				sx={ {
-					mb: 0,
-					display: 'flex',
-					alignItems: 'center',
-					fontSize: 2,
-					color,
-				} }
-				data-step={ order }
-				data-active={ active || undefined }
-				ref={ forwardRef }
-			>
-				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-				{ title }
-			</Heading>
-		) : (
-			<Flex sx={ { alignItems: 'center', color } }>
-				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
-				{ title }
-			</Flex>
-		);
-	}
-);
-
-WizardStepHorizontal.displayName = 'WizardStepHorizontal';
-
-WizardStepHorizontal.propTypes = {
-	active: PropTypes.bool,
-	order: PropTypes.number.isRequired,
-	subTitle: PropTypes.node,
-	title: PropTypes.node,
-	titleVariant: PropTypes.string,
-};
-
-export { WizardStepHorizontal };

package/build/system/theme/textStyles.d.ts

@@ -1,71 +0,0 @@
-export namespace textStyles {
-    namespace h1 {
-        let fontSize: number;
-        let marginBottom: number;
-        let letterSpacing: string;
-        let fontWeight: string;
-        let fontFamily: string;
-        let color: string;
-    }
-    namespace h2 {
-        let fontSize_1: number;
-        export { fontSize_1 as fontSize };
-        let marginBottom_1: number;
-        export { marginBottom_1 as marginBottom };
-        let letterSpacing_1: string;
-        export { letterSpacing_1 as letterSpacing };
-        let fontWeight_1: number;
-        export { fontWeight_1 as fontWeight };
-        let color_1: string;
-        export { color_1 as color };
-    }
-    namespace h3 {
-        let fontSize_2: number;
-        export { fontSize_2 as fontSize };
-        let marginBottom_2: number;
-        export { marginBottom_2 as marginBottom };
-        let letterSpacing_2: string;
-        export { letterSpacing_2 as letterSpacing };
-        export let lineHeight: number;
-        let fontWeight_2: string;
-        export { fontWeight_2 as fontWeight };
-        let color_2: string;
-        export { color_2 as color };
-    }
-    namespace h4 {
-        let fontSize_3: number;
-        export { fontSize_3 as fontSize };
-        let marginBottom_3: number;
-        export { marginBottom_3 as marginBottom };
-        let lineHeight_1: number;
-        export { lineHeight_1 as lineHeight };
-        let fontWeight_3: string;
-        export { fontWeight_3 as fontWeight };
-        let color_3: string;
-        export { color_3 as color };
-    }
-    namespace h5 {
-        let fontSize_4: number;
-        export { fontSize_4 as fontSize };
-        let marginBottom_4: number;
-        export { marginBottom_4 as marginBottom };
-        let lineHeight_2: number;
-        export { lineHeight_2 as lineHeight };
-        let fontWeight_4: string;
-        export { fontWeight_4 as fontWeight };
-        let color_4: string;
-        export { color_4 as color };
-    }
-    namespace caps {
-        let fontSize_5: number;
-        export { fontSize_5 as fontSize };
-        let marginBottom_5: number;
-        export { marginBottom_5 as marginBottom };
-        let color_5: string;
-        export { color_5 as color };
-        let fontWeight_5: string;
-        export { fontWeight_5 as fontWeight };
-        let letterSpacing_3: string;
-        export { letterSpacing_3 as letterSpacing };
-    }
-}

package/build/system/theme/textStyles.js

@@ -1,46 +0,0 @@
-export const textStyles = {
-	h1: {
-		fontSize: 5,
-		marginBottom: 3,
-		letterSpacing: '-.02em',
-		fontWeight: 'body',
-		fontFamily: 'serif',
-		color: 'heading',
-	},
-	h2: {
-		fontSize: 4,
-		marginBottom: 2,
-		letterSpacing: '-.005em',
-		fontWeight: 400,
-		color: 'heading',
-	},
-	h3: {
-		fontSize: 3,
-		marginBottom: 3,
-		letterSpacing: '-.005em',
-		lineHeight: 1.4,
-		fontWeight: 'heading',
-		color: 'heading',
-	},
-	h4: {
-		fontSize: 2,
-		marginBottom: 1,
-		lineHeight: 1.5,
-		fontWeight: 'heading',
-		color: 'heading',
-	},
-	h5: {
-		fontSize: 1,
-		marginBottom: 1,
-		lineHeight: 1.5,
-		fontWeight: 'heading',
-		color: 'heading',
-	},
-	caps: {
-		fontSize: 1,
-		marginBottom: 2,
-		color: 'muted',
-		fontWeight: 'bold',
-		letterSpacing: '.05em',
-	},
-};

package/src/system/Button/ButtonSubmit.stories.jsx

@@ -1,40 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import { ButtonSubmit } from '..';
-import variants from './variants';
-
-export default {
-	title: 'ButtonSubmit',
-	component: ButtonSubmit,
-	argTypes: {
-		loading: {
-			control: { type: 'boolean', defaultValue: true },
-		},
-		disabled: {
-			control: { type: 'boolean' },
-		},
-		show: {
-			control: { type: 'boolean', default: true },
-		},
-		variant: {
-			type: 'select',
-			options: variants,
-		},
-	},
-};
-
-const Template = args => (
-	<React.Fragment>
-		{ variants.map( v => (
-			<ButtonSubmit sx={ { m: 3 } } key={ v } variant={ v } { ...args } label="Loading…" />
-		) ) }
-	</React.Fragment>
-);
-
-export const Default = Template.bind( {} );

package/src/system/Button/index.js

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

package/src/system/Button/variants.js

@@ -1 +0,0 @@
-export default [ 'primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display' ];

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

@@ -1,36 +0,0 @@
-/** @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/src/system/NewForm/Fieldset.js

@@ -1,47 +0,0 @@
-/** @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 };

package/src/system/NewForm/Form.js

@@ -1,26 +0,0 @@
-/**
- * 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 };

package/src/system/NewForm/Legend.js

@@ -1,41 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-/**
- * Internal dependencies
- */
-
-import { baseLabelStyle } from '../Form/Label';
-
-const Legend = React.forwardRef( ( { children, className, sx = {}, ...props }, forwardRef ) => (
-	<legend
-		ref={ forwardRef }
-		className={ classNames( 'vip-form-legend-component', className ) }
-		sx={ {
-			all: 'unset',
-			...baseLabelStyle,
-			px: 1,
-			mb: 0,
-			...sx,
-		} }
-		{ ...props }
-	>
-		{ children }
-	</legend>
-) );
-
-Legend.propTypes = {
-	children: PropTypes.any,
-	sx: PropTypes.any,
-	className: PropTypes.any,
-};
-
-Legend.displayName = 'Legend';
-
-export { Legend };

package/src/system/Progress/Progress.stories.jsx

@@ -1,25 +0,0 @@
-/**
- * Internal dependencies
- */
-import React, { useEffect } from 'react';
-import { Progress } from '..';
-
-export default {
-	title: 'Progress',
-	component: Progress,
-};
-
-export const Default = () => {
-	const [ counter, setCounter ] = React.useState( 0 );
-	const steps = [ 'Downloading Data', 'Importing Data...', 'Finalizing', 'Done' ];
-
-	useEffect( () => {
-		setTimeout( () => {
-			if ( counter < steps.length - 1 ) {
-				setCounter( counter + 1 );
-			}
-		}, 2000 );
-	}, [ counter, setCounter ] );
-
-	return <Progress forLabel="Update site progress" steps={ steps } activeStep={ counter } />;
-};

package/src/system/Progress/index.js

@@ -1,6 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Progress } from './Progress';
-
-export { Progress };

package/src/system/Wizard/Wizard.js

@@ -1,103 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React, { useLayoutEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { MdArrowForward } from 'react-icons/md';
-
-/**
- * Internal dependencies
- */
-import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
-
-const Wizard = React.forwardRef(
-	(
-		{
-			steps,
-			activeStep,
-			variant,
-			completed = [],
-			skipped = [],
-			className = null,
-			titleAutofocus = false,
-			...props
-		},
-		forwardRef
-	) => {
-		const [ didMount, setDidMount ] = useState( false );
-		const [ initialStep ] = useState( activeStep );
-		// didMount helps us to track the initial render, so we can focus the title only subsequent renders
-		// to avoid stealing the focus from the page we're in.
-		useLayoutEffect( () => {
-			if ( ! didMount && activeStep !== initialStep ) {
-				setDidMount( true );
-			}
-		}, [ initialStep, activeStep, didMount, setDidMount ] );
-		return (
-			<Box className={ classNames( 'vip-wizard-component', className ) } ref={ forwardRef }>
-				{ variant === 'horizontal' ? (
-					<Box>
-						<Flex
-							sx={ {
-								flex: '0 0 auto',
-							} }
-							{ ...props }
-						>
-							{ steps.map( ( { title, subTitle, titleVariant }, index ) => (
-								<React.Fragment key={ index }>
-									<WizardStepHorizontal
-										active={ index === activeStep }
-										order={ index + 1 }
-										subTitle={ subTitle }
-										title={ title }
-										titleVariant={ titleVariant }
-									/>
-									{ index < steps.length - 1 && (
-										<MdArrowForward sx={ { mx: 2, color: 'gray.80' } } />
-									) }
-								</React.Fragment>
-							) ) }
-						</Flex>
-						{ steps[ activeStep ].children }
-					</Box>
-				) : (
-					steps.map( ( { title, subTitle, children, titleVariant, summary, onChange }, index ) => (
-						<WizardStep
-							active={ index === activeStep }
-							complete={ completed.includes( index ) }
-							skipped={ skipped.includes( index ) }
-							key={ index }
-							order={ index + 1 }
-							totalSteps={ steps.length }
-							subTitle={ subTitle }
-							title={ title }
-							titleVariant={ titleVariant }
-							summary={ summary }
-							onChange={ onChange }
-							shouldFocusTitle={ titleAutofocus && didMount }
-						>
-							{ children }
-						</WizardStep>
-					) )
-				) }
-			</Box>
-		);
-	}
-);
-
-Wizard.displayName = 'Wizard';
-
-Wizard.propTypes = {
-	steps: PropTypes.array,
-	activeStep: PropTypes.number,
-	variant: PropTypes.string,
-	completed: PropTypes.array,
-	skipped: PropTypes.array,
-	className: PropTypes.any,
-	titleAutofocus: PropTypes.bool,
-};
-
-export { Wizard };