@automattic/vip-design-system 2.13.6 → 2.13.7

package/build/system/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ThemeUIStyleObject } from 'theme-ui';
+export interface DescriptionListProps {
+    list: {
+        label: string;
+        value: string;
+    }[];
+    className?: string;
+    sx?: ThemeUIStyleObject;
+    labelWidth?: string;
+}
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DescriptionList;

package/build/system/DescriptionList/DescriptionList.js

@@ -0,0 +1,40 @@
+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); }
+/**
+ * External dependencies
+ */
+import { forwardRef } from 'react';
+/**
+ * Internal dependencies
+ */
+import { Grid } from '../Grid';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { Fragment as _Fragment } from "theme-ui/jsx-runtime";
+export var DescriptionList = /*#__PURE__*/forwardRef(function (_ref) {
+  var sx = _ref.sx,
+    className = _ref.className,
+    list = _ref.list,
+    _ref$labelWidth = _ref.labelWidth,
+    labelWidth = _ref$labelWidth === void 0 ? '100px' : _ref$labelWidth;
+  return _jsx(_Fragment, {
+    children: list.map(function (item) {
+      return _jsxs(Grid, {
+        className: className,
+        as: "dl",
+        columns: [labelWidth + " auto"],
+        sx: _extends({
+          fontSize: 2,
+          gap: 2,
+          alignItems: 'flex-start'
+        }, sx),
+        children: [_jsx("dt", {
+          children: item.label
+        }), _jsx("dd", {
+          children: item.value
+        })]
+      }, item.label);
+    })
+  });
+});
+DescriptionList.displayName = 'DescriptionList';
+export default DescriptionList;

package/build/system/DescriptionList/DetailsList.stories.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+/**
+ * Internal dependencies
+ */
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./DescriptionList").DescriptionListProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;

package/build/system/DescriptionList/DetailsList.stories.js

@@ -0,0 +1,24 @@
+/** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
+
+import { DescriptionList } from './DescriptionList';
+
+/**
+ * Internal dependencies
+ */
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+export default {
+  title: 'DescriptionList',
+  component: DescriptionList
+};
+export var Default = function Default() {
+  return _jsx(DescriptionList, {
+    list: [{
+      label: 'Short Label',
+      value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    }, {
+      label: 'Long label to test label width',
+      value: 'Value'
+    }]
+  });
+};

package/build/system/DescriptionList/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { DescriptionList } from './DescriptionList';

package/build/system/DescriptionList/index.js

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { DescriptionList } from './DescriptionList';

package/build/system/Wizard/Wizard.d.ts

@@ -11,5 +11,6 @@ export interface WizardProps {
     skipped?: number[];
     className?: string;
     titleAutofocus?: boolean;
+    showStepText?: boolean;
 }
 export declare const Wizard: React.ForwardRefExoticComponent<WizardProps & React.RefAttributes<HTMLDivElement>>;

package/build/system/Wizard/Wizard.js

@@ -22,7 +22,9 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$titleAutofocus = _ref.titleAutofocus,
-    titleAutofocus = _ref$titleAutofocus === void 0 ? false : _ref$titleAutofocus;
+    titleAutofocus = _ref$titleAutofocus === void 0 ? false : _ref$titleAutofocus,
+    _ref$showStepText = _ref.showStepText,
+    showStepText = _ref$showStepText === void 0 ? true : _ref$showStepText;
   var _useState = useState(false),
     didMount = _useState[0],
     setDidMount = _useState[1];
@@ -59,6 +61,7 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
         onChange: onChange,
         shouldFocusTitle: titleAutofocus && didMount,
         actionLabel: actionLabel,
+        showStepText: showStepText,
         children: children
       }, index);
     })

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

@@ -10,3 +10,4 @@ declare const _default: {
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const WithTitleAutoFocus: () => React.JSX.Element;
+export declare const HideStepText: () => React.JSX.Element;

package/build/system/Wizard/Wizard.stories.js

@@ -9,7 +9,7 @@ import React from 'react';
  * Internal dependencies
  */
 
-import { Wizard, Box, Label, Input, Button, Checkbox, Flex } from '..';
+import { Wizard, Box, Label, Input, Button, Checkbox, Flex, Text } from '..';
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
 export default {
@@ -164,4 +164,26 @@ export var WithTitleAutoFocus = function WithTitleAutoFocus() {
       })
     })]
   });
+};
+export var HideStepText = function HideStepText() {
+  var steps = [{
+    title: 'Included Logs',
+    titleVariant: 'h2',
+    subTitle: '',
+    children: _jsx(Text, {
+      children: "Error Logs"
+    })
+  }];
+  return _jsx(React.Fragment, {
+    children: _jsx(Box, {
+      mt: 4,
+      children: _jsx(Wizard, {
+        showStepText: false,
+        activeStep: 0,
+        steps: steps,
+        completed: [0],
+        className: "vip-wizard-xyz"
+      })
+    })
+  });
 };

package/build/system/Wizard/WizardStep.d.ts

@@ -22,5 +22,6 @@ export interface WizardStepProps {
     summary?: WizardStepSummary[];
     shouldFocusTitle?: boolean;
     actionLabel?: string;
+    showStepText?: boolean;
 }
 export declare const WizardStep: React.ForwardRefExoticComponent<WizardStepProps & React.RefAttributes<HTMLDivElement>>;

package/build/system/Wizard/WizardStep.js

@@ -30,11 +30,14 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
     summary = _ref.summary,
     onChange = _ref.onChange,
     _ref$actionLabel = _ref.actionLabel,
-    actionLabel = _ref$actionLabel === void 0 ? 'Change' : _ref$actionLabel;
+    actionLabel = _ref$actionLabel === void 0 ? 'Change' : _ref$actionLabel,
+    _ref$showStepText = _ref.showStepText,
+    showStepText = _ref$showStepText === void 0 ? true : _ref$showStepText;
   var titleRef = React.useRef(null);
   var status = 'inactive';
   var statusText = 'Step not completed';
-  if (active) {
+  if (active && !(complete && totalSteps === 1)) {
+    // if the step is active but is an unique step, we don't want to show as active status
     status = 'active';
     statusText = ''; // not adding the status text for active step since it's announced by aria-current
   } else if (complete) {
@@ -98,7 +101,7 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
         ref: titleRef,
         tabIndex: shouldFocusTitle ? -1 : undefined,
         "aria-current": active ? 'step' : undefined,
-        children: [_jsx(Text, {
+        children: [showStepText && _jsx(Text, {
           sx: {
             color: 'wizard.step.number.color'
           },

package/build/system/theme/generated/valet-theme-dark.json

@@ -606,21 +606,21 @@
   "slider": {
     "background": {
       "default": {
-        "value": "#d7d4d3",
+        "value": "#514e4d",
         "type": "color"
       },
       "disabled": {
-        "value": "#d7d4d3",
+        "value": "#514e4d",
         "type": "color"
       }
     },
     "handle": {
       "default": {
-        "value": "#13191e",
+        "value": "#d7d4d3",
         "type": "color"
       },
       "disabled": {
-        "value": "#9b9796",
+        "value": "#827f7e",
         "type": "color"
       }
     }

package/package.json

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

package/src/system/DescriptionList/DescriptionList.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { forwardRef } from 'react';
+import { ThemeUIStyleObject } from 'theme-ui';
+
+/**
+ * Internal dependencies
+ */
+import { Grid } from '../Grid';
+
+export interface DescriptionListProps {
+	list: {
+		label: string;
+		value: string;
+	}[];
+	className?: string;
+	sx?: ThemeUIStyleObject;
+	labelWidth?: string;
+}
+
+export const DescriptionList = forwardRef< HTMLDivElement, DescriptionListProps >(
+	( { sx, className, list, labelWidth = '100px' }: DescriptionListProps ) => (
+		<>
+			{ list.map( item => (
+				<Grid
+					className={ className }
+					as="dl"
+					key={ item.label }
+					columns={ [ `${ labelWidth } auto` ] }
+					sx={ {
+						fontSize: 2,
+						gap: 2,
+						alignItems: 'flex-start',
+						...sx,
+					} }
+				>
+					<dt>{ item.label }</dt>
+					<dd>{ item.value }</dd>
+				</Grid>
+			) ) }
+		</>
+	)
+);
+
+DescriptionList.displayName = 'DescriptionList';
+
+export default DescriptionList;

package/src/system/DescriptionList/DetailsList.stories.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource theme-ui */
+// we'll need jsxImportSource for the sx prop when used with html elements
+
+import { DescriptionList } from './DescriptionList';
+
+/**
+ * Internal dependencies
+ */
+
+export default {
+	title: 'DescriptionList',
+	component: DescriptionList,
+};
+
+export const Default = () => (
+	<DescriptionList
+		list={ [
+			{
+				label: 'Short Label',
+				value:
+					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+			},
+			{
+				label: 'Long label to test label width',
+				value: 'Value',
+			},
+		] }
+	/>
+);

package/src/system/DescriptionList/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { DescriptionList } from './DescriptionList';

package/src/system/Wizard/Wizard.stories.tsx

@@ -9,7 +9,7 @@ import React from 'react';
  * Internal dependencies
  */
 import { WizardStepProps } from './WizardStep';
-import { Wizard, Box, Label, Input, Button, Checkbox, Flex } from '..';
+import { Wizard, Box, Label, Input, Button, Checkbox, Flex, Text } from '..';
 
 export default {
 	title: 'Navigation/Wizard',
@@ -139,3 +139,28 @@ export const WithTitleAutoFocus = () => {
 		</React.Fragment>
 	);
 };
+
+export const HideStepText = () => {
+	const steps: WizardStepProps[] = [
+		{
+			title: 'Included Logs',
+			titleVariant: 'h2',
+			subTitle: '',
+			children: <Text>Error Logs</Text>,
+		},
+	];
+
+	return (
+		<React.Fragment>
+			<Box mt={ 4 }>
+				<Wizard
+					showStepText={ false }
+					activeStep={ 0 }
+					steps={ steps }
+					completed={ [ 0 ] }
+					className="vip-wizard-xyz"
+				/>
+			</Box>
+		</React.Fragment>
+	);
+};

package/src/system/Wizard/Wizard.tsx

@@ -19,10 +19,19 @@ export interface WizardProps {
 	skipped?: number[];
 	className?: string;
 	titleAutofocus?: boolean;
+	showStepText?: boolean;
 }
 export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
 	(
-		{ steps, activeStep, completed = [], skipped = [], className = null, titleAutofocus = false },
+		{
+			steps,
+			activeStep,
+			completed = [],
+			skipped = [],
+			className = null,
+			titleAutofocus = false,
+			showStepText = true,
+		},
 		forwardRef
 	) => {
 		const [ didMount, setDidMount ] = useState( false );
@@ -55,6 +64,7 @@ export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
 							onChange={ onChange }
 							shouldFocusTitle={ titleAutofocus && didMount }
 							actionLabel={ actionLabel }
+							showStepText={ showStepText }
 						>
 							{ children }
 						</WizardStep>

package/src/system/Wizard/WizardStep.tsx

@@ -31,6 +31,7 @@ export interface WizardStepProps {
 	summary?: WizardStepSummary[];
 	shouldFocusTitle?: boolean;
 	actionLabel?: string;
+	showStepText?: boolean;
 }
 
 export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
@@ -49,13 +50,15 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 			summary,
 			onChange,
 			actionLabel = 'Change',
+			showStepText = true,
 		},
 		forwardRef
 	) => {
 		const titleRef = React.useRef< HTMLHeadingElement >( null );
 		let status = 'inactive';
 		let statusText = 'Step not completed';
-		if ( active ) {
+		if ( active && ! ( complete && totalSteps === 1 ) ) {
+			// if the step is active but is an unique step, we don't want to show as active status
 			status = 'active';
 			statusText = ''; // not adding the status text for active step since it's announced by aria-current
 		} else if ( complete ) {
@@ -120,9 +123,11 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 						tabIndex={ shouldFocusTitle ? -1 : undefined }
 						aria-current={ active ? 'step' : undefined }
 					>
-						<Text sx={ { color: 'wizard.step.number.color' } } aria-hidden="true">
-							{ stepText }
-						</Text>
+						{ showStepText && (
+							<Text sx={ { color: 'wizard.step.number.color' } } aria-hidden="true">
+								{ stepText }
+							</Text>
+						) }
 
 						<Flex as="span" sx={ { mt: 3, alignItems: 'center' } } aria-hidden="true">
 							{ complete ? (

package/src/system/theme/generated/valet-theme-dark.json

@@ -606,21 +606,21 @@
   "slider": {
     "background": {
       "default": {
-        "value": "#d7d4d3",
+        "value": "#514e4d",
         "type": "color"
       },
       "disabled": {
-        "value": "#d7d4d3",
+        "value": "#514e4d",
         "type": "color"
       }
     },
     "handle": {
       "default": {
-        "value": "#13191e",
+        "value": "#d7d4d3",
         "type": "color"
       },
       "disabled": {
-        "value": "#9b9796",
+        "value": "#827f7e",
         "type": "color"
       }
     }

package/tokens/valet-core/wpvip-product-dark.json

@@ -606,21 +606,21 @@
   "slider": {
     "background": {
       "default": {
-        "value": "{color.gray.15}",
+        "value": "{color.gray.70}",
         "type": "color"
       },
       "disabled": {
-        "value": "{color.gray.15}",
+        "value": "{color.gray.70}",
         "type": "color"
       }
     },
     "handle": {
       "default": {
-        "value": "{color.black}",
+        "value": "{color.gray.15}",
         "type": "color"
       },
       "disabled": {
-        "value": "{color.gray.40}",
+        "value": "{color.gray.50}",
         "type": "color"
       }
     }