@automattic/vip-design-system 0.19.0 → 0.19.1

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/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/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/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
+  }]
+};

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _FormSelect = require("./FormSelect");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var options = [{
+  value: 'chocolate',
+  label: 'Chocolate'
+}, {
+  value: 'strawberry',
+  label: 'Strawberry Chocolate Vanilla Chocolate Vanilla'
+}, {
+  value: 'vanilla',
+  label: 'Vanilla'
+}];
+var defaultProps = {
+  label: 'This is a label',
+  forLabel: 'my_desert_list',
+  options: options
+};
+describe('<FormSelect />', function () {
+  it('renders the FormSelect component', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, defaultProps))), container = _render.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context.t1 = _context.sent;
+            _context.next = 9;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/NewForm/FormSelectArrow.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormSelectArrow = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _md = require("react-icons/md");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+var FormSelectArrow = /*#__PURE__*/_react["default"].forwardRef(function (props, forwardRef) {
+  return (0, _jsxRuntime.jsx)(_md.MdExpandMore, (0, _extends2["default"])({
+    ref: forwardRef,
+    "aria-hidden": "true",
+    size: 24,
+    sx: {
+      paddingLeft: 2,
+      borderLeftWidth: '1px',
+      borderLeftStyle: 'solid',
+      borderLeftColor: 'border',
+      position: 'relative',
+      right: 34,
+      pointerEvents: 'none'
+    }
+  }, props));
+});
+
+exports.FormSelectArrow = FormSelectArrow;
+FormSelectArrow.displayName = 'FormSelectArrow';

package/build/system/NewForm/FormSelectContent.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormSelectContent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _FormSelectInline = require("./FormSelectInline");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+var defaultStyles = {
+  '&:hover select': {
+    borderColor: 'border'
+  },
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center'
+};
+
+var FormSelectContent = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var isInline = _ref.isInline,
+      label = _ref.label,
+      children = _ref.children;
+  return (0, _jsxRuntime.jsxs)("div", {
+    sx: isInline ? _FormSelectInline.inlineStyles : {},
+    className: "vip-select-component",
+    ref: forwardRef,
+    children: [isInline && label, (0, _jsxRuntime.jsx)("div", {
+      sx: defaultStyles,
+      children: children
+    })]
+  });
+});
+
+exports.FormSelectContent = FormSelectContent;
+FormSelectContent.propTypes = {
+  isInline: _propTypes["default"].bool,
+  label: _propTypes["default"].any,
+  children: _propTypes["default"].any
+};
+FormSelectContent.displayName = 'FormSelectContent';

package/build/system/NewForm/FormSelectInline.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.inlineStyles = void 0;
+var inlineStyles = {
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  borderColor: 'border',
+  borderRadius: 1,
+  borderWidth: 1,
+  borderStyle: 'solid',
+  paddingRight: 0,
+  paddingLeft: 3,
+  label: {
+    margin: 0,
+    paddingRight: 2,
+    borderRightWidth: '1px',
+    borderRightStyle: 'solid',
+    borderRightColor: 'border'
+  },
+  select: {
+    width: '100%',
+    border: 'none',
+    margin: 0,
+    paddingLeft: 2
+  },
+  svg: {
+    right: 2,
+    position: 'absolute'
+  }
+};
+exports.inlineStyles = inlineStyles;

package/build/system/NewForm/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Select = exports.Root = void 0;
+
+var _FormSelect = require("./FormSelect");
+
+var _Form = require("./Form");
+
+/**
+ * Internal dependencies
+ */
+var Select = _FormSelect.FormSelect;
+exports.Select = Select;
+var Root = _Form.Form;
+exports.Root = Root;
+var _default = Root;
+exports["default"] = _default;

package/build/system/Notice/Notice.js

@@ -91,7 +91,6 @@ var Notice = function Notice(_ref2) {
       color: color + ".90",
       a: {
         color: color + ".90",
-        textDecoration: 'underline',
         border: 'none'
       }
     }, sx),

package/build/system/OptionRow/OptionRow.js

@@ -24,7 +24,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["image", "icon", "badge", "label", "inline", "subTitle", "body", "meta", "to", "small", "disabled", "order", "className"];
 var disabledStyles = {
   border: '1px solid',
-  borderColor: 'border',
+  borderColor: 'borders.2',
   background: 'none',
   boxShadow: 'none',
   color: 'grey.70'
@@ -40,7 +40,7 @@ var regularGridStyle = function regularGridStyle(small) {
     py: 3,
     px: [3, 3, small ? 3 : 5],
     borderBottom: '1px solid',
-    borderColor: 'border'
+    borderColor: 'borders.2'
   };
 };
 

package/build/system/ResourceList/ResourceList.js

@@ -53,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       listStyleType: 'none',
       margin: 0,
       px: 0

package/build/system/Table/TableCell.js

@@ -25,7 +25,7 @@ var TableCell = function TableCell(_ref) {
     borderBottom: '1px solid',
     borderTop: head ? '1px solid' : 'none',
     // borderColor should come after borderTop so it can override it
-    borderColor: 'border',
+    borderColor: 'borders.2',
     fontWeight: 'body',
     px: 3,
     py: 2,

package/build/system/Tabs/TabItem.js

@@ -23,8 +23,8 @@ var TabItem = function TabItem(_ref) {
       sx = _ref.sx,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsx)(_.Link, (0, _extends2["default"])({
-    variant: "h4",
-    as: "button",
+    variant: "h4" // as="button"
+    ,
     tabIndex: "0",
     "data-active": active || undefined,
     sx: (0, _extends2["default"])({
@@ -40,6 +40,7 @@ var TabItem = function TabItem(_ref) {
       borderLeft: 'none',
       borderRight: 'none',
       borderBottom: '1px solid',
+      textDecoration: 'none',
       borderColor: active ? 'link' : 'transparent',
       transform: 'translateY(1px)',
       '&:visited': {

package/build/system/Wizard/Wizard.js

@@ -42,13 +42,15 @@ var Wizard = function Wizard(_ref) {
       }, props, {
         children: steps.map(function (_ref2, index) {
           var title = _ref2.title,
-              subTitle = _ref2.subTitle;
+              subTitle = _ref2.subTitle,
+              titleVariant = _ref2.titleVariant;
           return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
             children: [(0, _jsxRuntime.jsx)(_.WizardStepHorizontal, {
-              order: index + 1,
               active: index === activeStep,
+              order: index + 1,
+              subTitle: subTitle,
               title: title,
-              subTitle: subTitle
+              titleVariant: titleVariant
             }), index < steps.length - 1 && (0, _jsxRuntime.jsx)(_md.MdArrowForward, {
               sx: {
                 mx: 2,
@@ -61,13 +63,15 @@ var Wizard = function Wizard(_ref) {
     }) : steps.map(function (_ref3, index) {
       var title = _ref3.title,
           subTitle = _ref3.subTitle,
-          children = _ref3.children;
+          children = _ref3.children,
+          titleVariant = _ref3.titleVariant;
       return (0, _jsxRuntime.jsx)(_.WizardStep, {
         active: index === activeStep,
-        title: title,
-        subTitle: subTitle,
         complete: completed.includes(index),
         order: index + 1,
+        subTitle: subTitle,
+        title: title,
+        titleVariant: titleVariant,
         children: children
       }, index);
     })