@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Form/Validation.js

@@ -1,48 +1,39 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Validation = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _md = require("react-icons/md");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["children", "isValid", "describedId"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var errorColor = 'texts.error';
-var helperColor = 'texts.helper';
-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 = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var Icon = isValid ? _md.MdCheckCircle : _md.MdErrorOutline;
-  return (0, _jsxRuntime.jsxs)("p", _extends({
-    sx: {
-      color: isValid ? helperColor : errorColor,
-      display: 'flex',
-      alignItems: 'center',
-      m: 0,
-      fontSize: 1
-    },
-    id: describedId ? "describe-" + describedId + "-validation" : undefined
-  }, props, {
-    children: [(0, _jsxRuntime.jsx)(Icon, {
-      sx: {
-        mr: 1
-      },
-      "aria-hidden": "true"
-    }), children]
-  }));
+import PropTypes from 'prop-types';
+import { MdErrorOutline, MdCheckCircle } from 'react-icons/md';
+
+const errorColor = 'texts.error';
+const helperColor = 'texts.helper';
+
+const Validation = ( { children, isValid, describedId = null, ...props } ) => {
+	const Icon = isValid ? MdCheckCircle : MdErrorOutline;
+
+	return (
+		<p
+			sx={ {
+				color: isValid ? helperColor : errorColor,
+				display: 'flex',
+				alignItems: 'center',
+				m: 0,
+				fontSize: 1,
+			} }
+			id={ describedId ? `describe-${ describedId }-validation` : undefined }
+			{ ...props }
+		>
+			<Icon sx={ { mr: 1 } } aria-hidden="true" />
+			{ children }
+		</p>
+	);
 };
-exports.Validation = Validation;
+
 Validation.propTypes = {
-  children: _propTypes["default"].node,
-  isValid: _propTypes["default"].bool,
-  describedId: _propTypes["default"].string
-};
+	children: PropTypes.node,
+	isValid: PropTypes.bool,
+	describedId: PropTypes.string,
+};
+
+export { Validation };

package/build/system/Form/index.d.ts

@@ -0,0 +1,11 @@
+import { Input } from './Input';
+import { InputWithCopyButton } from './InputWithCopyButton';
+import { Label } from './Label';
+import { Radio } from './Radio';
+import { RadioBoxGroup } from './RadioBoxGroup';
+import { Textarea } from './Textarea';
+import { Toggle } from './Toggle';
+import { ToggleRow } from './ToggleRow';
+import { Validation } from './Validation';
+import { Checkbox } from './Checkbox';
+export { Input, InputWithCopyButton, Label, Radio, RadioBoxGroup, Textarea, Toggle, ToggleRow, Validation, Checkbox };

package/build/system/Form/index.js

@@ -1,23 +1,26 @@
-"use strict";
+/**
+ * Internal dependencies
+ */
+import { Input } from './Input';
+import { InputWithCopyButton } from './InputWithCopyButton';
+import { Label } from './Label';
+import { Toggle } from './Toggle';
+import { Validation } from './Validation';
+import { ToggleRow } from './ToggleRow';
+import { Radio } from './Radio';
+import { RadioBoxGroup } from './RadioBoxGroup';
+import { Textarea } from './Textarea';
+import { Checkbox } from './Checkbox';
 
-exports.__esModule = true;
-var _Input = require("./Input");
-exports.Input = _Input.Input;
-var _InputWithCopyButton = require("./InputWithCopyButton");
-exports.InputWithCopyButton = _InputWithCopyButton.InputWithCopyButton;
-var _Label = require("./Label");
-exports.Label = _Label.Label;
-var _Toggle = require("./Toggle");
-exports.Toggle = _Toggle.Toggle;
-var _Validation = require("./Validation");
-exports.Validation = _Validation.Validation;
-var _ToggleRow = require("./ToggleRow");
-exports.ToggleRow = _ToggleRow.ToggleRow;
-var _Radio = require("./Radio");
-exports.Radio = _Radio.Radio;
-var _RadioBoxGroup = require("./RadioBoxGroup");
-exports.RadioBoxGroup = _RadioBoxGroup.RadioBoxGroup;
-var _Textarea = require("./Textarea");
-exports.Textarea = _Textarea.Textarea;
-var _Checkbox = require("./Checkbox");
-exports.Checkbox = _Checkbox.Checkbox;
+export {
+	Input,
+	InputWithCopyButton,
+	Label,
+	Radio,
+	RadioBoxGroup,
+	Textarea,
+	Toggle,
+	ToggleRow,
+	Validation,
+	Checkbox,
+};

package/build/system/Grid/Grid.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import { GridProps as ThemeGridProps } from 'theme-ui';
+export declare const Grid: import("react").ForwardRefExoticComponent<ThemeGridProps & import("react").RefAttributes<HTMLDivElement>>;

package/build/system/Grid/Grid.js

@@ -5,13 +5,12 @@ exports.Grid = void 0;
 var _themeUi = require("theme-ui");
 var _react = require("react");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */
-var Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /**
+                                                                                                                                                                                                                                                                                                                                                     * External dependencies
+                                                                                                                                                                                                                                                                                                                                                     */
+var Grid = exports.Grid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _jsxRuntime.jsx)(_themeUi.Grid, _extends({}, props, {
     ref: ref
   }));
 });
-exports.Grid = Grid;
 Grid.displayName = 'Grid';

package/build/system/Grid/Grid.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("theme-ui").GridProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;

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

@@ -7,14 +7,12 @@ var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-var _default = {
+var _default = exports["default"] = {
   title: 'Grid',
   component: _.Grid
 };
-exports["default"] = _default;
-var Default = function Default() {
+var Default = exports.Default = function Default() {
   return (0, _jsxRuntime.jsx)(_.Grid, {
     children: "Hello"
   });
-};
-exports.Default = Default;
+};

package/build/system/Grid/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Grid } from './Grid';

package/build/system/Grid/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
+exports.Grid = void 0;
 var _Grid = require("./Grid");
 exports.Grid = _Grid.Grid;

package/build/system/Heading/Heading.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { HeadingProps as ThemeHeadingProps } from 'theme-ui';
+export interface HeadingProps extends ThemeHeadingProps {
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export declare const Heading: import("react").ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/build/system/Heading/Heading.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Heading = void 0;
+var _react = require("react");
+var _themeUi = require("theme-ui");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["variant", "sx", "className"];
+/**
+ * External dependencies
+ */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Heading = exports.Heading = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'h3' : _ref$variant,
+    sx = _ref.sx,
+    className = _ref.className,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(_themeUi.Heading, _extends({
+    as: variant,
+    sx: _extends({
+      color: 'heading',
+      // pass variant prop to sx
+      variant: "text." + variant.toString()
+    }, sx),
+    className: (0, _classnames["default"])('vip-heading-component', className),
+    ref: ref
+  }, rest));
+});
+Heading.displayName = 'Heading';

package/build/system/Heading/Heading.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Heading").HeadingProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+};
+export default _default;
+export declare const Default: () => import("react").JSX.Element;

package/build/system/Heading/Heading.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = exports.Default = void 0;
+var _ = require("..");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+/**
+ * Internal dependencies
+ */
+var _default = exports["default"] = {
+  title: 'Heading',
+  component: _.Heading
+};
+var Default = exports.Default = function Default() {
+  return (0, _jsxRuntime.jsxs)(_.Box, {
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h1",
+      children: "Your Applications"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h2",
+      children: "Heading Two"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h3",
+      children: "Heading Three"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h4",
+      children: "Heading Four"
+    }), (0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h5",
+      children: "Heading Five"
+    })]
+  });
+};

package/build/system/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading };
+import { Heading } from './Heading';

package/build/system/Heading/index.js

@@ -1,5 +1,6 @@
-"use strict";
+/**
+ * Internal dependencies
+ */
+import { Heading } from './Heading';
 
-exports.__esModule = true;
-var _Heading = require("./Heading");
-exports.Heading = _Heading.Heading;
+export { Heading };

package/build/system/Link/Link.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { LinkProps as ThemeLinkProps } from 'theme-ui';
+export interface LinkProps extends ThemeLinkProps {
+    active?: boolean;
+}
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/build/system/Link/Link.js

@@ -2,19 +2,17 @@
 
 exports.__esModule = true;
 exports.Link = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 var _themeUi = require("theme-ui");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 var _excluded = ["active", "sx"];
-/** @jsxImportSource theme-ui */
 /**
  * External dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+// Temporary interface until we add types to the theme definition.
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Link = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+var Link = exports.Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$active = _ref.active,
     active = _ref$active === void 0 ? false : _ref$active,
     sx = _ref.sx,
@@ -39,12 +37,7 @@ var Link = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef)
         return theme.outline;
       }
     }, sx),
-    ref: forwardRef
+    ref: ref
   }, props));
 });
-exports.Link = Link;
-Link.displayName = 'Link';
-Link.propTypes = {
-  active: _propTypes["default"].bool,
-  sx: _propTypes["default"].object
-};
+Link.displayName = 'Link';

package/build/system/Link/Link.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { StoryObj } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { Link } from '..';
+declare const _default: {
+    component: import("react").ForwardRefExoticComponent<Omit<import("./Link").LinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    title: string;
+};
+export default _default;
+type Story = StoryObj<typeof Link>;
+export declare const Default: Story;

package/build/system/Link/Link.stories.js

@@ -3,20 +3,19 @@
 exports.__esModule = true;
 exports["default"] = exports.Default = void 0;
 var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
+/**
+ * External dependencies
+ */
 /**
  * Internal dependencies
  */
-var _default = {
-  title: 'Link',
-  component: _.Link
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Link, {
-    as: "a",
-    href: "#!",
-    children: "Hello"
-  });
+var _default = exports["default"] = {
+  component: _.Link,
+  title: 'Link'
 };
-exports.Default = Default;
+var Default = exports.Default = {
+  args: {
+    children: 'Hello',
+    href: '#!'
+  }
+};

package/build/system/Link/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Link } from './Link';

package/build/system/Link/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
+exports.Link = void 0;
 var _Link = require("./Link");
 exports.Link = _Link.Link;

package/build/system/NewConfirmationDialog/NewConfirmationDialog.d.ts

@@ -0,0 +1,23 @@
+export function NewConfirmationDialog({ trigger, onConfirm, needsConfirm, label, buttonVariant, title, body, ...props }: {
+    [x: string]: any;
+    trigger: any;
+    onConfirm: any;
+    needsConfirm?: boolean | undefined;
+    label: any;
+    buttonVariant: any;
+    title: any;
+    body?: string | undefined;
+}): React.JSX.Element;
+export namespace NewConfirmationDialog {
+    namespace propTypes {
+        let needsConfirm: PropTypes.Requireable<boolean>;
+        let trigger: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        let title: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let body: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let buttonVariant: PropTypes.Requireable<string>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';