@automattic/vip-design-system 2.8.0 → 2.8.1

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,9 +1,5 @@
 /** @jsxImportSource theme-ui */
 /// <reference types="react" />
-/**
- * External dependencies
- */
-import { Argument } from 'classnames';
 import { BoxProps } from 'theme-ui';
 export declare enum CardVariant {
     'primary' = 0,
@@ -13,8 +9,6 @@ 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;

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", "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,26 @@ 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,
     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),
+      className: "vip-card-header-component",
       sx: {
         variant: "cards." + variant + ".header"
       },
       children: title
     }), (0, _jsxRuntime.jsx)(_.Box, {
-      className: (0, _classnames["default"])('vip-card-body-component', className),
-      sx: _extends({
+      className: "vip-card-body-component",
+      sx: {
         variant: "cards." + variant + ".children"
-      }, sx),
+      },
       children: children
     })]
   }));

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "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.tsx

@@ -3,7 +3,6 @@
 /**
  * External dependencies
  */
-import classNames, { Argument } from 'classnames';
 import { forwardRef, Ref } from 'react';
 import { BoxProps } from 'theme-ui';
 
@@ -21,8 +20,6 @@ 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;
@@ -32,7 +29,7 @@ type CardBoxProps = CardProps & BoxProps;
 
 export const Card = forwardRef< HTMLElement, CardBoxProps >(
 	(
-		{ variant = 'primary', title, renderHeader, sx = {}, className, children, ...props }: CardProps,
+		{ variant = 'primary', title, renderHeader, children, ...rest }: CardProps,
 		ref: Ref< HTMLElement >
 	) => {
 		return (
@@ -41,13 +38,13 @@ 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`,
 						} }
@@ -57,10 +54,9 @@ 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,
 					} }
 				>
 					{ 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 } }>