@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/Wizard/WizardStep.js

@@ -1,210 +1,200 @@
-"use strict";
-
-exports.__esModule = true;
-exports.WizardStep = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _bs = require("react-icons/bs");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ = require("..");
-var _ScreenReaderText = require("../ScreenReaderText");
-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 } from 'react';
+import { BsCircleFill, BsFillCheckCircleFill } from 'react-icons/bs';
+import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
+import { Card, Heading, Text, Flex, Table, TableRow, TableCell, Button } from '..';
+import { ScreenReaderText } from '../ScreenReaderText';
+
+const WizardStep = React.forwardRef(
+	(
+		{
+			title,
+			subTitle,
+			skipped = false,
+			complete = false,
+			children,
+			active,
+			order,
+			totalSteps,
+			shouldFocusTitle,
+			titleVariant = 'h3',
+			summary,
+			onChange,
+		},
+		forwardRef
+	) => {
+		const titleRef = React.useRef( null );
+		let status = 'inactive';
+		let statusText = 'Step not completed';
+		if ( active ) {
+			status = 'active';
+			statusText = ''; // not adding the status text for active step since it's announced by aria-current
+		} else if ( complete ) {
+			status = 'complete';
+			statusText = 'Step completed';
+		} else if ( skipped ) {
+			status = 'skipped';
+			statusText = 'Step skipped';
+		}
+		if ( statusText !== '' ) {
+			statusText = `Status: ${ statusText }`;
+		}
+		const stepText = `Step ${ order } of ${ totalSteps }`;
+
+		const borderLeftColor = `wizard.step.border.${ status }`;
+		const statusIconColor = `wizard.step.icon.${ status }`;
+		const headingColor = `wizard.step.heading.${ status }`;
+
+		const StatusIcon = complete ? BsFillCheckCircleFill : BsCircleFill;
+
+		useLayoutEffect( () => {
+			if ( active && titleRef?.current && shouldFocusTitle ) {
+				titleRef.current.focus();
+			}
+		}, [ active, shouldFocusTitle ] );
+		return (
+			<Card
+				as="section"
+				sx={ {
+					boxShadow: active ? 'low' : 'none',
+					borderLeft: '2px solid',
+					p: 4,
+					backgroundColor: active ? 'background' : 'transparent',
+					borderRadius: 0,
+					borderBottom: active ? 'none' : '1px solid',
+					'&:first-of-type': {
+						borderTopWidth: '1px',
+						borderTopStyle: 'solid',
+					},
+					borderColor: 'wizard.step.border.default',
+					borderLeftColor,
+					overflow: 'inherit',
+				} }
+				data-step={ order }
+				data-active={ active || undefined }
+				ref={ forwardRef }
+				// aria-current={ active ? 'step' : undefined }
+			>
+				<Flex sx={ { alignItems: 'flex-end', mb: 2 } }>
+					<Heading
+						variant={ titleVariant }
+						sx={ {
+							mb: 1,
+							color: headingColor,
+							fontSize: 2,
+							fontWeight: '500',
+							flexGrow: 1,
+						} }
+						ref={ titleRef }
+						tabIndex={ shouldFocusTitle ? -1 : undefined }
+						aria-current={ active ? 'step' : undefined }
+					>
+						<Text sx={ { color: 'wizard.step.number.color' } } aria-hidden="true">
+							{ stepText }
+						</Text>
+
+						<Flex as="span" sx={ { mt: 3, alignItems: 'center' } } aria-hidden="true">
+							<StatusIcon
+								sx={ {
+									mr: 3,
+									mt: 0,
+									color: statusIconColor,
+								} }
+							/>
+							{ title }
+						</Flex>
+
+						<ScreenReaderText>{
+							/**
+							 * we are adding the composed title here so that it's announced correctly by the voiceover
+							 * Using tags inside the heading would make the voiceover read the heading in multiple parts
+							 **/
+							`${ stepText }: ${ title }. ${ statusText }`
+						}</ScreenReaderText>
+					</Heading>
+
+					{ ! active && ( complete || skipped ) && onChange && (
+						<Button
+							variant="text"
+							onClick={ onChange }
+							sx={ { height: 'auto', alignSelf: 'flex-end' } }
+						>
+							Change <ScreenReaderText>{ `the ${ title } step` }</ScreenReaderText>
+						</Button>
+					) }
+				</Flex>
+				{ ! active && ( complete || skipped ) && summary?.length > 0 && (
+					<Table
+						caption={ `Summary of ${ title }` }
+						sx={ {
+							width: 'auto',
+							minWidth: 'auto',
+							'> tbody > tr': {
+								'> td, > th': {
+									fontWeight: '500',
+									border: 'none',
+									pl: 0,
+									'&:first-of-type': { pl: 0 },
+								},
+							},
+						} }
+					>
+						<tbody>
+							{ summary.map( ( item, index ) => (
+								<TableRow key={ `summary_tb_${ index }` }>
+									<TableCell
+										as="th"
+										scope="row"
+										sx={ { color: 'gray', whiteSpace: 'nowrap', pr: 1 } }
+									>
+										{ item.label }
+										{ item.value ? ':' : '' }
+									</TableCell>
+									<TableCell sx={ { color: 'text' } }>
+										<strong>{ item.value }</strong>
+									</TableCell>
+								</TableRow>
+							) ) }
+						</tbody>
+					</Table>
+				) }
+
+				{ subTitle && active && <Text sx={ { mb: 3, mt: 2 } }>{ subTitle }</Text> }
+
+				{ active && children }
+			</Card>
+		);
+	}
+);
 
-var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var title = _ref.title,
-    subTitle = _ref.subTitle,
-    _ref$skipped = _ref.skipped,
-    skipped = _ref$skipped === void 0 ? false : _ref$skipped,
-    _ref$complete = _ref.complete,
-    complete = _ref$complete === void 0 ? false : _ref$complete,
-    children = _ref.children,
-    active = _ref.active,
-    order = _ref.order,
-    totalSteps = _ref.totalSteps,
-    shouldFocusTitle = _ref.shouldFocusTitle,
-    _ref$titleVariant = _ref.titleVariant,
-    titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant,
-    summary = _ref.summary,
-    onChange = _ref.onChange;
-  var titleRef = _react["default"].useRef(null);
-  var status = 'inactive';
-  var statusText = 'Step not completed';
-  if (active) {
-    status = 'active';
-    statusText = ''; // not adding the status text for active step since it's announced by aria-current
-  } else if (complete) {
-    status = 'complete';
-    statusText = 'Step completed';
-  } else if (skipped) {
-    status = 'skipped';
-    statusText = 'Step skipped';
-  }
-  if (statusText !== '') {
-    statusText = "Status: " + statusText;
-  }
-  var stepText = "Step " + order + " of " + totalSteps;
-  var borderLeftColor = "wizard.step.border." + status;
-  var statusIconColor = "wizard.step.icon." + status;
-  var headingColor = "wizard.step.heading." + status;
-  var StatusIcon = complete ? _bs.BsFillCheckCircleFill : _bs.BsCircleFill;
-  (0, _react.useLayoutEffect)(function () {
-    if (active && titleRef != null && titleRef.current && shouldFocusTitle) {
-      titleRef.current.focus();
-    }
-  }, [active, shouldFocusTitle]);
-  return (0, _jsxRuntime.jsxs)(_.Card, {
-    as: "section",
-    sx: {
-      boxShadow: active ? 'low' : 'none',
-      borderLeft: '2px solid',
-      p: 4,
-      backgroundColor: active ? 'background' : 'transparent',
-      borderRadius: 0,
-      borderBottom: active ? 'none' : '1px solid',
-      '&:first-of-type': {
-        borderTopWidth: '1px',
-        borderTopStyle: 'solid'
-      },
-      borderColor: 'wizard.step.border.default',
-      borderLeftColor: borderLeftColor,
-      overflow: 'inherit'
-    },
-    "data-step": order,
-    "data-active": active || undefined,
-    ref: forwardRef
-    // aria-current={ active ? 'step' : undefined }
-    ,
-    children: [(0, _jsxRuntime.jsxs)(_.Flex, {
-      sx: {
-        alignItems: 'flex-end',
-        mb: 2
-      },
-      children: [(0, _jsxRuntime.jsxs)(_.Heading, {
-        variant: titleVariant,
-        sx: {
-          mb: 1,
-          color: headingColor,
-          fontSize: 2,
-          fontWeight: '500',
-          flexGrow: 1
-        },
-        ref: titleRef,
-        tabIndex: shouldFocusTitle ? -1 : undefined,
-        "aria-current": active ? 'step' : undefined,
-        children: [(0, _jsxRuntime.jsx)(_.Text, {
-          sx: {
-            color: 'wizard.step.number.color'
-          },
-          "aria-hidden": "true",
-          children: stepText
-        }), (0, _jsxRuntime.jsxs)(_.Flex, {
-          as: "span",
-          sx: {
-            mt: 3,
-            alignItems: 'center'
-          },
-          "aria-hidden": "true",
-          children: [(0, _jsxRuntime.jsx)(StatusIcon, {
-            sx: {
-              mr: 3,
-              mt: 0,
-              color: statusIconColor
-            }
-          }), title]
-        }), (0, _jsxRuntime.jsx)(_ScreenReaderText.ScreenReaderText, {
-          children:
-          /**
-           * we are adding the composed title here so that it's announced correctly by the voiceover
-           * Using tags inside the heading would make the voiceover read the heading in multiple parts
-           **/
-          stepText + ": " + title + ". " + statusText
-        })]
-      }), !active && (complete || skipped) && onChange && (0, _jsxRuntime.jsxs)(_.Button, {
-        variant: "text",
-        onClick: onChange,
-        sx: {
-          height: 'auto',
-          alignSelf: 'flex-end'
-        },
-        children: ["Change ", (0, _jsxRuntime.jsx)(_ScreenReaderText.ScreenReaderText, {
-          children: "the " + title + " step"
-        })]
-      })]
-    }), !active && (complete || skipped) && (summary == null ? void 0 : summary.length) > 0 && (0, _jsxRuntime.jsx)(_.Table, {
-      caption: "Summary of " + title,
-      sx: {
-        width: 'auto',
-        minWidth: 'auto',
-        '> tbody > tr': {
-          '> td, > th': {
-            fontWeight: '500',
-            border: 'none',
-            pl: 0,
-            '&:first-of-type': {
-              pl: 0
-            }
-          }
-        }
-      },
-      children: (0, _jsxRuntime.jsx)("tbody", {
-        children: summary.map(function (item, index) {
-          return (0, _jsxRuntime.jsxs)(_.TableRow, {
-            children: [(0, _jsxRuntime.jsxs)(_.TableCell, {
-              as: "th",
-              scope: "row",
-              sx: {
-                color: 'gray',
-                whiteSpace: 'nowrap',
-                pr: 1
-              },
-              children: [item.label, item.value ? ':' : '']
-            }), (0, _jsxRuntime.jsx)(_.TableCell, {
-              sx: {
-                color: 'text'
-              },
-              children: (0, _jsxRuntime.jsx)("strong", {
-                children: item.value
-              })
-            })]
-          }, "summary_tb_" + index);
-        })
-      })
-    }), subTitle && active && (0, _jsxRuntime.jsx)(_.Text, {
-      sx: {
-        mb: 3,
-        mt: 2
-      },
-      children: subTitle
-    }), active && children]
-  });
-});
-exports.WizardStep = WizardStep;
 WizardStep.displayName = 'WizardStep';
+
 WizardStep.propTypes = {
-  active: _propTypes["default"].bool,
-  children: _propTypes["default"].node,
-  complete: _propTypes["default"].bool,
-  order: _propTypes["default"].number.isRequired,
-  totalSteps: _propTypes["default"].number.isRequired,
-  subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].string,
-  titleVariant: _propTypes["default"].string,
-  skipped: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func,
-  summary: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    label: _propTypes["default"].node,
-    value: _propTypes["default"].node
-  })),
-  shouldFocusTitle: _propTypes["default"].bool
-};
+	active: PropTypes.bool,
+	children: PropTypes.node,
+	complete: PropTypes.bool,
+	order: PropTypes.number.isRequired,
+	totalSteps: PropTypes.number.isRequired,
+	subTitle: PropTypes.node,
+	title: PropTypes.string,
+	titleVariant: PropTypes.string,
+	skipped: PropTypes.bool,
+	onChange: PropTypes.func,
+	summary: PropTypes.arrayOf(
+		PropTypes.shape( {
+			label: PropTypes.node,
+			value: PropTypes.node,
+		} )
+	),
+	shouldFocusTitle: PropTypes.bool,
+};
+
+export { WizardStep };

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

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

package/build/system/Wizard/WizardStepHorizontal.js

@@ -1,67 +1,55 @@
-"use strict";
-
-exports.__esModule = true;
-exports.WizardStepHorizontal = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _md = require("react-icons/md");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ = require("..");
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /** @jsxImportSource theme-ui */
 
 /**
  * External dependencies
  */
+import React from 'react';
+import { MdCheckCircle } from 'react-icons/md';
+import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
+import { Heading, Flex } from '..';
+
+const WizardStepHorizontal = React.forwardRef(
+	( { title, active, order, titleVariant = 'h3' }, forwardRef ) => {
+		const color = active ? 'heading' : 'muted';
+
+		return typeof title === 'string' ? (
+			<Heading
+				variant={ titleVariant }
+				sx={ {
+					mb: 0,
+					display: 'flex',
+					alignItems: 'center',
+					fontSize: 2,
+					color,
+				} }
+				data-step={ order }
+				data-active={ active || undefined }
+				ref={ forwardRef }
+			>
+				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+				{ title }
+			</Heading>
+		) : (
+			<Flex sx={ { alignItems: 'center', color } }>
+				<MdCheckCircle aria-hidden="true" sx={ { mr: 2 } } />
+				{ title }
+			</Flex>
+		);
+	}
+);
 
-var WizardStepHorizontal = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var title = _ref.title,
-    active = _ref.active,
-    order = _ref.order,
-    _ref$titleVariant = _ref.titleVariant,
-    titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant;
-  var color = active ? 'heading' : 'muted';
-  return typeof title === 'string' ? (0, _jsxRuntime.jsxs)(_.Heading, {
-    variant: titleVariant,
-    sx: {
-      mb: 0,
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: 2,
-      color: color
-    },
-    "data-step": order,
-    "data-active": active || undefined,
-    ref: forwardRef,
-    children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
-      "aria-hidden": "true",
-      sx: {
-        mr: 2
-      }
-    }), title]
-  }) : (0, _jsxRuntime.jsxs)(_.Flex, {
-    sx: {
-      alignItems: 'center',
-      color: color
-    },
-    children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
-      "aria-hidden": "true",
-      sx: {
-        mr: 2
-      }
-    }), title]
-  });
-});
-exports.WizardStepHorizontal = WizardStepHorizontal;
 WizardStepHorizontal.displayName = 'WizardStepHorizontal';
+
 WizardStepHorizontal.propTypes = {
-  active: _propTypes["default"].bool,
-  order: _propTypes["default"].number.isRequired,
-  subTitle: _propTypes["default"].node,
-  title: _propTypes["default"].node,
-  titleVariant: _propTypes["default"].string
-};
+	active: PropTypes.bool,
+	order: PropTypes.number.isRequired,
+	subTitle: PropTypes.node,
+	title: PropTypes.node,
+	titleVariant: PropTypes.string,
+};
+
+export { WizardStepHorizontal };

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

@@ -0,0 +1,4 @@
+import { Wizard } from './Wizard';
+import { WizardStep } from './WizardStep';
+import { WizardStepHorizontal } from './WizardStepHorizontal';
+export { Wizard, WizardStep, WizardStepHorizontal };

package/build/system/Wizard/index.js

@@ -1,9 +1,8 @@
-"use strict";
+/**
+ * Internal dependencies
+ */
+import { Wizard } from './Wizard';
+import { WizardStep } from './WizardStep';
+import { WizardStepHorizontal } from './WizardStepHorizontal';
 
-exports.__esModule = true;
-var _Wizard = require("./Wizard");
-exports.Wizard = _Wizard.Wizard;
-var _WizardStep = require("./WizardStep");
-exports.WizardStep = _WizardStep.WizardStep;
-var _WizardStepHorizontal = require("./WizardStepHorizontal");
-exports.WizardStepHorizontal = _WizardStepHorizontal.WizardStepHorizontal;
+export { Wizard, WizardStep, WizardStepHorizontal };

package/build/system/index.d.ts

@@ -0,0 +1,51 @@
+import { Accordion } from './Accordion';
+import { Avatar } from './Avatar';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Button } from './Button';
+import { ButtonSubmit } from './Button';
+import { Card } from './Card';
+import { Checkbox } from './Form';
+import { Code } from './Code';
+import { Dialog } from './Dialog';
+import * as NewDialog from './NewDialog';
+import * as Form from './NewForm';
+import * as Dropdown from './Dropdown';
+import { DialogButton } from './Dialog';
+import { DialogMenu } from './Dialog';
+import { DialogMenuItem } from './Dialog';
+import { DialogDivider } from './Dialog';
+import { DialogContent } from './Dialog';
+import { DialogTrigger } from './Dialog';
+import { ConfirmationDialog } from './ConfirmationDialog';
+import { NewConfirmationDialog } from './NewConfirmationDialog';
+import { Grid } from './Grid';
+import { Flex } from './Flex';
+import { Notice } from './Notice';
+import { OptionRow } from './OptionRow';
+import { Heading } from './Heading';
+import { Input } from './Form';
+import { Label } from './Form';
+import { Spinner } from './Spinner';
+import { Table } from './Table';
+import { TableRow } from './Table';
+import { TableCell } from './Table';
+import { Tooltip } from './Tooltip';
+import { Link } from './Link';
+import { Radio } from './Form';
+import { RadioBoxGroup } from './Form';
+import { Textarea } from './Form';
+import { Progress } from './Progress';
+import { Text } from './Text';
+import { Tabs } from './Tabs';
+import { TabsTrigger } from './Tabs';
+import { TabsContent } from './Tabs';
+import { TabsList } from './Tabs';
+import { Toggle } from './Form';
+import { ToggleRow } from './Form';
+import { Validation } from './Form';
+import { Wizard } from './Wizard';
+import { WizardStep } from './Wizard';
+import { WizardStepHorizontal } from './Wizard';
+import theme from './theme';
+export { Accordion, Avatar, Badge, Box, Button, ButtonSubmit, Card, Checkbox, Code, Dialog, NewDialog, Form, Dropdown, DialogButton, DialogMenu, DialogMenuItem, DialogDivider, DialogContent, DialogTrigger, ConfirmationDialog, NewConfirmationDialog, Grid, Flex, Notice, OptionRow, Heading, Input, Label, Spinner, Table, TableRow, TableCell, Tooltip, Link, Radio, RadioBoxGroup, Textarea, Progress, Text, Tabs, TabsTrigger, TabsContent, TabsList, Toggle, ToggleRow, Validation, Wizard, WizardStep, WizardStepHorizontal, theme };