@automattic/vip-design-system 2.1.0 → 2.2.0

package/build/system/Avatar/Avatar.d.ts

@@ -5,7 +5,6 @@
 import { Argument } from 'classnames';
 import { ImageProps, ThemeUIStyleObject } from 'theme-ui';
 export interface AvatarProps {
-    isVIP?: boolean;
     size?: number;
     src?: string;
     name?: string;

package/build/system/Avatar/Avatar.js

@@ -7,7 +7,7 @@ var _react = require("react");
 var _themeUi = require("theme-ui");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["isVIP", "name", "size", "src", "className", "sx"];
+var _excluded = ["name", "size", "src", "className", "sx"];
 /**
  * External dependencies
  */
@@ -18,9 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref$isVIP = _ref.isVIP,
-    isVIP = _ref$isVIP === void 0 ? false : _ref$isVIP,
-    name = _ref.name,
+  var name = _ref.name,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 32 : _ref$size,
     src = _ref.src,
@@ -31,21 +29,15 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
   return (0, _jsxRuntime.jsx)(_.Box, _extends({
     sx: _extends({
       borderRadius: '100%',
-      height: size + 2,
-      // +2 to compensate padding on both sides
-      width: size + 2,
-      // +2 to compensate padding on both sides
-      borderWidth: '2px',
-      borderStyle: 'solid',
-      borderColor: isVIP || isVIP === undefined ? 'primary' : 'transparent',
+      height: size,
+      width: size,
       overflow: 'hidden',
-      backgroundColor: 'primary',
+      border: 'none',
+      backgroundColor: 'icon.primary',
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      color: 'white',
-      padding: '1px',
-      // this should probably be replaced with a token
+      color: 'inverse',
       textAlign: 'center'
     }, sx),
     className: (0, _classnames["default"])('vip-avatar-component', className),
@@ -63,10 +55,10 @@ var Avatar = exports.Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
     }) : (0, _jsxRuntime.jsx)(_.Text, {
       as: "span",
       sx: {
-        color: 'white',
+        color: 'icon.inverse',
         mb: 0,
         fontWeight: 'bold',
-        fontSize: 0,
+        fontSize: 2,
         textTransform: 'uppercase'
       },
       children: name ? name.charAt(0) : null

package/build/system/Avatar/Avatar.stories.d.ts

@@ -13,4 +13,5 @@ declare const _default: {
 };
 export default _default;
 type Story = StoryObj<typeof Avatar>;
-export declare const Default: Story;
+export declare const Default: () => import("react").JSX.Element;
+export declare const WithName: Story;

package/build/system/Avatar/Avatar.stories.js

@@ -1,8 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithName = exports.Default = void 0;
 var _ = require("..");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * External dependencies
  */
@@ -13,4 +14,20 @@ var _default = exports["default"] = {
   title: 'Avatar',
   component: _.Avatar
 };
-var Default = exports.Default = {};
+var COMMON_SIZES = [128, 64, 48, 32, 24, 16];
+var Default = exports.Default = function Default() {
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: COMMON_SIZES.map(function (size) {
+      return (0, _jsxRuntime.jsx)(_.Avatar, {
+        size: size,
+        src: "https://i.pravatar.cc/100"
+      }, size);
+    })
+  });
+};
+var WithName = exports.WithName = {
+  args: {
+    name: 'Kitty',
+    size: 30
+  }
+};

package/build/system/Form/Checkbox/Checkbox.js

@@ -39,9 +39,6 @@ var Checkbox = exports.Checkbox = function Checkbox(_ref3) {
     variant = 'disabled';
   }
   return (0, _jsxRuntime.jsx)(StyledCheckbox, _extends({
-    sx: {
-      opacity: disabled ? 0.4 : 1
-    },
     onCheckedChange: disabled ? undefined : onCheckedChange,
     "aria-disabled": disabled,
     variant: variant

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

@@ -33,7 +33,7 @@ var Default = exports.Default = function Default() {
     checked2 = _useState2[0],
     setChecked2 = _useState2[1];
   return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [['primary', 'success', 'brand'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Tell me your ", variant, " prefereces"]
@@ -120,7 +120,7 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
     }
   }, [checkRef]);
   return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [['primary', 'success', 'brand'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Indeterminate state ", variant]

package/build/system/Form/Checkbox/styles.js

@@ -7,6 +7,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 // The output willl be 16px because of the 1px border.
 var CHECKBOX_SIZE = 14;
 var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
+  var variantColor = variant === 'disabled' ? 'input.background.disabled' : variant;
   return _extends({
     all: 'unset',
     position: 'relative',
@@ -14,7 +15,7 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
   }, _Input.baseControlBorderStyle, _Input.baseControlFocusStyle, {
     width: CHECKBOX_SIZE,
     height: CHECKBOX_SIZE,
-    borderRadius: 1,
+    borderRadius: 0,
     display: 'flex',
     justifyContent: 'center',
     '&[aria-disabled="true"]': {
@@ -22,10 +23,10 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
       cursor: 'not-allowed',
       pointerEvents: 'none'
     },
-    '&[data-state=checked]': {
-      backgroundColor: variant,
-      color: variant,
-      borderColor: variant
+    '&[data-state=checked], &[data-state=indeterminate]': {
+      backgroundColor: variantColor,
+      color: variantColor,
+      borderColor: variantColor
     },
     '& ~ label': {
       fontWeight: 'regular',
@@ -35,23 +36,27 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
     },
     svg: {
       position: 'absolute',
+      fill: 'currentColor',
       top: 0,
       left: 0
     }
   });
 };
 var checkboxIndicatorStyle = exports.checkboxIndicatorStyle = function checkboxIndicatorStyle(variant) {
+  var backgroundColor = variant === 'disabled' ? 'icon.inverse-disabled' : 'icon.inverse';
   return {
     width: 14,
     height: 14,
-    backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='white'/%3E%3C/svg%3E\")",
+    backgroundColor: backgroundColor,
+    maskImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='currentcolor'/%3E%3C/svg%3E\")",
     '&[data-state=indeterminate]': {
-      marginTop: '6px',
-      backgroundImage: 'none',
-      backgroundColor: variant,
+      maskImage: 'none',
+      backgroundColor: backgroundColor,
       position: 'absolute',
-      width: 10,
-      height: 2
+      top: '50%',
+      width: 8,
+      height: 2,
+      marginTop: '-1px'
     }
   };
 };

package/build/system/Form/Radio/Radio.stories.js

@@ -32,7 +32,7 @@ var Default = exports.Default = function Default() {
     setChecked(_extends({}, checked, (_extends2 = {}, _extends2[radioName] = value, _extends2)));
   };
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [['primary', 'success', 'brand'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_2.Box, {
         children: [(0, _jsxRuntime.jsx)(_2.Heading, {
           as: "h2",

package/build/system/Toolbar/Toolbar.stories.js

@@ -82,7 +82,6 @@ var VIPDashboardLike = exports.VIPDashboardLike = {
           children: [(0, _jsxRuntime.jsx)(_.Toolbar.Separator, {}), (0, _jsxRuntime.jsxs)("a", {
             href: "/",
             children: [(0, _jsxRuntime.jsx)(_system.Avatar, {
-              isVIP: true,
               name: "John Doe",
               src: "https://i.pravatar.cc/80"
             }), (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "build/system/index.js",
   "scripts": {
     "build-storybook": "storybook build",

package/src/system/Avatar/Avatar.stories.tsx

@@ -16,4 +16,18 @@ export default {
 
 type Story = StoryObj< typeof Avatar >;
 
-export const Default: Story = {};
+const COMMON_SIZES = [ 128, 64, 48, 32, 24, 16 ];
+
+export const Default = () => (
+	<>
+		{ COMMON_SIZES.map( size => (
+			<Avatar key={ size } size={ size } src="https://i.pravatar.cc/100" />
+		) ) }
+	</>
+);
+export const WithName: Story = {
+	args: {
+		name: 'Kitty',
+		size: 30,
+	},
+};

package/src/system/Avatar/Avatar.tsx

@@ -11,7 +11,6 @@ import { Image, ImageProps, ThemeUIStyleObject } from 'theme-ui';
 import { Box, Text } from '..';
 
 export interface AvatarProps {
-	isVIP?: boolean;
 	size?: number;
 	src?: string;
 	name?: string;
@@ -23,24 +22,21 @@ type AvatarImageProps = AvatarProps & ImageProps;
 
 export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 	(
-		{ isVIP = false, name, size = 32, src, className, sx = {}, ...props }: AvatarImageProps,
+		{ name, size = 32, src, className, sx = {}, ...props }: AvatarImageProps,
 		ref: Ref< HTMLElement >
 	) => (
 		<Box
 			sx={ {
 				borderRadius: '100%',
-				height: size + 2, // +2 to compensate padding on both sides
-				width: size + 2, // +2 to compensate padding on both sides
-				borderWidth: '2px',
-				borderStyle: 'solid',
-				borderColor: isVIP || isVIP === undefined ? 'primary' : 'transparent',
+				height: size,
+				width: size,
 				overflow: 'hidden',
-				backgroundColor: 'primary',
+				border: 'none',
+				backgroundColor: 'icon.primary',
 				display: 'inline-flex',
 				alignItems: 'center',
 				justifyContent: 'center',
-				color: 'white',
-				padding: '1px', // this should probably be replaced with a token
+				color: 'inverse',
 				textAlign: 'center',
 				...sx,
 			} }
@@ -63,10 +59,10 @@ export const Avatar = forwardRef< HTMLElement, AvatarImageProps >(
 				<Text
 					as="span"
 					sx={ {
-						color: 'white',
+						color: 'icon.inverse',
 						mb: 0,
 						fontWeight: 'bold',
-						fontSize: 0,
+						fontSize: 2,
 						textTransform: 'uppercase',
 					} }
 				>

package/src/system/Form/Checkbox/Checkbox.stories.tsx

@@ -61,7 +61,7 @@ export const Default = () => {
 
 	return (
 		<Form.Root>
-			{ ( [ 'primary', 'success', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Tell me your { variant } prefereces</Form.Legend>
 
@@ -139,7 +139,7 @@ export const Indeterminate = () => {
 
 	return (
 		<Form.Root>
-			{ ( [ 'primary', 'success', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Indeterminate state { variant }</Form.Legend>
 

package/src/system/Form/Checkbox/Checkbox.tsx

@@ -34,9 +34,6 @@ const Checkbox = ( {
 
 	return (
 		<StyledCheckbox
-			sx={ {
-				opacity: disabled ? 0.4 : 1,
-			} }
 			onCheckedChange={ disabled ? undefined : onCheckedChange }
 			aria-disabled={ disabled }
 			variant={ variant }

package/src/system/Form/Checkbox/styles.ts

@@ -10,51 +10,62 @@ import {
 // The output willl be 16px because of the 1px border.
 const CHECKBOX_SIZE = 14;
 
-export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	all: 'unset',
-	position: 'relative',
-	backgroundColor: inputBaseBackground,
-	...baseControlBorderStyle,
-	...baseControlFocusStyle,
-	width: CHECKBOX_SIZE,
-	height: CHECKBOX_SIZE,
-	borderRadius: 1,
-	display: 'flex',
-	justifyContent: 'center',
-	'&[aria-disabled="true"]': {
-		opacity: 0.7,
-		cursor: 'not-allowed',
-		pointerEvents: 'none',
-	},
-	'&[data-state=checked]': {
-		backgroundColor: variant,
-		color: variant,
-		borderColor: variant,
-	},
-	'& ~ label': {
-		fontWeight: 'regular',
-		color: inputBaseText,
-		m: 0,
-		ml: 2,
-	},
-	svg: {
-		position: 'absolute',
-		top: 0,
-		left: 0,
-	},
-} );
+export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => {
+	const variantColor = variant === 'disabled' ? 'input.background.disabled' : variant;
 
-export const checkboxIndicatorStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	width: 14,
-	height: 14,
-	backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='white'/%3E%3C/svg%3E")`,
+	return {
+		all: 'unset',
+		position: 'relative',
+		backgroundColor: inputBaseBackground,
+		...baseControlBorderStyle,
+		...baseControlFocusStyle,
+		width: CHECKBOX_SIZE,
+		height: CHECKBOX_SIZE,
+		borderRadius: 0,
+		display: 'flex',
+		justifyContent: 'center',
+		'&[aria-disabled="true"]': {
+			opacity: 0.7,
+			cursor: 'not-allowed',
+			pointerEvents: 'none',
+		},
+		'&[data-state=checked], &[data-state=indeterminate]': {
+			backgroundColor: variantColor,
+			color: variantColor,
+			borderColor: variantColor,
+		},
+		'& ~ label': {
+			fontWeight: 'regular',
+			color: inputBaseText,
+			m: 0,
+			ml: 2,
+		},
+		svg: {
+			position: 'absolute',
+			fill: 'currentColor',
+			top: 0,
+			left: 0,
+		},
+	};
+};
 
-	'&[data-state=indeterminate]': {
-		marginTop: '6px',
-		backgroundImage: 'none',
-		backgroundColor: variant,
-		position: 'absolute',
-		width: 10,
-		height: 2,
-	},
-} );
+export const checkboxIndicatorStyle = ( variant: string ): ThemeUIStyleObject => {
+	const backgroundColor = variant === 'disabled' ? 'icon.inverse-disabled' : 'icon.inverse';
+
+	return {
+		width: 14,
+		height: 14,
+		backgroundColor,
+		maskImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='currentcolor'/%3E%3C/svg%3E")`,
+
+		'&[data-state=indeterminate]': {
+			maskImage: 'none',
+			backgroundColor,
+			position: 'absolute',
+			top: '50%',
+			width: 8,
+			height: 2,
+			marginTop: '-1px',
+		},
+	};
+};

package/src/system/Form/Radio/Radio.stories.tsx

@@ -62,7 +62,7 @@ export const Default = () => {
 
 	return (
 		<>
-			{ ( [ 'primary', 'success', 'brand' ] as RadioProps[ 'variant' ][] ).map( variant => (
+			{ ( [ 'primary', 'brand' ] as RadioProps[ 'variant' ][] ).map( variant => (
 				<Box key={ variant }>
 					<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
 						{ variant }

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

@@ -94,7 +94,7 @@ export const VIPDashboardLike: Story = {
 					<Toolbar.Separator />
 
 					<a href="/">
-						<Avatar isVIP name="John Doe" src="https://i.pravatar.cc/80" />
+						<Avatar name="John Doe" src="https://i.pravatar.cc/80" />
 						<ScreenReaderText>John Doe</ScreenReaderText>
 					</a>
 				</Toolbar.UtilNav>