@kaizen/components 1.60.3 → 1.61.1

package/dist/esm/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs

@@ -0,0 +1,93 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import '../../../../../../../Icon/subcomponents/SVG/SVG.mjs';
+import { IndicatorActiveIcon } from '../../../../../../../Icon/IndicatorActiveIcon.mjs';
+import { IndicatorInactiveIcon } from '../../../../../../../Icon/IndicatorInactiveIcon.mjs';
+import { SuccessIcon } from '../../../../../../../Icon/SuccessIcon.mjs';
+import { Text } from '../../../../../../../Text/Text.mjs';
+import { VisuallyHidden } from '../../../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './ProgressStepper.module.css.mjs';
+var getStepStatus = function (isComplete, isCurrentStep, step, index) {
+  if (isComplete) {
+    return {
+      icon: ( /*#__PURE__*/React.createElement(SuccessIcon, {
+        key: index,
+        inheritSize: true,
+        role: "presentation",
+        classNameOverride: "success"
+      })),
+      accessibleName: "Completed: ".concat(step.label)
+    };
+  }
+  if (isCurrentStep) {
+    return {
+      icon: ( /*#__PURE__*/React.createElement(IndicatorActiveIcon, {
+        key: index,
+        inheritSize: true,
+        role: "presentation",
+        classNameOverride: "active"
+      })),
+      accessibleName: "Current: ".concat(step.label)
+    };
+  }
+  return {
+    icon: ( /*#__PURE__*/React.createElement(IndicatorInactiveIcon, {
+      key: index,
+      inheritSize: true,
+      classNameOverride: "incomplete",
+      role: "presentation"
+    })),
+    accessibleName: "Not started: ".concat(step.label)
+  };
+};
+const ProgressStepper = /*#__PURE__*/function () {
+  const ProgressStepper = function (_a) {
+    var currentStepId = _a.currentStepId,
+      steps = _a.steps,
+      _b = _a.isComplete,
+      isComplete = _b === void 0 ? false : _b,
+      restprops = __rest(_a, ["currentStepId", "steps", "isComplete"]);
+    var currentStepIndex = steps.findIndex(function (stepItem) {
+      return stepItem.id === currentStepId;
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.stepsContainer
+    }, /*#__PURE__*/React.createElement("ol", __assign({
+      className: styles.stepList
+    }, restprops, {
+      "aria-labelledby": "stepper-description"
+    }), steps.map(function (step, index) {
+      var _a, _b;
+      var isCurrentStep = currentStepIndex === index;
+      var isCompletedStep = index < currentStepIndex || isComplete;
+      var _c = getStepStatus(isCompletedStep, isCurrentStep, step, index),
+        accessibleName = _c.accessibleName,
+        Icon = _c.icon;
+      return /*#__PURE__*/React.createElement("li", {
+        className: styles.step,
+        key: "".concat(step.id),
+        "aria-current": isCurrentStep
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.stepContent
+      }, /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibleName), /*#__PURE__*/React.createElement(Text, {
+        classNameOverride: classnames(styles.stepName, (_a = {}, _a[styles.isCurrent] = isCurrentStep, _a)),
+        variant: "small",
+        "aria-hidden": true
+      }, step.label), /*#__PURE__*/React.createElement("div", {
+        className: styles.stepIndicator
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classnames(styles.stepIcon, (_b = {}, _b[styles.isCompleted] = isCompletedStep, _b))
+      }, Icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
+        className: classnames([styles.stepDivider, isCompletedStep && styles.completedStep])
+      }))));
+    })), /*#__PURE__*/React.createElement(Text, {
+      classNameOverride: styles.stepperDescription,
+      variant: "small",
+      id: "stepper-description"
+    }, "Step ", currentStepIndex + 1, " of ", steps.length));
+  };
+  ProgressStepper.displayName = "Workflow.ProgressStepper";
+  return ProgressStepper;
+}();
+export { ProgressStepper };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.css.mjs

@@ -0,0 +1,14 @@
+var styles = {
+  "stepsContainer": "ProgressStepper-module_stepsContainer__xiaZx",
+  "stepList": "ProgressStepper-module_stepList__HEznt",
+  "step": "ProgressStepper-module_step__SpIP9",
+  "stepContent": "ProgressStepper-module_stepContent__HnUls",
+  "stepIndicator": "ProgressStepper-module_stepIndicator__rdjmc",
+  "stepName": "ProgressStepper-module_stepName__JxpgD",
+  "isCurrent": "ProgressStepper-module_isCurrent__tpOup",
+  "stepIcon": "ProgressStepper-module_stepIcon__4CeIh",
+  "isCompleted": "ProgressStepper-module_isCompleted__TeTBL",
+  "stepDivider": "ProgressStepper-module_stepDivider__vpzq6",
+  "stepperDescription": "ProgressStepper-module_stepperDescription__liW0H"
+};
+export { styles as default };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Footer/components/Root/FooterRoot.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "footerRoot": "FooterRoot-module_footerRoot__DUoiZ"
+};
+export { styles as default };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Footer/components/Root/Root.mjs

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './FooterRoot.module.css.mjs';
+const FooterRoot = /*#__PURE__*/function () {
+  const FooterRoot = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("footer", __assign({
+      className: classnames(styles.footerRoot, classNameOverride)
+    }, restProps), children);
+  };
+  FooterRoot.displayName = "Workflow.FooterRoot";
+  return FooterRoot;
+}();
+export { FooterRoot };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/Header.mjs

@@ -0,0 +1,27 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Titles } from './components/Titles/Titles.mjs';
+import { Actions } from './components/Actions/Actions.mjs';
+import { Branding } from './components/Branding/Branding.mjs';
+import { HeaderRoot } from './components/Root/Root.mjs';
+const Header = /*#__PURE__*/function () {
+  const Header = function (_a) {
+    var workflowName = _a.workflowName,
+      stepName = _a.stepName,
+      statusTag = _a.statusTag,
+      headerActions = _a.headerActions,
+      restProps = __rest(_a, ["workflowName", "stepName", "statusTag", "headerActions"]);
+    return /*#__PURE__*/React.createElement(HeaderRoot, __assign({}, restProps), /*#__PURE__*/React.createElement(Branding, {
+      alt: "Culture Amp"
+    }), /*#__PURE__*/React.createElement(Titles, {
+      workflowName: workflowName,
+      stepName: stepName,
+      statusTag: statusTag
+    }), /*#__PURE__*/React.createElement(Actions, {
+      headerActions: headerActions
+    }));
+  };
+  Header.displayName = "Workflow.Header";
+  return Header;
+}();
+export { Header };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.mjs

@@ -0,0 +1,21 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import styles from './Actions.module.css.mjs';
+
+/** A wrapper for an exit trigger (and other) actions of the Header Workflow  */
+const Actions = /*#__PURE__*/function () {
+  const Actions = function (_a) {
+    var headerActions = _a.headerActions,
+      restProps = __rest(_a, ["headerActions"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.actions
+    }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function (action, index) {
+      return /*#__PURE__*/React.createElement(action.type, __assign({
+        key: "header-actions ".concat(index)
+      }, action.props));
+    }));
+  };
+  Actions.displayName = "Workflow.Actions";
+  return Actions;
+}();
+export { Actions };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Actions/Actions.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "actions": "Actions-module_actions__WJwtK"
+};
+export { styles as default };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Branding/Branding.mjs

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Brand } from '../../../../../../../Brand/Brand.mjs';
+import styles from './Branding.module.css.mjs';
+const Branding = /*#__PURE__*/function () {
+  const Branding = function (_a) {
+    var _b = _a.variant,
+      variant = _b === void 0 ? "logo-horizontal" : _b,
+      alt = _a.alt;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.branding
+    }, /*#__PURE__*/React.createElement(Brand, {
+      classNameOverride: styles.logo,
+      variant: variant,
+      alt: alt
+    }));
+  };
+  Branding.displayName = "Workflow.Branding";
+  return Branding;
+}();
+export { Branding };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Branding/Branding.module.css.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "branding": "Branding-module_branding__bawwf",
+  "logo": "Branding-module_logo__qhM6C"
+};
+export { styles as default };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.mjs

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Root.module.css.mjs';
+const HeaderRoot = /*#__PURE__*/function () {
+  const HeaderRoot = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("header", __assign({
+      className: classnames(styles.root, classNameOverride)
+    }, restProps), children);
+  };
+  HeaderRoot.displayName = "Workflow.HeaderRoot";
+  return HeaderRoot;
+}();
+export { HeaderRoot };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Root/Root.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "root": "Root-module_root__FYpNx"
+};
+export { styles as default };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.mjs

@@ -0,0 +1,34 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Heading } from '../../../../../../../Heading/Heading.mjs';
+import { VisuallyHidden } from '../../../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './Titles.module.css.mjs';
+const Titles = /*#__PURE__*/function () {
+  const Titles = function (_a) {
+    var workflowName = _a.workflowName,
+      stepName = _a.stepName,
+      statusTag = _a.statusTag,
+      restProps = __rest(_a, ["workflowName", "stepName", "statusTag"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: styles.titles
+    }, restProps), /*#__PURE__*/React.createElement(Heading, {
+      variant: "composable-header-title",
+      tag: "h1",
+      color: "dark",
+      classNameOverride: styles.pageTitle
+    }, /*#__PURE__*/React.createElement(Heading, {
+      classNameOverride: styles.prefix,
+      variant: "heading-6",
+      tag: "span",
+      color: "dark-reduced-opacity"
+    }, workflowName, /*#__PURE__*/React.createElement(VisuallyHidden, null, ":")), /*#__PURE__*/React.createElement("span", null, stepName)), statusTag && (
+    /*#__PURE__*/
+    // status may need to be update by a fetch
+    React.createElement("div", {
+      className: styles.statusTag
+    }, statusTag)));
+  };
+  Titles.displayName = "Workflow.Titles";
+  return Titles;
+}();
+export { Titles };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Header/components/Titles/Titles.module.css.mjs

@@ -0,0 +1,7 @@
+var styles = {
+  "titles": "Titles-module_titles__gE8Zb",
+  "pageTitle": "Titles-module_pageTitle__CMn-j",
+  "prefix": "Titles-module_prefix__-Kflu",
+  "statusTag": "Titles-module_statusTag__fhxfV"
+};
+export { styles as default };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Main/Main.mjs

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Main.module.css.mjs';
+const Main = /*#__PURE__*/function () {
+  const Main = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("main", __assign({
+      className: classnames([styles.main, classNameOverride])
+    }, restProps), children);
+  };
+  Main.displayName = "Workflow.Main";
+  return Main;
+}();
+export { Main };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Main/Main.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "main": "Main-module_main__2ljR4"
+};
+export { styles as default };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.mjs

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Wrapper.module.css.mjs';
+const Wrapper = /*#__PURE__*/function () {
+  const Wrapper = function (_a) {
+    var children = _a.children,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["children", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement("div", __assign({
+      className: classnames(styles.wrapper, classNameOverride)
+    }, restProps), children);
+  };
+  Wrapper.displayName = "Workflow.Wrapper";
+  return Wrapper;
+}();
+export { Wrapper };

package/dist/esm/__layout__/Workflow/v3/subcomponents/Wrapper/Wrapper.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "wrapper": "Wrapper-module_wrapper__-IQnm"
+};
+export { styles as default };

package/dist/esm/future.mjs

@@ -1,4 +1,4 @@
 export { Select } from './__future__/Select/Select.mjs';
 export { RemovableTag } from './__future__/Tag/RemovableTag/RemovableTag.mjs';
 export { Tag } from './__future__/Tag/Tag/Tag.mjs';
-export { Workflow } from './__future__/Workflow/Workflow.mjs';
+export { Workflow } from './__layout__/Workflow/v2/index.mjs';

package/dist/esm/index.mjs

@@ -410,7 +410,7 @@ export { subtractOnePixel, useMediaQueries } from './utils/useMediaQueries.mjs';
 export { assetUrl } from './utils/hostedAssets.mjs';
 export { VisuallyHidden } from './VisuallyHidden/VisuallyHidden.mjs';
 export { Well } from './Well/Well.mjs';
-export { Workflow } from './Workflow/Workflow.mjs';
+export { Workflow } from './__layout__/Workflow/v1/index.mjs';
 export { Tooltip } from './__overlays__/Tooltip/v1/index.mjs';
 export { Menu, MenuHeading, MenuItem, MenuList, StatelessMenu } from './__actions__/Menu/v1/index.mjs';
 export { Button } from './__actions__/Button/v1/Button/Button.mjs';

package/dist/esm/layoutV1.mjs

@@ -0,0 +1 @@
+export { Workflow } from './__layout__/Workflow/v1/index.mjs';

package/dist/esm/layoutV2.mjs

@@ -0,0 +1 @@
+export { Workflow } from './__layout__/Workflow/v2/index.mjs';

package/dist/esm/layoutV3.mjs

@@ -0,0 +1 @@
+export { Workflow } from './__layout__/Workflow/v3/Workflow.mjs';