@automattic/vip-design-system 0.9.6 → 0.10.0

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

@@ -1,55 +1,32 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
+
+import { Box, ConfirmationDialog, Button, Heading, Text, Flex } from '..';
+export default {
   title: 'ConfirmationDialog',
-  component: _.ConfirmationDialog
+  component: ConfirmationDialog
 };
-exports["default"] = _default;
-var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+var ConfirmationTrigger = /*#__PURE__*/React.createElement(Button, {
   sx: {
     mr: 3
-  },
-  children: "Dangerous Action"
-});
-var ConfirmationContent = (0, _jsxRuntime.jsxs)(_.Box, {
-  p: 5,
-  children: [(0, _jsxRuntime.jsx)(_.Heading, {
-    children: "This is a Modal"
-  }), (0, _jsxRuntime.jsx)(_.Text, {
-    sx: {
-      fontSize: 3
-    },
-    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
-  })]
-});
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Flex, {
-    children: (0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.ConfirmationDialog, {
-        trigger: ConfirmationTrigger,
-        content: ConfirmationContent
-      })
-    })
-  });
-};
-
-exports.Default = Default;
+  }
+}, "Dangerous Action");
+var ConfirmationContent = /*#__PURE__*/React.createElement(Box, {
+  p: 5
+}, /*#__PURE__*/React.createElement(Heading, null, "This is a Modal"), /*#__PURE__*/React.createElement(Text, {
+  sx: {
+    fontSize: 3
+  }
+}, "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."));
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
+    trigger: ConfirmationTrigger,
+    title: "Are you sure you want to continue?",
+    body: "Your site will no longer be accessible via the old domain. Please make sure to test this change before moving forward."
+  })));
+};

package/build/system/Dialog/Dialog.js

@@ -81,6 +81,7 @@ var Dialog = function Dialog(_ref) {
       position: 'relative'
     },
     ref: dialogRef,
+    className: "vip-dialog-component",
     children: [(0, _jsxRuntime.jsx)(_.DialogTrigger, {
       tabIndex: "0",
       sx: {

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

@@ -1,83 +1,43 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
+
+import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Button, Heading, Text, Flex } from '..';
+export default {
   title: 'Dialog',
-  component: _.Dialog
+  component: Dialog
 };
-exports["default"] = _default;
-var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  children: "Trigger Dropdown"
-});
-var ModalTrigger = (0, _jsxRuntime.jsx)(_.Button, {
+var DropdownTrigger = /*#__PURE__*/React.createElement(Button, null, "Trigger Dropdown");
+var ModalTrigger = /*#__PURE__*/React.createElement(Button, {
   sx: {
     mr: 3
-  },
-  children: "Trigger Modal"
-});
-var DropdownContent = (0, _jsxRuntime.jsxs)("div", {
-  children: [(0, _jsxRuntime.jsxs)(_.DialogMenu, {
-    children: [(0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Profile"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Account"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Dark Mode"
-    })]
-  }), (0, _jsxRuntime.jsx)(_.DialogDivider, {}), (0, _jsxRuntime.jsx)(_.DialogMenu, {
-    children: (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Logout"
-    })
-  })]
-});
-var ModalContent = (0, _jsxRuntime.jsxs)(_.Box, {
-  p: 5,
-  children: [(0, _jsxRuntime.jsx)(_.Heading, {
-    children: "This is a Modal"
-  }), (0, _jsxRuntime.jsx)(_.Text, {
+  }
+}, "Trigger Modal");
+var DropdownContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Profile"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Account"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Dark Mode")), /*#__PURE__*/React.createElement(DialogDivider, null), /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Logout")));
+var ModalContent = /*#__PURE__*/React.createElement(Box, {
+  p: 5
+}, /*#__PURE__*/React.createElement(Heading, null, "This is a Modal"), /*#__PURE__*/React.createElement(Text, {
+  sx: {
+    fontSize: 3
+  }
+}, "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."));
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Dialog, {
+    trigger: ModalTrigger,
+    content: ModalContent,
     sx: {
-      fontSize: 3
+      width: 480
     },
-    children: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind."
-  })]
-});
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Flex, {
-    children: [(0, _jsxRuntime.jsx)(_.Box, {
-      children: (0, _jsxRuntime.jsx)(_.Dialog, {
-        trigger: ModalTrigger,
-        content: ModalContent,
-        sx: {
-          width: 480
-        },
-        variant: "modal"
-      })
-    }), (0, _jsxRuntime.jsx)(_.Dialog, {
-      trigger: DropdownTrigger,
-      content: DropdownContent,
-      sx: {
-        width: 200
-      }
-    })]
-  });
-};
-
-exports.Default = Default;
+    variant: "modal"
+  })), /*#__PURE__*/React.createElement(Dialog, {
+    trigger: DropdownTrigger,
+    content: DropdownContent,
+    sx: {
+      width: 200
+    }
+  }));
+};

package/build/system/Flex/Flex.stories.js

@@ -1,33 +1,16 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Flex',
-  component: _.Flex
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Flex, {
-    children: "Hello"
-  });
+import { Flex } from '..';
+export default {
+  title: 'Flex',
+  component: Flex
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Flex, null, "Hello");
+};

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

@@ -1,33 +1,18 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
+
+import { Input } from '..';
+export default {
   title: 'Input',
-  component: _.Input
+  component: Input
 };
-exports["default"] = _default;
-
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Input, {
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Input, {
     placeholder: "Your input here..."
   });
-};
-
-exports.Default = Default;
+};

package/build/system/Form/Select.js

@@ -69,6 +69,7 @@ var Select = function Select(_ref) {
 
   return (0, _jsxRuntime.jsx)("div", {
     ref: selectRef,
+    className: "vip-select-component",
     children: (0, _jsxRuntime.jsx)(Component, _extends({
       isMulti: isMulti,
       label: label,

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

@@ -1,30 +1,28 @@
-"use strict";
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-exports.__esModule = true;
-exports.DropdownMenu = exports.Inline = exports.Single = exports.Multi = exports["default"] = void 0;
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-var _react = _interopRequireWildcard(require("react"));
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-var _ = require("..");
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-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; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /**
  * External dependencies
  */
-
+import React, { useState } from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
+
+import { Box, Dialog, DialogMenu, DialogMenuItem, DialogDivider, Select, Button } from '..';
+export default {
   title: 'Select',
-  component: _.Dialog
+  component: Dialog
 };
-exports["default"] = _default;
 var options = [{
   value: 'chocolate',
   label: 'Chocolate'
@@ -35,116 +33,88 @@ var options = [{
   value: 'vanilla',
   label: 'Vanilla'
 }];
-var DropdownContent = (0, _jsxRuntime.jsxs)("div", {
-  children: [(0, _jsxRuntime.jsxs)(_.DialogMenu, {
-    children: [(0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Profile"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Account"
-    }), (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Dark Mode"
-    })]
-  }), (0, _jsxRuntime.jsx)(_.DialogDivider, {}), (0, _jsxRuntime.jsx)(_.DialogMenu, {
-    children: (0, _jsxRuntime.jsx)(_.DialogMenuItem, {
-      children: "Logout"
-    })
-  })]
-});
-var DropdownTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  variant: "secondary",
-  children: "Trigger Dropdown"
-});
-
-var Multi = function Multi() {
-  var _useState = (0, _react.useState)([]),
-      value = _useState[0],
-      setValue = _useState[1];
+var DropdownContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Profile"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Account"), /*#__PURE__*/React.createElement(DialogMenuItem, null, "Dark Mode")), /*#__PURE__*/React.createElement(DialogDivider, null), /*#__PURE__*/React.createElement(DialogMenu, null, /*#__PURE__*/React.createElement(DialogMenuItem, null, "Logout")));
+var DropdownTrigger = /*#__PURE__*/React.createElement(Button, {
+  variant: "secondary"
+}, "Trigger Dropdown");
+export var Multi = function Multi() {
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
 
-  return (0, _jsxRuntime.jsx)(_.Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     sx: {
       mr: 2,
       width: 400
-    },
-    children: (0, _jsxRuntime.jsx)(_.Select, {
-      label: "Type",
-      value: value,
-      isMulti: true,
-      placeholder: "Select domains...",
-      options: options,
-      onChange: function onChange(newValue) {
-        return setValue(newValue);
-      }
-    })
-  });
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: "Type",
+    value: value,
+    isMulti: true,
+    placeholder: "Select domains...",
+    options: options,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    }
+  }));
 };
+export var Single = function Single() {
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
 
-exports.Multi = Multi;
-
-var Single = function Single() {
-  var _useState2 = (0, _react.useState)([]),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  return (0, _jsxRuntime.jsx)(_.Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     sx: {
       mr: 2,
       width: 200
-    },
-    children: (0, _jsxRuntime.jsx)(_.Select, {
-      label: "User",
-      value: value,
-      placeholder: "Select a domain...",
-      options: options,
-      onChange: function onChange(newValue) {
-        return setValue(newValue);
-      }
-    })
-  });
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: "User",
+    value: value,
+    placeholder: "Select a domain...",
+    options: options,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    }
+  }));
 };
+export var Inline = function Inline() {
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      value = _useState6[0],
+      setValue = _useState6[1];
 
-exports.Single = Single;
-
-var Inline = function Inline() {
-  var _useState3 = (0, _react.useState)([]),
-      value = _useState3[0],
-      setValue = _useState3[1];
-
-  return (0, _jsxRuntime.jsx)(_.Box, {
+  return /*#__PURE__*/React.createElement(Box, {
     sx: {
       mr: 2,
       width: 200
-    },
-    children: (0, _jsxRuntime.jsx)(_.Select, {
-      label: "User",
-      value: value,
-      isInline: true,
-      isMulti: true,
-      noneLabel: "Everyone",
-      placeholder: "Filter by user...",
-      options: options,
-      onChange: function onChange(newValue) {
-        return setValue(newValue);
-      }
-    })
-  });
+    }
+  }, /*#__PURE__*/React.createElement(Select, {
+    label: "User",
+    value: value,
+    isInline: true,
+    isMulti: true,
+    noneLabel: "Everyone",
+    placeholder: "Filter by user...",
+    options: options,
+    onChange: function onChange(newValue) {
+      return setValue(newValue);
+    }
+  }));
 };
-
-exports.Inline = Inline;
-
-var DropdownMenu = function DropdownMenu() {
-  return (0, _jsxRuntime.jsx)(_.Box, {
+export var DropdownMenu = function DropdownMenu() {
+  return /*#__PURE__*/React.createElement(Box, {
     sx: {
       mr: 2,
       width: 200
-    },
-    children: (0, _jsxRuntime.jsx)(_.Dialog, {
-      trigger: DropdownTrigger,
-      content: DropdownContent,
-      sx: {
-        width: 200
-      }
-    })
-  });
-};
-
-exports.DropdownMenu = DropdownMenu;
+    }
+  }, /*#__PURE__*/React.createElement(Dialog, {
+    trigger: DropdownTrigger,
+    content: DropdownContent,
+    sx: {
+      width: 200
+    }
+  }));
+};

package/build/system/Form/Toggle.js

@@ -3,11 +3,13 @@
 exports.__esModule = true;
 exports.Toggle = void 0;
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["name"];
+var _excluded = ["name", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -18,9 +20,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Toggle = function Toggle(_ref) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? 'toggle' : _ref$name,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsxs)(CheckBoxWrapper, {
+    className: (0, _classnames["default"])('vip-checkbox-component', className),
     children: [(0, _jsxRuntime.jsx)(CheckBox, _extends({
       name: name,
       id: name,
@@ -33,7 +38,8 @@ var Toggle = function Toggle(_ref) {
 
 exports.Toggle = Toggle;
 Toggle.propTypes = {
-  name: _propTypes["default"].string
+  name: _propTypes["default"].string,
+  className: _propTypes["default"].any
 };
 
 var CheckBoxWrapper = function CheckBoxWrapper(props) {

package/build/system/Grid/Grid.stories.js

@@ -1,33 +1,16 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Default = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * External dependencies
  */
-
+import React from 'react';
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Grid',
-  component: _.Grid
-};
-exports["default"] = _default;
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Grid, {
-    children: "Hello"
-  });
+import { Grid } from '..';
+export default {
+  title: 'Grid',
+  component: Grid
 };
-
-exports.Default = Default;
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid, null, "Hello");
+};

package/build/system/Heading/Heading.js

@@ -7,9 +7,11 @@ var _themeUi = require("theme-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["variant", "sx"];
+var _excluded = ["variant", "sx", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -21,6 +23,8 @@ var Heading = function Heading(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
       sx = _ref.sx,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? null : _ref$className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return (0, _jsxRuntime.jsx)(_themeUi.Heading, _extends({
@@ -29,12 +33,14 @@ var Heading = function Heading(_ref) {
       color: 'heading',
       // pass variant prop to sx
       variant: "text." + variant
-    }, sx)
+    }, sx),
+    className: (0, _classnames["default"])('vip-heading-component', className)
   }, props));
 };
 
 exports.Heading = Heading;
 Heading.propTypes = {
   variant: _propTypes["default"].string,
-  sx: _propTypes["default"].object
+  sx: _propTypes["default"].object,
+  className: _propTypes["default"].any
 };