@automattic/vip-design-system 2.0.0 → 2.1.0

package/build/system/Form/Checkbox/Checkbox.d.ts

@@ -3,7 +3,7 @@
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 export interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
     disabled?: boolean;
-    variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+    variant?: 'primary' | 'success' | 'brand' | 'disabled';
 }
 declare const Checkbox: ({ disabled, onCheckedChange, variant, ...props }: CheckboxProps) => import("react").JSX.Element;
 export { Checkbox };

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', 'error', 'warning', 'info'].map(function (variant) {
+    children: [['primary', 'success', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Tell me your ", variant, " prefereces"]
@@ -49,10 +49,6 @@ var Default = exports.Default = function Default() {
             onCheckedChange: setChecked
           }), (0, _jsxRuntime.jsx)(_Label.Label, {
             clickable: true,
-            sx: {
-              m: 0,
-              ml: 2
-            },
             htmlFor: "check1-" + variant,
             id: "label-check1-" + variant,
             children: "This option"
@@ -69,10 +65,6 @@ var Default = exports.Default = function Default() {
             onCheckedChange: setChecked2
           }), (0, _jsxRuntime.jsx)(_Label.Label, {
             clickable: true,
-            sx: {
-              m: 0,
-              ml: 2
-            },
             htmlFor: "check2-" + variant,
             id: "label-check2-" + variant,
             children: "This option too"
@@ -95,10 +87,6 @@ var Default = exports.Default = function Default() {
           onCheckedChange: setChecked
         }), (0, _jsxRuntime.jsx)(_Label.Label, {
           clickable: true,
-          sx: {
-            m: 0,
-            ml: 2
-          },
           htmlFor: "check1-disabled",
           id: "label-check1-disabled",
           children: "This option"
@@ -115,10 +103,6 @@ var Default = exports.Default = function Default() {
           onCheckedChange: setChecked2
         }), (0, _jsxRuntime.jsx)(_Label.Label, {
           clickable: true,
-          sx: {
-            m: 0,
-            ml: 2
-          },
           htmlFor: "check2-disabled",
           id: "label-check2-disabled",
           children: "This option too"
@@ -136,7 +120,7 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
     }
   }, [checkRef]);
   return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [['primary', 'success', 'error', 'warning', 'info'].map(function (variant) {
+    children: [['primary', 'success', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Indeterminate state ", variant]
@@ -150,10 +134,6 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
             "aria-labelledby": "label-check1-" + variant,
             checked: 'indeterminate'
           }), (0, _jsxRuntime.jsx)(_Label.Label, {
-            sx: {
-              m: 0,
-              ml: 2
-            },
             htmlFor: "check1-" + variant,
             id: "label-check1-" + variant,
             children: "This option"
@@ -173,10 +153,6 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
           "aria-labelledby": "label-check1-disabled",
           checked: 'indeterminate'
         }), (0, _jsxRuntime.jsx)(_Label.Label, {
-          sx: {
-            m: 0,
-            ml: 2
-          },
           htmlFor: "check1-disabled",
           id: "label-check1-disabled",
           children: "This option"

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

@@ -27,6 +27,12 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
       color: variant,
       borderColor: variant
     },
+    '& ~ label': {
+      fontWeight: 'regular',
+      color: _Input.inputBaseText,
+      m: 0,
+      ml: 2
+    },
     svg: {
       position: 'absolute',
       top: 0,

package/build/system/Form/Radio/Radio.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { RadioOptionOptionProps } from './RadioOption';
 export declare const VIP_RADIO = "vip-radio-component";
 export type RadioProps = {
-    variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+    variant?: 'primary' | 'success' | 'brand' | 'disabled';
     disabled?: boolean | undefined;
     defaultValue?: string | number;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>, option?: RadioOptionOptionProps) => void;

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', 'error', 'warning', 'info'].map(function (variant) {
+    children: [['primary', 'success', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_2.Box, {
         children: [(0, _jsxRuntime.jsx)(_2.Heading, {
           as: "h2",
@@ -64,7 +64,7 @@ var Default = exports.Default = function Default() {
         sx: {
           textTransform: 'capitalize'
         },
-        children: "Disabled"
+        children: "disabled"
       }), (0, _jsxRuntime.jsx)(_Radio.Radio, {
         disabled: true,
         name: "the_option_",
@@ -169,7 +169,7 @@ var AcessibleExamples = exports.AcessibleExamples = function AcessibleExamples()
           fontSize: 2,
           fontWeight: 'bold'
         },
-        children: "All Disabled options"
+        children: "All disabled options"
       }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
         sx: {
           alignItems: 'center'

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

@@ -2,13 +2,16 @@
 
 exports.__esModule = true;
 exports.labelStyle = exports.itemStyle = exports.inputStyle = void 0;
-var _ScreenReaderText = require("../../ScreenReaderText/ScreenReaderText");
 var _Input = require("../Input.styles");
-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); }
 // The output willl be 18px because of the 1px border.
 var RADIO_SIZE = 16;
 var inputStyle = exports.inputStyle = function inputStyle(variant) {
-  return _extends({}, _ScreenReaderText.screenReaderTextClass, {
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    clipPath: 'inset(50%)',
     width: RADIO_SIZE,
     height: RADIO_SIZE,
     '&:focus ~ label:before': {
@@ -16,7 +19,7 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
       content: '""',
       border: '1px solid',
       borderColor: _Input.baseControlBorderStyle.borderColor,
-      left: -5
+      left: 0
     },
     '&:checked ~ label::after': {
       borderColor: variant,
@@ -26,22 +29,20 @@ var inputStyle = exports.inputStyle = function inputStyle(variant) {
       backgroundColor: variant,
       borderColor: variant
     }
-  });
+  };
 };
 var labelStyle = exports.labelStyle = function labelStyle(variant) {
   return {
+    display: 'flex',
     cursor: 'pointer',
     position: 'relative',
-    marginLeft: 5,
     marginBottom: 0,
     userSelect: 'none',
     color: _Input.inputBaseText,
-    lineHeight: 'body',
+    fontWeight: 'regular',
+    lineHeight: 'normal',
     '&:before, &:after': {
       borderRadius: '100%',
-      position: 'absolute',
-      top: 1,
-      left: -5,
       transition: 'all .3s ease-out',
       width: RADIO_SIZE,
       height: RADIO_SIZE
@@ -49,9 +50,13 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
     '&::before': {
       content: '""',
       border: '1px solid',
-      borderColor: _Input.baseControlBorderStyle.borderColor
+      borderColor: _Input.baseControlBorderStyle.borderColor,
+      marginRight: 2
     },
     '&::after': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
       content: '""',
       backgroundColor: variant,
       backgroundSize: '100%',
@@ -66,5 +71,6 @@ var labelStyle = exports.labelStyle = function labelStyle(variant) {
 var itemStyle = exports.itemStyle = {
   display: 'flex',
   alignItems: 'center',
-  my: 2
+  my: 2,
+  position: 'relative'
 };

package/build/system/Form/RadioBoxGroup.js

@@ -38,6 +38,7 @@ const RadioOption = ( {
 				backgroundColor: 'input.radio-box.background.default',
 				cursor: 'pointer',
 				borderRadius: 2,
+				minWidth: 220,
 				textAlign: 'left',
 				border: '1px solid',
 				borderColor: 'input.radio-box.border.default',

package/build/system/theme/colors.js

@@ -6,6 +6,5 @@
 
 export default theme => ( {
 	...theme.color,
-	brand: theme.color.gold,
 	grey: theme.color.gray,
 } );

package/package.json

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

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

@@ -61,9 +61,7 @@ export const Default = () => {
 
 	return (
 		<Form.Root>
-			{ (
-				[ 'primary', 'success', 'error', 'warning', 'info' ] as CheckboxProps[ 'variant' ][]
-			 ).map( variant => (
+			{ ( [ 'primary', 'success', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Tell me your { variant } prefereces</Form.Legend>
 
@@ -75,12 +73,7 @@ export const Default = () => {
 							aria-labelledby={ `label-check1-${ variant }` }
 							onCheckedChange={ setChecked }
 						/>
-						<Label
-							clickable
-							sx={ { m: 0, ml: 2 } }
-							htmlFor={ `check1-${ variant }` }
-							id={ `label-check1-${ variant }` }
-						>
+						<Label clickable htmlFor={ `check1-${ variant }` } id={ `label-check1-${ variant }` }>
 							This option
 						</Label>
 					</Flex>
@@ -93,12 +86,7 @@ export const Default = () => {
 							aria-labelledby={ `label-check2-${ variant }` }
 							onCheckedChange={ setChecked2 }
 						/>
-						<Label
-							clickable
-							sx={ { m: 0, ml: 2 } }
-							htmlFor={ `check2-${ variant }` }
-							id={ `label-check2-${ variant }` }
-						>
+						<Label clickable htmlFor={ `check2-${ variant }` } id={ `label-check2-${ variant }` }>
 							This option too
 						</Label>
 					</Flex>
@@ -117,12 +105,7 @@ export const Default = () => {
 						aria-labelledby={ `label-check1-disabled` }
 						onCheckedChange={ setChecked }
 					/>
-					<Label
-						clickable
-						sx={ { m: 0, ml: 2 } }
-						htmlFor={ `check1-disabled` }
-						id={ `label-check1-disabled` }
-					>
+					<Label clickable htmlFor={ `check1-disabled` } id={ `label-check1-disabled` }>
 						This option
 					</Label>
 				</Flex>
@@ -135,12 +118,7 @@ export const Default = () => {
 						aria-labelledby={ `label-check2-disabled` }
 						onCheckedChange={ setChecked2 }
 					/>
-					<Label
-						clickable
-						sx={ { m: 0, ml: 2 } }
-						htmlFor={ `check2-disabled` }
-						id={ `label-check2-disabled` }
-					>
+					<Label clickable htmlFor={ `check2-disabled` } id={ `label-check2-disabled` }>
 						This option too
 					</Label>
 				</Flex>
@@ -161,9 +139,7 @@ export const Indeterminate = () => {
 
 	return (
 		<Form.Root>
-			{ (
-				[ 'primary', 'success', 'error', 'warning', 'info' ] as CheckboxProps[ 'variant' ][]
-			 ).map( variant => (
+			{ ( [ 'primary', 'success', 'brand' ] as CheckboxProps[ 'variant' ][] ).map( variant => (
 				<Form.Fieldset key={ variant }>
 					<Form.Legend>Indeterminate state { variant }</Form.Legend>
 
@@ -174,11 +150,8 @@ export const Indeterminate = () => {
 							aria-labelledby={ `label-check1-${ variant }` }
 							checked={ 'indeterminate' }
 						/>
-						<Label
-							sx={ { m: 0, ml: 2 } }
-							htmlFor={ `check1-${ variant }` }
-							id={ `label-check1-${ variant }` }
-						>
+
+						<Label htmlFor={ `check1-${ variant }` } id={ `label-check1-${ variant }` }>
 							This option
 						</Label>
 					</Flex>
@@ -195,11 +168,7 @@ export const Indeterminate = () => {
 						aria-labelledby={ `label-check1-disabled` }
 						checked={ 'indeterminate' }
 					/>
-					<Label
-						sx={ { m: 0, ml: 2 } }
-						htmlFor={ `check1-disabled` }
-						id={ `label-check1-disabled` }
-					>
+					<Label htmlFor={ `check1-disabled` } id={ `label-check1-disabled` }>
 						This option
 					</Label>
 				</Flex>

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

@@ -7,7 +7,7 @@ import { RadioOptionProps } from '../Radio/RadioOption';
 
 export interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
 	disabled?: boolean;
-	variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+	variant?: 'primary' | 'success' | 'brand' | 'disabled';
 }
 
 const StyledCheckbox = ( { variant = 'primary', ...rest }: CheckboxProps ) => (

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

@@ -4,6 +4,7 @@ import {
 	baseControlBorderStyle,
 	baseControlFocusStyle,
 	inputBaseBackground,
+	inputBaseText,
 } from '../Input.styles';
 
 // The output willl be 16px because of the 1px border.
@@ -30,6 +31,12 @@ export const checkboxStyle = ( variant: string ): ThemeUIStyleObject => ( {
 		color: variant,
 		borderColor: variant,
 	},
+	'& ~ label': {
+		fontWeight: 'regular',
+		color: inputBaseText,
+		m: 0,
+		ml: 2,
+	},
 	svg: {
 		position: 'absolute',
 		top: 0,

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

@@ -62,39 +62,35 @@ export const Default = () => {
 
 	return (
 		<>
-			{ ( [ 'primary', 'success', 'error', 'warning', 'info' ] as RadioProps[ 'variant' ][] ).map(
-				variant => (
-					<Box key={ variant }>
-						<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
-							{ variant }
-						</Heading>
-
-						<Radio
-							variant={ variant }
-							onChange={ ( _, option ) =>
-								toggleChecked( `the_option_${ variant }`, option?.value )
-							}
-							name={ `the_option_${ variant }` }
-							defaultValue={ checked?.[ `the_option_${ variant }` ] || `${ variant }-option-a` }
-							options={ [
-								{
-									id: `${ variant }-option-a`,
-									value: `${ variant }-option-a`,
-									label: `I am the ${ variant } option A`,
-								},
-								{
-									id: `${ variant }-option-b`,
-									value: `${ variant }-option-b`,
-									label: `I am the ${ variant } option B`,
-								},
-							] }
-						/>
-					</Box>
-				)
-			) }
+			{ ( [ 'primary', 'success', 'brand' ] as RadioProps[ 'variant' ][] ).map( variant => (
+				<Box key={ variant }>
+					<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
+						{ variant }
+					</Heading>
+
+					<Radio
+						variant={ variant }
+						onChange={ ( _, option ) => toggleChecked( `the_option_${ variant }`, option?.value ) }
+						name={ `the_option_${ variant }` }
+						defaultValue={ checked?.[ `the_option_${ variant }` ] || `${ variant }-option-a` }
+						options={ [
+							{
+								id: `${ variant }-option-a`,
+								value: `${ variant }-option-a`,
+								label: `I am the ${ variant } option A`,
+							},
+							{
+								id: `${ variant }-option-b`,
+								value: `${ variant }-option-b`,
+								label: `I am the ${ variant } option B`,
+							},
+						] }
+					/>
+				</Box>
+			) ) }
 			<Box>
 				<Heading as="h2" sx={ { textTransform: 'capitalize' } }>
-					Disabled
+					disabled
 				</Heading>
 
 				<Radio
@@ -197,7 +193,7 @@ export const AcessibleExamples = () => {
 
 			<Form.Fieldset>
 				<Form.Legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>
-					All Disabled options
+					All disabled options
 				</Form.Legend>
 
 				<Flex sx={ { alignItems: 'center' } }>

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

@@ -8,7 +8,7 @@ import { RadioOption, RadioOptionOptionProps } from './RadioOption';
 export const VIP_RADIO = 'vip-radio-component';
 
 export type RadioProps = {
-	variant?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'disabled';
+	variant?: 'primary' | 'success' | 'brand' | 'disabled';
 	disabled?: boolean | undefined;
 	defaultValue?: string | number;
 	onChange?: ( e: React.ChangeEvent< HTMLInputElement >, option?: RadioOptionOptionProps ) => void;

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

@@ -1,13 +1,16 @@
 import { ThemeUIStyleObject } from 'theme-ui';
 
-import { screenReaderTextClass } from '../../ScreenReaderText/ScreenReaderText';
 import { baseControlBorderStyle, inputBaseText } from '../Input.styles';
 
 // The output willl be 18px because of the 1px border.
 const RADIO_SIZE = 16;
 
 export const inputStyle = ( variant: string ): ThemeUIStyleObject => ( {
-	...screenReaderTextClass,
+	position: 'absolute',
+	top: 0,
+	left: 0,
+	clip: 'rect(1px, 1px, 1px, 1px)',
+	clipPath: 'inset(50%)',
 	width: RADIO_SIZE,
 	height: RADIO_SIZE,
 	'&:focus ~ label:before': {
@@ -15,7 +18,7 @@ export const inputStyle = ( variant: string ): ThemeUIStyleObject => ( {
 		content: '""',
 		border: '1px solid',
 		borderColor: baseControlBorderStyle.borderColor,
-		left: -5,
+		left: 0,
 	},
 	'&:checked ~ label::after': {
 		borderColor: variant,
@@ -28,18 +31,16 @@ export const inputStyle = ( variant: string ): ThemeUIStyleObject => ( {
 } );
 
 export const labelStyle = ( variant: string ): ThemeUIStyleObject => ( {
+	display: 'flex',
 	cursor: 'pointer',
 	position: 'relative',
-	marginLeft: 5,
 	marginBottom: 0,
 	userSelect: 'none',
 	color: inputBaseText,
-	lineHeight: 'body',
+	fontWeight: 'regular',
+	lineHeight: 'normal',
 	'&:before, &:after': {
 		borderRadius: '100%',
-		position: 'absolute',
-		top: 1,
-		left: -5,
 		transition: 'all .3s ease-out',
 		width: RADIO_SIZE,
 		height: RADIO_SIZE,
@@ -48,8 +49,12 @@ export const labelStyle = ( variant: string ): ThemeUIStyleObject => ( {
 		content: '""',
 		border: '1px solid',
 		borderColor: baseControlBorderStyle.borderColor,
+		marginRight: 2,
 	},
 	'&::after': {
+		position: 'absolute',
+		top: 0,
+		left: 0,
 		content: '""',
 		backgroundColor: variant,
 		backgroundSize: '100%',
@@ -65,4 +70,5 @@ export const itemStyle: ThemeUIStyleObject = {
 	display: 'flex',
 	alignItems: 'center',
 	my: 2,
+	position: 'relative',
 };

package/src/system/Form/RadioBoxGroup.js

@@ -38,6 +38,7 @@ const RadioOption = ( {
 				backgroundColor: 'input.radio-box.background.default',
 				cursor: 'pointer',
 				borderRadius: 2,
+				minWidth: 220,
 				textAlign: 'left',
 				border: '1px solid',
 				borderColor: 'input.radio-box.border.default',

package/src/system/theme/colors.js

@@ -6,6 +6,5 @@
 
 export default theme => ( {
 	...theme.color,
-	brand: theme.color.gold,
 	grey: theme.color.gray,
 } );

package/tokens/utilities/colors/package-lock.json

@@ -1506,9 +1506,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -4658,9 +4658,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "peer": true
     },
     "font-atlas": {