@automattic/vip-design-system 0.7.0 → 0.9.0

package/src/system/Form/ToggleGroup.js

@@ -0,0 +1,63 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+const ToggleGroup = ( { onChange, groupLabel, value, options, ...props } ) => (
+	<RadioGroupPrimitive.Root
+		onValueChange={ onChange }
+		value={ value }
+		aria-label={ groupLabel }
+		sx={ {
+			bg: 'backgroundSecondary',
+			p: 1,
+			display: 'flex',
+			alignItems: 'center',
+		} }
+		{ ...props }
+	>
+		{
+			options.map( ( option, index ) => (
+				<RadioGroupPrimitive.Item
+					key={ option.value }
+					value={ option.value }
+					id={ `o${ index }` }
+					sx={ {
+						fontSize: 1,
+						color: 'muted',
+						background: 'none',
+						border: 'none',
+						cursor: 'pointer',
+						borderRadius: 1,
+						py: 1,
+						px: 2,
+						flex: '1 1 auto',
+						textAlign: 'center',
+						'&:hover': {
+							color: 'heading',
+						},
+						'&[data-state=checked]': {
+							backgroundColor: 'card',
+							boxShadow: 'low',
+							color: 'heading',
+						},
+					} }
+				>
+					{ option.label }
+				</RadioGroupPrimitive.Item>
+			) )
+		}
+	</RadioGroupPrimitive.Root>
+);
+
+ToggleGroup.propTypes = {
+	onChange: PropTypes.func,
+	options: PropTypes.array,
+	value: PropTypes.string,
+	groupLabel: PropTypes.string,
+};
+
+export { ToggleGroup };

package/src/system/Form/ToggleGroup.stories.js

@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { ToggleGroup } from '..';
+
+export default {
+	title: 'ToggleGroup',
+	component: ToggleGroup,
+};
+
+const options = [
+	{
+		label: 'One',
+		value: 'one',
+	},
+	{
+		label: 'Two',
+		value: 'two',
+	},
+	{
+		label: 'Three',
+		value: 'three',
+	},
+];
+
+export const Default = () => {
+	const [ value, setValue ] = useState( 'one' );
+	return <ToggleGroup value={ value } onChange={ newValue => setValue( newValue ) } groupLabel="group" options={ options } />;
+};

package/src/system/Form/ToggleRow.js

@@ -36,7 +36,7 @@ const ToggleRow = ( { image, badge, title, subTitle, body, meta, sx, ...props }
 						flex: '0 0 auto',
 					} }
 				>
-					<img src={ image } width={ 32 } sx={ { display: 'block' } } />
+					<img src={ image } width={ 32 } sx={ { display: 'block' } } alt="Icon representing a toggle" />
 				</Card>
 			</Box>
 		) }
@@ -57,11 +57,11 @@ const ToggleRow = ( { image, badge, title, subTitle, body, meta, sx, ...props }
 );
 
 ToggleRow.propTypes = {
-	image: PropTypes.string,
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	badge: PropTypes.string,
-	title: PropTypes.string,
-	subTitle: PropTypes.string,
-	body: PropTypes.string,
+	title: PropTypes.node,
+	subTitle: PropTypes.node,
+	body: PropTypes.node,
 	meta: PropTypes.node,
 	sx: PropTypes.object,
 };

package/src/system/Form/Validation.js

@@ -15,8 +15,8 @@ const Validation = ( { children, isValid, ...props } ) => {
 	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
 
 	return (
-		<Heading variant="h5" as="p" sx={ { color: isValid ? 'green.50' : 'red.50' } } { ...props }>
-			<Icon sx={ { mr: 1, position: 'relative', top: '0.125em' } } />
+		<Heading variant="h5" as="p" sx={ { color: isValid ? 'success' : 'error', display: 'flex', alignItems: 'center' } } { ...props }>
+			<Icon sx={ { mr: 1 } } />
 			{ children }
 		</Heading>
 	);

package/src/system/Form/index.js

@@ -6,9 +6,11 @@ import { Label } from './Label';
 import { Toggle } from './Toggle';
 import { Validation } from './Validation';
 import { ToggleRow } from './ToggleRow';
+import { ToggleGroup } from './ToggleGroup';
 import { Select } from './Select';
 import { Radio } from './Radio';
+import { RadioBoxGroup } from './RadioBoxGroup';
 import { Textarea } from './Textarea';
 import { Checkbox } from './Checkbox';
 
-export { Input, Label, Radio, Select, Textarea, Toggle, ToggleRow, Validation, Checkbox };
+export { Input, Label, Radio, RadioBoxGroup, ToggleGroup, Select, Textarea, Toggle, ToggleRow, Validation, Checkbox };

package/src/system/Grid/Grid.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Heading/Heading.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Link/Link.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Notice/Notice.js

@@ -5,59 +5,62 @@
  */
 import PropTypes from 'prop-types';
 import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
-import { useColorMode } from 'theme-ui';
 
 /**
 * Internal dependencies
 */
 import { Box, Flex, Heading, Card } from '../';
 
-const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}, ...props } ) => {
-	const [colorMode, _] = useColorMode()
-
-	let color = 'yellow';
+const NoticeIcon = ( { color, variant } ) => {
 	let Icon = MdWarning;
 
 	switch ( variant ) {
 		case 'info':
-			color = 'blue';
 			Icon = MdInfo;
 			break;
 		case 'alert':
-			color = 'red';
 			Icon = MdError;
 			break;
 		case 'success':
-			color = 'green';
 			Icon = MdCheckCircle;
 			break;
 	}
 
-	let modeColor = {
-		color: `${ color }.70`,
-		bg: inline ? 'transparent' : `${ color }.0`
-	};
-
-	if ( colorMode === 'dark' ) {
-		modeColor = {
-			color: `${ color }.40`,
-			bg: undefined,
-		}
-	}
-
-	const NoticeIcon = ({ color }) => (
+	return (
 		<Icon sx={ { marginRight: 2, color, flex: '0 0 auto' } }/>
 	);
+};
+
+NoticeIcon.propTypes = {
+	color: PropTypes.string,
+	variant: PropTypes.string,
+};
+
+const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}, ...props } ) => {
+	let color = 'yellow';
+
+	switch ( variant ) {
+		case 'info':
+			color = 'blue';
+			break;
+		case 'alert':
+			color = 'red';
+			break;
+		case 'success':
+			color = 'green';
+			break;
+	}
 
 	return (
 		<Card
 			sx={ {
 				boxShadow: 'none',
 				borderRadius: 2,
+				bg: inline ? 'transparent' : `${ color }.10`,
 				p: inline ? 0 : 3,
-				bg: modeColor.bg,
+				color: `${ color }.90`,
 				a: {
-					color: modeColor.color,
+					color: `${ color }.90`,
 					textDecoration: 'underline',
 					border: 'none',
 				},
@@ -71,11 +74,11 @@ const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}
 				<Flex sx={ {
 					alignItems: 'center',
 				} }>
-					<NoticeIcon color={modeColor.color} />
+					<NoticeIcon color={`${ color }.100`} variant={ variant } />
 				</Flex>
 
 				<Box sx={ { ml: 23 } }>
-					{ title && <Heading variant="h4" as="p" sx={ { color: modeColor.color, mb: 0 } }>{ title }</Heading> }
+					{ title && <Heading variant="h4" as="p" sx={ { color: `${ color }.100`, mb: 0 } }>{ title }</Heading> }
 					{ children }
 				</Box>
 			</Flex>
@@ -84,10 +87,12 @@ const Notice = ( { variant = 'warning', inline = false, children, title, sx = {}
 };
 
 Notice.propTypes = {
-	variant: PropTypes.string,
-	title: PropTypes.string,
-	inline: PropTypes.bool,
 	children: PropTypes.node,
+	color: PropTypes.string,
+	inline: PropTypes.bool,
+	sx: PropTypes.object,
+	title: PropTypes.node,
+	variant: PropTypes.string,
 };
 
 export { Notice };

package/src/system/Notification/Notification.js

@@ -11,13 +11,13 @@ import PropTypes from 'prop-types';
  */
 import { Box, Button, Card, Flex, Heading, Text } from '../';
 
-const Notification = ({ title, body, status = 'success', onClose }) => (
+const Notification = ( { title, body, status = 'success', onClose } ) => (
 	<Card
 		sx={{
 			boxShadow: 'medium',
 			width: 320,
 			position: 'relative',
-			variant: `notification.${status}`,
+			variant: `notification.${ status }`,
 		}}
 	>
 		<Button
@@ -29,9 +29,9 @@ const Notification = ({ title, body, status = 'success', onClose }) => (
 		</Button>
 		<Flex sx={{ alignItems: 'center' }}>
 			{status === 'error' ? (
-				<MdError sx={{ color: 'red.50', flex: '0 0 auto' }} />
+				<MdError sx={{ color: 'error', flex: '0 0 auto' }} />
 			) : (
-				<MdCheckCircle sx={{ color: 'green.50', flex: '0 0 auto' }} />
+				<MdCheckCircle sx={{ color: 'success', flex: '0 0 auto' }} />
 			)}
 			<Box sx={{ flex: '1 1 auto', ml: 3 }}>
 				<Heading variant="h4" sx={{ mb: 0 }}>
@@ -44,8 +44,8 @@ const Notification = ({ title, body, status = 'success', onClose }) => (
 );
 
 Notification.propTypes = {
-	title: PropTypes.string,
-	body: PropTypes.string,
+	title: PropTypes.node,
+	body: PropTypes.node,
 	status: PropTypes.string,
 	onClose: PropTypes.func,
 };

package/src/system/Notification/Notification.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/OptionRow/OptionRow.js

@@ -10,9 +10,9 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Badge, Box, Card, Grid, Heading, Text } from '..';
+import { Badge, Box, Grid, Heading, Text } from '..';
 
-const OptionRow = ({
+const OptionRow = ( {
 	image,
 	icon,
 	badge,
@@ -25,33 +25,34 @@ const OptionRow = ({
 	small = false,
 	disabled = false,
 	...props
-}) => {
+} ) => {
 	const mergedCard = disabled
 		? {
-				border: '1px solid',
-				borderColor: 'border',
-				background: 'none',
-				boxShadow: 'none',
-		  }
+			border: '1px solid',
+			borderColor: 'border',
+			background: 'none',
+			boxShadow: 'none',
+			color: 'grey.70',
+		}
 		: {};
 
 	const inlineStyles = inline
 		? {
-				py: 2,
-				px: 2,
-				mx: -2,
-		  }
+			py: 2,
+			px: 2,
+			mx: -2,
+		}
 		: {
-				py: 3,
-				px: [3, 3, small ? 3 : 5],
-				borderBottom: '1px solid',
-				borderColor: 'border',
-		  };
+			py: 3,
+			px: [ 3, 3, small ? 3 : 5 ],
+			borderBottom: '1px solid',
+			borderColor: 'border',
+		};
 	return (
 		<Grid
 			to={to}
-			columns={[1, 1, 'auto 1fr auto']}
-			gap={[3, 3, `${small ? 3 : 4}`]}
+			columns={[ 1, 1, 'auto 1fr auto' ]}
+			gap={[ 3, 3, `${ small ? 3 : 4 }` ]}
 			{...props}
 			sx={{
 				alignItems: 'center',
@@ -66,24 +67,28 @@ const OptionRow = ({
 		>
 			<Box>
 				{image ? (
-					<Card
+					<Box
 						sx={{
-							display: ['inline-block', 'inline-block', 'block'],
-							p: small ? 3 : 24,
-							boxShadow: 'low',
+							display: [ 'inline-block', 'inline-block', 'block' ],
+							p: small ? 12 : 20,
 							flex: '0 0 auto',
-							svg: {
-								display: 'block',
-							},
+							bg: 'brand.70',
+							color: 'brand.10',
+							borderRadius: 1,
 							...mergedCard,
 						}}
 					>
-						{React.isValidElement(image) ? (
+						{React.isValidElement( image ) ? (
 							image
 						) : (
-							<img src={image} width={small ? 32 : 48} sx={{ display: 'block' }} />
+							<img
+								src={image}
+								width={small ? 32 : 48}
+								sx={{ display: 'block' }}
+								alt="Image representing the list item"
+							/>
 						)}
-					</Card>
+					</Box>
 				) : (
 					icon && icon
 				)}
@@ -103,13 +108,13 @@ const OptionRow = ({
 };
 
 OptionRow.propTypes = {
-	image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+	image: PropTypes.oneOfType( [ PropTypes.object, PropTypes.string ] ),
 	icon: PropTypes.node,
 	badge: PropTypes.string,
 	label: PropTypes.node,
 	inline: PropTypes.bool,
-	subTitle: PropTypes.string,
-	body: PropTypes.string,
+	subTitle: PropTypes.node,
+	body: PropTypes.node,
 	meta: PropTypes.node,
 	to: PropTypes.string,
 	small: PropTypes.bool,

package/src/system/OptionRow/OptionRow.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/Progress/Progress.stories.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
-
 /**
  * Internal dependencies
  */

package/src/system/ResourceList/ResourceItem.js

@@ -0,0 +1,66 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Box, Flex, Time } from '..';
+
+const ResourceItem = ( {
+	children,
+	item,
+	renderActions,
+	relativeTime = false,
+	timeOnly = false,
+	dateKey,
+	icon = null,
+} ) => {
+	return (
+		<Flex
+			sx={{
+				alignItems: 'center',
+				gap: 3,
+			}}
+		>
+			{icon}
+			<Box sx={{ flex: '1 1 auto' }}>{children}</Box>
+			<Flex
+				sx={{
+					flex: '0 0 auto',
+					alignItems: 'center',
+					gap: 3,
+				}}
+			>
+				<Time
+					className="time"
+					relativeTime={relativeTime}
+					timeOnly={timeOnly}
+					time={item[ dateKey ]}
+					sx={{ color: 'muted', mb: 0, textAlign: 'right', flex: '0 0 auto' }}
+				/>
+				{renderActions && (
+					<Flex className="actions" sx={{ alignItems: 'center', gap: 3 }}>
+						<Box sx={{ width: 4, height: 4, borderRadius: 4, bg: 'border' }} />
+						{renderActions( item )}
+					</Flex>
+				)}
+			</Flex>
+		</Flex>
+	);
+};
+
+ResourceItem.propTypes = {
+	children: PropTypes.node,
+	item: PropTypes.object,
+	icon: PropTypes.node,
+	relativeTime: PropTypes.bool,
+	timeOnly: PropTypes.bool,
+	dateKey: PropTypes.string,
+	renderActions: PropTypes.func,
+};
+
+export { ResourceItem };

package/src/system/ResourceList/ResourceList.js

@@ -0,0 +1,96 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * Internal dependencies
+ */
+import { Box, Heading } from '..';
+
+const formatterOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+
+const formatDate = date => {
+	const today = new Date();
+	if ( date.getFullYear() !== today.getFullYear() ) {
+		return date.toLocaleDateString( formatterOptions );
+	} else if ( date.getMonth() !== today.getMonth() ) {
+		return date.toLocaleDateString( formatterOptions );
+	} else if ( date.getDate() < today.getDate() - 1 ) {
+		return date.toLocaleDateString( formatterOptions );
+	} else if ( date.getDate() === today.getDate() - 1 ) {
+		return 'Yesterday';
+	}
+	return 'Today';
+};
+
+const StyledListItem = props => (
+	<Box
+		as="li"
+		sx={{
+			py: 2,
+			borderBottom: '1px solid',
+			borderColor: 'border',
+			listStyleType: 'none',
+			margin: 0,
+			px: 0,
+		}}
+		{...props}
+	/>
+);
+
+const ResourceList = ( { groupedByDay = false, items, renderItem, dateKey } ) => {
+	let groupedItems = {};
+	if ( groupedByDay ) {
+		groupedItems = items?.reduce( ( itemGroups, item ) => {
+			const formattedDate = formatDate( item[ dateKey ] );
+			const itemsAtDate = itemGroups[ formattedDate ];
+
+			return {
+				...itemGroups,
+				[ formattedDate ]: itemsAtDate ? [ ...itemsAtDate, item ] : [ item ],
+			};
+		}, {} );
+	}
+
+	const renderItemList = itemsList =>
+		itemsList.map( ( item, index ) => <StyledListItem key={index}>{renderItem( item )}</StyledListItem> );
+
+	return (
+		<Box as="ul" sx={{ listStyleType: 'none', m: 0, p: 0 }}>
+			{groupedByDay
+				? Object.keys( groupedItems ).map( ( groupName, index ) => (
+					<Box sx={{ mb: 4 }} key={index}>
+						<Heading variant="h4" as="h4" sx={{ mb: 3 }}>
+							{groupName}
+						</Heading>
+						<Box
+							as="ul"
+							sx={{
+								listStyleType: 'none',
+								m: 0,
+								p: 0,
+								borderTop: '1px solid',
+								borderColor: 'border',
+							}}
+						>
+							{renderItemList( groupedItems[ groupName ] )}
+						</Box>
+					</Box>
+				) )
+				: renderItemList( items )}
+		</Box>
+	);
+};
+
+ResourceList.propTypes = {
+	groupedByDay: PropTypes.bool,
+	items: PropTypes.array,
+	renderItem: PropTypes.func,
+	relativeTime: PropTypes.bool,
+	dateKey: PropTypes.string,
+};
+
+export { ResourceList };