@automattic/vip-design-system 0.26.1 → 0.26.3

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

@@ -110,29 +110,40 @@ var Trigger = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forward
         fontWeight: 600,
         textTransform: 'uppercase',
         '&[data-state="closed"]': {
-          backgroundColor: 'transparent'
+          backgroundColor: function backgroundColor(_ref3) {
+            var accordion = _ref3.accordion;
+            return accordion.background.closed;
+          }
         },
         '&[data-state="open"]': {
-          backgroundColor: 'backgroundSecondary',
-          borderBottom: function borderBottom(theme) {
-            return "1px solid " + theme.colors.border;
+          backgroundColor: function backgroundColor(_ref4) {
+            var accordion = _ref4.accordion;
+            return accordion.background.open;
+          },
+          borderBottom: function borderBottom(_ref5) {
+            var colors = _ref5.colors;
+            return "1px solid " + colors.border;
+          },
+          '.vip-accordion-trigger-indicator': {
+            transform: 'rotate(270deg)'
           }
         },
         '&:hover': {
-          backgroundColor: 'backgroundSecondary'
+          backgroundColor: function backgroundColor(_ref6) {
+            var accordion = _ref6.accordion;
+            return accordion.background.hover;
+          }
         }
       }
     }, 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
       })]
@@ -147,10 +158,10 @@ Trigger.propTypes = {
   headingVariant: _propTypes["default"].string
 };
 
-var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardedRef) {
-  var children = _ref3.children,
-      icon = _ref3.icon,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
+var TriggerWithIcon = /*#__PURE__*/_react["default"].forwardRef(function (_ref7, forwardedRef) {
+  var children = _ref7.children,
+      icon = _ref7.icon,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded3);
   return (0, _jsxRuntime.jsxs)(Trigger, (0, _extends2["default"])({}, props, {
     ref: forwardedRef,
     children: [(0, _jsxRuntime.jsx)("span", {
@@ -178,11 +189,11 @@ TriggerWithIcon.propTypes = {
   icon: _propTypes["default"].node.isRequired
 };
 
-var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, forwardedRef) {
-  var children = _ref4.children,
-      _ref4$sx = _ref4.sx,
-      sx = _ref4$sx === void 0 ? {} : _ref4$sx,
-      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
+var Content = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, forwardedRef) {
+  var children = _ref8.children,
+      _ref8$sx = _ref8.sx,
+      sx = _ref8$sx === void 0 ? {} : _ref8$sx,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref8, _excluded4);
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Content, (0, _extends2["default"])({
     sx: (0, _extends2["default"])({
       backgroundColor: 'transparent',
@@ -215,13 +226,13 @@ Content.propTypes = {
   sx: _propTypes["default"].object
 };
 
-var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref5, forwardRef) {
-  var _ref5$sx = _ref5.sx,
-      sx = _ref5$sx === void 0 ? {} : _ref5$sx,
-      defaultValue = _ref5.defaultValue,
-      type = _ref5.type,
-      children = _ref5.children,
-      className = _ref5.className;
+var Root = /*#__PURE__*/_react["default"].forwardRef(function (_ref9, forwardRef) {
+  var _ref9$sx = _ref9.sx,
+      sx = _ref9$sx === void 0 ? {} : _ref9$sx,
+      defaultValue = _ref9.defaultValue,
+      type = _ref9.type,
+      children = _ref9.children,
+      className = _ref9.className;
   return (0, _jsxRuntime.jsx)(AccordionPrimitive.Root, {
     className: (0, _classnames["default"])('vip-accordion-component', className),
     collapsible: 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/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/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 = {};