@automattic/vip-design-system 0.26.0 → 0.26.2

package/.storybook/preview.js

@@ -13,4 +13,10 @@ export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },
 	controls: { expanded: true },
 	backgrounds,
+	options: {
+		storySort: {
+			method: 'alphabetical',
+			order: [ '*', 'Deprecated' ],
+		},
+	},
 };

package/build/system/Accordion/Accordion.js

@@ -116,6 +116,9 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
           backgroundColor: 'backgroundSecondary',
           borderBottom: function borderBottom(theme) {
             return "1px solid " + theme.colors.border;
+          },
+          '.vip-accordion-trigger-indicator': {
+            transform: 'rotate(270deg)'
           }
         },
         '&:hover': {
@@ -125,14 +128,12 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
     }, props, {
       ref: forwardedRef,
       children: [children, (0, _jsxRuntime.jsx)(_md.MdChevronRight, {
+        className: "vip-accordion-trigger-indicator",
         sx: {
           fontSize: 3,
           color: 'text',
           transform: 'rotate(90deg)',
-          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-          '[data-state=open] &': {
-            transform: 'rotate(270deg)'
-          }
+          transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)'
         },
         "aria-hidden": true
       })]

package/build/system/Form/Checkbox.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = require("react");
+
+var _ = require("..");
+
+var _Checkbox = require("./Checkbox");
+
+var _Label = require("./Label");
+
+var _Flex = require("../Flex");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Form/Checkbox',
+  component: _Checkbox.Checkbox
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(true),
+      checked = _useState[0],
+      setChecked = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),
+      checked2 = _useState2[0],
+      setChecked2 = _useState2[1];
+
+  return (0, _jsxRuntime.jsx)(_.Form.Root, {
+    children: (0, _jsxRuntime.jsxs)("fieldset", {
+      children: [(0, _jsxRuntime.jsx)("legend", {
+        children: "Tell me your prefereces"
+      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
+        sx: {
+          alignItems: 'center'
+        },
+        children: [(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+          id: "check1",
+          checked: checked,
+          "aria-labelledby": "label-check1",
+          onCheckedChange: setChecked
+        }), (0, _jsxRuntime.jsx)(_Label.Label, {
+          sx: {
+            m: 0,
+            ml: 2
+          },
+          htmlFor: "check1",
+          id: "label-check1",
+          children: "This option"
+        })]
+      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
+        sx: {
+          alignItems: 'center'
+        },
+        children: [(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
+          id: "check2",
+          checked: checked2,
+          "aria-labelledby": "label-check2",
+          onCheckedChange: setChecked2
+        }), (0, _jsxRuntime.jsx)(_Label.Label, {
+          sx: {
+            m: 0,
+            ml: 2
+          },
+          htmlFor: "check2",
+          id: "label-check2",
+          children: "This option too"
+        })]
+      })]
+    })
+  });
+};
+
+exports.Default = Default;

package/build/system/Form/Input.js

@@ -15,9 +15,51 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ = require("../");
 
+var _themeUi = require("theme-ui");
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "label", "forLabel", "hasError", "required", "errorMessage"];
+var _excluded = ["variant", "label", "forLabel", "hasError", "required", "sx", "errorMessage"];
+
+var RequiredLabel = function RequiredLabel() {
+  return (0, _jsxRuntime.jsx)("span", {
+    sx: {
+      color: 'error',
+      display: 'inline-block',
+      ml: 2,
+      fontSize: 1
+    },
+    children: "(Required)"
+  });
+};
+
+var inputStyles = {
+  unset: 'all',
+  border: '1px solid',
+  borderColor: 'border',
+  backgroundColor: 'card',
+  borderRadius: 1,
+  lineHeight: 'inherit',
+  px: 3,
+  py: 2,
+  fontSize: 2,
+  mb: 2,
+  color: 'text',
+  display: 'block',
+  width: '100%',
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  },
+  '&:disabled': {
+    bg: 'backgroundSecondary'
+  },
+  '&::placeholder': {
+    color: 'placeholder'
+  }
+};
 
 var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
@@ -25,43 +67,24 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       forLabel = _ref.forLabel,
       hasError = _ref.hasError,
       required = _ref.required,
+      _ref$sx = _ref.sx,
+      sx = _ref$sx === void 0 ? {} : _ref$sx,
       errorMessage = _ref.errorMessage,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
     children: [label && (0, _jsxRuntime.jsxs)(_.Label, {
       htmlFor: forLabel,
-      children: [label, required && '*']
-    }), (0, _jsxRuntime.jsx)("input", (0, _extends2["default"])({}, props, {
+      children: [label, required && (0, _jsxRuntime.jsx)(RequiredLabel, {})]
+    }), (0, _jsxRuntime.jsx)(_themeUi.Input, (0, _extends2["default"])({
       ref: ref,
       id: forLabel,
       required: required,
-      sx: {
-        border: '1px solid',
-        borderColor: 'border',
-        backgroundColor: 'card',
-        borderRadius: 1,
-        lineHeight: 'inherit',
-        px: 3,
-        py: 2,
-        fontSize: 2,
-        mb: 2,
-        color: 'text',
-        display: 'block',
-        width: '100%',
-        '&:focus': function focus(theme) {
-          return theme.outline;
-        },
-        '&:focus-visible': function focusVisible(theme) {
-          return theme.outline;
-        },
-        '&:disabled': {
-          bg: 'backgroundSecondary'
-        },
-        '&::placeholder': {
-          color: 'placeholder'
-        }
-      }
-    })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {
+      noValidate: true,
+      "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
+      sx: (0, _extends2["default"])({}, inputStyles, sx)
+    }, props)), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {
+      isValid: false,
+      describedId: forLabel,
       children: errorMessage
     })]
   });
@@ -74,6 +97,7 @@ Input.propTypes = {
   hasError: _propTypes["default"].bool,
   required: _propTypes["default"].bool,
   forLabel: _propTypes["default"].string,
-  errorMessage: _propTypes["default"].string
+  errorMessage: _propTypes["default"].string,
+  sx: _propTypes["default"].object
 };
 Input.displayName = 'Input';

package/build/system/Form/Input.stories.js

@@ -13,14 +13,44 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'Input',
-  component: _.Input
+  title: 'Form/Input'
 };
 exports["default"] = _default;
 
 var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Input, {
-    placeholder: "Your input here..."
+  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
+    children: [(0, _jsxRuntime.jsx)(_.Form.Input, {
+      placeholder: "Your input here...",
+      label: "Always add a label to inputs",
+      forLabel: "input-simple"
+    }), (0, _jsxRuntime.jsx)("hr", {
+      sx: {
+        my: 4
+      }
+    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
+      forLabel: "input-with-error",
+      label: "Error Input",
+      errorMessage: "Please type numeric characters only",
+      hasError: true
+    }), (0, _jsxRuntime.jsx)("hr", {
+      sx: {
+        my: 4
+      }
+    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
+      forLabel: "input-with-required",
+      label: "Required",
+      required: true
+    }), (0, _jsxRuntime.jsx)("hr", {
+      sx: {
+        my: 4
+      }
+    }), (0, _jsxRuntime.jsx)(_.Form.Label, {
+      htmlFor: "input-with-custom-label",
+      children: "Custom Label outside the Input"
+    }), (0, _jsxRuntime.jsx)(_.Form.Input, {
+      forLabel: "input-with-custom-label",
+      required: true
+    })]
   });
 };
 

package/build/system/Form/Radio.stories.js

@@ -0,0 +1,95 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var _react = require("react");
+
+var _ = require("..");
+
+var _Radio = require("./Radio");
+
+var _Label = require("./Label");
+
+var _Flex = require("../Flex");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Form/Radio',
+  component: _Radio.Radio
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)('a'),
+      checked = _useState[0],
+      setChecked = _useState[1];
+
+  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
+    children: [(0, _jsxRuntime.jsxs)("p", {
+      children: ["Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to your options.", ' ', (0, _jsxRuntime.jsx)("a", {
+        href: "https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html",
+        children: "Reference to Form fieldsets"
+      })]
+    }), (0, _jsxRuntime.jsxs)("fieldset", {
+      children: [(0, _jsxRuntime.jsx)("legend", {
+        sx: {
+          mb: 0,
+          fontSize: 2,
+          fontWeight: 'bold'
+        },
+        children: "Apply the policy to these domains"
+      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
+        sx: {
+          alignItems: 'center'
+        },
+        children: [(0, _jsxRuntime.jsx)(_Radio.Radio, {
+          name: "includeSubdomains",
+          id: "include-all-domains-opt",
+          onChange: function onChange() {
+            return setChecked('a');
+          },
+          value: 'a',
+          checked: checked === 'a'
+        }), (0, _jsxRuntime.jsx)(_Label.Label, {
+          htmlFor: "include-all-domains-opt",
+          sx: {
+            mb: 0
+          },
+          children: "All domains listed on this environment, and all subdomains"
+        })]
+      }), (0, _jsxRuntime.jsxs)(_Flex.Flex, {
+        sx: {
+          alignItems: 'center',
+          mb: 1
+        },
+        children: [(0, _jsxRuntime.jsx)(_Radio.Radio, {
+          name: "includeSubdomains",
+          id: "include-subdomains-opt",
+          onChange: function onChange() {
+            return setChecked('b');
+          },
+          checked: checked === 'b',
+          value: 'b'
+        }), (0, _jsxRuntime.jsx)(_Label.Label, {
+          id: "exclude-subdomains",
+          htmlFor: "include-subdomains-opt",
+          sx: {
+            mb: 0
+          },
+          children: "All domains listed on this environment"
+        })]
+      })]
+    })]
+  });
+};
+
+exports.Default = Default;

package/build/system/Form/Select.stories.js

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

package/build/system/Form/Textarea.js

@@ -7,66 +7,27 @@ exports.Textarea = 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 _ = require("../");
+var _Input = require("./Input");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "label", "forLabel", "hasError", "required", "errorMessage"];
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
 
-var Textarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var variant = _ref.variant,
-      label = _ref.label,
-      forLabel = _ref.forLabel,
-      hasError = _ref.hasError,
-      required = _ref.required,
-      errorMessage = _ref.errorMessage,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [label && (0, _jsxRuntime.jsxs)(_.Label, {
-      htmlFor: forLabel,
-      children: [label, required && '*']
-    }), (0, _jsxRuntime.jsx)("textarea", (0, _extends2["default"])({}, props, {
-      ref: ref,
-      sx: {
-        border: '1px solid',
-        borderColor: 'border',
-        backgroundColor: 'card',
-        borderRadius: 1,
-        lineHeight: 'inherit',
-        px: 3,
-        py: 2,
-        fontSize: 2,
-        mb: 2,
-        color: 'text',
-        display: 'block',
-        width: '100%',
-        '&:focus': {
-          borderColor: 'brand.60',
-          outline: 'none'
-        },
-        '&:disabled': {
-          backgroundColor: 'background'
-        }
-      }
-    })), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {
-      children: errorMessage
-    })]
-  });
+/**
+ * Internal dependencies
+ */
+var Textarea = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _jsxRuntime.jsx)(_Input.Input, (0, _extends2["default"])({
+    ref: ref,
+    as: "textarea"
+  }, props));
 });
 
 exports.Textarea = Textarea;
-Textarea.propTypes = {
-  variant: _propTypes["default"].string,
-  label: _propTypes["default"].string,
-  hasError: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  forLabel: _propTypes["default"].string,
-  errorMessage: _propTypes["default"].string
-};
 Textarea.displayName = 'Textarea';

package/build/system/Form/Textarea.stories.js

@@ -0,0 +1,67 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+
+var Form = _interopRequireWildcard(require("../NewForm"));
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+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 */
+
+/**
+ * Internal dependencies
+ */
+var _default = {
+  title: 'Form/Textarea',
+  argTypes: {
+    placeholder: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      type: {
+        name: 'string',
+        required: false
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var DefaultComponent = function DefaultComponent() {
+  return (0, _jsxRuntime.jsxs)(Form.Root, {
+    children: [(0, _jsxRuntime.jsx)(Form.Textarea, {
+      forLabel: "my-text-area",
+      rows: "5",
+      label: "Regular textarea"
+    }), (0, _jsxRuntime.jsx)("hr", {
+      sx: {
+        my: 4
+      }
+    }), (0, _jsxRuntime.jsx)(Form.Textarea, {
+      forLabel: "my-text-area-error",
+      rows: "5",
+      label: "Error textarea",
+      errorMessage: "Please type numeric characters only",
+      required: true,
+      hasError: true
+    })]
+  });
+};
+
+var Default = DefaultComponent.bind({});
+exports.Default = Default;
+Default.args = {};

package/build/system/Form/Validation.js

@@ -13,30 +13,36 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _md = require("react-icons/md");
 
-var _ = require("..");
-
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["children", "isValid"];
+var _excluded = ["children", "isValid", "describedId"];
 
+/**
+ * Internal dependencies
+ */
 var Validation = function Validation(_ref) {
   var children = _ref.children,
       isValid = _ref.isValid,
+      _ref$describedId = _ref.describedId,
+      describedId = _ref$describedId === void 0 ? null : _ref$describedId,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var Icon = isValid ? _md.MdCheckCircle : _md.MdErrorOutline;
-  return (0, _jsxRuntime.jsxs)(_.Heading, (0, _extends2["default"])({
-    variant: "h5",
-    as: "p",
+  var IconLabel = isValid ? 'Valid' : 'Invalid';
+  return (0, _jsxRuntime.jsxs)("p", (0, _extends2["default"])({
     sx: {
       color: isValid ? 'success' : 'error',
       display: 'flex',
-      alignItems: 'center'
-    }
+      alignItems: 'center',
+      m: 0,
+      fontSize: 1
+    },
+    id: describedId ? "describe-" + describedId + "-validation" : undefined
   }, props, {
     children: [(0, _jsxRuntime.jsx)(Icon, {
       sx: {
         mr: 1
-      }
+      },
+      "aria-label": IconLabel
     }), children]
   }));
 };
@@ -44,5 +50,6 @@ var Validation = function Validation(_ref) {
 exports.Validation = Validation;
 Validation.propTypes = {
   children: _propTypes["default"].node,
-  isValid: _propTypes["default"].bool
+  isValid: _propTypes["default"].bool,
+  describedId: _propTypes["default"].string
 };

package/build/system/NewConfirmationDialog/NewConfirmationDialog.stories.js

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

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Internal dependencies
  */
 var _default = {
-  title: 'NewDialog',
+  title: 'Dialog/NewDialog',
   component: NewDialog.Root
 };
 exports["default"] = _default;

package/build/system/NewForm/FormAutocomplete.js

@@ -79,6 +79,9 @@ var defaultStyles = {
     '&.autocomplete__input--focused': {
       outlineWidth: 0,
       boxShadow: 'none'
+    },
+    '&.autocomplete__input--show-all-values': {
+      paddingRight: '40px'
     }
   },
   '& .autocomplete__menu': {
@@ -93,8 +96,7 @@ var defaultStyles = {
     fontSize: 'inherit'
   },
   '& .autocomplete__wrapper': {
-    width: '100%',
-    paddingRight: '40px'
+    width: '100%'
   },
   '& .autocomplete__input--show-all-values': {
     paddingRight: 0
@@ -122,6 +124,10 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
+  var _useState = (0, _react.useState)(false),
+      isDirty = _useState[0],
+      setIsDirty = _useState[1];
+
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       htmlFor: forLabel || id,
@@ -155,19 +161,29 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     }
   }, [onChange, getOptionByLabel]);
   var suggest = (0, _react.useCallback)(function (query, populateResults) {
-    var data = options.filter(function (option) {
-      return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
-    });
+    var data = options;
+
+    if (isDirty) {
+      data = options.filter(function (option) {
+        return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
+      });
+    }
+
     populateResults(data.map(function (option) {
       return optionLabel(option);
     }));
-  }, [options]);
+  }, [options, isDirty]);
   (0, _react.useEffect)(function () {
     global.document.querySelector('.autocomplete__input').setAttribute('aria-activedescendant', '');
   }, []);
   (0, _react.useEffect)(function () {
     global.document.querySelector('.autocomplete__menu').setAttribute('aria-label', label + " list");
   }, [label]);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector("#" + id).addEventListener('keydown', function () {
+      setIsDirty(true);
+    });
+  }, [setIsDirty]);
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
       sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles),