@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Notification/Notification.js

@@ -1,97 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Notification = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _md = require("react-icons/md");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ = require("../");
-var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-var Notification = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var title = _ref.title,
-    body = _ref.body,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'success' : _ref$status,
-    onClose = _ref.onClose;
-  return (0, _jsxRuntime.jsxs)(_.Card, {
-    role: "alert",
-    className: "vip-notification-component",
-    sx: {
-      boxShadow: 'medium',
-      width: 320,
-      position: 'relative',
-      variant: "notification." + status
-    },
-    ref: forwardRef,
-    children: [(0, _jsxRuntime.jsx)(_ScreenReaderText["default"], {
-      children: "Alert,"
-    }), (0, _jsxRuntime.jsxs)(_.Flex, {
-      sx: {
-        alignItems: 'center'
-      },
-      children: [status === 'error' ? (0, _jsxRuntime.jsx)(_md.MdError, {
-        sx: {
-          color: 'error',
-          flex: '0 0 auto'
-        },
-        "aria-hidden": "true"
-      }) : (0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
-        sx: {
-          color: 'success',
-          flex: '0 0 auto'
-        },
-        "aria-hidden": "true"
-      }), (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          flex: '1 1 auto',
-          ml: 3
-        },
-        children: [(0, _jsxRuntime.jsx)("p", {
-          sx: {
-            my: 0,
-            color: 'heading',
-            fontWeight: 'bold'
-          },
-          children: title
-        }), body && (0, _jsxRuntime.jsx)(_.Text, {
-          sx: {
-            mb: 0,
-            mt: 1
-          },
-          children: body
-        })]
-      })]
-    }), onClose && (0, _jsxRuntime.jsx)(_.Button, {
-      onClick: onClose,
-      variant: "icon",
-      sx: {
-        color: 'muted',
-        position: 'absolute',
-        top: 2,
-        right: 2
-      },
-      "aria-hidden": "true",
-      children: (0, _jsxRuntime.jsx)(_md.MdClose, {})
-    })]
-  });
-});
-exports.Notification = Notification;
-Notification.displayName = 'Notification';
-Notification.propTypes = {
-  title: _propTypes["default"].node,
-  body: _propTypes["default"].node,
-  status: _propTypes["default"].string,
-  onClose: _propTypes["default"].func
-};

package/build/system/Notification/Notification.stories.js

@@ -1,29 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Error = exports.Default = void 0;
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Notification',
-  component: _.Notification
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_.Notification, {
-    title: "Awesome!",
-    body: "Your message has been sent successfully."
-  });
-};
-exports.Default = Default;
-var Error = function Error() {
-  return (0, _jsxRuntime.jsx)(_.Notification, {
-    status: "error",
-    title: "Snag!",
-    body: "Your message could not be sent."
-  });
-};
-exports.Error = Error;

package/build/system/Notification/index.js

@@ -1,5 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-var _Notification = require("./Notification");
-exports.Notification = _Notification.Notification;

package/build/system/OptionRow/OptionRow.stories.js

@@ -1,64 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = exports.Alternative = void 0;
-var _bi = require("react-icons/bi");
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'OptionRow',
-  component: _.OptionRow
-}; // eslint-disable-next-line react/prop-types
-exports["default"] = _default;
-var Base = function Base(_ref) {
-  var variant = _ref.variant;
-  return (0, _jsxRuntime.jsxs)(_.Box, {
-    children: [(0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: (0, _jsxRuntime.jsx)(_bi.BiAddToQueue, {
-        size: 24
-      }),
-      label: "Option Row 1",
-      subTitle: "Mostly used to link off to other pages.",
-      as: "a",
-      href: "http://google.com/",
-      variant: variant
-    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: (0, _jsxRuntime.jsx)(_bi.BiCalendarHeart, {
-        size: 24
-      }),
-      label: "Option Row 2",
-      subTitle: "Mostly used to link off to other pages.",
-      as: "a",
-      href: "http://google.com/",
-      order: 2,
-      variant: variant
-    }), (0, _jsxRuntime.jsx)(_.OptionRow, {
-      image: (0, _jsxRuntime.jsx)(_bi.BiBellMinus, {
-        size: 24
-      }),
-      label: "Custom heading HTML h2",
-      subTitle: "Use the variant prop to adjust the heading structure",
-      as: "a",
-      href: "http://google.com/",
-      titleVariant: "h2",
-      meta: "",
-      variant: variant
-    })]
-  });
-};
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(Base, {});
-};
-exports.Default = Default;
-var Alternative = function Alternative() {
-  return (0, _jsxRuntime.jsx)(Base, {
-    variant: "alt"
-  });
-};
-exports.Alternative = Alternative;

package/build/system/Progress/Progress.stories.js

@@ -1,36 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _ = 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; }
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Progress',
-  component: _.Progress
-};
-exports["default"] = _default;
-var Default = function Default() {
-  var _React$useState = _react["default"].useState(0),
-    counter = _React$useState[0],
-    setCounter = _React$useState[1];
-  var steps = ['Downloading Data', 'Importing Data...', 'Finalizing', 'Done'];
-  (0, _react.useEffect)(function () {
-    setTimeout(function () {
-      if (counter < steps.length - 1) {
-        setCounter(counter + 1);
-      }
-    }, 2000);
-  }, [counter, setCounter]);
-  return (0, _jsxRuntime.jsx)(_.Progress, {
-    forLabel: "Update site progress",
-    steps: steps,
-    activeStep: counter
-  });
-};
-exports.Default = Default;

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

@@ -1,113 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.SetActiveTab = 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 }; }
-/** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Tabs',
-  component: _.Tabs
-};
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Tabs, {
-    defaultValue: "all",
-    children: [(0, _jsxRuntime.jsxs)(_.TabsList, {
-      title: "See all the content",
-      children: [(0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "all",
-        children: "All (5)"
-      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "live",
-        children: "Live (2)"
-      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "dev",
-        children: "In Development (3)"
-      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "protect",
-        disabled: true,
-        children: "Not accessible"
-      })]
-    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
-      value: "all",
-      children: (0, _jsxRuntime.jsxs)(_.Text, {
-        children: ["All content ", (0, _jsxRuntime.jsx)(_.Link, {
-          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.jsxs)(_.Text, {
-        children: ["In Development content ", (0, _jsxRuntime.jsx)(_.Button, {
-          variant: "secondary",
-          children: "Hey I am a button"
-        }), ' ']
-      })
-    })]
-  });
-};
-exports.Default = Default;
-var SetActiveTab = function SetActiveTab() {
-  var _React$useState = _react["default"].useState('all'),
-    activeTab = _React$useState[0],
-    setActiveTab = _React$useState[1];
-  return (0, _jsxRuntime.jsxs)(_.Tabs, {
-    value: activeTab,
-    onValueChange: function onValueChange(val) {
-      return setActiveTab(val);
-    },
-    children: [(0, _jsxRuntime.jsxs)(_.TabsList, {
-      title: "See all the content",
-      children: [(0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "all",
-        children: "All (5)"
-      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "live",
-        children: "Live (2)"
-      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "dev",
-        children: "In Development (3)"
-      }), (0, _jsxRuntime.jsx)(_.TabsTrigger, {
-        value: "protect",
-        disabled: true,
-        children: "Not accessible"
-      })]
-    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
-      value: "all",
-      children: (0, _jsxRuntime.jsx)(_.Text, {
-        children: (0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          onClick: function onClick() {
-            return setActiveTab('live');
-          },
-          children: "Switch to live tab"
-        })
-      })
-    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
-      value: "live",
-      children: "Live content"
-    }), (0, _jsxRuntime.jsx)(_.TabsContent, {
-      value: "dev",
-      children: (0, _jsxRuntime.jsxs)(_.Text, {
-        children: ["In Development content ", (0, _jsxRuntime.jsx)("button", {
-          type: "button",
-          children: "Hey I am a button"
-        }), ' ']
-      })
-    })]
-  });
-};
-exports.SetActiveTab = SetActiveTab;

package/build/system/Wizard/Wizard.stories.js

@@ -1,182 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = exports.WithTitleAutoFocus = 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 }; }
-/** @jsxImportSource theme-ui */
-/**
- * External dependencies
- */
-/**
- * Internal dependencies
- */
-var _default = {
-  title: 'Wizard',
-  component: _.Wizard
-};
-exports["default"] = _default;
-var options = [{
-  value: 'chocolate',
-  label: 'Chocolate'
-}, {
-  value: 'strawberry',
-  label: 'Strawberry'
-}, {
-  value: 'vanilla',
-  label: 'Vanilla'
-}, {
-  value: 'coffee',
-  label: 'Coffee'
-}];
-var Default = function Default() {
-  var steps = [{
-    title: 'Choose Domain',
-    titleVariant: 'h2',
-    subTitle: 'You can bring a domain name you already own, or buy a new one.',
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
-        children: "Domain"
-      }), (0, _jsxRuntime.jsx)(_.Input, {
-        autoFocus: true,
-        placeholder: "yourdomain.com"
-      }), (0, _jsxRuntime.jsx)(_.Form.Autocomplete, {
-        label: "Autocomplete",
-        options: options
-      }), (0, _jsxRuntime.jsx)(_.Button, {
-        sx: {
-          mt: 3
-        },
-        children: "Continue"
-      })]
-    })
-  }, {
-    title: 'Configure DNS',
-    titleVariant: 'h2'
-  }, {
-    title: 'Configure Certificate',
-    titleVariant: 'h2'
-  }, {
-    title: 'Verify Domain',
-    titleVariant: 'h2'
-  }];
-  return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-    children: (0, _jsxRuntime.jsx)(_.Box, {
-      mt: 4,
-      children: (0, _jsxRuntime.jsx)(_.Wizard, {
-        activeStep: 0,
-        steps: steps,
-        completed: [1],
-        className: "vip-wizard-xyz"
-      })
-    })
-  });
-};
-exports.Default = Default;
-var WithTitleAutoFocus = function WithTitleAutoFocus() {
-  var _React$useState = _react["default"].useState(0),
-    activeStep = _React$useState[0],
-    setActiveStep = _React$useState[1];
-  var _React$useState2 = _react["default"].useState(true),
-    autoFocus = _React$useState2[0],
-    setAutoFocus = _React$useState2[1];
-  var steps = [{
-    title: 'Choose Domain',
-    titleVariant: 'h2',
-    summary: [{
-      label: 'Demo Label',
-      value: 'Demo value'
-    }],
-    onChange: function onChange() {
-      return setActiveStep(0);
-    },
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
-        children: "Domain"
-      }), (0, _jsxRuntime.jsx)(_.Input, {
-        placeholder: "yourdomain.com"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
-        sx: {
-          mt: 3
-        },
-        onClick: function onClick() {
-          return setActiveStep(1);
-        },
-        children: "Continue"
-      })]
-    })
-  }, {
-    title: 'Configure DNS',
-    titleVariant: 'h2',
-    onChange: function onChange() {
-      return setActiveStep(1);
-    },
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
-        children: "DNS"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
-        sx: {
-          mt: 3
-        },
-        onClick: function onClick() {
-          return setActiveStep(0);
-        },
-        children: "back"
-      })]
-    })
-  }, {
-    title: 'Certificate',
-    titleVariant: 'h2',
-    summary: [{
-      label: 'Certificate status',
-      value: 'Not found'
-    }],
-    onChange: function onChange() {
-      return setActiveStep(2);
-    },
-    children: (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Label, {
-        children: "Certificate validation"
-      }), (0, _jsxRuntime.jsx)(_.Button, {
-        sx: {
-          mt: 3
-        },
-        children: "Check certificate"
-      })]
-    })
-  }];
-  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-    children: [(0, _jsxRuntime.jsx)(_.Box, {
-      mt: 4,
-      children: (0, _jsxRuntime.jsx)(_.Wizard, {
-        completed: [0, 1],
-        skipped: [2],
-        activeStep: activeStep,
-        steps: steps,
-        titleAutofocus: autoFocus,
-        className: "vip-wizard-xyz"
-      })
-    }), (0, _jsxRuntime.jsx)(_.Box, {
-      mt: 4,
-      children: (0, _jsxRuntime.jsx)(_.Form.Select, {
-        id: "wizard-autofocus",
-        forLabel: "wizard-autofocus",
-        label: "Autofocus status",
-        value: autoFocus,
-        onChange: function onChange(e) {
-          return setAutoFocus(e.value);
-        },
-        options: [{
-          value: true,
-          label: 'On'
-        }, {
-          value: false,
-          label: 'Off'
-        }]
-      })
-    })]
-  });
-};
-exports.WithTitleAutoFocus = WithTitleAutoFocus;

package/src/system/Avatar/Avatar.stories.jsx

@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Avatar } from '..';
-
-export default {
-	title: 'Avatar',
-	component: Avatar,
-};
-
-export const Default = () => <Avatar />;

package/src/system/Avatar/index.js

@@ -1,6 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Avatar } from './Avatar';
-
-export { Avatar };

package/src/system/Badge/Badge.stories.jsx

@@ -1,43 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Badge, Link } from '..';
-
-export default {
-	title: 'Badge',
-	component: Badge,
-};
-
-const Template = props => <Badge { ...props } sx={ { m: 2 } } />;
-const TemplateLink = props => (
-	<Template { ...props } sx={ { m: 2 } }>
-		<Link href="http://google.com">Google.com</Link>
-	</Template>
-);
-
-export const Default = () => (
-	<>
-		<Template>Badge</Template>
-		<Template variant="red">Badge</Template>
-		<Template variant="yellow">Badge</Template>
-		<Template variant="green">Badge</Template>
-		<Template variant="gray">Badge</Template>
-		<Template variant="orange">Badge</Template>
-		<Template variant="gold">Badge</Template>
-		<Template variant="pink">Badge</Template>
-		<Template variant="salmon">Badge</Template>
-	</>
-);
-export const WithLinks = () => (
-	<>
-		<TemplateLink />
-		<TemplateLink variant="red" />
-		<TemplateLink variant="yellow" />
-		<TemplateLink variant="green" />
-		<TemplateLink variant="gray" />
-		<TemplateLink variant="orange" />
-		<TemplateLink variant="gold" />
-		<TemplateLink variant="pink" />
-		<TemplateLink variant="salmon" />
-	</>
-);

package/src/system/Badge/index.js

@@ -1,6 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Badge } from './Badge';
-
-export { Badge };

package/src/system/Button/Button.js

@@ -1,63 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Button as ThemeButton } from 'theme-ui';
-
-const Button = React.forwardRef( ( { disabled, onClick, sx, ...props }, forwardRef ) => {
-	const handleOnClick = useCallback(
-		event => {
-			if ( disabled ) {
-				return event.preventDefault();
-			}
-
-			if ( onClick ) {
-				return onClick( event );
-			}
-		},
-		[ disabled, onClick ]
-	);
-	return (
-		<ThemeButton
-			sx={ {
-				verticalAlign: 'middle',
-				display: 'inline-flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-				minHeight: '36px',
-				py: 0,
-				textDecoration: 'none',
-				'&:hover': {
-					textDecoration: 'none',
-				},
-				'&:focus-visible': theme => theme.outline,
-				'&[aria-disabled="true"]': {
-					opacity: 0.7,
-					cursor: 'not-allowed',
-					pointerEvents: 'all',
-				},
-				...sx,
-			} }
-			{ ...props }
-			aria-disabled={ disabled }
-			onClick={ handleOnClick }
-			className={ classNames( 'vip-button-component', props.className ) }
-			ref={ forwardRef }
-		/>
-	);
-} );
-
-Button.displayName = 'Button';
-
-Button.propTypes = {
-	className: PropTypes.any,
-	disabled: PropTypes.bool,
-	onClick: PropTypes.func,
-	sx: PropTypes.object,
-};
-
-export { Button };