@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Tooltip/Tooltip.stories.js

@@ -1,39 +1,101 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.Container = exports.Basic = void 0;
 var _ = require("..");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 /**
  * Internal dependencies
  */
-var _default = {
+var _default = exports["default"] = {
   title: 'Tooltip',
-  component: _.Tooltip
+  component: _.Tooltip,
+  parameters: {
+    docs: {
+      description: {
+        component: "\nA tooltip is a short descriptive message that appears when a user hovers or focuses on an\nelement. Our tooltip aims to be 100% CSS-only. It uses a global css approach to inject the\ntooltip styles.\n\n## Kwown issues\n\n- Storybook uses iframes to render the components. This means that the tooltip box will overlap in the demos, but you can click on each demo page to see the correct render.\n- The current implementation of this component is <strong>NOT</strong> protected from viewport\nclipping (collision). For now, you can pick another <code>vip-tooltip-position</code> if\npossible.\n\n## Guidance\n\n### When to use the tooltip component\n\n- <strong>Helpful, non-critical information.</strong> Use tooltips to strengthen an existing\nmessage.\n- <strong>Enhance confidence.</strong> Use tooltips to increase certainty about an\ninteraction.\n- <strong>Brief descriptions.</strong> Tooltips perform best with succinct helper text.\n- <strong>Lack of space.</strong> Tooltips are useful as a last resort for space-constrained\nUI. Explore other options for keeping content visible without a tooltip.\n\n### When to consider something else\n\n- <strong>Critical information.</strong> Don&apos;t hide information necessary for completing\na task behind an tooltip interaction.\n- <strong>Lengthy descriptions.</strong> Tooltips are microcopy, and should be brief.\nDon&apos;t use a tooltip if you need a lot of text.\n- <strong>Redundant content.</strong> Don&apos;t use a tooltip when its content is repetitive\nor if usability is obvious.\n- <strong>Sufficient space.</strong> If content can fit outside a tooltip, don&apos;t use a\ntooltip.\n\n### Usability guidance\n\n- <strong>Use affordances.</strong> A hidden tooltip is unusable. Use tooltips only on\nelements that appear interactive, like buttons or links.\n- <strong>Avoid collisions.</strong> Be careful not introduce conflicting hover or focus\nevents.\n- <strong>Use consistently.</strong> If using tooltips in one context, use in all similar\ncontexts.\n- <strong>Don&apos;t block content.</strong> Use the <code>data-position</code> attribute to\nprevent the tooltip from covering other page elements.\n\n-------\n\nThis documentation is heavily inspired by the [U.S Web Design System (USWDS)](https://designsystem.digital.gov/components/tooltip/#package). We use USWDS as trusted source of truth for accessibility and usability best practices.\n\n## Component Properties\n"
+      }
+    }
+  }
 };
-exports["default"] = _default;
-var Default = function Default() {
-  return (0, _jsxRuntime.jsxs)(_.Flex, {
-    sx: {
-      alignItems: 'center'
-    },
+var Basic = exports.Basic = function Basic() {
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsx)(_.Heading, {
-      sx: {
-        mb: 0,
-        mr: 2
-      },
-      children: "My Section Heading"
+      variant: "h2",
+      children: "Basic Usage"
+    }), (0, _jsxRuntime.jsxs)(_.Text, {
+      children: ["Pass a trigger and title, the trigger component will be cloned and injected with a", ' ', (0, _jsxRuntime.jsx)("code", {
+        children: "[vip-tooltip]"
+      }), " HTML attribute."]
+    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
+      trigger: (0, _jsxRuntime.jsx)(_.Button, {
+        sx: {
+          mr: 3
+        },
+        children: "Button with top tooltip"
+      }),
+      title: "On the top",
+      position: "top"
+    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
+      trigger: (0, _jsxRuntime.jsx)(_.Button, {
+        sx: {
+          mr: 3
+        },
+        children: "Button with bottom tooltip"
+      }),
+      title: "On the Bottom",
+      position: "bottom"
     }), (0, _jsxRuntime.jsx)(_.Tooltip, {
-      children: (0, _jsxRuntime.jsxs)(_.Text, {
+      trigger: (0, _jsxRuntime.jsx)(_.Button, {
         sx: {
-          fontSize: 1,
-          color: 'text'
+          mr: 3
         },
-        children: ["This is a tooltip that can be used to describe various pieces of functionality.", (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Link, {
-          children: "Find out more \u2192"
+        children: "Button with left tooltip"
+      }),
+      title: "On the Left",
+      position: "left"
+    }), (0, _jsxRuntime.jsx)(_.Tooltip, {
+      trigger: (0, _jsxRuntime.jsx)(_.Button, {
+        children: "Button with right tooltip"
+      }),
+      title: "On the Right",
+      position: "right"
+    })]
+  });
+};
+var Container = exports.Container = function Container() {
+  return (0, _jsxRuntime.jsxs)("div", {
+    children: [(0, _jsxRuntime.jsx)(_.Heading, {
+      variant: "h2",
+      children: "Container Usage"
+    }), (0, _jsxRuntime.jsxs)(_.Text, {
+      children: ["You can also wrap a component with the ", (0, _jsxRuntime.jsx)("code", {
+        children: "Tooltip"
+      }), " component. To use tooltips you can simply pass ", (0, _jsxRuntime.jsx)("code", {
+        children: "data-vip-tooltip"
+      }), " as an HTML attribute to your component."]
+    }), (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        backgroundColor: 'red'
+      },
+      children: (0, _jsxRuntime.jsxs)(_.Tooltip, {
+        children: [(0, _jsxRuntime.jsx)(_.Button, {
+          "data-vip-tooltip-position": "top",
+          "data-vip-tooltip": "Test test",
+          sx: {
+            ml: 3
+          },
+          children: "This is another way"
+        }), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)("br", {}), (0, _jsxRuntime.jsx)(_.Link, {
+          href: "http://google.com",
+          "data-vip-tooltip-position": "right",
+          "data-vip-tooltip": "is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500",
+          sx: {
+            ml: 3
+          },
+          children: "Use with links too"
         })]
       })
     })]
   });
-};
-exports.Default = Default;
+};

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

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

package/build/system/Wizard/Wizard.d.ts

@@ -0,0 +1,2 @@
+export const Wizard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/build/system/Wizard/Wizard.js

@@ -1,112 +1,103 @@
-"use strict";
-
-exports.__esModule = true;
-exports.Wizard = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _md = require("react-icons/md");
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-var _excluded = ["steps", "activeStep", "variant", "completed", "skipped", "className", "titleAutofocus"];
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
+import React, { useLayoutEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { MdArrowForward } from 'react-icons/md';
+
 /**
  * Internal dependencies
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-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 _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 Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var steps = _ref.steps,
-    activeStep = _ref.activeStep,
-    variant = _ref.variant,
-    _ref$completed = _ref.completed,
-    completed = _ref$completed === void 0 ? [] : _ref$completed,
-    _ref$skipped = _ref.skipped,
-    skipped = _ref$skipped === void 0 ? [] : _ref$skipped,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$titleAutofocus = _ref.titleAutofocus,
-    titleAutofocus = _ref$titleAutofocus === void 0 ? false : _ref$titleAutofocus,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    didMount = _useState[0],
-    setDidMount = _useState[1];
-  var _useState2 = (0, _react.useState)(activeStep),
-    initialStep = _useState2[0];
-  // didMount helps us to track the initial render, so we can focus the title only subsequent renders
-  // to avoid stealing the focus from the page we're in.
-  (0, _react.useLayoutEffect)(function () {
-    if (!didMount && activeStep !== initialStep) {
-      setDidMount(true);
-    }
-  }, [initialStep, activeStep, didMount, setDidMount]);
-  return (0, _jsxRuntime.jsx)(_.Box, {
-    className: (0, _classnames["default"])('vip-wizard-component', className),
-    ref: forwardRef,
-    children: variant === 'horizontal' ? (0, _jsxRuntime.jsxs)(_.Box, {
-      children: [(0, _jsxRuntime.jsx)(_.Flex, _extends({
-        sx: {
-          flex: '0 0 auto'
-        }
-      }, props, {
-        children: steps.map(function (_ref2, index) {
-          var title = _ref2.title,
-            subTitle = _ref2.subTitle,
-            titleVariant = _ref2.titleVariant;
-          return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
-            children: [(0, _jsxRuntime.jsx)(_.WizardStepHorizontal, {
-              active: index === activeStep,
-              order: index + 1,
-              subTitle: subTitle,
-              title: title,
-              titleVariant: titleVariant
-            }), index < steps.length - 1 && (0, _jsxRuntime.jsx)(_md.MdArrowForward, {
-              sx: {
-                mx: 2,
-                color: 'gray.80'
-              }
-            })]
-          }, index);
-        })
-      })), steps[activeStep].children]
-    }) : steps.map(function (_ref3, index) {
-      var title = _ref3.title,
-        subTitle = _ref3.subTitle,
-        children = _ref3.children,
-        titleVariant = _ref3.titleVariant,
-        summary = _ref3.summary,
-        onChange = _ref3.onChange;
-      return (0, _jsxRuntime.jsx)(_.WizardStep, {
-        active: index === activeStep,
-        complete: completed.includes(index),
-        skipped: skipped.includes(index),
-        order: index + 1,
-        totalSteps: steps.length,
-        subTitle: subTitle,
-        title: title,
-        titleVariant: titleVariant,
-        summary: summary,
-        onChange: onChange,
-        shouldFocusTitle: titleAutofocus && didMount,
-        children: children
-      }, index);
-    })
-  });
-});
-exports.Wizard = Wizard;
+import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
+
+const Wizard = React.forwardRef(
+	(
+		{
+			steps,
+			activeStep,
+			variant,
+			completed = [],
+			skipped = [],
+			className = null,
+			titleAutofocus = false,
+			...props
+		},
+		forwardRef
+	) => {
+		const [ didMount, setDidMount ] = useState( false );
+		const [ initialStep ] = useState( activeStep );
+		// didMount helps us to track the initial render, so we can focus the title only subsequent renders
+		// to avoid stealing the focus from the page we're in.
+		useLayoutEffect( () => {
+			if ( ! didMount && activeStep !== initialStep ) {
+				setDidMount( true );
+			}
+		}, [ initialStep, activeStep, didMount, setDidMount ] );
+		return (
+			<Box className={ classNames( 'vip-wizard-component', className ) } ref={ forwardRef }>
+				{ variant === 'horizontal' ? (
+					<Box>
+						<Flex
+							sx={ {
+								flex: '0 0 auto',
+							} }
+							{ ...props }
+						>
+							{ steps.map( ( { title, subTitle, titleVariant }, index ) => (
+								<React.Fragment key={ index }>
+									<WizardStepHorizontal
+										active={ index === activeStep }
+										order={ index + 1 }
+										subTitle={ subTitle }
+										title={ title }
+										titleVariant={ titleVariant }
+									/>
+									{ index < steps.length - 1 && (
+										<MdArrowForward sx={ { mx: 2, color: 'gray.80' } } />
+									) }
+								</React.Fragment>
+							) ) }
+						</Flex>
+						{ steps[ activeStep ].children }
+					</Box>
+				) : (
+					steps.map( ( { title, subTitle, children, titleVariant, summary, onChange }, index ) => (
+						<WizardStep
+							active={ index === activeStep }
+							complete={ completed.includes( index ) }
+							skipped={ skipped.includes( index ) }
+							key={ index }
+							order={ index + 1 }
+							totalSteps={ steps.length }
+							subTitle={ subTitle }
+							title={ title }
+							titleVariant={ titleVariant }
+							summary={ summary }
+							onChange={ onChange }
+							shouldFocusTitle={ titleAutofocus && didMount }
+						>
+							{ children }
+						</WizardStep>
+					) )
+				) }
+			</Box>
+		);
+	}
+);
+
 Wizard.displayName = 'Wizard';
+
 Wizard.propTypes = {
-  steps: _propTypes["default"].array,
-  activeStep: _propTypes["default"].number,
-  variant: _propTypes["default"].string,
-  completed: _propTypes["default"].array,
-  skipped: _propTypes["default"].array,
-  className: _propTypes["default"].any,
-  titleAutofocus: _propTypes["default"].bool
-};
+	steps: PropTypes.array,
+	activeStep: PropTypes.number,
+	variant: PropTypes.string,
+	completed: PropTypes.array,
+	skipped: PropTypes.array,
+	className: PropTypes.any,
+	titleAutofocus: PropTypes.bool,
+};
+
+export { Wizard };

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

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { Wizard as component };
+}
+export default _default;
+export function Default(): React.JSX.Element;
+export function WithTitleAutoFocus(): React.JSX.Element;
+import { Wizard } from '..';
+import React from 'react';

package/build/system/Wizard/Wizard.stories.jsx

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

package/build/system/Wizard/WizardStep.d.ts

@@ -0,0 +1,2 @@
+export const WizardStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';