@wix/patterns 1.413.0 → 1.415.0

package/dist/cjs/components/SetupWidget/SetupStepCard.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SetupStepCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _SetupStepIcon = require("./SetupStepIcon");
+var _SetupWidgetStCss = require("./SetupWidget.st.css.js");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepCard.tsx";
+/**
+ * Mobile step card. Phase-1 layout ("matching desktop"): shadowed card, the
+ * focused card gets a soft blue surface, an "In progress" badge sits under the
+ * title, completed cards strike the title and drop the CTA. Story-only
+ * experiment knobs (peach shell / colored bullet / hero art / full-screen
+ * modal) are intentionally omitted — those are consumer/page concerns.
+ */
+const SetupStepCard = ({
+  step,
+  isPrimary,
+  expanded,
+  onActivate,
+  renderStepContent
+}) => {
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const isInProgress = step.status === 'in-progress';
+  const isCompleted = step.status === 'completed';
+  const isDisabled = step.status === 'disabled';
+  const isInline = step.expansionMode === 'inline';
+  const isInlineExpanded = expanded && isInline;
+
+  // The whole card toggles inline steps; navigate steps act via the CTA.
+  const clickable = isInline && !isCompleted && !isDisabled;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": `setup-step-${step.id}`,
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.card, {
+      primary: isPrimary,
+      clickable
+    }),
+    onClick: clickable ? onActivate : undefined,
+    role: clickable ? 'button' : undefined,
+    tabIndex: clickable ? 0 : undefined,
+    onKeyDown: clickable ? event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onActivate();
+      }
+    } : undefined,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 51,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    gap: "SP2",
+    padding: "SP4",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 68,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP2",
+    verticalAlign: "top",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 69,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
+    status: step.status,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 70,
+      columnNumber: 11
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    gap: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 71,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    dataHook: `setup-step-title-${step.id}`,
+    size: "small",
+    weight: isPrimary ? 'bold' : 'thin',
+    skin: isDisabled ? 'disabled' : 'standard',
+    secondary: isCompleted,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 72,
+      columnNumber: 13
+    }
+  }, isCompleted ? /*#__PURE__*/_react.default.createElement("del", {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 79,
+      columnNumber: 30
+    }
+  }, step.title) : step.title), isInProgress && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 82,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
+    size: "tiny",
+    skin: "urgent",
+    type: "transparent",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 83,
+      columnNumber: 17
+    }
+  }, t('cairo.setupWidget.step.inProgress'))))), !isCompleted && step.description && /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    secondary: true,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 92,
+      columnNumber: 11
+    }
+  }, step.description), isInlineExpanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: `setup-step-content-${step.id}`,
+    direction: "vertical",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 98,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: event => event.stopPropagation(),
+    onKeyDown: event => event.stopPropagation(),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 102,
+      columnNumber: 13
+    }
+  }, renderStepContent == null ? void 0 : renderStepContent(step))), !isCompleted && !isInlineExpanded && step.ctaLabel && (() => {
+    const ctaButton = /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
+      dataHook: `setup-step-cta-${step.id}`,
+      fullWidth: true,
+      size: "medium",
+      priority: isPrimary ? 'primary' : 'secondary',
+      disabled: isDisabled,
+      onClick: event => {
+        event.stopPropagation();
+        onActivate();
+      },
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 116,
+        columnNumber: 15
+      }
+    }, step.ctaLabel);
+
+    // Disabled steps explain why the CTA is disabled (G5).
+    return isDisabled ? /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+      dataHook: `setup-step-disabled-tooltip-${step.id}`,
+      content: step.disabledTooltip ??
+      // Translation-key id stays `lockedTooltip` until the
+      // Translation Center key is renamed (TC follow-up to T2).
+      t('cairo.setupWidget.step.lockedTooltip'),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 133,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 142,
+        columnNumber: 17
+      }
+    }, ctaButton)) : ctaButton;
+  })(), isCompleted && step.completedCtaLabel && !isDisabled && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 150,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+    dataHook: `setup-step-cta-${step.id}`,
+    size: "small",
+    onClick: event => {
+      event.stopPropagation();
+      onActivate();
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 151,
+      columnNumber: 13
+    }
+  }, step.completedCtaLabel))));
+};
+exports.SetupStepCard = SetupStepCard;
+//# sourceMappingURL=SetupStepCard.js.map

package/dist/cjs/components/SetupWidget/SetupStepCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepCard","step","isPrimary","expanded","onActivate","renderStepContent","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInline","expansionMode","isInlineExpanded","clickable","default","createElement","id","className","st","classes","card","primary","onClick","undefined","role","tabIndex","onKeyDown","event","key","preventDefault","__self","__source","fileName","lineNumber","columnNumber","Box","direction","gap","padding","verticalAlign","SetupStepIcon","Text","dataHook","size","weight","skin","secondary","title","Badge","type","description","stopPropagation","ctaLabel","ctaButton","Button","fullWidth","priority","disabled","Tooltip","content","disabledTooltip","completedCtaLabel","TextButton","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepCard.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Text,\n  Button,\n  TextButton,\n  Badge,\n  Tooltip,\n} from '@wix/design-system';\nimport { SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { SetupStepIcon } from './SetupStepIcon';\nimport { st, classes } from './SetupWidget.st.css.js';\n\nexport interface SetupStepCardProps {\n  step: SetupWidgetStep;\n  /** The recommended next step — soft blue surface + primary CTA. */\n  isPrimary: boolean;\n  /** Inline content is shown below the header. */\n  expanded: boolean;\n  onActivate: () => void;\n  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Mobile step card. Phase-1 layout (\"matching desktop\"): shadowed card, the\n * focused card gets a soft blue surface, an \"In progress\" badge sits under the\n * title, completed cards strike the title and drop the CTA. Story-only\n * experiment knobs (peach shell / colored bullet / hero art / full-screen\n * modal) are intentionally omitted — those are consumer/page concerns.\n */\nexport const SetupStepCard = ({\n  step,\n  isPrimary,\n  expanded,\n  onActivate,\n  renderStepContent,\n}: SetupStepCardProps) => {\n  const { translate: t } = useWixPatternsContainer();\n\n  const isInProgress = step.status === 'in-progress';\n  const isCompleted = step.status === 'completed';\n  const isDisabled = step.status === 'disabled';\n  const isInline = step.expansionMode === 'inline';\n  const isInlineExpanded = expanded && isInline;\n\n  // The whole card toggles inline steps; navigate steps act via the CTA.\n  const clickable = isInline && !isCompleted && !isDisabled;\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      className={st(classes.card, { primary: isPrimary, clickable })}\n      onClick={clickable ? onActivate : undefined}\n      role={clickable ? 'button' : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      onKeyDown={\n        clickable\n          ? (event: React.KeyboardEvent) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                onActivate();\n              }\n            }\n          : undefined\n      }\n    >\n      <Box direction=\"vertical\" gap=\"SP2\" padding=\"SP4\">\n        <Box gap=\"SP2\" verticalAlign=\"top\">\n          <SetupStepIcon status={step.status} />\n          <Box direction=\"vertical\" gap=\"SP1\">\n            <Text\n              dataHook={`setup-step-title-${step.id}`}\n              size=\"small\"\n              weight={isPrimary ? 'bold' : 'thin'}\n              skin={isDisabled ? 'disabled' : 'standard'}\n              secondary={isCompleted}\n            >\n              {isCompleted ? <del>{step.title}</del> : step.title}\n            </Text>\n            {isInProgress && (\n              <Box>\n                <Badge size=\"tiny\" skin=\"urgent\" type=\"transparent\">\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Badge>\n              </Box>\n            )}\n          </Box>\n        </Box>\n\n        {!isCompleted && step.description && (\n          <Text size=\"small\" secondary>\n            {step.description}\n          </Text>\n        )}\n\n        {isInlineExpanded && (\n          <Box dataHook={`setup-step-content-${step.id}`} direction=\"vertical\">\n            {/* Stop clicks/keys inside the consumer widget from bubbling to\n                the card's toggle handler — otherwise interacting with the\n                content (e.g. an input) would collapse the card. */}\n            <div\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              {renderStepContent?.(step)}\n            </div>\n          </Box>\n        )}\n\n        {!isCompleted &&\n          !isInlineExpanded &&\n          step.ctaLabel &&\n          (() => {\n            const ctaButton = (\n              <Button\n                dataHook={`setup-step-cta-${step.id}`}\n                fullWidth\n                size=\"medium\"\n                priority={isPrimary ? 'primary' : 'secondary'}\n                disabled={isDisabled}\n                onClick={(event: React.MouseEvent) => {\n                  event.stopPropagation();\n                  onActivate();\n                }}\n              >\n                {step.ctaLabel}\n              </Button>\n            );\n\n            // Disabled steps explain why the CTA is disabled (G5).\n            return isDisabled ? (\n              <Tooltip\n                dataHook={`setup-step-disabled-tooltip-${step.id}`}\n                content={\n                  step.disabledTooltip ??\n                  // Translation-key id stays `lockedTooltip` until the\n                  // Translation Center key is renamed (TC follow-up to T2).\n                  t('cairo.setupWidget.step.lockedTooltip')\n                }\n              >\n                <Box>{ctaButton}</Box>\n              </Tooltip>\n            ) : (\n              ctaButton\n            );\n          })()}\n\n        {isCompleted && step.completedCtaLabel && !isDisabled && (\n          <Box>\n            <TextButton\n              dataHook={`setup-step-cta-${step.id}`}\n              size=\"small\"\n              onClick={(event: React.MouseEvent) => {\n                event.stopPropagation();\n                onActivate();\n              }}\n            >\n              {step.completedCtaLabel}\n            </TextButton>\n          </Box>\n        )}\n      </Box>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupStepGroup.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SetupStepGroup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _react2 = require("@wix/bex-core/react");
+var _SetupStepIcon = require("./SetupStepIcon");
+var _SetupWidgetStCss = require("./SetupWidget.st.css.js");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepGroup.tsx";
+/**
+ * Aggregated group row (e.g. "Stores", "Bookings"). Collapsed: icon + title +
+ * an "x/y" counter + chevron. Expanded: the children render indented below.
+ * Completion / in-progress are derived from the children (mirrors
+ * `AggregatedByGroupStep` in dashboard-setup). The toggle lives on the header
+ * only, so clicking a child doesn't collapse the group.
+ */
+const SetupStepGroup = ({
+  step,
+  isMobile,
+  expanded,
+  isPrimary,
+  onToggle,
+  renderChild
+}) => {
+  const {
+    translate: t
+  } = (0, _react2.useWixPatternsContainer)();
+  const children = step.steps ?? [];
+  const total = children.length;
+  const completed = children.filter(c => c.status === 'completed').length;
+  const allCompleted = total > 0 && completed === total;
+  const anyInProgress = children.some(c => c.status === 'in-progress');
+  const isFocused = expanded || isPrimary;
+  const Chevron = expanded ? _wixUiIconsCommon.ChevronUp : _wixUiIconsCommon.ChevronDown;
+  const header = /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: 0,
+    onClick: onToggle,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onToggle();
+      }
+    },
+    style: {
+      cursor: 'pointer'
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 47,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "space-between",
+    verticalAlign: isMobile ? 'top' : 'middle',
+    width: "100%",
+    minHeight: "30px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 59,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    minHeight: "24px",
+    verticalAlign: isMobile ? 'top' : 'middle',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 65,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
+    status: allCompleted ? 'completed' : 'upcoming',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 11
+    }
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    paddingLeft: "SP2",
+    direction: isMobile ? 'vertical' : 'horizontal',
+    verticalAlign: isMobile ? 'top' : 'middle',
+    gap: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 69,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    dataHook: `setup-step-title-${step.id}`,
+    size: "small",
+    weight: isFocused ? 'bold' : 'thin',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 75,
+      columnNumber: 13
+    }
+  }, step.title), anyInProgress && !allCompleted && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: isMobile ? undefined : '2px',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 83,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
+    size: "tiny",
+    skin: "urgent",
+    type: "transparent",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 84,
+      columnNumber: 17
+    }
+  }, t('cairo.setupWidget.step.inProgress'))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    gap: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 91,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
+    id: `setup-step-counter-${step.id}`,
+    skin: "neutral",
+    removable: false,
+    size: "small",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 92,
+      columnNumber: 11
+    }
+  }, t('cairo.setupWidget.aggregated.counter', {
+    completed,
+    total
+  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: `setup-step-chevron-${step.id}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 100,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/_react.default.createElement(Chevron, {
+    width: "20",
+    height: "20",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 101,
+      columnNumber: 13
+    }
+  })))));
+  const childList = expanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    dataHook: `setup-step-children-${step.id}`,
+    direction: "vertical",
+    gap: isMobile ? 'SP3' : 'SP1',
+    paddingLeft: isMobile ? 'SP4' : 'SP5',
+    marginTop: isMobile ? 'SP3' : 'SP1',
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 109,
+      columnNumber: 5
+    }
+  }, children.map(child => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+    key: child.id,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 117,
+      columnNumber: 9
+    }
+  }, renderChild(child))));
+  if (isMobile) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": `setup-step-${step.id}`,
+      className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.card),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 124,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      direction: "vertical",
+      padding: "SP4",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 125,
+        columnNumber: 9
+      }
+    }, header, childList));
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": `setup-step-${step.id}`,
+    className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.row),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 134,
+      columnNumber: 5
+    }
+  }, header, childList);
+};
+exports.SetupStepGroup = SetupStepGroup;
+//# sourceMappingURL=SetupStepGroup.js.map

package/dist/cjs/components/SetupWidget/SetupStepGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepGroup","step","isMobile","expanded","isPrimary","onToggle","renderChild","translate","t","useWixPatternsContainer","children","steps","total","length","completed","filter","c","status","allCompleted","anyInProgress","some","isFocused","Chevron","ChevronUp","ChevronDown","header","default","createElement","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","style","cursor","__self","__source","fileName","lineNumber","columnNumber","Box","align","verticalAlign","width","minHeight","SetupStepIcon","paddingLeft","direction","gap","Text","dataHook","id","size","weight","title","marginTop","undefined","Badge","skin","type","Tag","removable","height","childList","map","child","Fragment","className","st","classes","card","padding","row","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Badge, Tag } from '@wix/design-system';\nimport { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';\nimport { SetupWidgetStep } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { SetupStepIcon } from './SetupStepIcon';\nimport { st, classes } from './SetupWidget.st.css.js';\n\nexport interface SetupStepGroupProps {\n  step: SetupWidgetStep;\n  isMobile: boolean;\n  /** The group's children are shown. */\n  expanded: boolean;\n  /** The recommended/focused row. */\n  isPrimary: boolean;\n  onToggle: () => void;\n  /** Renders a single child step (the parent supplies the row/card). */\n  renderChild: (child: SetupWidgetStep) => React.ReactNode;\n}\n\n/**\n * Aggregated group row (e.g. \"Stores\", \"Bookings\"). Collapsed: icon + title +\n * an \"x/y\" counter + chevron. Expanded: the children render indented below.\n * Completion / in-progress are derived from the children (mirrors\n * `AggregatedByGroupStep` in dashboard-setup). The toggle lives on the header\n * only, so clicking a child doesn't collapse the group.\n */\nexport const SetupStepGroup = ({\n  step,\n  isMobile,\n  expanded,\n  isPrimary,\n  onToggle,\n  renderChild,\n}: SetupStepGroupProps) => {\n  const { translate: t } = useWixPatternsContainer();\n\n  const children = step.steps ?? [];\n  const total = children.length;\n  const completed = children.filter((c) => c.status === 'completed').length;\n  const allCompleted = total > 0 && completed === total;\n  const anyInProgress = children.some((c) => c.status === 'in-progress');\n  const isFocused = expanded || isPrimary;\n  const Chevron = expanded ? ChevronUp : ChevronDown;\n\n  const header = (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={onToggle}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onToggle();\n        }\n      }}\n      style={{ cursor: 'pointer' }}\n    >\n      <Box\n        align=\"space-between\"\n        verticalAlign={isMobile ? 'top' : 'middle'}\n        width=\"100%\"\n        minHeight=\"30px\"\n      >\n        <Box minHeight=\"24px\" verticalAlign={isMobile ? 'top' : 'middle'}>\n          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n          {/* Mobile cards stack the badge under the title (matches\n              SetupStepCard); desktop rows keep it inline next to it. */}\n          <Box\n            paddingLeft=\"SP2\"\n            direction={isMobile ? 'vertical' : 'horizontal'}\n            verticalAlign={isMobile ? 'top' : 'middle'}\n            gap=\"SP1\"\n          >\n            <Text\n              dataHook={`setup-step-title-${step.id}`}\n              size=\"small\"\n              weight={isFocused ? 'bold' : 'thin'}\n            >\n              {step.title}\n            </Text>\n            {anyInProgress && !allCompleted && (\n              <Box marginTop={isMobile ? undefined : '2px'}>\n                <Badge size=\"tiny\" skin=\"urgent\" type=\"transparent\">\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Badge>\n              </Box>\n            )}\n          </Box>\n        </Box>\n        <Box verticalAlign=\"middle\" gap=\"SP1\">\n          <Tag\n            id={`setup-step-counter-${step.id}`}\n            skin=\"neutral\"\n            removable={false}\n            size=\"small\"\n          >\n            {t('cairo.setupWidget.aggregated.counter', { completed, total })}\n          </Tag>\n          <Box dataHook={`setup-step-chevron-${step.id}`}>\n            <Chevron width=\"20\" height=\"20\" />\n          </Box>\n        </Box>\n      </Box>\n    </div>\n  );\n\n  const childList = expanded && (\n    <Box\n      dataHook={`setup-step-children-${step.id}`}\n      direction=\"vertical\"\n      gap={isMobile ? 'SP3' : 'SP1'}\n      paddingLeft={isMobile ? 'SP4' : 'SP5'}\n      marginTop={isMobile ? 'SP3' : 'SP1'}\n    >\n      {children.map((child) => (\n        <React.Fragment key={child.id}>{renderChild(child)}</React.Fragment>\n      ))}\n    </Box>\n  );\n\n  if (isMobile) {\n    return (\n      <div data-hook={`setup-step-${step.id}`} className={st(classes.card)}>\n        <Box direction=\"vertical\" padding=\"SP4\">\n          {header}\n          {childList}\n        </Box>\n      </div>\n    );\n  }\n\n  return (\n    <div data-hook={`setup-step-${step.id}`} className={st(classes.row)}>\n      {header}\n      {childList}\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/SetupWidget/SetupStepIcon.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SetupStepIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepIcon.tsx";
+/**
+ * Leading status indicator for a step. Mirrors the existing Setup widget:
+ * green check when completed, muted dot when disabled, blue dot otherwise.
+ */
+const SetupStepIcon = ({
+  status
+}) => {
+  if (status === 'completed') {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      marginTop: "3px",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 17,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ConfirmSmall, {
+      width: "18px",
+      height: "18px",
+      color: "var(--wsr-color-G20)",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 18,
+        columnNumber: 9
+      }
+    }));
+  }
+  const color = status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    marginTop: "3px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 27,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.CircleSmallFilledSmall, {
+    width: "18px",
+    height: "18px",
+    color: color,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 7
+    }
+  }));
+};
+exports.SetupStepIcon = SetupStepIcon;
+//# sourceMappingURL=SetupStepIcon.js.map

package/dist/cjs/components/SetupWidget/SetupStepIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_jsxFileName","SetupStepIcon","status","default","createElement","Box","marginTop","__self","__source","fileName","lineNumber","columnNumber","ConfirmSmall","width","height","color","CircleSmallFilledSmall","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@wix/design-system';\nimport { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';\nimport { SetupWidgetStepStatus } from '@wix/bex-core';\n\n/**\n * Leading status indicator for a step. Mirrors the existing Setup widget:\n * green check when completed, muted dot when disabled, blue dot otherwise.\n */\nexport const SetupStepIcon = ({\n  status,\n}: {\n  status: SetupWidgetStepStatus;\n}) => {\n  if (status === 'completed') {\n    return (\n      <Box marginTop=\"3px\">\n        <ConfirmSmall width=\"18px\" height=\"18px\" color=\"var(--wsr-color-G20)\" />\n      </Box>\n    );\n  }\n\n  const color =\n    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';\n\n  return (\n    <Box marginTop=\"3px\">\n      <CircleSmallFilledSmall width=\"18px\" height=\"18px\" color={color} />\n    </Box>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAAgF,IAAAG,YAAA;AAGhF;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC;AAGF,CAAC,KAAK;EACJ,IAAIA,MAAM,KAAK,WAAW,EAAE;IAC1B,oBACEP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,aAAA,CAAAO,GAAG;MAACC,SAAS,EAAC,KAAK;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAClBhB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACL,iBAAA,CAAAa,YAAY;MAACC,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACC,KAAK,EAAC,sBAAsB;MAAAR,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CACpE,CAAC;EAEV;EAEA,MAAMI,KAAK,GACTb,MAAM,KAAK,UAAU,GAAG,sBAAsB,GAAG,sBAAsB;EAEzE,oBACEP,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACN,aAAA,CAAAO,GAAG;IAACC,SAAS,EAAC,KAAK;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClBhB,MAAA,CAAAQ,OAAA,CAAAC,aAAA,CAACL,iBAAA,CAAAiB,sBAAsB;IAACH,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,KAAK,EAAEA,KAAM;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC/D,CAAC;AAEV,CAAC;AAACM,OAAA,CAAAhB,aAAA,GAAAA,aAAA","ignoreList":[]}