@wix/patterns 1.433.0 → 1.436.0

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_lazy","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepCard","step","isPrimary","expanded","onActivate","renderStepContent","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInline","expansionMode","isInlineExpanded","showCompletedCta","completedCtaLabel","isTogglable","isNavigable","clickable","showChevron","ChevronIcon","ChevronUp","ChevronDown","ChevronRight","chevron","default","createElement","Box","dataHook","id","verticalAlign","className","st","classes","chevronDisabled","__self","__source","fileName","lineNumber","columnNumber","width","height","description","Text","size","secondary","card","primary","onClick","undefined","role","tabIndex","onKeyDown","event","key","preventDefault","direction","gap","padding","align","flexGrow","minWidth","stepIcon","SetupStepIcon","marginTop","weight","skin","title","inProgressLabel","Tooltip","content","disabledTooltip","Fragment","Divider","stopPropagation","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepCard.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Divider, Tooltip } from '@wix/design-system';\nimport {\n  ChevronRight,\n  ChevronDown,\n  ChevronUp,\n} from '@wix/wix-ui-icons-common/lazy';\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 + bold title. */\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 (per Figma \"Support FW on mobile\"). 12px padding, a 24px\n * icon cell and a trailing chevron that replaces the per-step CTA button: a\n * right chevron for navigate / completed (with a completed action) steps, and a\n * down/up chevron for inline-expandable steps. The whole card is the click\n * target. Collapsed cards are a bare title + chevron; an expanded inline card\n * adds a divider, its description, and the consumer content below the header.\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  // Completed steps stay actionable only when they carry a completed action.\n  const showCompletedCta =\n    isCompleted && !!step.completedCtaLabel && !isDisabled;\n  // Inline steps toggle; navigate steps act; completed steps fire their action.\n  const isTogglable = isInline && !isCompleted && !isDisabled;\n  const isNavigable = !isInline && !isCompleted && !isDisabled;\n  const clickable = isTogglable || isNavigable || showCompletedCta;\n\n  // Disabled steps show a muted chevron (with a permission tooltip); completed\n  // steps without an action show none. Everything actionable shows a chevron.\n  const showChevron = clickable || isDisabled;\n\n  const ChevronIcon = isInline\n    ? isInlineExpanded\n      ? ChevronUp\n      : ChevronDown\n    : ChevronRight;\n\n  const chevron = showChevron && (\n    <Box\n      dataHook={`setup-step-cta-${step.id}`}\n      verticalAlign=\"middle\"\n      className={st(isDisabled ? classes.chevronDisabled : classes.chevron)}\n    >\n      <ChevronIcon width=\"18\" height=\"18\" />\n    </Box>\n  );\n\n  // The description only belongs to the expanded inline state. Non-inline steps\n  // keep theirs (if provided) inline below the header.\n  const description = step.description && !isCompleted && (\n    <Text size=\"small\" secondary>\n      {step.description}\n    </Text>\n  );\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      data-focused={isPrimary}\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=\"SP2\">\n        <Box\n          align=\"space-between\"\n          verticalAlign=\"middle\"\n          gap=\"SP1\"\n          width=\"100%\"\n        >\n          <Box verticalAlign=\"middle\" gap=\"SP1\" flexGrow={1} minWidth={0}>\n            <Box className={st(classes.stepIcon)}>\n              <SetupStepIcon status={step.status} marginTop=\"0px\" />\n            </Box>\n            {/* Title + \"In progress\" badge stack together so the icon centers\n                against the whole block (matches the Figma in-progress card). */}\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                <Text\n                  size=\"tiny\"\n                  weight=\"normal\"\n                  className={st(classes.inProgressLabel)}\n                >\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Text>\n              )}\n            </Box>\n          </Box>\n          {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              {chevron}\n            </Tooltip>\n          ) : (\n            chevron\n          )}\n        </Box>\n\n        {/* Expanded inline step: a divider separates the header from the\n            description and the consumer-supplied content. */}\n        {isInlineExpanded && (\n          <>\n            <Divider />\n            {description}\n            <Box\n              dataHook={`setup-step-content-${step.id}`}\n              direction=\"vertical\"\n            >\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\n        {/* Non-inline steps render their description (if any) under the row. */}\n        {!isInline && description}\n      </Box>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_lazy","_react2","_SetupStepIcon","_SetupWidgetStCss","_jsxFileName","SetupStepCard","step","isPrimary","expanded","onActivate","renderStepContent","translate","t","useWixPatternsContainer","isInProgress","status","isCompleted","isDisabled","isInline","expansionMode","isInlineExpanded","showCompletedCta","completedCtaLabel","isTogglable","isNavigable","clickable","showChevron","ChevronIcon","ChevronUp","ChevronDown","ChevronRight","chevron","default","createElement","Box","dataHook","id","verticalAlign","className","st","classes","chevronDisabled","__self","__source","fileName","lineNumber","columnNumber","width","height","description","Text","size","secondary","card","primary","onClick","undefined","role","tabIndex","onKeyDown","event","key","preventDefault","direction","gap","padding","align","flexGrow","minWidth","stepIcon","SetupStepIcon","weight","skin","title","inProgressLabel","Tooltip","content","disabledTooltip","Fragment","Divider","stopPropagation","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepCard.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Divider, Tooltip } from '@wix/design-system';\nimport {\n  ChevronRight,\n  ChevronDown,\n  ChevronUp,\n} from '@wix/wix-ui-icons-common/lazy';\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 + bold title. */\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 (per Figma \"Support FW on mobile\"). 12px padding, a 24px\n * icon cell and a trailing chevron that replaces the per-step CTA button: a\n * right chevron for navigate / completed (with a completed action) steps, and a\n * down/up chevron for inline-expandable steps. The whole card is the click\n * target. Collapsed cards are a bare title + chevron; an expanded inline card\n * adds a divider, its description, and the consumer content below the header.\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  // Completed steps stay actionable only when they carry a completed action.\n  const showCompletedCta =\n    isCompleted && !!step.completedCtaLabel && !isDisabled;\n  // Inline steps toggle; navigate steps act; completed steps fire their action.\n  const isTogglable = isInline && !isCompleted && !isDisabled;\n  const isNavigable = !isInline && !isCompleted && !isDisabled;\n  const clickable = isTogglable || isNavigable || showCompletedCta;\n\n  // Disabled steps show a muted chevron (with a permission tooltip); completed\n  // steps without an action show none. Everything actionable shows a chevron.\n  const showChevron = clickable || isDisabled;\n\n  const ChevronIcon = isInline\n    ? isInlineExpanded\n      ? ChevronUp\n      : ChevronDown\n    : ChevronRight;\n\n  const chevron = showChevron && (\n    <Box\n      dataHook={`setup-step-cta-${step.id}`}\n      verticalAlign=\"middle\"\n      className={st(isDisabled ? classes.chevronDisabled : classes.chevron)}\n    >\n      <ChevronIcon width=\"18\" height=\"18\" />\n    </Box>\n  );\n\n  // The description only belongs to the expanded inline state. Non-inline steps\n  // keep theirs (if provided) inline below the header.\n  const description = step.description && !isCompleted && (\n    <Text size=\"small\" secondary>\n      {step.description}\n    </Text>\n  );\n\n  return (\n    <div\n      data-hook={`setup-step-${step.id}`}\n      data-focused={isPrimary}\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=\"SP2\">\n        <Box\n          align=\"space-between\"\n          verticalAlign=\"middle\"\n          gap=\"SP1\"\n          width=\"100%\"\n        >\n          <Box verticalAlign=\"middle\" gap=\"SP1\" flexGrow={1} minWidth={0}>\n            <Box className={st(classes.stepIcon)}>\n              <SetupStepIcon status={step.status} />\n            </Box>\n            {/* Title + \"In progress\" badge stack together so the icon centers\n                against the whole block (matches the Figma in-progress card). */}\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                <Text\n                  size=\"tiny\"\n                  weight=\"normal\"\n                  className={st(classes.inProgressLabel)}\n                >\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Text>\n              )}\n            </Box>\n          </Box>\n          {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              {chevron}\n            </Tooltip>\n          ) : (\n            chevron\n          )}\n        </Box>\n\n        {/* Expanded inline step: a divider separates the header from the\n            description and the consumer-supplied content. */}\n        {isInlineExpanded && (\n          <>\n            <Divider />\n            {description}\n            <Box\n              dataHook={`setup-step-content-${step.id}`}\n              direction=\"vertical\"\n            >\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\n        {/* Non-inline steps render their description (if any) under the row. */}\n        {!isInline && description}\n      </Box>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -35,26 +35,7 @@ const SetupStepGroup = ({
   const anyInProgress = children.some(c => c.status === 'in-progress');
   const isFocused = expanded || isPrimary;
   const Chevron = expanded ? _lazy.ChevronUp : _lazy.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, {
+  const headerContent = /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     align: "space-between",
     verticalAlign: "middle",
     width: "100%",
@@ -62,8 +43,8 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 59,
-      columnNumber: 7
+      lineNumber: 47,
+      columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     minHeight: "24px",
@@ -72,33 +53,32 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 65,
-      columnNumber: 9
+      lineNumber: 53,
+      columnNumber: 7
     }
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     className: (0, _SetupWidgetStCss.st)(_SetupWidgetStCss.classes.stepIcon),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 71,
-      columnNumber: 13
+      lineNumber: 59,
+      columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
     status: allCompleted ? 'completed' : 'upcoming',
-    marginTop: "0px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 72,
-      columnNumber: 15
+      lineNumber: 60,
+      columnNumber: 13
     }
   })) : /*#__PURE__*/_react.default.createElement(_SetupStepIcon.SetupStepIcon, {
     status: allCompleted ? 'completed' : 'upcoming',
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 78,
-      columnNumber: 13
+      lineNumber: 63,
+      columnNumber: 11
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     paddingLeft: isMobile ? undefined : 'SP2',
@@ -108,8 +88,8 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 82,
-      columnNumber: 11
+      lineNumber: 67,
+      columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
     dataHook: `setup-step-title-${step.id}`,
@@ -118,8 +98,8 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 88,
-      columnNumber: 13
+      lineNumber: 73,
+      columnNumber: 11
     }
   }, step.title), anyInProgress && !allCompleted && (isMobile ? /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
     size: "tiny",
@@ -128,16 +108,16 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 98,
-      columnNumber: 17
+      lineNumber: 83,
+      columnNumber: 15
     }
   }, t('cairo.setupWidget.step.inProgress')) : /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     marginTop: "2px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 106,
-      columnNumber: 17
+      lineNumber: 91,
+      columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Badge, {
     size: "tiny",
@@ -146,8 +126,8 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 107,
-      columnNumber: 19
+      lineNumber: 92,
+      columnNumber: 17
     }
   }, t('cairo.setupWidget.step.inProgress')))))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     verticalAlign: "middle",
@@ -155,8 +135,8 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 114,
-      columnNumber: 9
+      lineNumber: 99,
+      columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Tag, {
     id: `setup-step-counter-${step.id}`,
@@ -166,8 +146,8 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 115,
-      columnNumber: 11
+      lineNumber: 100,
+      columnNumber: 9
     }
   }, t('cairo.setupWidget.aggregated.counter', {
     completed,
@@ -177,8 +157,8 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
-      columnNumber: 11
+      lineNumber: 108,
+      columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(Chevron, {
     width: "20",
@@ -186,10 +166,48 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 124,
-      columnNumber: 13
+      lineNumber: 109,
+      columnNumber: 11
     }
-  })))));
+  }))));
+  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: 116,
+      columnNumber: 5
+    }
+  }, isMobile ? headerContent : /*#__PURE__*/_react.default.createElement(_designSystem.ClickableCard, {
+    skin: "outline",
+    hasPadding: false,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 131,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    padding: "6px",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 132,
+      columnNumber: 11
+    }
+  }, headerContent)));
   const childList = expanded && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     dataHook: `setup-step-children-${step.id}`,
     direction: "vertical",
@@ -199,7 +217,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 132,
+      lineNumber: 141,
       columnNumber: 5
     }
   }, children.map(child => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
@@ -207,7 +225,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 140,
+      lineNumber: 149,
       columnNumber: 9
     }
   }, renderChild(child))));
@@ -218,7 +236,7 @@ const SetupStepGroup = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 147,
+        lineNumber: 156,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -227,7 +245,7 @@ const SetupStepGroup = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 148,
+        lineNumber: 157,
         columnNumber: 9
       }
     }, header, childList));
@@ -238,7 +256,7 @@ const SetupStepGroup = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 157,
+      lineNumber: 166,
       columnNumber: 5
     }
   }, header, childList);

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_lazy","_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","gap","undefined","className","st","classes","stepIcon","SetupStepIcon","marginTop","paddingLeft","direction","Text","dataHook","id","size","weight","title","inProgressLabel","Badge","skin","type","Tag","removable","height","childList","map","child","Fragment","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/lazy';\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=\"middle\"\n        width=\"100%\"\n        minHeight=\"30px\"\n      >\n        <Box\n          minHeight=\"24px\"\n          verticalAlign=\"middle\"\n          gap={isMobile ? 'SP1' : undefined}\n        >\n          {isMobile ? (\n            <Box className={st(classes.stepIcon)}>\n              <SetupStepIcon\n                status={allCompleted ? 'completed' : 'upcoming'}\n                marginTop=\"0px\"\n              />\n            </Box>\n          ) : (\n            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n          )}\n          {/* Mobile cards stack the badge under the title (matches\n              SetupStepCard); desktop rows keep it inline next to it. */}\n          <Box\n            paddingLeft={isMobile ? undefined : 'SP2'}\n            direction={isMobile ? 'vertical' : 'horizontal'}\n            verticalAlign={isMobile ? undefined : '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 &&\n              !allCompleted &&\n              (isMobile ? (\n                <Text\n                  size=\"tiny\"\n                  weight=\"normal\"\n                  className={st(classes.inProgressLabel)}\n                >\n                  {t('cairo.setupWidget.step.inProgress')}\n                </Text>\n              ) : (\n                <Box marginTop=\"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=\"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=\"SP2\">\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":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_lazy","_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","headerContent","default","createElement","Box","align","verticalAlign","width","minHeight","__self","__source","fileName","lineNumber","columnNumber","gap","undefined","className","st","classes","stepIcon","SetupStepIcon","paddingLeft","direction","Text","dataHook","id","size","weight","title","inProgressLabel","marginTop","Badge","skin","type","Tag","removable","height","header","role","tabIndex","onClick","onKeyDown","event","key","preventDefault","style","cursor","ClickableCard","hasPadding","padding","childList","map","child","Fragment","card","row","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Text, Badge, Tag, ClickableCard } from '@wix/design-system';\nimport { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common/lazy';\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 headerContent = (\n    <Box\n      align=\"space-between\"\n      verticalAlign=\"middle\"\n      width=\"100%\"\n      minHeight=\"30px\"\n    >\n      <Box\n        minHeight=\"24px\"\n        verticalAlign=\"middle\"\n        gap={isMobile ? 'SP1' : undefined}\n      >\n        {isMobile ? (\n          <Box className={st(classes.stepIcon)}>\n            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n          </Box>\n        ) : (\n          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />\n        )}\n        {/* Mobile cards stack the badge under the title (matches\n            SetupStepCard); desktop rows keep it inline next to it. */}\n        <Box\n          paddingLeft={isMobile ? undefined : 'SP2'}\n          direction={isMobile ? 'vertical' : 'horizontal'}\n          verticalAlign={isMobile ? undefined : '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 &&\n            !allCompleted &&\n            (isMobile ? (\n              <Text\n                size=\"tiny\"\n                weight=\"normal\"\n                className={st(classes.inProgressLabel)}\n              >\n                {t('cairo.setupWidget.step.inProgress')}\n              </Text>\n            ) : (\n              <Box marginTop=\"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  );\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      {isMobile ? (\n        headerContent\n      ) : (\n        <ClickableCard skin=\"outline\" hasPadding={false}>\n          <Box direction=\"vertical\" padding=\"6px\">\n            {headerContent}\n          </Box>\n        </ClickableCard>\n      )}\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=\"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=\"SP2\">\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

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.SetupStepIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _designSystem = require("@wix/design-system");
 var _lazy = require("@wix/wix-ui-icons-common/lazy");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/SetupWidget/SetupStepIcon.tsx";
 /**
@@ -12,55 +11,33 @@ var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cj
  * green check when completed, muted dot when disabled, blue dot otherwise.
  */
 const SetupStepIcon = ({
-  status,
-  /**
-   * Top nudge that centers the 18px icon on a single line of text. Defaults to
-   * the desktop value; the mobile card centers the icon via its own wrapper and
-   * passes "0px" to drop the nudge.
-   */
-  marginTop = '3px'
+  status
 }) => {
   if (status === 'completed') {
-    return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-      marginTop: marginTop,
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 27,
-        columnNumber: 7
-      }
-    }, /*#__PURE__*/_react.default.createElement(_lazy.ConfirmSmall, {
+    return /*#__PURE__*/_react.default.createElement(_lazy.ConfirmSmall, {
       width: "18px",
       height: "18px",
-      color: "var(--wsr-color-G20)",
+      color: "var(--wds-color-fill-success-primary, var(--wsr-color-G20, #51B77B))",
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 28,
-        columnNumber: 9
+        lineNumber: 16,
+        columnNumber: 7
       }
-    }));
+    });
   }
-  const color = status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
-  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    marginTop: marginTop,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 37,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/_react.default.createElement(_lazy.CircleSmallFilledSmall, {
+  const color = status === 'disabled' ? 'var(--wds-color-fill-standard-primary-disabled, var(--wsr-color-D40, #868AA5))' : 'var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF))';
+  return /*#__PURE__*/_react.default.createElement(_lazy.DotSmall, {
     width: "18px",
     height: "18px",
     color: color,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 38,
-      columnNumber: 7
+      lineNumber: 29,
+      columnNumber: 10
     }
-  }));
+  });
 };
 exports.SetupStepIcon = SetupStepIcon;
 //# sourceMappingURL=SetupStepIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_lazy","_jsxFileName","SetupStepIcon","status","marginTop","default","createElement","Box","__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 {\n  ConfirmSmall,\n  CircleSmallFilledSmall,\n} from '@wix/wix-ui-icons-common/lazy';\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   * Top nudge that centers the 18px icon on a single line of text. Defaults to\n   * the desktop value; the mobile card centers the icon via its own wrapper and\n   * passes \"0px\" to drop the nudge.\n   */\n  marginTop = '3px',\n}: {\n  status: SetupWidgetStepStatus;\n  marginTop?: string;\n}) => {\n  if (status === 'completed') {\n    return (\n      <Box marginTop={marginTop}>\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={marginTop}>\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,KAAA,GAAAF,OAAA;AAGuC,IAAAG,YAAA;AAGvC;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,MAAM;EACN;AACF;AACA;AACA;AACA;EACEC,SAAS,GAAG;AAId,CAAC,KAAK;EACJ,IAAID,MAAM,KAAK,WAAW,EAAE;IAC1B,oBACEP,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,GAAG;MAACH,SAAS,EAAEA,SAAU;MAAAI,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAT,YAAA;QAAAU,UAAA;QAAAC,YAAA;MAAA;IAAA,gBACxBhB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,KAAA,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,CAAAS,OAAA,CAAAC,aAAA,CAACP,aAAA,CAAAQ,GAAG;IAACH,SAAS,EAAEA,SAAU;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAT,YAAA;MAAAU,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACxBhB,MAAA,CAAAS,OAAA,CAAAC,aAAA,CAACN,KAAA,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":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_lazy","_jsxFileName","SetupStepIcon","status","default","createElement","ConfirmSmall","width","height","color","__self","__source","fileName","lineNumber","columnNumber","DotSmall","exports"],"sources":["../../../../src/components/SetupWidget/SetupStepIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfirmSmall, DotSmall } from '@wix/wix-ui-icons-common/lazy';\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      <ConfirmSmall\n        width=\"18px\"\n        height=\"18px\"\n        color=\"var(--wds-color-fill-success-primary, var(--wsr-color-G20, #51B77B))\"\n      />\n    );\n  }\n\n  const color =\n    status === 'disabled'\n      ? 'var(--wds-color-fill-standard-primary-disabled, var(--wsr-color-D40, #868AA5))'\n      : 'var(--wds-color-text-primary, var(--wsr-color-B10, #116DFF))';\n\n  return <DotSmall width=\"18px\" height=\"18px\" color={color} />;\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAuE,IAAAE,YAAA;AAGvE;AACA;AACA;AACA;AACO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC;AAGF,CAAC,KAAK;EACJ,IAAIA,MAAM,KAAK,WAAW,EAAE;IAC1B,oBACEN,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACL,KAAA,CAAAM,YAAY;MACXC,KAAK,EAAC,MAAM;MACZC,MAAM,EAAC,MAAM;MACbC,KAAK,EAAC,sEAAsE;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAX,YAAA;QAAAY,UAAA;QAAAC,YAAA;MAAA;IAAA,CAC7E,CAAC;EAEN;EAEA,MAAML,KAAK,GACTN,MAAM,KAAK,UAAU,GACjB,gFAAgF,GAChF,8DAA8D;EAEpE,oBAAON,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACL,KAAA,CAAAe,QAAQ;IAACR,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,KAAK,EAAEA,KAAM;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAX,YAAA;MAAAY,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC;AAC9D,CAAC;AAACE,OAAA,CAAAd,aAAA,GAAAA,aAAA","ignoreList":[]}