@automattic/vip-design-system 0.26.1 → 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/index.js

@@ -7,8 +7,20 @@ var _FormSelect = require("./FormSelect");
 
 var _FormAutocomplete = require("./FormAutocomplete");
 
+var _Textarea = require("../Form/Textarea");
+
+exports.Textarea = _Textarea.Textarea;
+
+var _Input = require("../Form/Input");
+
+exports.Input = _Input.Input;
+
 var _Form = require("./Form");
 
+var _Label = require("../Form/Label");
+
+exports.Label = _Label.Label;
+
 /**
  * Internal dependencies
  */

package/build/system/NewTabs/Tabs.stories.js

@@ -11,7 +11,7 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
  * Internal dependencies
  */
 var _default = {
-  title: 'NewTabs',
+  title: 'Tabs',
   component: _.NewTabs
 };
 exports["default"] = _default;
@@ -37,16 +37,22 @@ var Default = function Default() {
       })]
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "all",
-      children: (0, _jsxRuntime.jsx)(_.Text, {
-        children: "All content"
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        children: ["All content ", (0, _jsxRuntime.jsx)("a", {
+          href: "https://google.com",
+          children: "https://google.com"
+        })]
       })
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "live",
       children: "Live content"
     }), (0, _jsxRuntime.jsx)(_.TabsContent, {
       value: "dev",
-      children: (0, _jsxRuntime.jsx)(_.Text, {
-        children: "In Development content"
+      children: (0, _jsxRuntime.jsxs)(_.Text, {
+        children: ["In Development content ", (0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          children: "Hey I am a button"
+        }), ' ']
       })
     })]
   });

package/build/system/NewTabs/TabsList.js

@@ -36,7 +36,7 @@ var TabsList = function TabsList(_ref) {
       borderColor: 'border',
       display: 'flex'
     }, sx),
-    title: title,
+    "aria-label": title,
     children: children
   });
 };

package/build/system/Tabs/Tabs.stories.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.26.1",
+	"version": "0.26.2",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Accordion/Accordion.js

@@ -85,6 +85,7 @@ export const Trigger = React.forwardRef(
 					'&[data-state="open"]': {
 						backgroundColor: 'backgroundSecondary',
 						borderBottom: theme => `1px solid ${ theme.colors.border }`,
+						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
 					'&:hover': { backgroundColor: 'backgroundSecondary' },
 				} }
@@ -93,12 +94,12 @@ export const Trigger = React.forwardRef(
 			>
 				{ children }
 				<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)' },
 					} }
 					aria-hidden
 				/>

package/src/system/Form/Checkbox.stories.jsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Form } from '..';
+import { Checkbox } from './Checkbox';
+import { Label } from './Label';
+import { Flex } from '../Flex';
+
+export default {
+	title: 'Form/Checkbox',
+	component: Checkbox,
+};
+
+export const Default = () => {
+	const [ checked, setChecked ] = useState( true );
+	const [ checked2, setChecked2 ] = useState( false );
+
+	return (
+		<Form.Root>
+			<fieldset>
+				<legend>Tell me your prefereces</legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Checkbox
+						id="check1"
+						checked={ checked }
+						aria-labelledby="label-check1"
+						onCheckedChange={ setChecked }
+					/>
+					<Label sx={ { m: 0, ml: 2 } } htmlFor="check1" id="label-check1">
+						This option
+					</Label>
+				</Flex>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Checkbox
+						id="check2"
+						checked={ checked2 }
+						aria-labelledby="label-check2"
+						onCheckedChange={ setChecked2 }
+					/>
+					<Label sx={ { m: 0, ml: 2 } } htmlFor="check2" id="label-check2">
+						This option too
+					</Label>
+				</Flex>
+			</fieldset>
+		</Form.Root>
+	);
+};

package/src/system/Form/Input.js

@@ -10,45 +10,61 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import { Validation, Label } from '../';
+import { Input as ThemeInput } from 'theme-ui';
+
+const RequiredLabel = () => (
+	<span sx={ { color: 'error', display: 'inline-block', ml: 2, fontSize: 1 } }>(Required)</span>
+);
+
+const 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': theme => theme.outline,
+	'&:focus-visible': theme => theme.outline,
+	'&:disabled': {
+		bg: 'backgroundSecondary',
+	},
+	'&::placeholder': {
+		color: 'placeholder',
+	},
+};
 
 const Input = React.forwardRef(
-	( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
+	( { variant, label, forLabel, hasError, required, sx = {}, errorMessage, ...props }, ref ) => (
 		<React.Fragment>
 			{ label && (
 				<Label htmlFor={ forLabel }>
 					{ label }
-					{ required && '*' }
+					{ required && <RequiredLabel /> }
 				</Label>
 			) }
-			<input
-				{ ...props }
+
+			<ThemeInput
 				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': theme => theme.outline,
-					'&:focus-visible': theme => theme.outline,
-					'&:disabled': {
-						bg: 'backgroundSecondary',
-					},
-					'&::placeholder': {
-						color: 'placeholder',
-					},
-				} }
+				noValidate
+				aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
+				sx={ { ...inputStyles, ...sx } }
+				{ ...props }
 			/>
-			{ hasError && errorMessage && <Validation>{ errorMessage }</Validation> }
+
+			{ hasError && errorMessage && (
+				<Validation isValid={ false } describedId={ forLabel }>
+					{ errorMessage }
+				</Validation>
+			) }
 		</React.Fragment>
 	)
 );
@@ -60,6 +76,7 @@ Input.propTypes = {
 	required: PropTypes.bool,
 	forLabel: PropTypes.string,
 	errorMessage: PropTypes.string,
+	sx: PropTypes.object,
 };
 
 Input.displayName = 'Input';

package/src/system/Form/Input.stories.jsx

@@ -3,11 +3,36 @@
 /**
  * Internal dependencies
  */
-import { Input } from '..';
+import { Form } from '..';
 
 export default {
-	title: 'Input',
-	component: Input,
+	title: 'Form/Input',
 };
 
-export const Default = () => <Input placeholder="Your input here..." />;
+export const Default = () => (
+	<Form.Root>
+		<Form.Input
+			placeholder="Your input here..."
+			label="Always add a label to inputs"
+			forLabel="input-simple"
+		/>
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Input
+			forLabel="input-with-error"
+			label="Error Input"
+			errorMessage="Please type numeric characters only"
+			hasError
+		/>
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Input forLabel="input-with-required" label="Required" required />
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Label htmlFor="input-with-custom-label">Custom Label outside the Input</Form.Label>
+		<Form.Input forLabel="input-with-custom-label" required />
+	</Form.Root>
+);

package/src/system/Form/Radio.stories.jsx

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { useState } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Form } from '..';
+import { Radio } from './Radio';
+import { Label } from './Label';
+import { Flex } from '../Flex';
+
+export default {
+	title: 'Form/Radio',
+	component: Radio,
+};
+
+export const Default = () => {
+	const [ checked, setChecked ] = useState( 'a' );
+
+	return (
+		<Form.Root>
+			<p>
+				Per recommendation, if you have a Radio button, use a Fieldset with a legend as wrapper to
+				your options.{ ' ' }
+				<a href="https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html">
+					Reference to Form fieldsets
+				</a>
+			</p>
+			<fieldset>
+				<legend sx={ { mb: 0, fontSize: 2, fontWeight: 'bold' } }>
+					Apply the policy to these domains
+				</legend>
+
+				<Flex sx={ { alignItems: 'center' } }>
+					<Radio
+						name="includeSubdomains"
+						id="include-all-domains-opt"
+						onChange={ () => setChecked( 'a' ) }
+						value={ 'a' }
+						checked={ checked === 'a' }
+					/>
+
+					<Label htmlFor="include-all-domains-opt" sx={ { mb: 0 } }>
+						All domains listed on this environment, and all subdomains
+					</Label>
+				</Flex>
+
+				<Flex sx={ { alignItems: 'center', mb: 1 } }>
+					<Radio
+						name="includeSubdomains"
+						id="include-subdomains-opt"
+						onChange={ () => setChecked( 'b' ) }
+						checked={ checked === 'b' }
+						value={ 'b' }
+					/>
+
+					<Label id="exclude-subdomains" htmlFor="include-subdomains-opt" sx={ { mb: 0 } }>
+						All domains listed on this environment
+					</Label>
+				</Flex>
+			</fieldset>
+		</Form.Root>
+	);
+};

package/src/system/Form/Select.stories.jsx

@@ -9,7 +9,7 @@ import { useState } from 'react';
 import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
 
 export default {
-	title: 'Select',
+	title: 'Deprecated/Select',
 	component: Dialog,
 };
 

package/src/system/Form/Textarea.js

@@ -4,60 +4,15 @@
  * External dependencies
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
-import { Validation, Label } from '../';
+import { Input } from './Input';
 
-const Textarea = React.forwardRef(
-	( { variant, label, forLabel, hasError, required, errorMessage, ...props }, ref ) => (
-		<React.Fragment>
-			{ label && (
-				<Label htmlFor={ forLabel }>
-					{ label }
-					{ required && '*' }
-				</Label>
-			) }
-			<textarea
-				{ ...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 && <Validation>{ errorMessage }</Validation> }
-		</React.Fragment>
-	)
-);
-
-Textarea.propTypes = {
-	variant: PropTypes.string,
-	label: PropTypes.string,
-	hasError: PropTypes.bool,
-	required: PropTypes.bool,
-	forLabel: PropTypes.string,
-	errorMessage: PropTypes.string,
-};
+const Textarea = React.forwardRef( ( props, ref ) => (
+	<Input ref={ ref } as="textarea" { ...props } />
+) );
 
 Textarea.displayName = 'Textarea';
 

package/src/system/Form/Textarea.stories.jsx

@@ -0,0 +1,40 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * Internal dependencies
+ */
+import * as Form from '../NewForm';
+
+export default {
+	title: 'Form/Textarea',
+	argTypes: {
+		placeholder: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+		label: {
+			type: { name: 'string', required: false },
+			control: { type: 'text' },
+		},
+	},
+};
+
+const DefaultComponent = () => (
+	<Form.Root>
+		<Form.Textarea forLabel="my-text-area" rows="5" label="Regular textarea" />
+
+		<hr sx={ { my: 4 } } />
+
+		<Form.Textarea
+			forLabel="my-text-area-error"
+			rows="5"
+			label="Error textarea"
+			errorMessage="Please type numeric characters only"
+			required
+			hasError
+		/>
+	</Form.Root>
+);
+
+export const Default = DefaultComponent.bind( {} );
+Default.args = {};

package/src/system/Form/Validation.js

@@ -9,27 +9,33 @@ import { MdErrorOutline, MdCheckCircle } from 'react-icons/md';
 /**
  * Internal dependencies
  */
-import { Heading } from '..';
 
-const Validation = ( { children, isValid, ...props } ) => {
+const Validation = ( { children, isValid, describedId = null, ...props } ) => {
 	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
+	const IconLabel = isValid ? 'Valid' : 'Invalid';
 
 	return (
-		<Heading
-			variant="h5"
-			as="p"
-			sx={ { color: isValid ? 'success' : 'error', display: 'flex', alignItems: 'center' } }
+		<p
+			sx={ {
+				color: isValid ? 'success' : 'error',
+				display: 'flex',
+				alignItems: 'center',
+				m: 0,
+				fontSize: 1,
+			} }
+			id={ describedId ? `describe-${ describedId }-validation` : undefined }
 			{ ...props }
 		>
-			<Icon sx={ { mr: 1 } } />
+			<Icon sx={ { mr: 1 } } aria-label={ IconLabel } />
 			{ children }
-		</Heading>
+		</p>
 	);
 };
 
 Validation.propTypes = {
 	children: PropTypes.node,
 	isValid: PropTypes.bool,
+	describedId: PropTypes.string,
 };
 
 export { Validation };

package/src/system/NewConfirmationDialog/NewConfirmationDialog.stories.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { Box, NewConfirmationDialog, Button } from '..';
 
 export default {
-	title: 'NewConfirmationDialog',
+	title: 'Dialog/NewConfirmationDialog',
 	component: NewConfirmationDialog,
 };
 

package/src/system/NewDialog/NewDialog.stories.jsx

@@ -14,7 +14,7 @@ import ScreenReaderText from '../ScreenReaderText';
 import * as NewDialog from '.';
 
 export default {
-	title: 'NewDialog',
+	title: 'Dialog/NewDialog',
 	component: NewDialog.Root,
 };
 

package/src/system/NewForm/index.js

@@ -4,12 +4,15 @@
 
 import { FormSelect } from './FormSelect';
 import { FormAutocomplete } from './FormAutocomplete';
+import { Textarea } from '../Form/Textarea';
+import { Input } from '../Form/Input';
 import { Form } from './Form';
+import { Label } from '../Form/Label';
 
 const Select = FormSelect;
 const Autocomplete = FormAutocomplete;
 const Root = Form;
 
-export { Root, Select, Autocomplete };
+export { Root, Select, Autocomplete, Textarea, Input, Label };
 
 export default Root;

package/src/system/NewTabs/Tabs.stories.jsx

@@ -4,7 +4,7 @@
 import { NewTabs, TabsTrigger, TabsList, TabsContent, Text } from '..';
 
 export default {
-	title: 'NewTabs',
+	title: 'Tabs',
 	component: NewTabs,
 };
 
@@ -19,11 +19,15 @@ export const Default = () => (
 			</TabsTrigger>
 		</TabsList>
 		<TabsContent value="all">
-			<Text>All content</Text>
+			<Text>
+				All content <a href="https://google.com">https://google.com</a>
+			</Text>
 		</TabsContent>
 		<TabsContent value="live">Live content</TabsContent>
 		<TabsContent value="dev">
-			<Text>In Development content</Text>
+			<Text>
+				In Development content <button type="button">Hey I am a button</button>{ ' ' }
+			</Text>
 		</TabsContent>
 	</NewTabs>
 );

package/src/system/NewTabs/TabsList.js

@@ -18,7 +18,7 @@ const TabsList = ( { children, title, sx } ) => (
 			display: 'flex',
 			...sx,
 		} }
-		title={ title }
+		aria-label={ title }
 	>
 		{ children }
 	</TabsPrimitive.List>

package/src/system/Tabs/Tabs.stories.jsx

@@ -4,7 +4,7 @@
 import { Tabs, TabItem } from '..';
 
 export default {
-	title: 'Tabs',
+	title: 'Deprecated/Tabs',
 	component: Tabs,
 };