@automattic/vip-design-system 2.8.0 → 2.8.2

package/build/system/Box/Box.js

@@ -11,9 +11,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  * External dependencies
  */
 var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _jsxRuntime.jsx)(_themeUi.Box, _extends({}, props, {
+  return (0, _jsxRuntime.jsx)(_themeUi.Box, _extends({
     className: (0, _classnames["default"])('vip-box-component', props.className),
     ref: ref
-  }));
+  }, props));
 });
 Box.displayName = 'Box';

package/build/system/Card/Card.d.ts

@@ -1,10 +1,6 @@
 /** @jsxImportSource theme-ui */
 /// <reference types="react" />
-/**
- * External dependencies
- */
-import { Argument } from 'classnames';
-import { BoxProps } from 'theme-ui';
+import { BoxProps, ThemeUIStyleObject } from 'theme-ui';
 export declare enum CardVariant {
     'primary' = 0,
     'secondary' = 1,
@@ -13,10 +9,10 @@ export declare enum CardVariant {
 }
 export interface CardProps {
     variant?: keyof typeof CardVariant;
-    sx?: BoxProps['sx'];
-    className?: Argument;
     title?: string;
     children?: React.ReactNode;
     renderHeader?: (title?: string) => React.ReactNode;
+    bodyStyles?: ThemeUIStyleObject;
+    headerStyles?: ThemeUIStyleObject;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & BoxProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Card/Card.js

@@ -2,11 +2,10 @@
 
 exports.__esModule = true;
 exports.CardVariant = exports.Card = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["variant", "title", "renderHeader", "sx", "className", "children"];
+var _excluded = ["variant", "title", "renderHeader", "bodyStyles", "headerStyles", "children"];
 /** @jsxImportSource theme-ui */
 /**
  * External dependencies
@@ -14,7 +13,6 @@ var _excluded = ["variant", "title", "renderHeader", "sx", "className", "childre
 /**
  * Internal dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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 CardVariant = exports.CardVariant = /*#__PURE__*/function (CardVariant) {
@@ -29,29 +27,28 @@ var Card = exports.Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
     title = _ref.title,
     renderHeader = _ref.renderHeader,
-    _ref$sx = _ref.sx,
-    sx = _ref$sx === void 0 ? {} : _ref$sx,
-    className = _ref.className,
+    bodyStyles = _ref.bodyStyles,
+    headerStyles = _ref.headerStyles,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_.Box, _extends({
     ref: ref,
     sx: {
       variant: "cards." + variant
     },
-    className: (0, _classnames["default"])('vip-card-component', className)
-  }, props, {
+    className: "vip-card-component"
+  }, rest, {
     children: [renderHeader ? renderHeader(title) : '', title && !renderHeader && (0, _jsxRuntime.jsx)(_.Box, {
-      className: (0, _classnames["default"])('vip-card-header-component', className),
-      sx: {
+      className: "vip-card-header-component",
+      sx: _extends({
         variant: "cards." + variant + ".header"
-      },
+      }, headerStyles),
       children: title
     }), (0, _jsxRuntime.jsx)(_.Box, {
-      className: (0, _classnames["default"])('vip-card-body-component', className),
+      className: "vip-card-body-component",
       sx: _extends({
         variant: "cards." + variant + ".children"
-      }, sx),
+      }, bodyStyles),
       children: children
     })]
   }));

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

@@ -11,3 +11,4 @@ export declare const WithCustomHeader: () => import("react").JSX.Element;
 export declare const DefaultSecondary: () => import("react").JSX.Element;
 export declare const WithHeaderSecondary: () => import("react").JSX.Element;
 export declare const DefaultIndent: () => import("react").JSX.Element;
+export declare const StyledBody: () => import("react").JSX.Element;

package/build/system/Card/Card.stories.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.WithHeaderSecondary = exports.WithHeader = exports.WithCustomHeader = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
+exports["default"] = exports.WithHeaderSecondary = exports.WithHeader = exports.WithCustomHeader = exports.StyledBody = exports.DefaultSecondary = exports.DefaultIndent = exports.Default = void 0;
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /** @jsxImportSource theme-ui */
@@ -58,4 +58,15 @@ var DefaultIndent = exports.DefaultIndent = function DefaultIndent() {
     variant: "indent",
     children: "Hello"
   });
+};
+var StyledBody = exports.StyledBody = function StyledBody() {
+  return (0, _jsxRuntime.jsx)(_.Card, {
+    variant: "indent",
+    title: "Hello world",
+    bodyStyles: {
+      p: 6,
+      backgroundColor: 'layer.2'
+    },
+    children: "Hello styled body."
+  });
 };

package/build/system/Wizard/WizardStep.js

@@ -83,6 +83,7 @@ var WizardStep = exports.WizardStep = /*#__PURE__*/_react["default"].forwardRef(
     },
     "data-step": order,
     "data-active": active || undefined,
+    className: "wizard-step-" + status,
     ref: forwardRef,
     children: [(0, _jsxRuntime.jsxs)(_.Flex, {
       sx: {

package/build/system/theme/index.js

@@ -258,15 +258,15 @@ export default {
 				borderTopLeftRadius: 2,
 				borderTopRightRadius: 2,
 				py: 3,
-				px: 5,
+				px: 4,
 				gap: 2,
 				fontWeight: 'bold',
 				display: 'flex',
 				minHeight: 46,
 			},
 			children: {
-				padding: 5,
-				gap: 6,
+				padding: 4,
+				gap: 3,
 			},
 		},
 		secondary: {

package/package.json

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

package/src/system/Box/Box.tsx

@@ -8,9 +8,9 @@ import { Box as ThemeBox, BoxProps as ThemeBoxProps } from 'theme-ui';
 export const Box = forwardRef< HTMLElement, ThemeBoxProps >(
 	( props: ThemeBoxProps, ref: Ref< HTMLElement > ) => (
 		<ThemeBox
-			{ ...props }
 			className={ classNames( 'vip-box-component', props.className ) }
 			ref={ ref }
+			{ ...props }
 		/>
 	)
 );

package/src/system/Card/Card.stories.tsx

@@ -37,3 +37,8 @@ export const WithHeaderSecondary = () => (
 );
 
 export const DefaultIndent = () => <Card variant="indent">Hello</Card>;
+export const StyledBody = () => (
+	<Card variant="indent" title="Hello world" bodyStyles={ { p: 6, backgroundColor: 'layer.2' } }>
+		Hello styled body.
+	</Card>
+);

package/src/system/Card/Card.tsx

@@ -3,9 +3,8 @@
 /**
  * External dependencies
  */
-import classNames, { Argument } from 'classnames';
 import { forwardRef, Ref } from 'react';
-import { BoxProps } from 'theme-ui';
+import { BoxProps, ThemeUIStyleObject } from 'theme-ui';
 
 /**
  * Internal dependencies
@@ -21,18 +20,26 @@ export enum CardVariant {
 
 export interface CardProps {
 	variant?: keyof typeof CardVariant;
-	sx?: BoxProps[ 'sx' ];
-	className?: Argument;
 	title?: string;
 	children?: React.ReactNode;
 	renderHeader?: ( title?: string ) => React.ReactNode;
+	bodyStyles?: ThemeUIStyleObject;
+	headerStyles?: ThemeUIStyleObject;
 }
 
 type CardBoxProps = CardProps & BoxProps;
 
 export const Card = forwardRef< HTMLElement, CardBoxProps >(
 	(
-		{ variant = 'primary', title, renderHeader, sx = {}, className, children, ...props }: CardProps,
+		{
+			variant = 'primary',
+			title,
+			renderHeader,
+			bodyStyles,
+			headerStyles,
+			children,
+			...rest
+		}: CardProps,
 		ref: Ref< HTMLElement >
 	) => {
 		return (
@@ -41,15 +48,16 @@ export const Card = forwardRef< HTMLElement, CardBoxProps >(
 				sx={ {
 					variant: `cards.${ variant }`,
 				} }
-				className={ classNames( 'vip-card-component', className ) }
-				{ ...props }
+				className="vip-card-component"
+				{ ...rest }
 			>
 				{ renderHeader ? renderHeader( title ) : '' }
 				{ title && ! renderHeader && (
 					<Box
-						className={ classNames( 'vip-card-header-component', className ) }
+						className="vip-card-header-component"
 						sx={ {
 							variant: `cards.${ variant }.header`,
+							...headerStyles,
 						} }
 					>
 						{ title }
@@ -57,10 +65,10 @@ export const Card = forwardRef< HTMLElement, CardBoxProps >(
 				) }
 
 				<Box
-					className={ classNames( 'vip-card-body-component', className ) }
+					className="vip-card-body-component"
 					sx={ {
 						variant: `cards.${ variant }.children`,
-						...sx,
+						...bodyStyles,
 					} }
 				>
 					{ children }

package/src/system/Wizard/WizardStep.tsx

@@ -101,6 +101,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 				} }
 				data-step={ order }
 				data-active={ active || undefined }
+				className={ `wizard-step-${ status }` }
 				ref={ forwardRef }
 			>
 				<Flex sx={ { alignItems: 'flex-end', mb: 2 } }>

package/src/system/theme/index.js

@@ -258,15 +258,15 @@ export default {
 				borderTopLeftRadius: 2,
 				borderTopRightRadius: 2,
 				py: 3,
-				px: 5,
+				px: 4,
 				gap: 2,
 				fontWeight: 'bold',
 				display: 'flex',
 				minHeight: 46,
 			},
 			children: {
-				padding: 5,
-				gap: 6,
+				padding: 4,
+				gap: 3,
 			},
 		},
 		secondary: {