@automattic/vip-design-system 2.13.12 → 2.14.1

package/build/system/Button/Button.d.ts

@@ -18,6 +18,7 @@ export interface ButtonProps extends ThemeButtonProps {
     full?: boolean;
     grow?: boolean;
     variant?: keyof typeof ButtonVariant;
+    danger?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/build/system/Button/Button.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "disabled", "preferAriaDisabled", "onClick", "sx", "full", "grow"];
+var _excluded = ["className", "disabled", "preferAriaDisabled", "onClick", "sx", "full", "grow", "variant", "danger"];
 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; }
 import classNames from 'classnames';
@@ -24,12 +24,17 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     sx = _ref.sx,
     full = _ref.full,
     grow = _ref.grow,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$danger = _ref.danger,
+    danger = _ref$danger === void 0 ? variant === 'danger' : _ref$danger,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var disabledAttributes = disabled && preferAriaDisabled === true ? {
     'aria-disabled': true
   } : {
     disabled: disabled
   };
+  var disabledStyles = {};
   var handleOnClick = useCallback(function (event) {
     if (preferAriaDisabled && disabled) {
       return event.preventDefault();
@@ -38,19 +43,23 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return onClick(event);
     }
   }, [disabled, onClick]);
+  if (disabled && !danger && variant !== 'text' && variant !== 'ghost' && variant !== 'tertiary') {
+    disabledStyles = {
+      opacity: 0.7,
+      backgroundColor: 'input.border.disabled',
+      color: 'texts.secondary'
+    };
+  }
   return _jsx(ThemeButton, _extends({
     sx: _extends({
       '&:focus': 'none',
       '&:focus-visible': function focusVisible(theme) {
         return theme.outline;
       },
-      '&[disabled], &[aria-disabled="true"]': {
-        opacity: 0.7,
-        backgroundColor: 'input.border.disabled',
-        color: 'texts.secondary',
+      '&[disabled], &[aria-disabled="true"]': _extends({
         cursor: 'not-allowed',
         pointerEvents: 'none'
-      },
+      }, disabledStyles),
       '&:hover, &:focus': {
         textDecoration: 'none'
       },
@@ -58,8 +67,11 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       width: Boolean(full) === true ? '100%' : undefined
     }, sx)
   }, rest, disabledAttributes, {
+    variant: variant === 'danger' ? 'primary' : variant // fallback for danger variant used before the prop was added
+    ,
     onClick: handleOnClick,
     className: classNames('vip-button-component', className),
+    "data-danger": danger,
     ref: ref
   }));
 });

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

@@ -1,15 +1,12 @@
 /** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-import React from 'react';
+/// <reference types="react" />
 /**
  * Internal dependencies
  */
 import { ButtonVariant } from '..';
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("./Button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
     argTypes: {
         children: {};
         disabled: {
@@ -17,6 +14,11 @@ declare const _default: {
                 type: string;
             };
         };
+        danger: {
+            control: {
+                type: string;
+            };
+        };
         variant: {
             type: string;
             options: (string | ButtonVariant)[];
@@ -31,5 +33,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: (args: any) => React.JSX.Element;
-export declare const PreferAriaDisabled: (args: any) => React.JSX.Element;
+export declare const Default: (args: any) => import("react").JSX.Element;
+export declare const PreferAriaDisabled: (args: any) => import("react").JSX.Element;

package/build/system/Button/Button.stories.js

@@ -4,14 +4,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /**
  * External dependencies
  */
-import React from 'react';
 import { BiCalendarHeart } from 'react-icons/bi';
 
 /**
  * Internal dependencies
  */
-import { Button, ButtonVariant } from '..';
-import { Flex } from '../Flex/Flex';
+import { Button, ButtonVariant, Table, TableCell, TableRow } from '..';
 import ScreenReaderText from '../ScreenReaderText';
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
@@ -25,6 +23,11 @@ export default {
         type: 'boolean'
       }
     },
+    danger: {
+      control: {
+        type: 'boolean'
+      }
+    },
     variant: {
       type: 'select',
       options: Object.values(ButtonVariant)
@@ -40,78 +43,127 @@ export default {
 };
 var Template = function Template(args) {
   return _jsxs("div", {
-    children: [_jsxs(Flex, {
-      sx: {
-        gap: 2,
-        flexDirection: 'row'
-      },
-      children: [_jsx(Button, _extends({}, args, {
-        children: "Primary"
-      })), _jsx(Button, _extends({
-        variant: "secondary",
-        sx: {
-          ml: 2
-        }
-      }, args, {
-        children: "Secondary"
-      })), _jsx(Button, _extends({
-        variant: "tertiary",
-        sx: {
-          ml: 2
-        }
-      }, args, {
-        children: "Tertiary"
-      })), _jsx(Button, _extends({
-        variant: "ghost",
-        sx: {
-          ml: 2
-        }
-      }, args, {
-        children: "Ghost"
-      })), _jsx(Button, _extends({
-        variant: "display",
-        sx: {
-          ml: 2
-        }
-      }, args, {
-        children: "Display"
-      })), _jsx(Button, _extends({
-        variant: "danger",
-        sx: {
-          ml: 2
-        }
-      }, args, {
-        children: "Danger"
-      })), _jsx(Button, _extends({
-        variant: "primary",
-        disabled: true,
-        sx: {
-          ml: 2
-        }
-      }, args, {
-        children: "Disabled"
-      })), _jsx(Button, _extends({
-        variant: "text",
-        sx: {
-          ml: 2
-        },
-        as: "a",
-        href: "https://google/com"
-      }, args, {
-        children: "Button link"
-      })), _jsxs(Button, _extends({
-        variant: "icon",
-        sx: {
-          ml: 2
-        },
-        type: "button"
-      }, args, {
-        children: [_jsx(BiCalendarHeart, {
-          size: 24
-        }), _jsx(ScreenReaderText, {
-          children: "domain.com"
+    children: [_jsx("h3", {
+      children: "Default"
+    }), _jsxs(Table, {
+      children: [_jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          head: true,
+          children: "Variant"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Primary"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Secondary"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Tertiary"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Ghost"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Display"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Icon"
         })]
-      }))]
+      }), _jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "Default"
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({}, args, {
+            children: "Primary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "secondary"
+          }, args, {
+            children: "Secondary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "tertiary"
+          }, args, {
+            children: "Tertiary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "ghost"
+          }, args, {
+            children: "Ghost"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "display"
+          }, args, {
+            children: "Display"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsxs(Button, _extends({
+            variant: "icon",
+            type: "button"
+          }, args, {
+            children: [_jsx(BiCalendarHeart, {
+              size: 24
+            }), _jsx(ScreenReaderText, {
+              children: "domain.com"
+            })]
+          }))
+        })]
+      }), _jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "Disabled"
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "primary",
+            disabled: true
+          }, args, {
+            children: "Primary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "secondary",
+            disabled: true
+          }, args, {
+            children: "Secondary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "tertiary",
+            disabled: true
+          }, args, {
+            children: "Tertiary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "ghost",
+            disabled: true
+          }, args, {
+            children: "Ghost"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "display",
+            disabled: true
+          }, args, {
+            children: "Display"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsxs(Button, _extends({
+            variant: "icon",
+            type: "button",
+            disabled: true
+          }, args, {
+            children: [_jsx(BiCalendarHeart, {
+              size: 24
+            }), _jsx(ScreenReaderText, {
+              children: "domain.com"
+            })]
+          }))
+        })]
+      })]
     }), _jsx("div", {
       sx: {
         mt: 3
@@ -135,6 +187,75 @@ var Template = function Template(args) {
         grow: true,
         children: "Button with grow width"
       }))
+    }), _jsx("h3", {
+      children: "Danger"
+    }), _jsxs(Table, {
+      children: [_jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          head: true,
+          children: "Variant"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Primary"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Secondary"
+        }), _jsx(TableCell, {
+          head: true,
+          children: "Ghost"
+        })]
+      }), _jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "Default"
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            danger: true
+          }, args, {
+            children: "Primary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            danger: true,
+            variant: "secondary"
+          }, args, {
+            children: "Secondary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            danger: true,
+            variant: "ghost"
+          }, args, {
+            children: "Ghost"
+          }))
+        })]
+      }), _jsxs(TableRow, {
+        children: [_jsx(TableCell, {
+          children: "Disabled"
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "primary",
+            danger: true,
+            disabled: true
+          }, args, {
+            children: "Primary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "secondary",
+            danger: true,
+            disabled: true
+          }, args, {
+            children: "Secondary"
+          }))
+        }), _jsx(TableCell, {
+          children: _jsx(Button, _extends({
+            variant: "ghost",
+            disabled: true
+          }, args, {
+            children: "Ghost"
+          }))
+        })]
+      })]
     })]
   });
 };

package/build/system/DescriptionList/DescriptionList.js

@@ -89,7 +89,7 @@ var DescriptionListComponent = function DescriptionListComponent(_ref2) {
     })]
   });
 };
-var DescriptionList = /*#__PURE__*/forwardRef(function (_ref3) {
+var DescriptionList = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   var sx = _ref3.sx,
     className = _ref3.className,
     list = _ref3.list,
@@ -99,12 +99,15 @@ var DescriptionList = /*#__PURE__*/forwardRef(function (_ref3) {
     as = _ref3$as === void 0 ? 'dl' : _ref3$as,
     title = _ref3.title;
   var Component = as === 'table' ? TableComponent : DescriptionListComponent;
-  return _jsx(Component, {
-    list: list,
-    className: className,
-    sx: sx,
-    labelWidth: labelWidth,
-    title: title
+  return _jsx(Box, {
+    ref: ref,
+    children: _jsx(Component, {
+      list: list,
+      className: className,
+      sx: sx,
+      labelWidth: labelWidth,
+      title: title
+    })
   });
 });
 DescriptionList.displayName = 'DescriptionList';

package/build/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -22,7 +22,7 @@ const NewConfirmationDialogContent = ( {
 } ) => (
 	<Box className={ classNames( 'vip-confirmation-dialog-component', className ) }>
 		<Flex sx={ { justifyContent: 'flex-end', mt: 4 } }>
-			<Button variant="secondary" sx={ { mr: 2 } } onClick={ onClose }>
+			<Button variant="ghost" sx={ { mr: 2 } } onClick={ onClose }>
 				Cancel
 			</Button>
 			<NewDialog.Close>

package/build/system/NewDialog/DialogClose.js

@@ -41,7 +41,7 @@ export var DialogCloseDefault = /*#__PURE__*/forwardRef(function (_ref, forwarde
     children: _jsx(Button, {
       ref: forwardedRef,
       "aria-label": "Close",
-      variant: "tertiary",
+      variant: "ghost",
       sx: defaultCloseStyles(variant),
       children: _jsx(IoClose, {
         "aria-hidden": "true",

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

@@ -36,7 +36,8 @@ export var Default = function Default() {
     })
   }, {
     title: 'Configure DNS',
-    titleVariant: 'h2'
+    titleVariant: 'h2',
+    summaryTitle: 'Summary of Configure DNS'
   }, {
     title: 'Configure Certificate',
     titleVariant: 'h2'
@@ -51,6 +52,7 @@ export var Default = function Default() {
         activeStep: 0,
         steps: steps,
         completed: [1],
+        summaryAs: "dl",
         className: "vip-wizard-xyz"
       })
     })

package/build/system/Wizard/WizardStep.js

@@ -56,7 +56,7 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
   if (statusText !== '') {
     statusText = "Status: " + statusText;
   }
-  var stepText = "Step " + order + " of " + totalSteps;
+  var stepText = "STEP " + order + " OF " + totalSteps;
   var borderLeftColor = "wizard.step.border." + status;
   var statusIconColor = "wizard.step.icon." + status;
   var statusIconStyles = {
@@ -78,6 +78,7 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
       backgroundColor: active ? 'background' : 'transparent',
       borderRadius: 0,
       borderBottom: active ? 'none' : '1px solid',
+      borderRight: active ? 'none' : '1px solid',
       '&:first-of-type': {
         borderTopWidth: '1px',
         borderTopStyle: 'solid'
@@ -150,9 +151,9 @@ export var WizardStep = /*#__PURE__*/React.forwardRef(function (_ref, forwardRef
           children: actionIcon
         })]
       })]
-    }), !active && (complete || skipped) && summary && _jsx(DescriptionList, {
+    }), !active && (complete || skipped) && (summary || summaryTitle) && _jsx(DescriptionList, {
       as: summaryAs,
-      list: summary,
+      list: summary || [],
       title: summaryTitle
     }), subTitle && active && _jsx(Text, {
       sx: {

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

@@ -147,6 +147,27 @@ declare namespace _default {
                     fill: string;
                 };
             };
+            '&[data-danger="true"]': {
+                color: string;
+                bg: string;
+                border: string;
+                borderColor: string;
+            };
+            '&:hover[data-danger="true"]': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+            '&[disabled], &[aria-disabled="true"]': {
+                backgroundColor: string;
+                color: string;
+                opacity: number;
+            };
+            '&[disabled][data-danger="true"], &[aria-disabled="true"][data-danger="true"]': {
+                backgroundColor: string;
+                color: string;
+            };
         };
         export { primary_1 as primary };
         let secondary_1: {
@@ -157,6 +178,28 @@ declare namespace _default {
                 backgroundColor: string;
                 color: string;
             };
+            '&[data-danger="true"]': {
+                color: string;
+                bg: string;
+                border: string;
+                borderColor: string;
+            };
+            '&:hover[data-danger="true"]': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+            '&[disabled], &[aria-disabled="true"]': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&[disabled][data-danger="true"], &[aria-disabled="true"][data-danger="true"]': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
         };
         export { secondary_1 as secondary };
         export let tertiary: {
@@ -171,6 +214,10 @@ declare namespace _default {
                 border: string;
                 borderColor: string;
             };
+            '&[disabled], &[aria-disabled="true"]': {
+                backgroundColor: string;
+                color: string;
+            };
         };
         let display_3: {
             variant: string;
@@ -184,6 +231,10 @@ declare namespace _default {
                 border: string;
                 borderColor: string;
             };
+            '&[disabled], &[aria-disabled="true"]': {
+                backgroundColor: string;
+                color: string;
+            };
         };
         export { display_3 as display };
         export let ghost: {
@@ -198,6 +249,20 @@ declare namespace _default {
                 border: string;
                 borderColor: string;
             };
+            '&[disabled], &[aria-disabled="true"]': {
+                backgroundColor: string;
+                color: string;
+            };
+            '&[data-danger="true"]': {
+                color: string;
+                bg: string;
+            };
+            '&:hover[data-danger="true"]': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
         };
         export let danger: {
             variant: string;

package/build/system/theme/index.js

@@ -362,6 +362,30 @@ export default {
 					fill: 'inherit',
 				},
 			},
+			'&[data-danger="true"]': {
+				color: 'button.danger.primary.label.default',
+				bg: 'button.danger.primary.background.default',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
+
+			'&:hover[data-danger="true"]': {
+				backgroundColor: 'button.danger.primary.background.hover',
+				color: 'button.danger.primary.label.hover',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.primary.background.disabled',
+				color: 'button.primary.label.disabled',
+				opacity: 0.7,
+			},
+
+			'&[disabled][data-danger="true"], &[aria-disabled="true"][data-danger="true"]': {
+				backgroundColor: 'button.secondary.background.disabled',
+				color: 'button.secondary.label.default',
+			},
 		},
 
 		secondary: {
@@ -373,6 +397,32 @@ export default {
 				backgroundColor: 'button.secondary.background.hover',
 				color: 'button.secondary.label.hover',
 			},
+
+			'&[data-danger="true"]': {
+				color: 'button.danger.secondary.label.default',
+				bg: 'button.danger.secondary.background.default',
+				border: '1px solid',
+				borderColor: 'button.danger.secondary.border.default',
+			},
+
+			'&:hover[data-danger="true"]': {
+				backgroundColor: 'button.danger.secondary.background.hover',
+				color: 'button.danger.secondary.label.hover',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.secondary.background.disabled',
+				color: 'button.secondary.label.disabled',
+			},
+
+			'&[disabled][data-danger="true"], &[aria-disabled="true"][data-danger="true"]': {
+				backgroundColor: 'button.danger.secondary.background.default',
+				color: 'button.secondary.label.disabled',
+				border: '1px solid',
+				borderColor: 'button.secondary.border.default',
+			},
 		},
 
 		tertiary: {
@@ -388,6 +438,11 @@ export default {
 				border: '1px solid',
 				borderColor: 'button.tertiary.border.hover',
 			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.tertiary.background.default',
+				color: 'texts.disabled',
+			},
 		},
 
 		display: {
@@ -403,6 +458,11 @@ export default {
 				border: '1px solid',
 				borderColor: 'transparent',
 			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.display.background.disabled',
+				color: 'button.display.label.disabled',
+			},
 		},
 
 		ghost: {
@@ -418,6 +478,23 @@ export default {
 				border: '1px solid',
 				borderColor: 'transparent',
 			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.ghost.background.default',
+				color: 'texts.disabled',
+			},
+
+			'&[data-danger="true"]': {
+				color: 'button.danger.ghost.label.default',
+				bg: 'button.danger.ghost.background.default',
+			},
+
+			'&:hover[data-danger="true"]': {
+				backgroundColor: 'button.danger.ghost.background.hover',
+				color: 'button.danger.ghost.label.hover',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
 		},
 
 		danger: {

package/package.json

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

package/src/system/Button/Button.stories.tsx

@@ -3,14 +3,12 @@
 /**
  * External dependencies
  */
-import React from 'react';
 import { BiCalendarHeart } from 'react-icons/bi';
 
 /**
  * Internal dependencies
  */
-import { Button, ButtonVariant } from '..';
-import { Flex } from '../Flex/Flex';
+import { Button, ButtonVariant, Table, TableCell, TableRow } from '..';
 import ScreenReaderText from '../ScreenReaderText';
 
 export default {
@@ -21,6 +19,9 @@ export default {
 		disabled: {
 			control: { type: 'boolean' },
 		},
+		danger: {
+			control: { type: 'boolean' },
+		},
 		variant: {
 			type: 'select',
 			options: Object.values( ButtonVariant ),
@@ -68,42 +69,84 @@ This documentation is heavily inspired by the [U.S Web Design System (USWDS)](ht
 
 const Template = args => (
 	<div>
-		<Flex sx={ { gap: 2, flexDirection: 'row' } }>
-			<Button { ...args }>Primary</Button>
-
-			<Button variant="secondary" sx={ { ml: 2 } } { ...args }>
-				Secondary
-			</Button>
-
-			<Button variant="tertiary" sx={ { ml: 2 } } { ...args }>
-				Tertiary
-			</Button>
-
-			<Button variant="ghost" sx={ { ml: 2 } } { ...args }>
-				Ghost
-			</Button>
-
-			<Button variant="display" sx={ { ml: 2 } } { ...args }>
-				Display
-			</Button>
-
-			<Button variant="danger" sx={ { ml: 2 } } { ...args }>
-				Danger
-			</Button>
-
-			<Button variant="primary" disabled={ true } sx={ { ml: 2 } } { ...args }>
-				Disabled
-			</Button>
-
-			<Button variant="text" sx={ { ml: 2 } } as="a" href="https://google/com" { ...args }>
-				Button link
-			</Button>
-
-			<Button variant="icon" sx={ { ml: 2 } } type="button" { ...args }>
-				<BiCalendarHeart size={ 24 } />
-				<ScreenReaderText>domain.com</ScreenReaderText>
-			</Button>
-		</Flex>
+		<h3>Default</h3>
+		<Table>
+			<TableRow>
+				<TableCell head>Variant</TableCell>
+				<TableCell head>Primary</TableCell>
+				<TableCell head>Secondary</TableCell>
+				<TableCell head>Tertiary</TableCell>
+				<TableCell head>Ghost</TableCell>
+				<TableCell head>Display</TableCell>
+				<TableCell head>Icon</TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell>Default</TableCell>
+				<TableCell>
+					<Button { ...args }>Primary</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="secondary" { ...args }>
+						Secondary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="tertiary" { ...args }>
+						Tertiary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="ghost" { ...args }>
+						Ghost
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="display" { ...args }>
+						Display
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="icon" type="button" { ...args }>
+						<BiCalendarHeart size={ 24 } />
+						<ScreenReaderText>domain.com</ScreenReaderText>
+					</Button>
+				</TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell>Disabled</TableCell>
+				<TableCell>
+					<Button variant="primary" disabled { ...args }>
+						Primary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="secondary" disabled={ true } { ...args }>
+						Secondary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="tertiary" disabled { ...args }>
+						Tertiary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="ghost" disabled { ...args }>
+						Ghost
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="display" disabled { ...args }>
+						Display
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="icon" type="button" disabled { ...args }>
+						<BiCalendarHeart size={ 24 } />
+						<ScreenReaderText>domain.com</ScreenReaderText>
+					</Button>
+				</TableCell>
+			</TableRow>
+		</Table>
 
 		<div sx={ { mt: 3 } }>
 			<Button variant="secondary" href="https://google/com" { ...args } full>
@@ -116,6 +159,52 @@ const Template = args => (
 				Button with grow width
 			</Button>
 		</div>
+
+		<h3>Danger</h3>
+		<Table>
+			<TableRow>
+				<TableCell head>Variant</TableCell>
+				<TableCell head>Primary</TableCell>
+				<TableCell head>Secondary</TableCell>
+				<TableCell head>Ghost</TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell>Default</TableCell>
+				<TableCell>
+					<Button danger { ...args }>
+						Primary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button danger variant="secondary" { ...args }>
+						Secondary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button danger variant="ghost" { ...args }>
+						Ghost
+					</Button>
+				</TableCell>
+			</TableRow>
+			<TableRow>
+				<TableCell>Disabled</TableCell>
+				<TableCell>
+					<Button variant="primary" danger disabled { ...args }>
+						Primary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="secondary" danger disabled { ...args }>
+						Secondary
+					</Button>
+				</TableCell>
+				<TableCell>
+					<Button variant="ghost" disabled { ...args }>
+						Ghost
+					</Button>
+				</TableCell>
+			</TableRow>
+		</Table>
 	</div>
 );
 

package/src/system/Button/Button.tsx

@@ -9,7 +9,7 @@ interface ButtonTheme extends Theme {
 }
 
 export enum ButtonVariant {
-	'danger',
+	'danger', // will be deprecated in the future
 	'display',
 	'ghost',
 	'icon',
@@ -26,12 +26,28 @@ export interface ButtonProps extends ThemeButtonProps {
 	full?: boolean;
 	grow?: boolean;
 	variant?: keyof typeof ButtonVariant; // converts the enum to a string union type
+	danger?: boolean;
 }
 
 const Button = forwardRef< HTMLButtonElement, ButtonProps >(
-	( { className, disabled, preferAriaDisabled, onClick, sx, full, grow, ...rest }, ref ) => {
+	(
+		{
+			className,
+			disabled,
+			preferAriaDisabled,
+			onClick,
+			sx,
+			full,
+			grow,
+			variant = 'primary',
+			danger = variant === 'danger', // fallback for danger variant used before the prop was added
+			...rest
+		},
+		ref
+	) => {
 		const disabledAttributes =
 			disabled && preferAriaDisabled === true ? { 'aria-disabled': true } : { disabled };
+		let disabledStyles = {};
 
 		const handleOnClick = useCallback(
 			( event: ButtonClickType ) => {
@@ -46,17 +62,29 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 			[ disabled, onClick ]
 		);
 
+		if (
+			disabled &&
+			! danger &&
+			variant !== 'text' &&
+			variant !== 'ghost' &&
+			variant !== 'tertiary'
+		) {
+			disabledStyles = {
+				opacity: 0.7,
+				backgroundColor: 'input.border.disabled',
+				color: 'texts.secondary',
+			};
+		}
+
 		return (
 			<ThemeButton
 				sx={ {
 					'&:focus': 'none',
 					'&:focus-visible': ( theme: ButtonTheme ) => theme.outline,
 					'&[disabled], &[aria-disabled="true"]': {
-						opacity: 0.7,
-						backgroundColor: 'input.border.disabled',
-						color: 'texts.secondary',
 						cursor: 'not-allowed',
 						pointerEvents: 'none',
+						...disabledStyles,
 					},
 					'&:hover, &:focus': {
 						textDecoration: 'none',
@@ -67,8 +95,10 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 				} }
 				{ ...rest }
 				{ ...disabledAttributes }
+				variant={ variant === 'danger' ? 'primary' : variant } // fallback for danger variant used before the prop was added
 				onClick={ handleOnClick }
 				className={ classNames( 'vip-button-component', className ) }
+				data-danger={ danger }
 				ref={ ref }
 			/>
 		);

package/src/system/DescriptionList/DescriptionList.tsx

@@ -83,17 +83,22 @@ const DescriptionListComponent = ( {
 );
 
 const DescriptionList = forwardRef< HTMLDivElement, DescriptionListProps >(
-	( { sx, className, list, labelWidth = '100px', as = 'dl', title }: DescriptionListProps ) => {
+	(
+		{ sx, className, list, labelWidth = '100px', as = 'dl', title }: DescriptionListProps,
+		ref
+	) => {
 		const Component = as === 'table' ? TableComponent : DescriptionListComponent;
 
 		return (
-			<Component
-				list={ list }
-				className={ className }
-				sx={ sx }
-				labelWidth={ labelWidth }
-				title={ title }
-			/>
+			<Box ref={ ref }>
+				<Component
+					list={ list }
+					className={ className }
+					sx={ sx }
+					labelWidth={ labelWidth }
+					title={ title }
+				/>
+			</Box>
 		);
 	}
 );

package/src/system/NewConfirmationDialog/NewConfirmationDialog.js

@@ -22,7 +22,7 @@ const NewConfirmationDialogContent = ( {
 } ) => (
 	<Box className={ classNames( 'vip-confirmation-dialog-component', className ) }>
 		<Flex sx={ { justifyContent: 'flex-end', mt: 4 } }>
-			<Button variant="secondary" sx={ { mr: 2 } } onClick={ onClose }>
+			<Button variant="ghost" sx={ { mr: 2 } } onClick={ onClose }>
 				Cancel
 			</Button>
 			<NewDialog.Close>

package/src/system/NewDialog/DialogClose.tsx

@@ -47,7 +47,7 @@ export const DialogCloseDefault = forwardRef< HTMLButtonElement, DialogCloseDefa
 				<Button
 					ref={ forwardedRef }
 					aria-label="Close"
-					variant="tertiary"
+					variant="ghost"
 					sx={ defaultCloseStyles( variant ) }
 				>
 					<IoClose aria-hidden="true" width={ 20 } height={ 20 } />

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

@@ -34,6 +34,7 @@ export const Default = () => {
 		{
 			title: 'Configure DNS',
 			titleVariant: 'h2',
+			summaryTitle: 'Summary of Configure DNS',
 		},
 		{
 			title: 'Configure Certificate',
@@ -47,7 +48,13 @@ export const Default = () => {
 	return (
 		<React.Fragment>
 			<Box mt={ 4 }>
-				<Wizard activeStep={ 0 } steps={ steps } completed={ [ 1 ] } className="vip-wizard-xyz" />
+				<Wizard
+					activeStep={ 0 }
+					steps={ steps }
+					completed={ [ 1 ] }
+					summaryAs="dl"
+					className="vip-wizard-xyz"
+				/>
 			</Box>
 		</React.Fragment>
 	);

package/src/system/Wizard/WizardStep.tsx

@@ -79,7 +79,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 		if ( statusText !== '' ) {
 			statusText = `Status: ${ statusText }`;
 		}
-		const stepText = `Step ${ order } of ${ totalSteps }`;
+		const stepText = `STEP ${ order } OF ${ totalSteps }`;
 
 		const borderLeftColor = `wizard.step.border.${ status }`;
 		const statusIconColor = `wizard.step.icon.${ status }`;
@@ -104,6 +104,7 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 					backgroundColor: active ? 'background' : 'transparent',
 					borderRadius: 0,
 					borderBottom: active ? 'none' : '1px solid',
+					borderRight: active ? 'none' : '1px solid',
 					'&:first-of-type': {
 						borderTopWidth: '1px',
 						borderTopStyle: 'solid',
@@ -168,8 +169,8 @@ export const WizardStep = React.forwardRef< HTMLDivElement, WizardStepProps >(
 						</Button>
 					) }
 				</Flex>
-				{ ! active && ( complete || skipped ) && summary && (
-					<DescriptionList as={ summaryAs } list={ summary } title={ summaryTitle } />
+				{ ! active && ( complete || skipped ) && ( summary || summaryTitle ) && (
+					<DescriptionList as={ summaryAs } list={ summary || [] } title={ summaryTitle } />
 				) }
 
 				{ subTitle && active && <Text sx={ { mb: 3, mt: 2 } }>{ subTitle }</Text> }

package/src/system/theme/index.js

@@ -362,6 +362,30 @@ export default {
 					fill: 'inherit',
 				},
 			},
+			'&[data-danger="true"]': {
+				color: 'button.danger.primary.label.default',
+				bg: 'button.danger.primary.background.default',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
+
+			'&:hover[data-danger="true"]': {
+				backgroundColor: 'button.danger.primary.background.hover',
+				color: 'button.danger.primary.label.hover',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.primary.background.disabled',
+				color: 'button.primary.label.disabled',
+				opacity: 0.7,
+			},
+
+			'&[disabled][data-danger="true"], &[aria-disabled="true"][data-danger="true"]': {
+				backgroundColor: 'button.secondary.background.disabled',
+				color: 'button.secondary.label.default',
+			},
 		},
 
 		secondary: {
@@ -373,6 +397,32 @@ export default {
 				backgroundColor: 'button.secondary.background.hover',
 				color: 'button.secondary.label.hover',
 			},
+
+			'&[data-danger="true"]': {
+				color: 'button.danger.secondary.label.default',
+				bg: 'button.danger.secondary.background.default',
+				border: '1px solid',
+				borderColor: 'button.danger.secondary.border.default',
+			},
+
+			'&:hover[data-danger="true"]': {
+				backgroundColor: 'button.danger.secondary.background.hover',
+				color: 'button.danger.secondary.label.hover',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.secondary.background.disabled',
+				color: 'button.secondary.label.disabled',
+			},
+
+			'&[disabled][data-danger="true"], &[aria-disabled="true"][data-danger="true"]': {
+				backgroundColor: 'button.danger.secondary.background.default',
+				color: 'button.secondary.label.disabled',
+				border: '1px solid',
+				borderColor: 'button.secondary.border.default',
+			},
 		},
 
 		tertiary: {
@@ -388,6 +438,11 @@ export default {
 				border: '1px solid',
 				borderColor: 'button.tertiary.border.hover',
 			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.tertiary.background.default',
+				color: 'texts.disabled',
+			},
 		},
 
 		display: {
@@ -403,6 +458,11 @@ export default {
 				border: '1px solid',
 				borderColor: 'transparent',
 			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.display.background.disabled',
+				color: 'button.display.label.disabled',
+			},
 		},
 
 		ghost: {
@@ -418,6 +478,23 @@ export default {
 				border: '1px solid',
 				borderColor: 'transparent',
 			},
+
+			'&[disabled], &[aria-disabled="true"]': {
+				backgroundColor: 'button.ghost.background.default',
+				color: 'texts.disabled',
+			},
+
+			'&[data-danger="true"]': {
+				color: 'button.danger.ghost.label.default',
+				bg: 'button.danger.ghost.background.default',
+			},
+
+			'&:hover[data-danger="true"]': {
+				backgroundColor: 'button.danger.ghost.background.hover',
+				color: 'button.danger.ghost.label.hover',
+				border: '1px solid',
+				borderColor: 'transparent',
+			},
 		},
 
 		danger: {