@automattic/vip-design-system 0.18.5-0 → 0.19.2

package/README.md

@@ -102,3 +102,15 @@ git push origin trunk
 ```
 
 8. For major versions or breaking changes, it's recommended to [create a RELEASE](https://github.com/Automattic/vip-design-system/releases) with the published tag.
+
+### Troubleshooting
+
+### Dialog + Dropdown usage
+
+If you are facing a Dialog overlaping a Dropdown content, add this CSS to your application:
+
+```css
+div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
+	opacity: 0;
+}
+```

package/build/system/BlankState/BlankState.stories.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'BlankState',
+  title: 'Deprecated/BlankState',
   component: _.BlankState
 };
 exports["default"] = _default;

package/build/system/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'ConfirmationDialog',
+  title: 'Deprecated/ConfirmationDialog',
   component: _.ConfirmationDialog
 };
 exports["default"] = _default;

package/build/system/Dialog/Dialog.stories.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'Dialog (Deprecated)',
+  title: 'Deprecated/Dialog',
   component: _.Dialog
 };
 exports["default"] = _default;

package/build/system/Dropdown/Dropdown.stories.js

@@ -153,7 +153,8 @@ var WithDialog = function WithDialog() {
 
   var _React$useState5 = _react["default"].useState(false),
       menuOpen = _React$useState5[0],
-      setMenuOpen = _React$useState5[1];
+      setMenuOpen = _React$useState5[1]; // eslint-disable-next-line react/prop-types
+
 
   var AreYouSureDialog = function AreYouSureDialog(_ref) {
     var onConfirm = _ref.onConfirm,

package/build/system/Form/Input.js

@@ -48,9 +48,11 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
         color: 'text',
         display: 'block',
         width: '100%',
-        '&:focus': {
-          borderColor: 'brand.60',
-          outline: 'none'
+        '&:focus': function focus(theme) {
+          return theme.outline;
+        },
+        '&:focus-visible': function focusVisible(theme) {
+          return theme.outline;
         },
         '&:disabled': {
           bg: 'backgroundSecondary'

package/build/system/Form/MultiSelect.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MultiSelect = void 0;
+
+var _reactSelect = _interopRequireDefault(require("react-select"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+var vipGold = '#c29c69'; // hardcoding for now
+
+var vipGrey2 = '#d7dee2';
+var customStyles = {
+  control: function control(styles) {
+    return _extends({}, styles, {
+      border: "1px solid " + vipGrey2,
+      boxShadow: 'none',
+      '&:hover': {
+        border: "1px solid " + vipGold
+      },
+      '&:focus': {
+        border: "1px solid " + vipGold
+      }
+    });
+  }
+};
+
+var MultiSelect = function MultiSelect(props) {
+  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
+    styles: customStyles
+  }));
+};
+
+exports.MultiSelect = MultiSelect;

package/build/system/Link/Link.js

@@ -24,15 +24,17 @@ var Link = function Link(_ref) {
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_themeUi.Link, (0, _extends2["default"])({}, props, {
     sx: (0, _extends2["default"])({
-      color: active ? 'heading' : 'link',
-      textDecoration: 'none',
-      borderBottom: '1px solid',
-      borderBottomColor: 'border',
+      color: active ? 'links.active' : 'link',
+      textDdecorationThickness: '0.1em',
+      textUnderlineOffset: '0.1em',
       '&:visited': {
-        color: 'link'
+        color: 'links.visited'
+      },
+      '&:active': {
+        color: 'links.active'
       },
       '&:hover, &:focus': {
-        color: 'heading'
+        color: 'links.hover'
       },
       '&:focus': function focus(theme) {
         return theme.outline;

package/build/system/NewDialog/DialogClose.js

@@ -68,7 +68,7 @@ var DialogCloseDefault = /*#__PURE__*/_react["default"].forwardRef(function (pro
         top: 10,
         right: 10,
         '&:hover': {
-          backgroundColor: 'border',
+          backgroundColor: 'borders.2',
           outlineStyle: 'solid',
           outlineColor: 'primary',
           outlineWidth: '2px'

package/build/system/NewDialog/NewDialog.js

@@ -7,6 +7,8 @@ exports.NewDialog = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,19 +27,12 @@ var _DialogContent = require("./DialogContent");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+var _excluded = ["trigger", "description", "title", "content", "showHeading", "disabled", "style", "contentProps", "portalProps"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
 var NewDialog = function NewDialog(_ref) {
   var _ref$trigger = _ref.trigger,
       trigger = _ref$trigger === void 0 ? null : _ref$trigger,
@@ -54,20 +49,9 @@ var NewDialog = function NewDialog(_ref) {
       contentProps = _ref$contentProps === void 0 ? {} : _ref$contentProps,
       _ref$portalProps = _ref.portalProps,
       portalProps = _ref$portalProps === void 0 ? {} : _ref$portalProps,
-      _ref$defaultOpen = _ref.defaultOpen,
-      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-      _ref$allowPinchZoom = _ref.allowPinchZoom,
-      allowPinchZoom = _ref$allowPinchZoom === void 0 ? false : _ref$allowPinchZoom,
-      _ref$onOpenChange = _ref.onOpenChange,
-      onOpenChange = _ref$onOpenChange === void 0 ? undefined : _ref$onOpenChange,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? undefined : _ref$open,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? undefined : _ref$id;
-
-  var _React$useState = _react["default"].useState(open || defaultOpen),
-      isOpen = _React$useState[0],
-      setIsOpen = _React$useState[1];
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+
+  var closeRef = _react["default"].useRef(null);
 
   if (disabled) {
     return;
@@ -76,24 +60,13 @@ var NewDialog = function NewDialog(_ref) {
 
   var isContentFunction = typeof content === 'function';
 
-  var handleOnOpenChange = function handleOnOpenChange(status) {
-    setIsOpen(status);
+  var onClose = function onClose() {
+    var _closeRef$current;
 
-    if (onOpenChange) {
-      onOpenChange(status);
-    }
+    closeRef == null ? void 0 : (_closeRef$current = closeRef.current) == null ? void 0 : _closeRef$current.click();
   };
 
-  _react["default"].useEffect(function () {
-    handleOnOpenChange(open);
-  }, [open]);
-
-  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, {
-    id: id,
-    open: isOpen,
-    onOpenChange: handleOnOpenChange,
-    defaultOpen: defaultOpen,
-    allowPinchZoom: allowPinchZoom,
+  return (0, _jsxRuntime.jsxs)(DialogPrimitive.Root, (0, _extends2["default"])({}, props, {
     children: [trigger && (0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
       asChild: true,
       children: trigger
@@ -102,7 +75,9 @@ var NewDialog = function NewDialog(_ref) {
         className: "vip-dialog-component",
         sx: (0, _extends2["default"])({}, _DialogContent.contentStyles, extraStyles)
       }, contentProps, {
-        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {}), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
+        children: [(0, _jsxRuntime.jsx)(_DialogClose.DialogCloseDefault, {
+          ref: closeRef
+        }), (0, _jsxRuntime.jsx)(_DialogTitle.DialogTitle, {
           title: title,
           hidden: !showHeading
         }), (0, _jsxRuntime.jsx)(_DialogDescription.DialogDescription, {
@@ -111,14 +86,12 @@ var NewDialog = function NewDialog(_ref) {
         }), (0, _jsxRuntime.jsx)("div", {
           role: "document",
           children: isContentFunction ? content({
-            onClose: function onClose() {
-              return setIsOpen(false);
-            }
+            onClose: onClose
           }) : content
         })]
       }))]
     }))]
-  });
+  }));
 };
 
 exports.NewDialog = NewDialog;
@@ -133,12 +106,5 @@ NewDialog.propTypes = {
   // Content props in: https://www.radix-ui.com/docs/primitives/components/dialog#content
   contentProps: _propTypes["default"].any,
   // Portal props in: https://www.radix-ui.com/docs/primitives/components/dialog#portal
-  portalProps: _propTypes["default"].any,
-  // Radix DialogPrimitive.Root properties
-  // https://www.radix-ui.com/docs/primitives/components/dialog#root
-  id: _propTypes["default"].string,
-  open: _propTypes["default"].bool,
-  defaultOpen: _propTypes["default"].bool,
-  allowPinchZoom: _propTypes["default"].bool,
-  onOpenChange: _propTypes["default"].func
+  portalProps: _propTypes["default"].any
 };

package/build/system/NewDialog/NewDialog.stories.js

@@ -225,7 +225,7 @@ var CustomStateManagement = function CustomStateManagement() {
       onOpenChange: function onOpenChange(status) {
         // eslint-disable-next-line no-console
         console.log('New status changed', status);
-        setOpen(!!open);
+        setOpen(!open);
       },
       trigger: (0, _jsxRuntime.jsx)(_system.Button, {
         children: "Trigger Dialog"

package/build/system/NewForm/Form.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Form = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["children"];
+
+var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var children = _ref.children,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)("form", (0, _extends2["default"])({
+    ref: forwardRef
+  }, props, {
+    children: children
+  }));
+});
+
+exports.Form = Form;
+Form.propTypes = {
+  children: _propTypes["default"].any
+};
+Form.displayName = 'Form';

package/build/system/NewForm/FormSelect.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormSelect = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Label = require("../Form/Label");
+
+var _FormSelectArrow = require("./FormSelectArrow");
+
+var _FormSelectContent = require("./FormSelectContent");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["isInline", "placeholder", "forLabel", "options", "label"];
+var MAX_SUGGESTED_OPTIONS = 15;
+var isDev = process.env.NODE_ENV !== 'production';
+var defaultStyles = {
+  width: '100%',
+  paddingLeft: 3,
+  paddingRight: 40,
+  // 40px for the icon
+  py: 0,
+  borderColor: 'border',
+  borderRadius: 1,
+  appearance: 'none',
+  minHeight: '36px',
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  },
+  '&:focus-within': function focusWithin(theme) {
+    return theme.outline;
+  }
+};
+
+var renderOption = function renderOption(label, value) {
+  return (0, _jsxRuntime.jsx)("option", {
+    value: value,
+    children: label
+  }, value);
+};
+
+var renderGroup = function renderGroup(groupLabel, groupOptions) {
+  return (0, _jsxRuntime.jsx)("optgroup", {
+    label: groupLabel,
+    children: groupOptions.map(function (_ref) {
+      var label = _ref.label,
+          value = _ref.value;
+      return renderOption(label, value);
+    })
+  }, groupLabel);
+};
+
+var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
+  var isInline = _ref2.isInline,
+      placeholder = _ref2.placeholder,
+      forLabel = _ref2.forLabel,
+      options = _ref2.options,
+      label = _ref2.label,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
+
+  if (isDev && options.length > MAX_SUGGESTED_OPTIONS) {
+    // eslint-disable-next-line no-console
+    console.info('For 16 or more items, consider using another component with a typeahead capability.');
+  }
+
+  var SelectLabel = function SelectLabel() {
+    return (0, _jsxRuntime.jsx)(_Label.Label, {
+      htmlFor: forLabel || props.id,
+      children: label
+    });
+  };
+
+  var inlineLabel = !!(isInline && label);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
+      isInline: inlineLabel,
+      label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
+      children: [(0, _jsxRuntime.jsxs)("select", (0, _extends2["default"])({
+        ref: forwardRef,
+        sx: defaultStyles
+      }, props, {
+        children: [placeholder && (0, _jsxRuntime.jsx)("option", {
+          children: placeholder
+        }), options.map(function (_ref3) {
+          var optionLabel = _ref3.label,
+              value = _ref3.value,
+              groupOptions = _ref3.options;
+          return value ? renderOption(optionLabel, value) : renderGroup(optionLabel, groupOptions);
+        })]
+      })), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
+    })]
+  });
+});
+
+exports.FormSelect = FormSelect;
+FormSelect.propTypes = {
+  id: _propTypes["default"].string,
+  isInline: _propTypes["default"].bool,
+  forLabel: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  options: _propTypes["default"].array
+};
+FormSelect.displayName = 'FormSelect';

package/build/system/NewForm/FormSelect.stories.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.WithGroup = exports.IsInline = exports.Default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var Form = _interopRequireWildcard(require("."));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+var _excluded = ["label", "width"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Form/Select',
+  argTypes: {
+    placeholder: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var options = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry Chocolate Vanilla Chocolate Vanilla'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}]; // eslint-disable-next-line react/prop-types
+
+var DefaultComponent = function DefaultComponent(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Label' : _ref$label,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 250 : _ref$width,
+      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)("p", {
+      children: ["This is a simple wrapper at the top of a browser default select component. This component should be used for situations where you have up to ", (0, _jsxRuntime.jsx)("strong", {
+        children: "15 options"
+      }), ". If you need to use a auto-complete, searchable solution, please use another component with a typeahead capability."]
+    }), (0, _jsxRuntime.jsxs)("p", {
+      children: ["This component was heavily inspired by the", ' ', (0, _jsxRuntime.jsxs)("a", {
+        href: "https://designsystem.digital.gov/components/select/",
+        target: "_blank",
+        rel: "noreferrer",
+        children: [' ', "U.S. Web Design System (USWDS) Select component"]
+      }), "."]
+    }), (0, _jsxRuntime.jsx)(Form.Root, {
+      children: (0, _jsxRuntime.jsx)("div", {
+        sx: {
+          width: width
+        },
+        children: (0, _jsxRuntime.jsx)(Form.Select, (0, _extends2["default"])({
+          id: "form-select",
+          label: label
+        }, rest))
+      })
+    })]
+  });
+};
+
+var Default = DefaultComponent.bind({});
+exports.Default = Default;
+Default.args = {
+  placeholder: '- Select -',
+  options: options
+};
+var WithGroup = DefaultComponent.bind({});
+exports.WithGroup = WithGroup;
+WithGroup.args = {
+  label: 'Group Label',
+  options: [{
+    label: 'Group name',
+    options: options
+  }, {
+    label: 'Another Group name',
+    options: options
+  }]
+};
+var IsInline = DefaultComponent.bind({});
+exports.IsInline = IsInline;
+IsInline.args = {
+  label: 'Inline Select',
+  isInline: true,
+  width: '100%',
+  options: [{
+    label: 'Group name',
+    options: options
+  }, {
+    label: 'Another Group name',
+    options: options
+  }]
+};