@automattic/vip-design-system 1.2.3 → 1.3.1

package/build/system/Wizard/WizardStep.js

@@ -1,200 +1,190 @@
+"use strict";
+
+exports.__esModule = true;
+exports.WizardStep = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bs = require("react-icons/bs");
+var _ = require("..");
+var _ScreenReaderText = require("../ScreenReaderText");
+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; }
 /** @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>
-		);
-	}
-);
-
-WizardStep.displayName = 'WizardStep';
-
-WizardStep.propTypes = {
-	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 };
+var WizardStep = exports.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 statusIconStyles = {
+    mr: 3,
+    mt: 0,
+    color: statusIconColor
+  };
+  var headingColor = "wizard.step.heading." + status;
+  (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,
+    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: 'heading',
+          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: [complete ? (0, _jsxRuntime.jsx)(_bs.BsFillCheckCircleFill, {
+            sx: statusIconStyles
+          }) : (0, _jsxRuntime.jsx)(_bs.BsCircleFill, {
+            sx: statusIconStyles
+          }), 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 == null ? void 0 : title.toString()) + ". " + 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 == null ? void 0 : title.toString()) + " step"
+        })]
+      })]
+    }), !active && (complete || skipped) && summary && summary.length > 0 && (0, _jsxRuntime.jsx)(_.Table, {
+      caption: "Summary of " + (title == null ? void 0 : title.toString()),
+      sx: {
+        width: 'auto',
+        minWidth: 'auto',
+        '> tbody > tr': {
+          '> td, > th': {
+            fontWeight: 'heading',
+            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]
+  });
+});
+WizardStep.displayName = 'WizardStep';

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

@@ -1,4 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { Wizard } from './Wizard';
 import { WizardStep } from './WizardStep';
-import { WizardStepHorizontal } from './WizardStepHorizontal';
-export { Wizard, WizardStep, WizardStepHorizontal };
+export { Wizard, WizardStep };

package/build/system/Wizard/index.js

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

package/build/system/index.d.ts

@@ -4,6 +4,7 @@ import { Badge } from './Badge';
 import { Box } from './Box';
 import { Button } from './Button';
 import { ButtonSubmit } from './Button';
+import { ButtonVariant } from './Button';
 import { Card } from './Card';
 import { Checkbox } from './Form';
 import { Code } from './Code';
@@ -46,6 +47,5 @@ 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 };
+export { Accordion, Avatar, Badge, Box, Button, ButtonSubmit, ButtonVariant, 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 };

package/build/system/index.js

@@ -4,7 +4,7 @@
 import { Avatar } from './Avatar';
 import { Badge } from './Badge';
 import { Box } from './Box';
-import { Button, ButtonSubmit } from './Button';
+import { Button, ButtonSubmit, ButtonVariant } from './Button';
 import { Card } from './Card';
 import { Code } from './Code';
 import {
@@ -58,6 +58,7 @@ export {
 	Box,
 	Button,
 	ButtonSubmit,
+	ButtonVariant,
 	Card,
 	Checkbox,
 	Code,