@automattic/vip-design-system 1.2.3 → 1.3.1

package/build/system/Wizard/Wizard.js

@@ -1,103 +1,72 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Wizard = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ = require("..");
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+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; }
 /** @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
  */
-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.array,
-	activeStep: PropTypes.number,
-	variant: PropTypes.string,
-	completed: PropTypes.array,
-	skipped: PropTypes.array,
-	className: PropTypes.any,
-	titleAutofocus: PropTypes.bool,
-};
 
-export { Wizard };
+var Wizard = exports.Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
+  var steps = _ref.steps,
+    activeStep = _ref.activeStep,
+    _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;
+  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: steps.map(function (_ref2, index) {
+      var title = _ref2.title,
+        subTitle = _ref2.subTitle,
+        children = _ref2.children,
+        titleVariant = _ref2.titleVariant,
+        summary = _ref2.summary,
+        onChange = _ref2.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);
+    })
+  });
+});
+Wizard.displayName = 'Wizard';

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

@@ -1,9 +1,12 @@
-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 '..';
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
 import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Wizard").WizardProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithTitleAutoFocus: () => React.JSX.Element;

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

@@ -0,0 +1,167 @@
+"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 = exports["default"] = {
+  title: 'Wizard',
+  component: _.Wizard
+};
+var Default = exports.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, {
+        placeholder: "yourdomain.com"
+      }), (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"
+      })
+    })
+  });
+};
+var WithTitleAutoFocus = exports.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.jsxs)(_.Flex, {
+        sx: {
+          alignItems: 'center'
+        },
+        children: [(0, _jsxRuntime.jsx)(_.Checkbox, {
+          id: "wizard-autofocus",
+          checked: autoFocus,
+          "aria-labelledby": "label-check1",
+          onCheckedChange: function onCheckedChange(e) {
+            setAutoFocus(e === true);
+          }
+        }), (0, _jsxRuntime.jsx)(_.Label, {
+          sx: {
+            m: 0,
+            ml: 2
+          },
+          htmlFor: "wizard-autofocus",
+          id: "label-check1",
+          children: "Autofocus enabled?"
+        })]
+      })
+    })]
+  });
+};

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

@@ -1,2 +1,25 @@
-export const WizardStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+/** @jsxImportSource theme-ui */
+/**
+ * External dependencies
+ */
 import React from 'react';
+import { HeadingProps } from '../Heading/Heading';
+export interface WizardStepSummary {
+    label?: React.ReactNode;
+    value?: React.ReactNode;
+}
+export interface WizardStepProps {
+    active?: boolean;
+    complete?: boolean;
+    order?: number;
+    totalSteps?: number;
+    title: React.ReactNode;
+    titleVariant?: HeadingProps['variant'];
+    subTitle?: React.ReactNode;
+    children?: React.ReactNode;
+    skipped?: boolean;
+    onChange?: () => void;
+    summary?: WizardStepSummary[];
+    shouldFocusTitle?: boolean;
+}
+export declare const WizardStep: React.ForwardRefExoticComponent<WizardStepProps & React.RefAttributes<HTMLDivElement>>;