@automattic/vip-design-system 0.13.0 → 0.14.2

package/.storybook/decorators/withColorMode.jsx

@@ -4,7 +4,7 @@ import { useColorMode } from 'theme-ui';
 
 // These need to be updated to import VIP design tokens;
 const lightBackground = '#ffffff';
-const darkBackground = '#333333';
+const darkBackground = '#1C1C1B';
 
 export const backgrounds = {
 	default: 'Light',
@@ -21,7 +21,7 @@ export const backgrounds = {
 };
 
 function ThemeChanger( { background } ) {
-	const [colorMode, setColorMode] = useColorMode();
+	const [ colorMode, setColorMode ] = useColorMode();
 	const newColorMode = darkBackground === background ? 'dark' : 'default';
 
 	useEffect( () => {
@@ -29,7 +29,7 @@ function ThemeChanger( { background } ) {
 	}, [ newColorMode ] );
 
 	return null;
-};
+}
 
 export default makeDecorator( {
 	name: 'withColorMode',
@@ -37,9 +37,9 @@ export default makeDecorator( {
 	wrapper: ( storyFn, context ) => {
 		return (
 			<>
-				<ThemeChanger background={context.globals?.backgrounds?.value} />
-				{storyFn()}
+				<ThemeChanger background={ context.globals?.backgrounds?.value } />
+				{ storyFn() }
 			</>
 		);
-	}
+	},
 } );

package/build/system/Button/Button.js

@@ -30,8 +30,14 @@ var Button = function Button(_ref) {
       justifyContent: 'center',
       height: '36px',
       py: 0,
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
       '&:disabled': {
-        opacity: 0.5,
+        opacity: 0.7,
         cursor: 'not-allowed',
         pointerEvents: 'all'
       }

package/build/system/Form/Toggle.js

@@ -38,6 +38,7 @@ var Toggle = function Toggle(_ref) {
     className: (0, _classnames["default"])('vip-toggle-component', className),
     sx: {
       all: 'unset',
+      cursor: 'pointer',
       position: 'relative',
       width: 40,
       height: 20,
@@ -47,6 +48,15 @@ var Toggle = function Toggle(_ref) {
       backgroundPosition: 'right 2px top 2px',
       backgroundImage: "url(\n\t\t\t\t'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': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
+      '&[disabled]': {
+        opacity: 0.7
+      },
       '&[data-state="checked"]': {
         backgroundColor: variant,
         backgroundPosition: 'left 2px top 2px',

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

@@ -42,6 +42,10 @@ var Default = function Default(args) {
       checked: args.checked,
       defaultChecked: false,
       "aria-label": "Feature flag 2"
+    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
+      "aria-label": "Feature Disabled",
+      disabled: true,
+      defaultChecked: false
     })]
   });
 };

package/build/system/Link/Link.js

@@ -33,6 +33,12 @@ var Link = function Link(_ref) {
       },
       '&:hover, &:focus': {
         color: 'heading'
+      },
+      '&:focus': function focus(theme) {
+        return theme.outline;
+      },
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
       }
     }, sx)
   }));

package/build/system/NewDialog/DialogClose.js

@@ -58,10 +58,11 @@ var DialogClose = /*#__PURE__*/_react["default"].forwardRef(function (props, for
           outlineColor: 'primary',
           outlineWidth: '2px'
         },
-        '&:focus': {
-          outlineStyle: 'solid',
-          outlineColor: 'primary',
-          outlineWidth: '2px'
+        '&:focus': function focus(theme) {
+          return theme.outline;
+        },
+        '&:focus-visible': function focusVisible(theme) {
+          return theme.outline;
         }
       },
       children: (0, _jsxRuntime.jsx)(_io.IoClose, {

package/build/system/NewDialog/DialogContent.js

@@ -15,7 +15,7 @@ var contentStyles = {
   width: '90vw',
   maxWidth: '640px',
   maxHeight: '85vh',
-  padding: 25,
+  padding: 32,
   '&:focus': {
     outline: 'none'
   },

package/build/system/NewDialog/DialogDescription.js

@@ -42,6 +42,9 @@ var DialogDescription = /*#__PURE__*/_react["default"].forwardRef(function (_ref
 
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Description, (0, _extends2["default"])({}, rest, {
     ref: forwardedRef,
+    sx: {
+      margin: 0
+    },
     children: text
   }));
 });

package/build/system/NewDialog/DialogTitle.js

@@ -39,6 +39,9 @@ var DialogTitle = function DialogTitle(_ref) {
   }
 
   return (0, _jsxRuntime.jsx)(DialogPrimitive.Title, {
+    sx: {
+      margin: 0
+    },
     children: titleNode
   });
 };

package/build/system/NewDialog/NewDialog.js

@@ -88,7 +88,10 @@ var NewDialog = function NewDialog(_ref) {
         }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
           description: description,
           hidden: !showHeading
-        }), content]
+        }), (0, _jsxRuntime.jsx)("div", {
+          role: "document",
+          children: content
+        })]
       })]
     })]
   });

package/build/system/NewDialog/NewDialog.stories.js

@@ -59,6 +59,13 @@ var AutoOpen = function AutoOpen() {
       children: "Auto Opens when rendered. Press escape to close it."
     }), (0, _jsxRuntime.jsx)(_NewDialog.NewDialog, (0, _extends2["default"])({}, defaultProps, {
       defaultOpen: true,
+      content: (0, _jsxRuntime.jsxs)("div", {
+        children: [(0, _jsxRuntime.jsx)("h3", {
+          children: "Test"
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+        })]
+      }),
       trigger: (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
         children: "hey"
       })
@@ -97,6 +104,10 @@ var HiddenHeadings = function HiddenHeadings() {
             type: "submit",
             children: "Submit"
           })]
+        }), (0, _jsxRuntime.jsx)("h3", {
+          children: "Continue here"
+        }), (0, _jsxRuntime.jsx)("p", {
+          children: "This is an example."
         })]
       })
     }))]

package/build/system/theme/getColor.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getColor = void 0;
+
+var _valetColor = _interopRequireDefault(require("../../../tokens/valet-color.json"));
+
+/**
+ * Internal dependencies
+ */
+var ThemeColors = _valetColor["default"]['productive-color-wpvip'];
+var CoreColors = _valetColor["default"]['valet-core'];
+
+var getColor = function getColor(color, variant) {
+  if (variant === void 0) {
+    variant = 'default';
+  }
+
+  if (!ThemeColors[color]) {
+    return '#000000';
+  }
+
+  var colorValue = ThemeColors[color][variant].value;
+
+  if (colorValue.startsWith('{')) {
+    var _colorValue$replace$s = colorValue.replace(/[{}]/g, '').split('.'),
+        name = _colorValue$replace$s[0],
+        number = _colorValue$replace$s[1]; // Some colors are flat, there is no sub values.
+
+
+    if (CoreColors[name][number]) {
+      return CoreColors[name][number].value;
+    }
+
+    return CoreColors[name].value;
+  }
+
+  return colorValue;
+};
+
+exports.getColor = getColor;

package/build/system/theme/index.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _colors = require("./colors");
 
+var _getColor = require("./getColor");
+
 /**
  * Internal dependencies
  */
@@ -59,7 +61,14 @@ var textStyles = {
     letterSpacing: '.05em'
   }
 };
+var outline = {
+  outlineStyle: 'solid',
+  outlineColor: '#ffffff',
+  outlineWidth: '1px',
+  boxShadow: "0 0 0 1px #fff, 0 0 0 3px " + (0, _getColor.getColor)('focus')
+};
 var _default = {
+  outline: outline,
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
     body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -86,8 +95,8 @@ var _default = {
   },
   initialColorModeName: 'light',
   colors: (0, _extends2["default"])({
-    text: _colors.light.grey['90'],
-    heading: _colors.light.grey['100'],
+    text: (0, _getColor.getColor)('text', 'secondary'),
+    heading: (0, _getColor.getColor)('text', 'primary'),
     background: '#fdfdfd',
     backgroundSecondary: _colors.light.grey['10'],
     primary: _colors.light.brand['70'],

package/package.json

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

package/src/system/Button/Button.js

@@ -16,8 +16,10 @@ const Button = ( { sx, ...props } ) => (
 			justifyContent: 'center',
 			height: '36px',
 			py: 0,
+			'&:focus': theme => theme.outline,
+			'&:focus-visible': theme => theme.outline,
 			'&:disabled': {
-				opacity: 0.5,
+				opacity: 0.7,
 				cursor: 'not-allowed',
 				pointerEvents: 'all',
 			},

package/src/system/Form/Toggle.js

@@ -23,6 +23,7 @@ export const Toggle = ( {
 		className={ classNames( 'vip-toggle-component', className ) }
 		sx={ {
 			all: 'unset',
+			cursor: 'pointer',
 			position: 'relative',
 			width: 40,
 			height: 20,
@@ -34,6 +35,11 @@ export const Toggle = ( {
 				'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': theme => theme.outline,
+			'&:focus-visible': theme => theme.outline,
+			'&[disabled]': {
+				opacity: 0.7,
+			},
 			'&[data-state="checked"]': {
 				backgroundColor: variant,
 				backgroundPosition: 'left 2px top 2px',

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

@@ -33,6 +33,11 @@ const Default = args => (
 		<br />
 
 		<Toggle checked={ args.checked } defaultChecked={ false } aria-label="Feature flag 2" />
+
+		<br />
+		<br />
+
+		<Toggle aria-label="Feature Disabled" disabled defaultChecked={ false } />
 	</form>
 );
 

package/src/system/Link/Link.js

@@ -20,6 +20,8 @@ const Link = ( { active = false, sx, ...props } ) => (
 			'&:hover, &:focus': {
 				color: 'heading',
 			},
+			'&:focus': theme => theme.outline,
+			'&:focus-visible': theme => theme.outline,
 			...sx,
 		} }
 	/>

package/src/system/NewDialog/DialogClose.js

@@ -34,7 +34,8 @@ export const DialogClose = React.forwardRef( ( props, forwardedRef ) => (
 					outlineColor: 'primary',
 					outlineWidth: '2px',
 				},
-				'&:focus': { outlineStyle: 'solid', outlineColor: 'primary', outlineWidth: '2px' },
+				'&:focus': theme => theme.outline,
+				'&:focus-visible': theme => theme.outline,
 			} }
 		>
 			<IoClose aria-hidden="true" />

package/src/system/NewDialog/DialogContent.js

@@ -11,7 +11,7 @@ export const contentStyles = {
 	width: '90vw',
 	maxWidth: '640px',
 	maxHeight: '85vh',
-	padding: 25,
+	padding: 32,
 	'&:focus': { outline: 'none' },
 	'> h1, > h2': { marginTop: '0 !important' },
 };

package/src/system/NewDialog/DialogDescription.js

@@ -21,7 +21,7 @@ export const DialogDescription = React.forwardRef(
 		}
 
 		return (
-			<DialogPrimitive.Description { ...rest } ref={ forwardedRef }>
+			<DialogPrimitive.Description { ...rest } ref={ forwardedRef } sx={ { margin: 0 } }>
 				{ text }
 			</DialogPrimitive.Description>
 		);

package/src/system/NewDialog/DialogTitle.js

@@ -18,7 +18,7 @@ export const DialogTitle = ( { title, hidden = false } ) => {
 		titleNode = <ScreenReaderText>{ titleNode }</ScreenReaderText>;
 	}
 
-	return <DialogPrimitive.Title>{ titleNode }</DialogPrimitive.Title>;
+	return <DialogPrimitive.Title sx={ { margin: 0 } }>{ titleNode }</DialogPrimitive.Title>;
 };
 
 DialogTitle.propTypes = {

package/src/system/NewDialog/NewDialog.js

@@ -56,7 +56,7 @@ export const NewDialog = ( {
 					<DialogTitle title={ title } hidden={ ! showHeading } />
 					<DialogDescription description={ description } hidden={ ! showHeading } />
 
-					{ content }
+					<div role="document">{ content }</div>
 				</DialogPrimitive.Content>
 			</DialogPrimitive.Portal>
 		</DialogPrimitive.Root>

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -34,6 +34,20 @@ export const AutoOpen = () => (
 		<NewDialog
 			{ ...defaultProps }
 			defaultOpen={ true }
+			content={
+				<div>
+					<h3>Test</h3>
+					<p>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry standard dummy text ever since the 1500s, when an unknown printer
+						took a galley of type and scrambled it to make a type specimen book. It has survived not
+						only five centuries, but also the leap into electronic typesetting, remaining
+						essentially unchanged. It was popularised in the 1960s with the release of Letraset
+						sheets containing Lorem Ipsum passages, and more recently with desktop publishing
+						software like Aldus PageMaker including versions of Lorem Ipsum.
+					</p>
+				</div>
+			}
 			trigger={ <ScreenReaderText>hey</ScreenReaderText> }
 		/>
 	</>
@@ -61,6 +75,10 @@ export const HiddenHeadings = () => (
 						<Input type="text" name="username" id="username" />
 						<Button type="submit">Submit</Button>
 					</form>
+
+					<h3>Continue here</h3>
+
+					<p>This is an example.</p>
 				</div>
 			}
 		/>

package/src/system/theme/getColor.js

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+
+import Valet from '../../../tokens/valet-color.json';
+
+const ThemeColors = Valet[ 'productive-color-wpvip' ];
+const CoreColors = Valet[ 'valet-core' ];
+
+export const getColor = ( color, variant = 'default' ) => {
+	if ( ! ThemeColors[ color ] ) {
+		return '#000000';
+	}
+
+	const colorValue = ThemeColors[ color ][ variant ].value;
+
+	if ( colorValue.startsWith( '{' ) ) {
+		const [ name, number ] = colorValue.replace( /[{}]/g, '' ).split( '.' );
+
+		// Some colors are flat, there is no sub values.
+		if ( CoreColors[ name ][ number ] ) {
+			return CoreColors[ name ][ number ].value;
+		}
+
+		return CoreColors[ name ].value;
+	}
+
+	return colorValue;
+};

package/src/system/theme/index.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { light, dark } from './colors';
+import { getColor } from './getColor';
 
 const textStyles = {
 	h1: {
@@ -51,7 +52,15 @@ const textStyles = {
 	},
 };
 
+const outline = {
+	outlineStyle: 'solid',
+	outlineColor: '#ffffff',
+	outlineWidth: '1px',
+	boxShadow: `0 0 0 1px #fff, 0 0 0 3px ${ getColor( 'focus' ) }`,
+};
+
 export default {
+	outline,
 	space: [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ],
 	fonts: {
 		body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
@@ -78,8 +87,8 @@ export default {
 	},
 	initialColorModeName: 'light',
 	colors: {
-		text: light.grey[ '90' ],
-		heading: light.grey[ '100' ],
+		text: getColor( 'text', 'secondary' ),
+		heading: getColor( 'text', 'primary' ),
 		background: '#fdfdfd',
 		backgroundSecondary: light.grey[ '10' ],
 		primary: light.brand[ '70' ],