@automattic/vip-design-system 2.2.0 → 2.3.0

package/src/system/Toolbar/Toolbar.stories.tsx

@@ -1,5 +1,8 @@
+/** @jsxImportSource theme-ui */
+import { BiSolidHelpCircle, BiSolidBell } from 'react-icons/bi';
+
 import { Toolbar } from '.';
-import { Text, Avatar, Nav, NavItem } from '../../system';
+import { Text, Avatar, Nav, NavItem, Flex, Toggle, Label } from '../../system';
 import ScreenReaderText from '../ScreenReaderText';
 import { CustomLink } from '../utils/stories/CustomLink';
 
@@ -58,6 +61,10 @@ export const Default: Story = {
 
 				<Toolbar.UtilNav>
 					<Text sx={ { color: 'toolbar.text.default', mb: 0 } }>Utility Item</Text>
+
+					<Toolbar.IconHolder>
+						<BiSolidBell />
+					</Toolbar.IconHolder>
 				</Toolbar.UtilNav>
 			</Toolbar.Primary>
 		</>
@@ -86,11 +93,51 @@ export const VIPDashboardLike: Story = {
 					<NavItem.Toolbar href="https://googles.com">My Applications</NavItem.Toolbar>
 					{ /* Example below if you have Next.js <Link /> */ }
 					<NavItem.Toolbar active href="https://google.com" as={ CustomLink }>
-						Custom Link
+						My Organizations
 					</NavItem.Toolbar>
 				</Nav.Toolbar>
 
 				<Toolbar.UtilNav>
+					<Flex sx={ { gap: 2, minHeight: 64, alignItems: 'center' } }>
+						<Flex
+							sx={ {
+								alignItems: 'center',
+							} }
+						>
+							<Toggle
+								checked={ true }
+								onChange={ () => {} }
+								name="viptogglefeaure"
+								id="viptogglefeaure"
+								variant="warning"
+								aria-label="Vip features toggle"
+							/>
+
+							<Label
+								htmlFor="viptogglefeaure"
+								sx={ { color: 'toolbar.text.default', mb: 0, ml: 2 } }
+							>
+								VIP
+							</Label>
+						</Flex>
+
+						<a
+							href="/"
+							sx={ { color: 'icon.inverse', width: 38, justifyContent: 'center', display: 'flex' } }
+							aria-label="Help center"
+						>
+							<BiSolidHelpCircle width={ 16 } height={ 16 } />
+						</a>
+
+						<a
+							href="/"
+							sx={ { color: 'icon.inverse', width: 38, justifyContent: 'center', display: 'flex' } }
+							aria-label="Help center"
+						>
+							<BiSolidBell width={ 16 } height={ 16 } />
+						</a>
+					</Flex>
+
 					<Toolbar.Separator />
 
 					<a href="/">

package/src/system/Toolbar/Toolbar.tsx

@@ -22,7 +22,7 @@ const Toolbar = forwardRef< HTMLElement, ToolbarProps >(
 			role="banner"
 			sx={ {
 				display: 'flex',
-				height: [ 56, null, null, 64 ],
+				height: 64,
 				backgroundColor: 'toolbar.background',
 				flexDirection: 'row',
 				alignItems: 'center',

package/src/system/Toolbar/ToolbarUtilNav.tsx

@@ -1,7 +1,8 @@
 /** @jsxImportSource theme-ui */
-
 import React, { Ref, forwardRef } from 'react';
 
+import { Flex } from '..';
+
 export type ToolbarUtilNavProps = {
 	children: React.ReactNode;
 	label?: string;
@@ -17,6 +18,7 @@ export const ToolbarUtilNav = forwardRef< HTMLElement, ToolbarUtilNavProps >(
 				alignItems: 'center',
 				flexDirection: 'row',
 				display: 'flex',
+				gap: 4,
 			} }
 		>
 			{ children }
@@ -24,10 +26,26 @@ export const ToolbarUtilNav = forwardRef< HTMLElement, ToolbarUtilNavProps >(
 	)
 );
 
+export const ToolbarIconHolder = ( { children } ) => (
+	<Flex
+		sx={ {
+			width: 38,
+			height: 38,
+			alignItems: 'center',
+			justifyContent: 'center',
+			color: 'icon.inverse',
+			'&:hover': { color: 'icon.primary' },
+		} }
+	>
+		{ children }
+	</Flex>
+);
+
 export const ToolbarUtilNavSeparator = () => (
 	<span
 		aria-hidden="true"
 		sx={ {
+			display: [ 'block', 'none', 'none', 'block', 'block' ],
 			'&:after': {
 				display: 'block',
 				backgroundColor: 'borders.inverse',
@@ -36,7 +54,6 @@ export const ToolbarUtilNavSeparator = () => (
 				overflow: 'hidden',
 				content: '""',
 			},
-			mx: 3,
 			position: 'relative',
 		} }
 	></span>

package/src/system/Toolbar/index.tsx

@@ -3,7 +3,11 @@
  */
 import { Logo } from './Logo';
 import { ToolbarPrimary as Primary } from './Toolbar';
-import { ToolbarUtilNav as UtilNav, ToolbarUtilNavSeparator as Separator } from './ToolbarUtilNav';
+import {
+	ToolbarUtilNav as UtilNav,
+	ToolbarUtilNavSeparator as Separator,
+	ToolbarIconHolder as IconHolder,
+} from './ToolbarUtilNav';
 
 export const VIP_TOOLBAR = 'vip-toolbar-component';
 
@@ -12,4 +16,5 @@ export const Toolbar = {
 	Primary,
 	Separator,
 	UtilNav,
+	IconHolder,
 };

package/src/system/index.js

@@ -36,6 +36,7 @@ import {
 import { Grid } from './Grid';
 import { Heading } from './Heading';
 import { Link } from './Link';
+import { MobileMenuWrapper, MobileMenuTrigger, MobileMenu } from './MobileMenu/MobileMenu';
 import { Nav } from './Nav/Nav';
 import { NavItem } from './Nav/NavItem';
 import { NewConfirmationDialog } from './NewConfirmationDialog';
@@ -77,6 +78,9 @@ export {
 	DialogContent,
 	DialogTrigger,
 	ConfirmationDialog,
+	MobileMenu,
+	MobileMenuTrigger,
+	MobileMenuWrapper,
 	NewConfirmationDialog,
 	Grid,
 	Flex,

package/src/system/theme/index.js

@@ -271,11 +271,14 @@ export default {
 
 	buttons: {
 		primary: {
-			// you can reference other values defined in the theme
 			fontFamily: 'body',
 			color: 'button.primary.label.default',
 			bg: 'button.primary.background.default',
 			border: '1px solid transparent',
+			py: 0,
+			px: 5,
+			minHeight: '38px',
+			height: '100%',
 			cursor: 'pointer',
 			fontWeight: 'medium',
 			boxShadow: 'none',
@@ -284,6 +287,14 @@ export default {
 				backgroundColor: 'button.primary.background.hover',
 				color: 'button.primary.label.hover',
 			},
+			verticalAlign: 'middle',
+			display: 'inline-flex',
+			alignItems: 'center',
+			justifyContent: 'center',
+			textDecoration: 'none',
+			'&:hover': {
+				textDecoration: 'none',
+			},
 		},
 
 		secondary: {
@@ -387,23 +398,43 @@ export default {
 	},
 
 	links: {
-		dark: {
-			color: 'modes.dark.muted',
-			'&:hover': { color: 'modes.dark.heading' },
-		},
-
-		hover: {
-			display: 'block',
-			color: 'inherit',
-			py: 1,
-			px: 2,
-			my: -1,
-			mx: -2,
-			borderRadius: 2,
+		primary: {
+			color: 'link',
+			'&:visited': {
+				color: 'links.visited',
+			},
 			'&:hover': {
-				backgroundColor: 'hover',
+				color: 'hover',
+			},
+			'&:active': {
+				color: 'links.active',
+			},
+			textDecorationThickness: '0.125rem',
+			textUnderlineOffset: '0.125rem',
+			'&:hover, &:focus': {
+				color: 'links.hover',
+				textDecorationLine: 'underline',
+				textDecorationThickness: '0.125rem',
 			},
 		},
+		'button-primary': {
+			variant: 'buttons.primary',
+		},
+		'button-danger': {
+			variant: 'buttons.danger',
+		},
+		'button-display': {
+			variant: 'buttons.display',
+		},
+		'button-ghost': {
+			variant: 'buttons.ghost',
+		},
+		'button-secondary': {
+			variant: 'buttons.secondary',
+		},
+		'button-tertiary': {
+			variant: 'buttons.tertiary',
+		},
 	},
 
 	text: getHeadingStyles(),
@@ -492,11 +523,9 @@ export default {
 			fontFamily: 'body',
 			lineHeight: 'body',
 			fontWeight: 'body',
-			fontSize: 2,
 			color: 'text',
 			backgroundColor: 'backgrounds.primary',
-			'-webkit-font-smoothing': 'antialiased',
-			'-moz-osx-font-smoothing': 'grayscale',
+			fontSmoothing: 'antialiased',
 			a: {
 				'&:hover': {
 					textDecorationLine: 'underline',

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

@@ -1,96 +0,0 @@
-/** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-import { Toggle, Label } from '..';
-
-export default {
-	title: 'Toggle',
-	component: Toggle,
-	argTypes: {
-		checked: {
-			options: [ true, false ],
-			default: true,
-			control: { type: 'radio' },
-		},
-	},
-};
-
-const Default = args => (
-	<form>
-		<Toggle
-			checked={ args.checked }
-			defaultChecked
-			color={ args.color }
-			aria-label="Feature flag"
-		/>
-
-		<br />
-		<br />
-
-		<Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />
-
-		<br />
-		<br />
-
-		<Toggle aria-label="Feature Disabled" disabled defaultChecked={ false } />
-	</form>
-);
-
-const WithLabel = args => (
-	<form>
-		<Label htmlFor="custom-label-input">Custom Label here</Label>
-
-		<Toggle
-			id="custom-label-input"
-			defaultChecked
-			checked={ args.checked }
-			aria-label="Feature flag"
-		/>
-	</form>
-);
-
-const CustomStyling = args => (
-	<form>
-		<Label htmlFor="custom-label-input">Custom Styling</Label>
-
-		<div>
-			<Toggle
-				id="custom-label-input"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="Feature flag"
-				variant="success"
-			/>{ ' ' }
-			<Toggle
-				id="custom-label-input-error"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="Error flag"
-				variant="error"
-			/>{ ' ' }
-			<Toggle
-				id="custom-label-input-warning"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="Warning flag"
-				variant="warning"
-			/>{ ' ' }
-			<Toggle
-				id="custom-label-input-info"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="info flag"
-				variant="info"
-			/>
-		</div>
-	</form>
-);
-
-export const Primary = Default.bind( { checked: true } );
-export const ExternalLabel = WithLabel.bind( { checked: true } );
-export const CustomStyle = CustomStyling.bind( { checked: true } );

package/src/system/Form/Toggle.js

@@ -1,74 +0,0 @@
-/* eslint-disable max-len */
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import * as Switch from '@radix-ui/react-switch';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-// Documentation for Radix Switch component
-// https://www.radix-ui.com/docs/primitives/components/switch
-
-export const Toggle = React.forwardRef(
-	( { name = 'toggle', onChange, className = null, variant = 'primary', ...rest }, forwardRef ) => (
-		<Switch.Root
-			className={ classNames( 'vip-toggle-component', className ) }
-			sx={ {
-				all: 'unset',
-				cursor: 'pointer',
-				position: 'relative',
-				width: 40,
-				height: 20,
-				borderRadius: 5,
-				backgroundColor: 'muted',
-				backgroundRepeat: 'no-repeat',
-				backgroundPosition: 'right 2px top 2px',
-				backgroundImage: `url(
-				'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z" fill="white"/></svg>')`,
-				WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-
-				'&:focus-visible': theme => theme.outline,
-				'&[disabled]': {
-					opacity: 0.7,
-				},
-				'&[data-state="checked"]': {
-					backgroundColor: variant,
-					backgroundPosition: 'left 2px top 2px',
-					backgroundImage: `url(
-					'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z" fill="white"/></svg>')`,
-				},
-			} }
-			name={ name }
-			onCheckedChange={ onChange || undefined }
-			ref={ forwardRef }
-			{ ...rest }
-		>
-			<Switch.Thumb
-				sx={ {
-					display: 'block',
-					width: 16,
-					height: 16,
-					backgroundColor: 'white',
-					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)',
-					willChange: 'transform',
-					'&[data-state="checked"]': { transform: 'translateX(22px)' },
-				} }
-			/>
-		</Switch.Root>
-	)
-);
-
-Toggle.displayName = 'Toggle';
-
-Toggle.propTypes = {
-	name: PropTypes.string,
-	className: PropTypes.any,
-	onChange: PropTypes.func,
-	variant: PropTypes.string,
-};

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

@@ -1,96 +0,0 @@
-/** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-import { Toggle, Label } from '..';
-
-export default {
-	title: 'Toggle',
-	component: Toggle,
-	argTypes: {
-		checked: {
-			options: [ true, false ],
-			default: true,
-			control: { type: 'radio' },
-		},
-	},
-};
-
-const Default = args => (
-	<form>
-		<Toggle
-			checked={ args.checked }
-			defaultChecked
-			color={ args.color }
-			aria-label="Feature flag"
-		/>
-
-		<br />
-		<br />
-
-		<Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />
-
-		<br />
-		<br />
-
-		<Toggle aria-label="Feature Disabled" disabled defaultChecked={ false } />
-	</form>
-);
-
-const WithLabel = args => (
-	<form>
-		<Label htmlFor="custom-label-input">Custom Label here</Label>
-
-		<Toggle
-			id="custom-label-input"
-			defaultChecked
-			checked={ args.checked }
-			aria-label="Feature flag"
-		/>
-	</form>
-);
-
-const CustomStyling = args => (
-	<form>
-		<Label htmlFor="custom-label-input">Custom Styling</Label>
-
-		<div>
-			<Toggle
-				id="custom-label-input"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="Feature flag"
-				variant="success"
-			/>{ ' ' }
-			<Toggle
-				id="custom-label-input-error"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="Error flag"
-				variant="error"
-			/>{ ' ' }
-			<Toggle
-				id="custom-label-input-warning"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="Warning flag"
-				variant="warning"
-			/>{ ' ' }
-			<Toggle
-				id="custom-label-input-info"
-				defaultChecked
-				checked={ args.checked }
-				aria-label="info flag"
-				variant="info"
-			/>
-		</div>
-	</form>
-);
-
-export const Primary = Default.bind( { checked: true } );
-export const ExternalLabel = WithLabel.bind( { checked: true } );
-export const CustomStyle = CustomStyling.bind( { checked: true } );