@automattic/vip-design-system 1.2.0 → 1.2.2

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
-			sx={ {
-				color: 'heading',
-				// pass variant prop to sx
-				variant: `text.${ variant.toString() }`,
-				...sx,
-			} }
-			className={ classNames( 'vip-heading-component', className ) }
-			ref={ ref }
-			variant={ variant }
-			{ ...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;

package/build/system/NewDialog/NewDialog.stories.js

@@ -1,247 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.HiddenHeadings = exports.Default = exports.CustomStyling = exports.CustomStateManagement = exports.CustomOnClose = exports.CustomClose = exports.AutoOpen = void 0;
-var _react = require("react");
-var _system = require("../../system");
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
-var NewDialog = _interopRequireWildcard(require("."));
-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; }
-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); } /** @jsxImportSource theme-ui */ /**
-                                                                                                                                                                                                                                                                                                                                                                                      * External dependencies
-                                                                                                                                                                                                                                                                                                                                                                                      */ /**
-                                                                                                                                                                                                                                                                                                                                                                                         /**
-                                                                                                                                                                                                                                                                                                                                                                                          * Internal dependencies
-                                                                                                                                                                                                                                                                                                                                                                                          */
-var _default = {
-  title: 'Dialog/NewDialog',
-  component: NewDialog.Root
-};
-exports["default"] = _default;
-var defaultProps = {
-  title: 'User settings',
-  description: 'Use this form to manage your settings'
-};
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_system.Text, {
-      sx: {
-        fontSize: 3,
-        mb: 3
-      },
-      children: "Regular Dialog where the title and description are built-in and the content is provided by the user."
-    }), (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, defaultProps, {
-      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
-        children: "Trigger Dialog"
-      })
-    }))]
-  });
-};
-exports.Default = Default;
-var AutoOpen = function AutoOpen() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_system.Text, {
-      sx: {
-        fontSize: 3,
-        mb: 3
-      },
-      children: "Auto Opens when rendered. Press escape to close it."
-    }), (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, defaultProps, {
-      defaultOpen: true,
-      content: (0, _jsxRuntime.jsxs)("div", {
-        children: [(0, _jsxRuntime.jsx)("h3", {
-          children: "Test"
-        }), (0, _jsxRuntime.jsx)("p", {
-          children: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
-        })]
-      }),
-      trigger: (0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
-        children: "hey"
-      })
-    }))]
-  });
-};
-exports.AutoOpen = AutoOpen;
-var HiddenHeadings = function HiddenHeadings() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_system.Text, {
-      sx: {
-        fontSize: 3,
-        mb: 3
-      },
-      children: "Title and description are hidden, but still announced using a screen reader. Activate VoiceOver or any similar screen reader to listen to: Custom dialog title, Description of the dialog content."
-    }), (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, defaultProps, {
-      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
-        children: "Trigger Dialog"
-      }),
-      title: "Custom dialog title",
-      showHeading: false,
-      content: (0, _jsxRuntime.jsxs)("div", {
-        children: [(0, _jsxRuntime.jsx)("h3", {
-          children: "My Custom Content"
-        }), (0, _jsxRuntime.jsxs)("form", {
-          children: [(0, _jsxRuntime.jsx)(_system.Label, {
-            htmlFor: "username",
-            children: "User name"
-          }), (0, _jsxRuntime.jsx)(_system.Input, {
-            type: "text",
-            name: "username",
-            id: "username"
-          }), (0, _jsxRuntime.jsx)(_system.Button, {
-            type: "submit",
-            children: "Submit"
-          })]
-        }), (0, _jsxRuntime.jsx)("h3", {
-          children: "Continue here"
-        }), (0, _jsxRuntime.jsx)("p", {
-          children: "This is an example."
-        })]
-      })
-    }))]
-  });
-};
-exports.HiddenHeadings = HiddenHeadings;
-var CustomStyling = function CustomStyling() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_system.Text, {
-      sx: {
-        fontSize: 3,
-        mb: 3
-      },
-      children: "Custom Styling on Dialog Content"
-    }), (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, defaultProps, {
-      defaultOpen: true,
-      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
-        children: "Trigger Dialog"
-      }),
-      title: "Custom dialog title",
-      style: {
-        background: function background(theme) {
-          return "" + theme.colors.primary;
-        },
-        padding: 5,
-        borderRadius: 20,
-        h2: {
-          fontSize: 4,
-          color: function color(theme) {
-            return "" + theme.colors.text;
-          }
-        },
-        h3: {
-          fontSize: 3,
-          color: function color(theme) {
-            return "" + theme.colors.heading;
-          }
-        },
-        p: {
-          color: 'white'
-        },
-        'button[type="button"]:focus': {
-          outlineColor: 'white',
-          color: 'white'
-        }
-      },
-      content: (0, _jsxRuntime.jsxs)("div", {
-        children: [(0, _jsxRuntime.jsx)("h3", {
-          children: "This is Read because it is Custom"
-        }), (0, _jsxRuntime.jsx)("p", {
-          children: "This Dialog is styled using the `sx` property."
-        })]
-      })
-    }))]
-  });
-};
-exports.CustomStyling = CustomStyling;
-var CustomClose = function CustomClose() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_system.Text, {
-      sx: {
-        fontSize: 3,
-        mb: 3
-      },
-      children: "This example shows how you can create a custom Close trigger to your dialog"
-    }), (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, defaultProps, {
-      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
-        children: "Trigger Dialog"
-      }),
-      content: (0, _jsxRuntime.jsx)("div", {
-        children: (0, _jsxRuntime.jsx)(NewDialog.Close, {
-          children: (0, _jsxRuntime.jsx)(_system.Button, {
-            children: "Close here instead"
-          })
-        })
-      })
-    }))]
-  });
-};
-exports.CustomClose = CustomClose;
-var CustomStateManagement = function CustomStateManagement() {
-  var _useState = (0, _react.useState)(false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)(_system.Text, {
-      sx: {
-        fontSize: 3,
-        mb: 3
-      },
-      children: ["This example shows how you can create a custom state management. To achieve accessibility, you need to control the ", (0, _jsxRuntime.jsx)("strong", {
-        children: "open"
-      }), " state, but also keep consistency using the", ' ', (0, _jsxRuntime.jsx)("strong", {
-        children: "onOpenChange"
-      }), " attribute."]
-    }), (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, defaultProps, {
-      open: open,
-      onOpenChange: function onOpenChange(status) {
-        // eslint-disable-next-line no-console
-        console.log('New status changed', status);
-        setOpen(!open);
-      },
-      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
-        children: "Trigger Dialog"
-      }),
-      content: (0, _jsxRuntime.jsx)("div", {
-        sx: {
-          mt: 2
-        },
-        children: (0, _jsxRuntime.jsx)(NewDialog.Close, {
-          children: (0, _jsxRuntime.jsx)(_system.Button, {
-            children: "Close here instead"
-          })
-        })
-      })
-    }))]
-  });
-};
-exports.CustomStateManagement = CustomStateManagement;
-var CustomOnClose = function CustomOnClose() {
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_system.Text, {
-      sx: {
-        fontSize: 3,
-        mb: 3
-      },
-      children: "This example shows how you can use the content as a function to use the onClose method (same behavior as the original Dialog component)."
-    }), (0, _jsxRuntime.jsx)(NewDialog.Root, _extends({}, defaultProps, {
-      trigger: (0, _jsxRuntime.jsx)(_system.Button, {
-        children: "Trigger Dialog"
-      }),
-      content: function content(_ref) {
-        var onClose = _ref.onClose;
-        return (0, _jsxRuntime.jsx)("div", {
-          sx: {
-            mt: 2
-          },
-          children: (0, _jsxRuntime.jsx)(_system.Button, {
-            onClick: onClose,
-            children: "Close here instead"
-          })
-        });
-      }
-    }))]
-  });
-};
-exports.CustomOnClose = CustomOnClose;