@automattic/vip-design-system 1.2.1 → 1.2.2

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

@@ -1,73 +0,0 @@
-"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)(_.Form.Fieldset, {
-      children: [(0, _jsxRuntime.jsx)(_.Form.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.stories.js

@@ -1,51 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Form/Input'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  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
-    })]
-  });
-};
-exports.Default = Default;

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

@@ -1,39 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _ = require("..");
-var _react = require("react");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/** @jsxImportSource theme-ui */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Form/InputWithCopyButton'
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var _useState = (0, _react.useState)(''),
-    copiedText = _useState[0],
-    setCopiedText = _useState[1];
-  return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [copiedText && (0, _jsxRuntime.jsxs)(_.Notice, {
-      variant: "success",
-      sx: {
-        mb: 4
-      },
-      children: ["Input successfully copied value! ", (0, _jsxRuntime.jsx)("strong", {
-        children: copiedText
-      })]
-    }), (0, _jsxRuntime.jsx)(_.Form.InputWithCopyButton, {
-      placeholder: "Your input here...",
-      label: "Always add a label to inputs",
-      forLabel: "input-simple",
-      copyHandler: function copyHandler(value) {
-        return setCopiedText(value);
-      }
-    })]
-  });
-};
-exports.Default = Default;

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

@@ -1,115 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = require("react");
-var _2 = require("..");
-var _Radio = require("./Radio");
-var _Flex = require("../Flex");
-var _Label = require("./Label");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/** @jsxImportSource theme-ui */
-/**
- * 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];
-  var _useState2 = (0, _react.useState)('b'),
-    checked2 = _useState2[0],
-    setChecked2 = _useState2[1];
-  return (0, _jsxRuntime.jsxs)(_2.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)(_2.Link, {
-        href: "https://a11y-collective.github.io/demos/en/accessible-code/form-fieldsets.html",
-        children: "Reference to Form fieldsets"
-      })]
-    }), (0, _jsxRuntime.jsxs)(_2.Form.Fieldset, {
-      children: [(0, _jsxRuntime.jsx)(_2.Form.Legend, {
-        sx: {
-          mb: 0,
-          fontSize: 2,
-          fontWeight: 'bold'
-        },
-        children: "Apply the policy to these domains"
-      }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
-        sx: {
-          alignItems: 'center'
-        },
-        children: (0, _jsxRuntime.jsx)(_Radio.Radio, {
-          name: "the_option",
-          defaultValue: checked,
-          options: [{
-            value: 'a',
-            label: 'All domains listed on this environment, and all subdomains',
-            id: 'option-a'
-          }, {
-            value: 'b',
-            label: 'All domains listed on this environment',
-            id: 'option-b'
-          }],
-          onChange: function onChange(e) {
-            return setChecked(e.target.value);
-          }
-        })
-      })]
-    }), (0, _jsxRuntime.jsxs)(_2.Form.Fieldset, {
-      children: [(0, _jsxRuntime.jsx)(_2.Form.Legend, {
-        sx: {
-          mb: 0,
-          fontSize: 2,
-          fontWeight: 'bold'
-        },
-        children: "With a custom Label"
-      }), (0, _jsxRuntime.jsx)(_Flex.Flex, {
-        sx: {
-          alignItems: 'center'
-        },
-        children: (0, _jsxRuntime.jsx)(_Radio.Radio, {
-          name: "the_option_custom",
-          defaultValue: checked2,
-          options: [{
-            value: 'a',
-            label: (0, _jsxRuntime.jsx)(_Label.Label, {
-              htmlFor: "option-custom-a",
-              className: "custom-class",
-              sx: {
-                color: '#bf2a23'
-              },
-              children: "(Custom) All domains listed on this environment, and all subdomains"
-            }),
-            id: 'option-custom-a'
-          }, {
-            value: 'b',
-            label: 'All domains listed on this environment',
-            labelProps: {
-              id: 'label-option-custom-b-custom-props'
-            },
-            className: 'custom-class-for-this',
-            'aria-describedby': 'describe-radio-all-domains-subdomains',
-            id: 'option-custom-b'
-          }],
-          onChange: function onChange(_, option) {
-            return setChecked2(option.value);
-          }
-        })
-      })]
-    }), (0, _jsxRuntime.jsx)("p", {
-      id: "describe-radio-all-domains-subdomains",
-      sx: {
-        mt: 2
-      },
-      children: "This is a explanation for custom option b"
-    })]
-  });
-};
-exports.Default = Default;

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

@@ -1,62 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Errors = exports.Default = void 0;
-var _react = require("react");
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'RadioBoxGroup',
-  component: _.RadioBoxGroup
-};
-exports["default"] = _default;
-var options = [{
-  label: 'One',
-  value: 'one',
-  description: 'This is a description'
-}, {
-  label: 'Two',
-  value: 'two',
-  description: 'This is a description'
-}, {
-  label: 'Three',
-  value: 'three',
-  description: 'This is a description'
-}];
-var Default = function Default() {
-  var _useState = (0, _react.useState)('one'),
-    value = _useState[0],
-    setValue = _useState[1];
-  return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
-    defaultValue: value,
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    options: options,
-    optionWidth: "350px"
-  });
-};
-exports.Default = Default;
-var Errors = function Errors() {
-  var _useState2 = (0, _react.useState)(null),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  return (0, _jsxRuntime.jsx)(_.RadioBoxGroup, {
-    defaultValue: value,
-    onChange: function onChange(e) {
-      return setValue(e.target.value);
-    },
-    options: options,
-    required: true,
-    groupLabel: "Radio Box Group",
-    hasError: true,
-    errorMessage: "This is an error message"
-  });
-};
-exports.Errors = Errors;

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

@@ -1,59 +0,0 @@
-"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/Toggle.stories.js

@@ -1,104 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Primary = exports.ExternalLabel = exports.CustomStyle = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Toggle',
-  component: _.Toggle,
-  argTypes: {
-    checked: {
-      options: [true, false],
-      "default": true,
-      control: {
-        type: 'radio'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var Default = function Default(args) {
-  return (0, _jsxRuntime.jsxs)("form", {
-    children: [(0, _jsxRuntime.jsx)(_.Toggle, {
-      checked: args.checked,
-      defaultChecked: true,
-      color: args.color,
-      "aria-label": "Feature flag"
-    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
-      checked: args.checked,
-      defaultChecked: false,
-      "aria-label": "Feature flag 2"
-    }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Toggle, {
-      "aria-label": "Feature Disabled",
-      disabled: true,
-      defaultChecked: false
-    })]
-  });
-};
-var WithLabel = function WithLabel(args) {
-  return (0, _jsxRuntime.jsxs)("form", {
-    children: [(0, _jsxRuntime.jsx)(_.Label, {
-      htmlFor: "custom-label-input",
-      children: "Custom Label here"
-    }), (0, _jsxRuntime.jsx)(_.Toggle, {
-      id: "custom-label-input",
-      defaultChecked: true,
-      checked: args.checked,
-      "aria-label": "Feature flag"
-    })]
-  });
-};
-var CustomStyling = function CustomStyling(args) {
-  return (0, _jsxRuntime.jsxs)("form", {
-    children: [(0, _jsxRuntime.jsx)(_.Label, {
-      htmlFor: "custom-label-input",
-      children: "Custom Styling"
-    }), (0, _jsxRuntime.jsxs)("div", {
-      children: [(0, _jsxRuntime.jsx)(_.Toggle, {
-        id: "custom-label-input",
-        defaultChecked: true,
-        checked: args.checked,
-        "aria-label": "Feature flag",
-        variant: "success"
-      }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
-        id: "custom-label-input-error",
-        defaultChecked: true,
-        checked: args.checked,
-        "aria-label": "Error flag",
-        variant: "error"
-      }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
-        id: "custom-label-input-warning",
-        defaultChecked: true,
-        checked: args.checked,
-        "aria-label": "Warning flag",
-        variant: "warning"
-      }), ' ', (0, _jsxRuntime.jsx)(_.Toggle, {
-        id: "custom-label-input-info",
-        defaultChecked: true,
-        checked: args.checked,
-        "aria-label": "info flag",
-        variant: "info"
-      })]
-    })]
-  });
-};
-var Primary = Default.bind({
-  checked: true
-});
-exports.Primary = Primary;
-var ExternalLabel = WithLabel.bind({
-  checked: true
-});
-exports.ExternalLabel = ExternalLabel;
-var CustomStyle = CustomStyling.bind({
-  checked: true
-});
-exports.CustomStyle = CustomStyle;

package/build/system/Heading/Heading.stories.tsx

@@ -1,19 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Box, Heading } from '..';
-
-export default {
-	title: 'Heading',
-	component: Heading,
-};
-
-export const Default = () => (
-	<Box>
-		<Heading variant="h1">Your Applications</Heading>
-		<Heading variant="h2">Heading Two</Heading>
-		<Heading variant="h3">Heading Three</Heading>
-		<Heading variant="h4">Heading Four</Heading>
-		<Heading variant="h5">Heading Five</Heading>
-	</Box>
-);

package/build/system/Heading/Heading.tsx

@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import React, { Ref } from 'react';
-import {
-	Heading as ThemeHeading,
-	HeadingProps as ThemeHeadingProps,
-	ThemeUIStyleObject,
-} from 'theme-ui';
-import classNames, { Argument } from 'classnames';
-
-// We must Omit className because we are overriding its default React implementation.
-// Also, while the sx and variant props may seem redundant, specifying them here
-// exposes them in Storybook's controls panel.
-export interface HeadingProps extends Omit< ThemeHeadingProps, 'className' > {
-	className?: Argument;
-	sx?: ThemeUIStyleObject;
-	variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-}
-
-export const Heading = React.forwardRef< HTMLHeadingElement, HeadingProps >(
-	( { variant = 'h3', sx, className, ...rest }, ref: Ref< HTMLHeadingElement > ) => (
-		<ThemeHeading
-			as={ variant }
-			sx={ {
-				color: 'heading',
-				// pass variant prop to sx
-				variant: `text.${ variant.toString() }`,
-				...sx,
-			} }
-			className={ classNames( 'vip-heading-component', className ) }
-			ref={ ref }
-			{ ...rest }
-		/>
-	)
-);
-
-Heading.displayName = 'Heading';

package/build/system/NewConfirmationDialog/NewConfirmationDialog.stories.js

@@ -1,46 +0,0 @@
-"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 }; }
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Dialog/NewConfirmationDialog',
-  component: _.NewConfirmationDialog
-};
-exports["default"] = _default;
-var ConfirmationTrigger = (0, _jsxRuntime.jsx)(_.Button, {
-  sx: {
-    mr: 3
-  },
-  children: "Click to answer"
-});
-var Default = function Default() {
-  var _React$useState = _react["default"].useState('🤔'),
-    answer = _React$useState[0],
-    setAnswer = _React$useState[1];
-  return (0, _jsxRuntime.jsxs)(_.Box, {
-    children: [(0, _jsxRuntime.jsx)("p", {
-      children: "Confirm that your name is John doe?"
-    }), (0, _jsxRuntime.jsx)(_.NewConfirmationDialog, {
-      className: "storybook-confirmation-dialog",
-      title: 'Are you John Doe?',
-      buttonVariant: "danger",
-      description: 'Please confirm that your name is John Doe.',
-      trigger: ConfirmationTrigger,
-      body: "A modal is used to perform more detailed actions that don\u2018t necessarily need the context behind.",
-      onConfirm: function onConfirm() {
-        return setAnswer('👍');
-      },
-      needsConfirm: true
-    }), (0, _jsxRuntime.jsxs)("p", {
-      children: ["Answer: ", answer]
-    })]
-  });
-};
-exports.Default = Default;