@automattic/vip-design-system 2.12.7 → 2.13.0

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

@@ -14,5 +14,6 @@ export interface CardProps {
     renderHeader?: (title?: string) => React.ReactNode;
     bodyStyles?: ThemeUIStyleObject;
     headerStyles?: ThemeUIStyleObject;
+    hideBody?: boolean;
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & BoxProps & import("react").RefAttributes<HTMLElement>>;

package/build/system/Card/Card.js

@@ -1,4 +1,4 @@
-var _excluded = ["variant", "title", "renderHeader", "bodyStyles", "headerStyles", "children"];
+var _excluded = ["variant", "title", "renderHeader", "bodyStyles", "headerStyles", "children", "hideBody"];
 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; }
 /** @jsxImportSource theme-ui */
@@ -28,6 +28,8 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     bodyStyles = _ref.bodyStyles,
     headerStyles = _ref.headerStyles,
     children = _ref.children,
+    _ref$hideBody = _ref.hideBody,
+    hideBody = _ref$hideBody === void 0 ? false : _ref$hideBody,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   return _jsxs(Box, _extends({
     ref: ref,
@@ -42,7 +44,7 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
         variant: "cards." + variant + ".header"
       }, headerStyles),
       children: title
-    }), _jsx(Box, {
+    }), !hideBody && _jsx(Box, {
       className: "vip-card-body-component",
       sx: _extends({
         variant: "cards." + variant + ".children"

package/build/system/Nav/Nav.stories.js

@@ -162,23 +162,6 @@ export var Menu = {
             href: "https://dashboard.wpvip.com/",
             children: "Slow Query"
           })]
-        }), _jsxs(NavItem.MenuGroup, {
-          label: "Clickable Parent Navigation Item",
-          renderIcon: function renderIcon(size) {
-            return _jsx(BiHistory, {
-              size: size
-            });
-          },
-          parentHref: "https://random-website.com/",
-          children: [_jsx(NavItem.Menu, {
-            as: CustomLink,
-            href: "https://google.com/",
-            children: "Test"
-          }), _jsx(NavItem.Menu, {
-            as: CustomLink,
-            href: "https://wpvip.com/",
-            children: "Item"
-          })]
         }), _jsxs(NavItem.MenuGroup, {
           label: "Performance",
           renderIcon: function renderIcon(size) {

package/build/system/Nav/NavItemGroup.d.ts

@@ -5,7 +5,6 @@ export interface NavItemGroupProps extends NavItemBaseProps {
     renderIcon?: NavItemRenderIconProp;
     activeChildren?: boolean;
     label: string;
-    parentHref?: string;
 }
 export declare const IconContainer: ({ children }: {
     children: React.ReactNode;

package/build/system/Nav/NavItemGroup.js

@@ -21,8 +21,7 @@ var NavItemGroupBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     activeChildren = _ref.activeChildren,
     renderIcon = _ref.renderIcon,
     children = _ref.children,
-    sx = _ref.sx,
-    parentHref = _ref.parentHref;
+    sx = _ref.sx;
   var _useState = useState(active),
     isExpanded = _useState[0],
     setIsExpanded = _useState[1];
@@ -39,30 +38,16 @@ var NavItemGroupBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onOpenChange: handleExpand,
       children: [_jsx(Collapsible.Trigger, {
         asChild: true,
-        children: _jsxs("div", {
-          role: "button",
-          tabIndex: 0,
-          "aria-haspopup": "true",
+        children: _jsxs("button", {
+          type: "button",
+          "aria-haspopup": true,
           "data-active": active || undefined,
           "data-open": isExpanded || undefined,
           "data-active-children": activeChildren || undefined,
           sx: _extends({}, navItemLinkVariantStyles(variant), navItemGroupTriggerStyles),
           children: [renderIcon ? _jsx(IconContainer, {
             children: renderIcon(NAV_ITEM_ICON_SIZE)
-          }) : null, parentHref ? _jsx("a", {
-            href: parentHref,
-            sx: {
-              textDecoration: 'none',
-              color: 'inherit',
-              '&:hover': {
-                textDecoration: 'none'
-              }
-            },
-            onClick: function onClick(e) {
-              return e.stopPropagation();
-            },
-            children: label
-          }) : label, _jsx(BiChevronDown, {
+          }) : null, label, _jsx(BiChevronDown, {
             "data-arrow-indicator": true,
             "aria-hidden": "true",
             size: NAV_ITEM_ICON_SIZE,

package/build/system/Notice/Notice.d.ts

@@ -1,6 +1,12 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
 import { ThemeUIStyleObject } from 'theme-ui';
+type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
+type CollapsibleProps = {
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    ariaContentId?: string;
+};
 export type NoticeProps = React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     inline?: boolean;
@@ -9,8 +15,7 @@ export type NoticeProps = React.HTMLAttributes<HTMLDivElement> & {
     variant?: ColorVariants;
     headingVariant?: React.ElementType;
     className?: string;
-};
-type ColorVariants = 'warning' | 'error' | 'alert' | 'success' | 'info';
+} & CollapsibleProps;
 export declare const Notice: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactNode;
     inline?: boolean | undefined;
@@ -19,5 +24,5 @@ export declare const Notice: React.ForwardRefExoticComponent<React.HTMLAttribute
     variant?: ColorVariants | undefined;
     headingVariant?: React.ElementType<any> | undefined;
     className?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+} & CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/build/system/Notice/Notice.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "headingVariant", "inline", "sx", "title", "variant"];
+var _excluded = ["children", "className", "headingVariant", "inline", "sx", "title", "variant", "collapsible", "defaultOpen"];
 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; }
 /** @jsxImportSource theme-ui */
@@ -6,13 +6,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 /**
  * External dependencies
  */
+import * as Collapsible from '@radix-ui/react-collapsible';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState, useId } from 'react';
+import { BiChevronDown, BiChevronUp } from 'react-icons/bi';
 import { MdError, MdWarning, MdCheckCircle, MdInfo } from 'react-icons/md';
 /**
  * Internal dependencies
  */
-import { Box, Flex, Heading, Card } from '../';
+import { Box, Flex, Heading, Card, Button } from '../';
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
 var NoticeIcon = function NoticeIcon(_ref) {
@@ -64,35 +66,143 @@ export var Notice = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
     title = _ref2.title,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'warning' : _ref2$variant,
+    _ref2$collapsible = _ref2.collapsible,
+    collapsible = _ref2$collapsible === void 0 ? false : _ref2$collapsible,
+    _ref2$defaultOpen = _ref2.defaultOpen,
+    defaultOpen = _ref2$defaultOpen === void 0 ? false : _ref2$defaultOpen,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  return _jsxs(Card, _extends({
-    variant: "notice",
-    sx: _extends({
-      boxShadow: 'none',
-      borderRadius: 2,
-      bg: inline ? 'transparent' : "notice.background." + variant,
-      color: "notice.text." + variant,
-      fontSize: 2,
-      p: {
-        color: "notice.text." + variant,
-        fontSize: 2
+  var _useState = useState(defaultOpen),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var handleExpand = function handleExpand(openValue) {
+    return setIsExpanded(openValue);
+  };
+  var ChevronIcon = isExpanded ? BiChevronUp : BiChevronDown;
+  var contentId = useId();
+  var iconColor = "notice.icon." + variant;
+  var textColor = "notice.text." + variant;
+  var baseCardSx = _extends({
+    boxShadow: 'none',
+    borderRadius: 2,
+    bg: inline || collapsible ? 'transparent' : "notice.background." + variant,
+    color: textColor,
+    fontSize: 2,
+    p: {
+      color: textColor,
+      fontSize: 2
+    },
+    a: {
+      color: "notice.link." + variant + ".default",
+      '&:visited': {
+        color: "notice.link." + variant + ".visited"
       },
-      a: {
-        color: "notice.link." + variant + ".default",
-        '&:visited': {
-          color: "notice.link." + variant + ".visited"
-        },
-        '&:active': {
-          color: "notice.link." + variant + ".active"
-        },
-        '&:hover, &:focus': {
-          color: "notice.link." + variant + ".hover"
-        }
+      '&:active': {
+        color: "notice.link." + variant + ".active"
       },
-      ul: {
-        pl: 5
+      '&:hover, &:focus': {
+        color: "notice.link." + variant + ".hover"
       }
-    }, sx),
+    },
+    ul: {
+      pl: 5
+    }
+  }, sx);
+  if (collapsible) {
+    var renderHeader = function renderHeader() {
+      return _jsx(Collapsible.Trigger, {
+        asChild: true,
+        "aria-expanded": isExpanded,
+        "aria-controls": contentId,
+        children: _jsxs(Button, {
+          variant: "text",
+          sx: {
+            border: 'none',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            cursor: 'pointer',
+            bg: "notice.background." + variant,
+            '&:hover, &:focus': {
+              bg: "notice.background." + variant,
+              boxShadow: 'none',
+              transform: 'none',
+              border: 'none'
+            },
+            px: 3,
+            py: 2,
+            borderBottomLeftRadius: '0 !important',
+            borderBottomRightRadius: '0 !important'
+          },
+          children: [_jsxs(Flex, {
+            sx: {
+              alignItems: 'center',
+              gap: 2
+            },
+            children: [_jsx(NoticeIcon, {
+              color: iconColor,
+              variant: variant
+            }), _jsx(Heading, {
+              as: headingVariant,
+              id: contentId + "-heading",
+              sx: {
+                color: textColor,
+                fontSize: 2,
+                fontWeight: 'bold',
+                my: 2,
+                mx: 3
+              },
+              children: title
+            })]
+          }), _jsx(ChevronIcon, {
+            size: 32,
+            sx: {
+              color: 'icon.primary'
+            },
+            "data-arrow-indicator": true,
+            "aria-hidden": "true"
+          })]
+        })
+      });
+    };
+    return _jsx(Collapsible.Root, {
+      defaultOpen: defaultOpen,
+      onOpenChange: handleExpand,
+      "data-active": defaultOpen || undefined,
+      children: _jsx(Card, _extends({
+        variant: "notice",
+        hideBody: !isExpanded,
+        renderHeader: renderHeader,
+        bodyStyles: {
+          border: '2px solid',
+          borderColor: "notice.background." + variant,
+          borderTop: 'none',
+          borderBottomLeftRadius: 2,
+          borderBottomRightRadius: 2,
+          px: 4,
+          py: 3
+        },
+        sx: _extends({}, baseCardSx, {
+          border: 'none',
+          overflow: 'hidden'
+        }),
+        className: classNames('vip-notice-component', className)
+      }, props, {
+        ref: forwardRef,
+        children: _jsx(Collapsible.Content, {
+          id: contentId,
+          sx: {
+            mx: 2,
+            my: 2
+          },
+          children: children
+        })
+      }))
+    });
+  }
+  return _jsxs(Card, _extends({
+    variant: "notice",
+    sx: baseCardSx,
     className: classNames('vip-notice-component', className),
     ref: forwardRef
   }, props, {
@@ -116,7 +226,7 @@ export var Notice = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
             flex: '1 100%' // we need this empty div to make the icon align to the bottom
           }
         }), _jsx(NoticeIcon, {
-          color: "notice.icon." + variant,
+          color: iconColor,
           variant: variant
         })]
       })
@@ -124,7 +234,7 @@ export var Notice = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
       children: [title && _jsx(Heading, {
         as: headingVariant,
         sx: {
-          color: "notice.text." + variant,
+          color: textColor,
           mb: 0,
           fontSize: 2,
           fontWeight: 'bold'

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

@@ -16,6 +16,10 @@ declare const _default: {
         variant?: ("alert" | "error" | "success" | "warning" | "info") | undefined;
         headingVariant?: React.ElementType<any> | undefined;
         className?: string | undefined;
+    } & {
+        collapsible?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
+        ariaContentId?: string | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

package/build/system/Notice/Notice.stories.js

@@ -144,11 +144,25 @@ export var Default = function Default() {
         href: "/?path=/story/avatar--default",
         children: "A link to Avatar"
       })]
+    }), _jsxs(Notice, {
+      variant: "success",
+      sx: {
+        mb: 4
+      },
+      title: "Collapsible Notice",
+      collapsible: true,
+      children: ["Bucket names in Amazon S3 are globally unique.", ' ', _jsx(Link, {
+        href: "/?path=/story/avatar--default",
+        children: "A link to Avatar"
+      })]
     }), _jsx(Notice, {
       variant: "info",
       sx: {
         mb: 4
       },
+      title: "Collapsible Notice Auto-Expanded",
+      collapsible: true,
+      defaultOpen: true,
       children: "Bucket names in Amazon S3 are globally unique."
     })]
   });

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

@@ -41,7 +41,7 @@
   "input": {
     "background": {
       "default": {
-        "value": "#1b191800",
+        "value": "#13191e00",
         "type": "color",
         "description": "Use for input backgrounds"
       },
@@ -403,7 +403,7 @@
           "value": "#4c4948"
         },
         "disabled": {
-          "value": "#00000000",
+          "value": "#13191e00",
           "type": "color"
         }
       },
@@ -439,7 +439,7 @@
     "ghost": {
       "background": {
         "default": {
-          "value": "#00000000",
+          "value": "#13191e00",
           "type": "color"
         },
         "hover": {
@@ -620,6 +620,14 @@
       "success": {
         "type": "color",
         "value": "#00611e"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#ffffff"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#ffffff"
       }
     },
     "text": {
@@ -638,6 +646,14 @@
       "success": {
         "type": "color",
         "value": "#d7efdf"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#e3e0df"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#ffffff"
       }
     },
     "icon": {
@@ -656,6 +672,14 @@
       "success": {
         "type": "color",
         "value": "#40ba6f"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#827f7e"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#8c00ffff"
       }
     },
     "accent": {
@@ -674,6 +698,14 @@
       "success": {
         "type": "color",
         "value": "#40ba6f"
+      },
+      "neutral": {
+        "type": "color",
+        "value": "#827f7e"
+      },
+      "feature": {
+        "type": "color",
+        "value": "#8c00ffff"
       }
     },
     "link": {
@@ -752,6 +784,25 @@
           "type": "color",
           "value": "#89daa0"
         }
+      },
+      "neutral": {
+        "default": {
+          "type": "color",
+          "value": "#e3e0df",
+          "description": "Use for text links"
+        },
+        "hover": {
+          "type": "color",
+          "value": "#9b9796"
+        },
+        "active": {
+          "type": "color",
+          "value": "#9b9796"
+        },
+        "visited": {
+          "type": "color",
+          "value": "#d7d4d3"
+        }
       }
     },
     "helper-text": {
@@ -3649,6 +3700,116 @@
         "value": "#000800",
         "type": "color"
       }
+    },
+    "purple": {
+      "0": {
+        "value": "#faf5ffff",
+        "type": "color"
+      },
+      "3": {
+        "value": "#f1e0ffff",
+        "type": "color"
+      },
+      "7": {
+        "value": "#e8ccffff",
+        "type": "color"
+      },
+      "10": {
+        "value": "#dfb8ffff",
+        "type": "color"
+      },
+      "15": {
+        "value": "#d5a3ffff",
+        "type": "color"
+      },
+      "20": {
+        "value": "#cc8fffff",
+        "type": "color"
+      },
+      "25": {
+        "value": "#c37affff",
+        "type": "color"
+      },
+      "30": {
+        "value": "#ba66ffff",
+        "type": "color"
+      },
+      "35": {
+        "value": "#b052ffff",
+        "type": "color"
+      },
+      "40": {
+        "value": "#a73dffff",
+        "type": "color"
+      },
+      "45": {
+        "value": "#9e29ffff",
+        "type": "color"
+      },
+      "50": {
+        "value": "#9514ffff",
+        "type": "color"
+      },
+      "55": {
+        "value": "#8c00ffff",
+        "type": "color"
+      },
+      "60": {
+        "value": "#8000ebff",
+        "type": "color"
+      },
+      "65": {
+        "value": "#7500d6ff",
+        "type": "color"
+      },
+      "70": {
+        "value": "#6a00c2ff",
+        "type": "color"
+      },
+      "73": {
+        "value": "#5f00adff",
+        "type": "color"
+      },
+      "75": {
+        "value": "#540099ff",
+        "type": "color"
+      },
+      "78": {
+        "value": "#490085ff",
+        "type": "color"
+      },
+      "80": {
+        "value": "#3d0070ff",
+        "type": "color"
+      },
+      "83": {
+        "value": "#32005cff",
+        "type": "color"
+      },
+      "85": {
+        "value": "#270047ff",
+        "type": "color"
+      },
+      "88": {
+        "value": "#1c0033ff",
+        "type": "color"
+      },
+      "90": {
+        "value": "#11001fff",
+        "type": "color"
+      },
+      "93": {
+        "value": "#06000aff",
+        "type": "color"
+      },
+      "95": {
+        "value": "#050008ff",
+        "type": "color"
+      },
+      "100": {
+        "value": "#050008ff",
+        "type": "color"
+      }
     }
   },
   "breakpoint": {