@automattic/vip-design-system 1.2.0 → 1.2.2

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

@@ -1,87 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import { BiCalendarHeart } from 'react-icons/bi';
-
-/**
- * Internal dependencies
- */
-import ScreenReaderText from '../ScreenReaderText';
-import { Button } from '..';
-import variants from './variants';
-
-export default {
-	title: 'Button',
-	component: Button,
-	argTypes: {
-		children: {},
-		disabled: {
-			control: { type: 'boolean' },
-		},
-		variant: {
-			type: 'select',
-			options: variants,
-		},
-	},
-};
-
-const Template = args => (
-	<React.Fragment>
-		<Button { ...args }>Primary</Button>
-
-		<Button variant="secondary" sx={ { ml: 2 } } { ...args }>
-			Secondary
-		</Button>
-
-		<Button variant="tertiary" sx={ { ml: 2 } } { ...args }>
-			Tertiary
-		</Button>
-
-		<Button variant="ghost" sx={ { ml: 2 } } { ...args }>
-			Ghost
-		</Button>
-
-		<Button variant="display" sx={ { ml: 2 } } { ...args }>
-			Display
-		</Button>
-
-		<Button variant="danger" sx={ { ml: 2 } } { ...args }>
-			Danger
-		</Button>
-
-		<Button variant="text" sx={ { ml: 2 } } as="a" href="https://google/com" { ...args }>
-			Button link
-		</Button>
-
-		<Button variant="icon" sx={ { ml: 2 } } type="button" { ...args }>
-			<BiCalendarHeart size={ 24 } />
-			<ScreenReaderText>domain.com</ScreenReaderText>
-		</Button>
-
-		<div sx={ { maxWidth: '100px', mt: 3 } }>
-			<Button variant="secondary" href="https://google/com" { ...args }>
-				Button with constrained width
-			</Button>
-		</div>
-	</React.Fragment>
-);
-
-export const Default = Template.bind( {} );
-
-export const Link = Template.bind( {} );
-Link.args = {
-	variant: 'text',
-	as: 'a',
-	href: 'https://www.google.com',
-};
-
-export const WithOnClick = Template.bind( {} );
-Link.args = {
-	onClick: () => {
-		// eslint-disable-next-line no-alert
-		alert( 'Clicked' );
-	},
-};

package/src/system/Card/Card.js

@@ -1,39 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { Box } from '..';
-import classNames from 'classnames';
-
-const Card = React.forwardRef( ( { variant = 'primary', sx = {}, className, ...props }, ref ) => {
-	return (
-		<Box
-			ref={ ref }
-			sx={ {
-				// pass variant prop to sx
-				variant: `cards.${ variant }`,
-				overflow: 'hidden',
-				...sx,
-			} }
-			className={ classNames( 'vip-card-component', className ) }
-			{ ...props }
-		/>
-	);
-} );
-
-Card.propTypes = {
-	variant: PropTypes.string,
-	sx: PropTypes.object,
-	className: PropTypes.any,
-};
-
-Card.displayName = 'Card';
-
-export { Card };

package/src/system/Card/index.js

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

package/src/system/Code/Code.stories.jsx

@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
-/**
- * Internal dependencies
- */
-import { Code } from '..';
-
-export default {
-	title: 'Code',
-	component: Code,
-};
-
-export const Default = () => (
-	<React.Fragment>
-		<Code>
-			<time sx={ { color: 'logs.text.secondary' } } dateTime="2022-01-01 15:15:15">
-				15:16
-			</time>{ ' ' }
-			Code
-		</Code>
-		<br />
-		<Code showCopy={ true }>Code with Icon</Code>
-		<br />
-		<Code
-			showCopy={ true }
-			onCopy={
-				// eslint-disable-next-line no-console
-				() => console.info( 'Hello world' )
-			}
-		>
-			Code with Icon and Click callback — console.info
-		</Code>
-	</React.Fragment>
-);

package/src/system/Code/index.js

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

package/src/system/Flex/Flex.js

@@ -1,15 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import { Flex as ThemeFlex } from 'theme-ui';
-
-const Flex = React.forwardRef( ( props, forwardRef ) => (
-	<ThemeFlex ref={ forwardRef } { ...props } />
-) );
-
-Flex.displayName = 'Flex';
-
-export { Flex };

package/src/system/Flex/index.js

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

package/src/system/Grid/Grid.js

@@ -1,16 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import { Grid as ThemeGrid } from 'theme-ui';
-
-import { forwardRef } from 'react';
-
-const Grid = forwardRef( ( props, ref ) => {
-	return <ThemeGrid { ...props } ref={ ref } />;
-} );
-
-Grid.displayName = 'Grid';
-
-export { Grid };

package/src/system/Grid/index.js

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

package/src/system/Link/Link.js

@@ -1,42 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import { Link as ThemeLink } from 'theme-ui';
-import PropTypes from 'prop-types';
-
-const Link = React.forwardRef( ( { active = false, sx, ...props }, forwardRef ) => (
-	<ThemeLink
-		sx={ {
-			textDdecorationThickness: '0.1em',
-			textUnderlineOffset: '0.1em',
-			color: active ? 'links.active' : 'link',
-			'&:visited': {
-				color: 'links.visited',
-			},
-			'&:active': {
-				color: 'links.active',
-			},
-			'&:hover, &:focus': {
-				color: 'links.hover',
-				textDecorationLine: 'underline',
-				textDecorationThickness: '2px',
-			},
-			'&:focus-visible': theme => theme.outline,
-			...sx,
-		} }
-		ref={ forwardRef }
-		{ ...props }
-	/>
-) );
-
-Link.displayName = 'Link';
-
-Link.propTypes = {
-	active: PropTypes.bool,
-	sx: PropTypes.object,
-};
-
-export { Link };

package/src/system/Link/Link.stories.jsx

@@ -1,15 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Link } from '..';
-
-export default {
-	title: 'Link',
-	component: Link,
-};
-
-export const Default = () => (
-	<Link as="a" href="#!">
-		Hello
-	</Link>
-);

package/src/system/Link/index.js

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

package/src/system/Notice/Notice.js

@@ -1,136 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
-
-/**
- * Internal dependencies
- */
-import { Box, Flex, Heading, Card } from '../';
-
-const colorSystemVariant = color =>
-	( { warning: 'warning', error: 'error', alert: 'error', success: 'success', info: 'info' }[
-		color
-	] );
-
-const NoticeIcon = ( { color, variant } ) => {
-	let Icon = MdWarning;
-
-	switch ( variant ) {
-		case 'info':
-			Icon = MdInfo;
-			break;
-		case 'error':
-			Icon = MdError;
-			break;
-		case 'success':
-			Icon = MdCheckCircle;
-			break;
-	}
-
-	return <Icon sx={ { color, flex: '0 0 auto' } } size={ 21 } aria-hidden="true" />;
-};
-
-NoticeIcon.propTypes = {
-	color: PropTypes.string,
-	variant: PropTypes.string,
-};
-
-const Notice = React.forwardRef(
-	(
-		{
-			children,
-			className = null,
-			headingVariant = 'p',
-			inline = false,
-			sx = {},
-			title,
-			variant = 'warning',
-			...props
-		},
-		forwardRef
-	) => {
-		const systemVariant = colorSystemVariant( variant );
-
-		return (
-			<Card
-				sx={ {
-					boxShadow: 'none',
-					borderRadius: 2,
-					bg: inline ? 'transparent' : `notice.background.${ systemVariant }`,
-					padding: inline ? 0 : 3,
-					color: `notice.text.${ systemVariant }`,
-					p: {
-						color: `notice.text.${ systemVariant }`,
-					},
-					a: {
-						color: `notice.link.${ systemVariant }.default`,
-						'&:visited': {
-							color: `notice.link.${ systemVariant }.visited`,
-						},
-						'&:active': {
-							color: `notice.link.${ systemVariant }.active`,
-						},
-						'&:hover, &:focus': {
-							color: `notice.link.${ systemVariant }.hover`,
-						},
-					},
-					...sx,
-				} }
-				className={ classNames( 'vip-notice-component', className ) }
-				ref={ forwardRef }
-				{ ...props }
-			>
-				<Flex
-					sx={ {
-						alignItems: 'center',
-					} }
-				>
-					<Flex
-						sx={ {
-							alignItems: 'center',
-						} }
-					>
-						<NoticeIcon color={ `notice.icon.${ systemVariant }` } variant={ variant } />
-					</Flex>
-
-					<Box sx={ { ml: 3 } }>
-						{ title && (
-							<Heading
-								as={ headingVariant }
-								sx={ {
-									color: `notice.text.${ systemVariant }`,
-									mb: 0,
-									fontSize: 2,
-									fontWeight: 'bold',
-								} }
-							>
-								{ title }
-							</Heading>
-						) }
-						{ children }
-					</Box>
-				</Flex>
-			</Card>
-		);
-	}
-);
-
-Notice.displayName = 'Notice';
-
-Notice.propTypes = {
-	children: PropTypes.node,
-	inline: PropTypes.bool,
-	sx: PropTypes.object,
-	title: PropTypes.node,
-	variant: PropTypes.string,
-	headingVariant: PropTypes.string,
-	className: PropTypes.any,
-};
-
-export { Notice };

package/src/system/Notification/Notification.js

@@ -1,66 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import { MdCheckCircle, MdClose, MdError } from 'react-icons/md';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { Box, Card, Flex, Text, Button } from '../';
-import ScreenReaderText from '../ScreenReaderText';
-
-const Notification = React.forwardRef(
-	( { title, body, status = 'success', onClose }, forwardRef ) => (
-		<Card
-			role="alert"
-			className="vip-notification-component"
-			sx={ {
-				boxShadow: 'medium',
-				width: 320,
-				position: 'relative',
-				variant: `notification.${ status }`,
-			} }
-			ref={ forwardRef }
-		>
-			<ScreenReaderText>Alert,</ScreenReaderText>
-
-			<Flex sx={ { alignItems: 'center' } }>
-				{ status === 'error' ? (
-					<MdError sx={ { color: 'error', flex: '0 0 auto' } } aria-hidden="true" />
-				) : (
-					<MdCheckCircle sx={ { color: 'success', flex: '0 0 auto' } } aria-hidden="true" />
-				) }
-				<Box sx={ { flex: '1 1 auto', ml: 3 } }>
-					<p sx={ { my: 0, color: 'heading', fontWeight: 'bold' } }>{ title }</p>
-					{ body && <Text sx={ { mb: 0, mt: 1 } }>{ body }</Text> }
-				</Box>
-			</Flex>
-
-			{ onClose && (
-				<Button
-					onClick={ onClose }
-					variant="icon"
-					sx={ { color: 'muted', position: 'absolute', top: 2, right: 2 } }
-					aria-hidden="true"
-				>
-					<MdClose />
-				</Button>
-			) }
-		</Card>
-	)
-);
-
-Notification.displayName = 'Notification';
-
-Notification.propTypes = {
-	title: PropTypes.node,
-	body: PropTypes.node,
-	status: PropTypes.string,
-	onClose: PropTypes.func,
-};
-
-export { Notification };

package/src/system/Notification/Notification.stories.jsx

@@ -1,16 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Notification } from '..';
-
-export default {
-	title: 'Notification',
-	component: Notification,
-};
-
-export const Default = () => (
-	<Notification title="Awesome!" body="Your message has been sent successfully." />
-);
-export const Error = () => (
-	<Notification status="error" title="Snag!" body="Your message could not be sent." />
-);

package/src/system/Notification/index.js

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

package/src/system/ScreenReaderText/ScreenReaderText.js

@@ -1,39 +0,0 @@
-/** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-
-export const screenReaderTextClass = {
-	border: 'none',
-	clip: 'rect(1px, 1px, 1px, 1px)',
-	clipPath: 'inset(50%)',
-	height: '1px',
-	margin: '-1px',
-	overflow: 'hidden',
-	padding: '0',
-	position: 'absolute',
-	width: '1px',
-	wordWrap: 'normal !important',
-};
-
-export const ScreenReaderText = React.forwardRef( ( props, forwardRef ) => (
-	<span className="screen-reader-text" sx={ screenReaderTextClass } { ...props } ref={ forwardRef }>
-		{ props.children }
-	</span>
-) );
-
-ScreenReaderText.displayName = 'ScreenReaderText';
-
-/**
- * propTypes
- */
-ScreenReaderText.propTypes = {
-	children: PropTypes.node.isRequired,
-};

package/src/system/Spinner/Spinner.js

@@ -1,34 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import { Spinner as ThemeSpinner } from 'theme-ui';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Spinner = React.forwardRef(
-	( { sx, className = null, color = 'icon.helper', ...props }, forwardRef ) => (
-		<ThemeSpinner
-			strokeWidth={ 2 }
-			sx={ {
-				fill: 'none',
-				color,
-			} }
-			className={ classNames( 'vip-spinner-component', className ) }
-			ref={ forwardRef }
-			{ ...props }
-		/>
-	)
-);
-
-Spinner.displayName = 'Spinner';
-
-Spinner.propTypes = {
-	sx: PropTypes.object,
-	className: PropTypes.any,
-	color: PropTypes.string,
-};
-
-export { Spinner };

package/src/system/Spinner/index.js

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

package/src/system/Table/TableRow.js

@@ -1,50 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import { TableCell } from './TableCell';
-
-const TableRow = ( { onClick, head = false, cells = [], children } ) => {
-	const hoverStyles = onClick
-		? { cursor: 'pointer', '&:hover': { bg: 'hover', borderRadius: 2 } }
-		: {};
-
-	const handleKeyPress = e => {
-		if ( e.key === 'Enter' && onClick ) {
-			onClick();
-		}
-	};
-
-	return (
-		<tr
-			sx={ hoverStyles }
-			onClick={ onClick }
-			tabIndex={ onClick ? 0 : null }
-			onKeyDown={ handleKeyPress }
-		>
-			{ cells.map( ( cell, index ) => (
-				<TableCell key={ index } head={ head }>
-					{ cell }
-				</TableCell>
-			) ) }
-
-			{ children }
-		</tr>
-	);
-};
-
-TableRow.propTypes = {
-	cells: PropTypes.array,
-	children: PropTypes.node,
-	head: PropTypes.bool,
-	onClick: PropTypes.func,
-};
-
-export { TableRow };

package/src/system/Table/index.js

@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Table } from './Table';
-import { TableRow } from './TableRow';
-import { TableCell } from './TableCell';
-
-export { Table, TableRow, TableCell };