@automattic/vip-design-system 1.2.3 → 1.3.1

package/src/system/Wizard/Wizard.stories.jsx

@@ -1,145 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import { Wizard, Box, Label, Input, Button, Form } from '..';
-
-export default {
-	title: 'Wizard',
-	component: Wizard,
-};
-
-const options = [
-	{ value: 'chocolate', label: 'Chocolate' },
-	{ value: 'strawberry', label: 'Strawberry' },
-	{ value: 'vanilla', label: 'Vanilla' },
-	{ value: 'coffee', label: 'Coffee' },
-];
-
-export const Default = () => {
-	const steps = [
-		{
-			title: 'Choose Domain',
-			titleVariant: 'h2',
-			subTitle: 'You can bring a domain name you already own, or buy a new one.',
-			children: (
-				<Box>
-					<Label>Domain</Label>
-					<Input autoFocus placeholder="yourdomain.com" />
-					<Form.Autocomplete label="Autocomplete" options={ options } />
-					<Button sx={ { mt: 3 } }>Continue</Button>
-				</Box>
-			),
-		},
-		{
-			title: 'Configure DNS',
-			titleVariant: 'h2',
-		},
-		{
-			title: 'Configure Certificate',
-			titleVariant: 'h2',
-		},
-		{
-			title: 'Verify Domain',
-			titleVariant: 'h2',
-		},
-	];
-	return (
-		<React.Fragment>
-			<Box mt={ 4 }>
-				<Wizard activeStep={ 0 } steps={ steps } completed={ [ 1 ] } className="vip-wizard-xyz" />
-			</Box>
-		</React.Fragment>
-	);
-};
-
-export const WithTitleAutoFocus = () => {
-	const [ activeStep, setActiveStep ] = React.useState( 0 );
-	const [ autoFocus, setAutoFocus ] = React.useState( true );
-	const steps = [
-		{
-			title: 'Choose Domain',
-			titleVariant: 'h2',
-			summary: [
-				{
-					label: 'Demo Label',
-					value: 'Demo value',
-				},
-			],
-			onChange: () => setActiveStep( 0 ),
-			children: (
-				<Box>
-					<Label>Domain</Label>
-					<Input placeholder="yourdomain.com" />
-					<Button sx={ { mt: 3 } } onClick={ () => setActiveStep( 1 ) }>
-						Continue
-					</Button>
-				</Box>
-			),
-		},
-		{
-			title: 'Configure DNS',
-			titleVariant: 'h2',
-			onChange: () => setActiveStep( 1 ),
-			children: (
-				<Box>
-					<Label>DNS</Label>
-					<Button sx={ { mt: 3 } } onClick={ () => setActiveStep( 0 ) }>
-						back
-					</Button>
-				</Box>
-			),
-		},
-
-		{
-			title: 'Certificate',
-			titleVariant: 'h2',
-			summary: [
-				{
-					label: 'Certificate status',
-					value: 'Not found',
-				},
-			],
-			onChange: () => setActiveStep( 2 ),
-			children: (
-				<Box>
-					<Label>Certificate validation</Label>
-					<Button sx={ { mt: 3 } }>Check certificate</Button>
-				</Box>
-			),
-		},
-	];
-	return (
-		<React.Fragment>
-			<Box mt={ 4 }>
-				<Wizard
-					completed={ [ 0, 1 ] }
-					skipped={ [ 2 ] }
-					activeStep={ activeStep }
-					steps={ steps }
-					titleAutofocus={ autoFocus }
-					className="vip-wizard-xyz"
-				/>
-			</Box>
-			<Box mt={ 4 }>
-				<Form.Select
-					id="wizard-autofocus"
-					forLabel="wizard-autofocus"
-					label="Autofocus status"
-					value={ autoFocus }
-					onChange={ e => setAutoFocus( e.value ) }
-					options={ [
-						{ value: true, label: 'On' },
-						{ value: false, label: 'Off' },
-					] }
-				/>
-			</Box>
-		</React.Fragment>
-	);
-};

package/src/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/src/system/Wizard/index.js

@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Wizard } from './Wizard';
-import { WizardStep } from './WizardStep';
-import { WizardStepHorizontal } from './WizardStepHorizontal';
-
-export { Wizard, WizardStep, WizardStepHorizontal };

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