@automattic/vip-design-system 0.14.2 → 0.15.0

package/build/system/theme/getColor.js

@@ -5,39 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.getColor = void 0;
 
-var _valetColor = _interopRequireDefault(require("../../../tokens/valet-color.json"));
+var _valetTheme = _interopRequireDefault(require("./generated/valet-theme.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]) {
+  if (!_valetTheme["default"][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;
+  return _valetTheme["default"][color][variant].value;
 };
 
 exports.getColor = getColor;

package/build/system/theme/index.js

@@ -65,7 +65,7 @@ var outline = {
   outlineStyle: 'solid',
   outlineColor: '#ffffff',
   outlineWidth: '1px',
-  boxShadow: "0 0 0 1px #fff, 0 0 0 3px " + (0, _getColor.getColor)('focus')
+  boxShadow: "0 0 0 1px " + (0, _getColor.getColor)('focus', 'inset') + ", 0 0 0 3px " + (0, _getColor.getColor)('focus')
 };
 var _default = {
   outline: outline,

package/package.json

@@ -1,15 +1,17 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.14.2",
+	"version": "0.15.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
-		"build": "cross-env NODE_ENV=production babel src --out-dir build",
+		"build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build && npm run theme-builder-copy",
 		"format": "prettier --write \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
-		"format:check": "prettier --list-different -- \"src/**/*.{js,ts,tsx,md,mdx,json}\"",
+		"format:check": "prettier --list-different -- \"src/system/**/*.{js,ts,tsx,md,mdx,json}\"",
 		"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
 		"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
 		"jest:watch": "npm run jest --watch",
+		"theme-builder-copy": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme.json build/system/theme/generated/valet-theme.json",
+		"theme-update": "token-transformer tokens/valet-core.json src/system/theme/generated/valet-theme.json valet-core,productive-color-wpvip",
 		"lint": "eslint . --fix --max-warnings 0",
 		"storybook": "start-storybook -p 6006",
 		"dev": "npm run storybook",
@@ -18,7 +20,7 @@
 	},
 	"dependencies": {
 		"@radix-ui/react-checkbox": "^0.1.5",
-		"@radix-ui/react-dialog": "^0.1.7",
+		"@radix-ui/react-dialog": "^1.0.0",
 		"@radix-ui/react-radio-group": "^0.1.5",
 		"@radix-ui/react-switch": "^0.1.5",
 		"@radix-ui/react-tooltip": "^0.1.7",
@@ -121,6 +123,7 @@
 		"react-dom": "^17.0.2",
 		"react-input-autosize": "^3.0.0",
 		"react-refresh": "^0.9.0",
-		"theme-ui": "0.10.0"
+		"theme-ui": "0.10.0",
+		"token-transformer": "^0.0.24"
 	}
 }

package/src/system/Button/Button.js

@@ -3,11 +3,12 @@
 /**
  * External dependencies
  */
-import { Button as ThemeButton } from 'theme-ui';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Button as ThemeButton } from 'theme-ui';
 
-const Button = ( { sx, ...props } ) => (
+const Button = React.forwardRef( ( { sx, ...props }, forwardRef ) => (
 	<ThemeButton
 		sx={ {
 			verticalAlign: 'middle',
@@ -27,8 +28,11 @@ const Button = ( { sx, ...props } ) => (
 		} }
 		className={ classNames( 'vip-button-component', props.className ) }
 		{ ...props }
+		ref={ forwardRef }
 	/>
-);
+) );
+
+Button.displayName = 'Button';
 
 Button.propTypes = {
 	sx: PropTypes.object,

package/src/system/NewDialog/DialogClose.js

@@ -4,14 +4,28 @@
  * External dependencies
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { IoClose } from 'react-icons/io5';
 
 /**
  * Internal dependencies
  */
-export const DialogClose = React.forwardRef( ( props, forwardedRef ) => (
-	<DialogPrimitive.Close asChild { ...props } ref={ forwardedRef }>
+
+export const DialogClose = React.forwardRef( ( { children, ...rest }, forwardedRef ) => (
+	<DialogPrimitive.Close asChild { ...rest } ref={ forwardedRef }>
+		{ children }
+	</DialogPrimitive.Close>
+) );
+
+DialogClose.propTypes = {
+	children: PropTypes.node,
+};
+
+DialogClose.displayName = 'DialogClose';
+
+export const DialogCloseDefault = React.forwardRef( ( props, forwardedRef ) => (
+	<DialogClose { ...props } ref={ forwardedRef }>
 		<button
 			aria-label="Close"
 			sx={ {
@@ -40,7 +54,7 @@ export const DialogClose = React.forwardRef( ( props, forwardedRef ) => (
 		>
 			<IoClose aria-hidden="true" />
 		</button>
-	</DialogPrimitive.Close>
+	</DialogClose>
 ) );
 
-DialogClose.displayName = 'DialogClose';
+DialogCloseDefault.displayName = 'DialogCloseDefault';

package/src/system/NewDialog/DialogClose.test.js

@@ -8,7 +8,7 @@ import { axe } from 'jest-axe';
 /**
  * Internal dependencies
  */
-import { DialogClose } from './DialogClose';
+import { DialogCloseDefault as DialogClose } from './DialogClose';
 
 // If you render any Dialog child without the `<Dialog />` parent, it will throw an error.
 const Wrapper = props => <Dialog open={ true } { ...props } />;

package/src/system/NewDialog/DialogDescription.js

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+import ScreenReaderText from '../ScreenReaderText';
 
 /**
  * Internal dependencies

package/src/system/NewDialog/DialogTitle.js

@@ -5,7 +5,7 @@
  */
 import PropTypes from 'prop-types';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+import ScreenReaderText from '../ScreenReaderText';
 
 /**
  * Internal dependencies

package/src/system/NewDialog/NewDialog.js

@@ -9,7 +9,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
  * Internal dependencies
  */
 import { DialogOverlay } from './DialogOverlay';
-import { DialogClose } from './DialogClose';
+import { DialogCloseDefault as DialogClose } from './DialogClose';
 import { DialogTitle } from './DialogTitle';
 import { DialogDescription } from './DialogDescription';
 import { contentStyles } from './DialogContent';
@@ -26,11 +26,6 @@ export const NewDialog = ( {
 	// Radix Specific Properties
 	defaultOpen = false,
 	allowPinchZoom = false,
-	onOpenAutoFocus = null,
-	onCloseAutoFocus = null,
-	onEscapeKeyDown = null,
-	onPointerDownOutside = null,
-	onInteractOutside = null,
 } ) => {
 	if ( disabled ) {
 		return;
@@ -46,11 +41,6 @@ export const NewDialog = ( {
 				<DialogPrimitive.Content
 					className="vip-dialog-component"
 					sx={ { ...contentStyles, ...extraStyles } }
-					onOpenAutoFocus={ onOpenAutoFocus }
-					onCloseAutoFocus={ onCloseAutoFocus }
-					onEscapeKeyDown={ onEscapeKeyDown }
-					onPointerDownOutside={ onPointerDownOutside }
-					onInteractOutside={ onInteractOutside }
 				>
 					<DialogClose />
 					<DialogTitle title={ title } hidden={ ! showHeading } />
@@ -76,12 +66,4 @@ NewDialog.propTypes = {
 	// https://www.radix-ui.com/docs/primitives/components/dialog#root
 	defaultOpen: PropTypes.bool,
 	allowPinchZoom: PropTypes.bool,
-
-	// Radix DialogPrimitive.Content properties
-	// https://www.radix-ui.com/docs/primitives/components/dialog#content
-	onOpenAutoFocus: PropTypes.func,
-	onCloseAutoFocus: PropTypes.func,
-	onEscapeKeyDown: PropTypes.func,
-	onPointerDownOutside: PropTypes.func,
-	onInteractOutside: PropTypes.func,
 };

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

@@ -5,8 +5,8 @@
  * Internal dependencies
  */
 import { Button, Text, Input, Label } from '../../system';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
-import { NewDialog } from './NewDialog';
+import ScreenReaderText from '../ScreenReaderText';
+import { NewDialog, Close } from '.';
 
 export default {
 	title: 'NewDialog',
@@ -112,3 +112,22 @@ export const CustomStyling = () => (
 		/>
 	</>
 );
+
+export const CustomClose = () => (
+	<>
+		<Text sx={ { fontSize: 3, mb: 3 } }>
+			This example shows how you can create a custom Close trigger to your dialog
+		</Text>
+		<NewDialog
+			{ ...defaultProps }
+			trigger={ <Button>Trigger Dialog</Button> }
+			content={
+				<div>
+					<Close>
+						<Button>Close here instead</Button>
+					</Close>
+				</div>
+			}
+		/>
+	</>
+);

package/src/system/NewDialog/index.js

@@ -2,6 +2,12 @@
  * Internal dependencies
  */
 
+import { DialogClose } from './DialogClose';
 import { NewDialog } from './NewDialog';
 
-export { NewDialog };
+const Root = NewDialog;
+const Close = DialogClose;
+
+export { NewDialog, Root, Close };
+
+export default NewDialog;

package/src/system/Notification/Notification.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import { Box, Card, Flex, Text, Button } from '../';
-import ScreenReaderText from '../ScreenReaderText/ScreenReaderText';
+import ScreenReaderText from '../ScreenReaderText';
 
 const Notification = ( { title, body, status = 'success', onClose } ) => (
 	<Card

package/src/system/ScreenReaderText/ScreenReader.test.js

@@ -6,7 +6,7 @@ import '@testing-library/jest-dom';
 /**
  * Internal dependencies
  */
-import ScreenReaderText from './ScreenReaderText';
+import ScreenReaderText from '.';
 
 describe( '<ScreenReaderText />', () => {
 	it( 'should render correctly', () => {

package/src/system/ScreenReaderText/ScreenReaderText.js

@@ -3,34 +3,36 @@
  * External dependencies
  */
 
+import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 
-export default function ScreenReaderText( props ) {
-	return (
-		<span
-			className="screen-reader-text"
-			sx={ {
-				border: 'none',
-				clip: 'rect(1px, 1px, 1px, 1px)',
-				clipPath: 'inset(50%)',
-				height: '1px',
-				margin: '-1px',
-				overflow: 'hidden',
-				padding: '0',
-				position: 'absolute',
-				width: '1px',
-				wordWrap: 'normal !important',
-			} }
-			{ ...props }
-		>
-			{ props.children }
-		</span>
-	);
-}
+export const ScreenReaderText = React.forwardRef( ( props, forwardRef ) => (
+	<span
+		className="screen-reader-text"
+		sx={ {
+			border: 'none',
+			clip: 'rect(1px, 1px, 1px, 1px)',
+			clipPath: 'inset(50%)',
+			height: '1px',
+			margin: '-1px',
+			overflow: 'hidden',
+			padding: '0',
+			position: 'absolute',
+			width: '1px',
+			wordWrap: 'normal !important',
+		} }
+		{ ...props }
+		ref={ forwardRef }
+	>
+		{ props.children }
+	</span>
+) );
+
+ScreenReaderText.displayName = 'ScreenReaderText';
 
 /**
  * propTypes

package/src/system/ScreenReaderText/index.js

@@ -5,3 +5,5 @@
 import { ScreenReaderText } from './ScreenReaderText';
 
 export { ScreenReaderText };
+
+export default ScreenReaderText;