@automattic/vip-design-system 2.13.7 → 2.13.9

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

@@ -9,5 +9,5 @@ export interface DescriptionListProps {
     sx?: ThemeUIStyleObject;
     labelWidth?: string;
 }
-export declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDivElement>>;
-export default DescriptionList;
+declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDivElement>>;
+export { DescriptionList };

package/build/system/DescriptionList/DescriptionList.js

@@ -10,7 +10,7 @@ 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 DescriptionList = /*#__PURE__*/forwardRef(function (_ref) {
   var sx = _ref.sx,
     className = _ref.className,
     list = _ref.list,
@@ -37,4 +37,4 @@ export var DescriptionList = /*#__PURE__*/forwardRef(function (_ref) {
   });
 });
 DescriptionList.displayName = 'DescriptionList';
-export default DescriptionList;
+export { DescriptionList };

package/build/system/Wizard/Wizard.js

@@ -47,7 +47,8 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
         titleVariant = _ref2.titleVariant,
         summary = _ref2.summary,
         onChange = _ref2.onChange,
-        actionLabel = _ref2.actionLabel;
+        actionLabel = _ref2.actionLabel,
+        actionIcon = _ref2.actionIcon;
       return _jsx(WizardStep, {
         active: index === activeStep,
         complete: completed.includes(index),
@@ -61,6 +62,7 @@ export var Wizard = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef) {
         onChange: onChange,
         shouldFocusTitle: titleAutofocus && didMount,
         actionLabel: actionLabel,
+        actionIcon: actionIcon,
         showStepText: showStepText,
         children: children
       }, index);

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

@@ -4,6 +4,7 @@
  * External dependencies
  */
 import React from 'react';
+import { BsPencil } from 'react-icons/bs';
 
 /**
  * Internal dependencies
@@ -94,6 +95,7 @@ export var WithTitleAutoFocus = function WithTitleAutoFocus() {
       return setActiveStep(1);
     },
     actionLabel: 'Edit',
+    actionIcon: _jsx(BsPencil, {}),
     children: _jsxs(Box, {
       children: [_jsx(Label, {
         children: "DNS"

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

@@ -23,5 +23,6 @@ export interface WizardStepProps {
     shouldFocusTitle?: boolean;
     actionLabel?: string;
     showStepText?: boolean;
+    actionIcon?: React.ReactNode;
 }
 export declare const WizardStep: React.ForwardRefExoticComponent<WizardStepProps & React.RefAttributes<HTMLDivElement>>;

package/build/system/Wizard/WizardStep.js

@@ -9,7 +9,7 @@ import { BsCircleFill, BsFillCheckCircleFill } from 'react-icons/bs';
 /**
  * Internal dependencies
  */
-import { Card, Heading, Text, Flex, Table, TableRow, TableCell, Button } from '..';
+import { Card, Heading, Text, Flex, Table, TableRow, TableCell, Button, Box } from '..';
 import { ScreenReaderText } from '../ScreenReaderText';
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
@@ -32,7 +32,8 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
     _ref$actionLabel = _ref.actionLabel,
     actionLabel = _ref$actionLabel === void 0 ? 'Change' : _ref$actionLabel,
     _ref$showStepText = _ref.showStepText,
-    showStepText = _ref$showStepText === void 0 ? true : _ref$showStepText;
+    showStepText = _ref$showStepText === void 0 ? true : _ref$showStepText,
+    actionIcon = _ref.actionIcon;
   var titleRef = React.useRef(null);
   var status = 'inactive';
   var statusText = 'Step not completed';
@@ -136,6 +137,11 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
         },
         children: [actionLabel, ' ', _jsx(ScreenReaderText, {
           children: "the " + (title == null ? void 0 : title.toString()) + " step"
+        }), Boolean(actionIcon) && _jsx(Box, {
+          sx: {
+            ml: 4
+          },
+          children: actionIcon
         })]
       })]
     }), !active && (complete || skipped) && summary && summary.length > 0 && _jsx(Table, {

package/build/system/index.d.ts

@@ -20,6 +20,7 @@ import { DialogMenuItem } from './Dialog';
 import { DialogDivider } from './Dialog';
 import { DialogContent } from './Dialog';
 import { DialogTrigger } from './Dialog';
+import { DescriptionList } from './DescriptionList';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { MobileMenu } from './MobileMenu/MobileMenu';
 import { MobileMenuTrigger } from './MobileMenu/MobileMenu';
@@ -63,4 +64,4 @@ import { Validation } from './Form';
 import { Wizard } from './Wizard';
 import { WizardStep } from './Wizard';
 import theme from './theme';
-export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, ScreenReaderText, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, RadioGroupChip, Textarea, Progress, Text, Tabs, Nav, NavItem, Skeleton, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Snackbar, Validation, Wizard, WizardStep, theme };
+export { Accordion, Avatar, Badge, Box, Breadcrumbs, Button, ButtonSubmit, ButtonVariant, Card, Checkbox, Code, Dialog, NewDialog, Form, Drawer, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, DescriptionList, ConfirmationDialog, MobileMenu, MobileMenuTrigger, MobileMenuWrapper, NewConfirmationDialog, Grid, FilterDropdown, Flex, Notice, OptionRow, Heading, Hr, Input, Label, ScreenReaderText, Spinner, Table, TableRow, TableCell, Tooltip, Link, LinkExternal, Radio, RadioBoxGroup, RadioGroupChip, Textarea, Progress, Text, Tabs, Nav, NavItem, Skeleton, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Toolbar, Snackbar, Validation, Wizard, WizardStep, theme };

package/build/system/index.js

@@ -10,6 +10,7 @@ import { Button, ButtonSubmit, ButtonVariant } from './Button';
 import { Card } from './Card';
 import { Code } from './Code';
 import { ConfirmationDialog } from './ConfirmationDialog';
+import { DescriptionList } from './DescriptionList';
 import {
 	Dialog,
 	DialogButton,
@@ -84,6 +85,7 @@ export {
 	DialogDivider,
 	DialogContent,
 	DialogTrigger,
+	DescriptionList,
 	ConfirmationDialog,
 	MobileMenu,
 	MobileMenuTrigger,

package/package.json

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

package/src/system/DescriptionList/DescriptionList.tsx

@@ -19,7 +19,7 @@ export interface DescriptionListProps {
 	labelWidth?: string;
 }
 
-export const DescriptionList = forwardRef< HTMLDivElement, DescriptionListProps >(
+const DescriptionList = forwardRef< HTMLDivElement, DescriptionListProps >(
 	( { sx, className, list, labelWidth = '100px' }: DescriptionListProps ) => (
 		<>
 			{ list.map( item => (
@@ -45,4 +45,4 @@ export const DescriptionList = forwardRef< HTMLDivElement, DescriptionListProps
 
 DescriptionList.displayName = 'DescriptionList';
 
-export default DescriptionList;
+export { DescriptionList };

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

@@ -4,6 +4,7 @@
  * External dependencies
  */
 import React from 'react';
+import { BsPencil } from 'react-icons/bs';
 
 /**
  * Internal dependencies
@@ -81,6 +82,7 @@ export const WithTitleAutoFocus = () => {
 			titleVariant: 'h2',
 			onChange: () => setActiveStep( 1 ),
 			actionLabel: 'Edit',
+			actionIcon: <BsPencil />,
 			children: (
 				<Box>
 					<Label>DNS</Label>

package/src/system/Wizard/Wizard.tsx

@@ -47,7 +47,7 @@ export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
 			<Box className={ classNames( 'vip-wizard-component', className ) } ref={ forwardRef }>
 				{ steps.map(
 					(
-						{ title, subTitle, children, titleVariant, summary, onChange, actionLabel },
+						{ title, subTitle, children, titleVariant, summary, onChange, actionLabel, actionIcon },
 						index
 					) => (
 						<WizardStep
@@ -64,6 +64,7 @@ export const Wizard = React.forwardRef< HTMLDivElement, WizardProps >(
 							onChange={ onChange }
 							shouldFocusTitle={ titleAutofocus && didMount }
 							actionLabel={ actionLabel }
+							actionIcon={ actionIcon }
 							showStepText={ showStepText }
 						>
 							{ children }

package/src/system/Wizard/WizardStep.tsx

@@ -9,7 +9,7 @@ import { BsCircleFill, BsFillCheckCircleFill } from 'react-icons/bs';
 /**
  * Internal dependencies
  */
-import { Card, Heading, Text, Flex, Table, TableRow, TableCell, Button } from '..';
+import { Card, Heading, Text, Flex, Table, TableRow, TableCell, Button, Box } from '..';
 import { HeadingProps } from '../Heading/Heading';
 import { ScreenReaderText } from '../ScreenReaderText';
 
@@ -32,6 +32,7 @@ export interface WizardStepProps {
 	shouldFocusTitle?: boolean;
 	actionLabel?: string;
 	showStepText?: boolean;
+	actionIcon?: React.ReactNode;
 }
 
 export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
@@ -51,6 +52,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 			onChange,
 			actionLabel = 'Change',
 			showStepText = true,
+			actionIcon,
 		},
 		forwardRef
 	) => {
@@ -155,6 +157,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 						>
 							{ actionLabel }{ ' ' }
 							<ScreenReaderText>{ `the ${ title?.toString() } step` }</ScreenReaderText>
+							{ Boolean( actionIcon ) && <Box sx={ { ml: 4 } }>{ actionIcon }</Box> }
 						</Button>
 					) }
 				</Flex>

package/src/system/index.js

@@ -10,6 +10,7 @@ import { Button, ButtonSubmit, ButtonVariant } from './Button';
 import { Card } from './Card';
 import { Code } from './Code';
 import { ConfirmationDialog } from './ConfirmationDialog';
+import { DescriptionList } from './DescriptionList';
 import {
 	Dialog,
 	DialogButton,
@@ -84,6 +85,7 @@ export {
 	DialogDivider,
 	DialogContent,
 	DialogTrigger,
+	DescriptionList,
 	ConfirmationDialog,
 	MobileMenu,
 	MobileMenuTrigger,