@wix/patterns 1.413.0 → 1.415.0

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Box, Text, Badge, Tag } from '@wix/design-system';
+import { ChevronDown, ChevronUp } from '@wix/wix-ui-icons-common';
+import { SetupWidgetStep } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { SetupStepIcon } from './SetupStepIcon';
+import { st, classes } from './SetupWidget.st.css.js';
+
+export interface SetupStepGroupProps {
+  step: SetupWidgetStep;
+  isMobile: boolean;
+  /** The group's children are shown. */
+  expanded: boolean;
+  /** The recommended/focused row. */
+  isPrimary: boolean;
+  onToggle: () => void;
+  /** Renders a single child step (the parent supplies the row/card). */
+  renderChild: (child: SetupWidgetStep) => React.ReactNode;
+}
+
+/**
+ * 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.
+ */
+export const SetupStepGroup = ({
+  step,
+  isMobile,
+  expanded,
+  isPrimary,
+  onToggle,
+  renderChild,
+}: SetupStepGroupProps) => {
+  const { translate: t } = 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 ? ChevronUp : ChevronDown;
+
+  const header = (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onToggle}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onToggle();
+        }
+      }}
+      style={{ cursor: 'pointer' }}
+    >
+      <Box
+        align="space-between"
+        verticalAlign={isMobile ? 'top' : 'middle'}
+        width="100%"
+        minHeight="30px"
+      >
+        <Box minHeight="24px" verticalAlign={isMobile ? 'top' : 'middle'}>
+          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+          {/* Mobile cards stack the badge under the title (matches
+              SetupStepCard); desktop rows keep it inline next to it. */}
+          <Box
+            paddingLeft="SP2"
+            direction={isMobile ? 'vertical' : 'horizontal'}
+            verticalAlign={isMobile ? 'top' : 'middle'}
+            gap="SP1"
+          >
+            <Text
+              dataHook={`setup-step-title-${step.id}`}
+              size="small"
+              weight={isFocused ? 'bold' : 'thin'}
+            >
+              {step.title}
+            </Text>
+            {anyInProgress && !allCompleted && (
+              <Box marginTop={isMobile ? undefined : '2px'}>
+                <Badge size="tiny" skin="urgent" type="transparent">
+                  {t('cairo.setupWidget.step.inProgress')}
+                </Badge>
+              </Box>
+            )}
+          </Box>
+        </Box>
+        <Box verticalAlign="middle" gap="SP1">
+          <Tag
+            id={`setup-step-counter-${step.id}`}
+            skin="neutral"
+            removable={false}
+            size="small"
+          >
+            {t('cairo.setupWidget.aggregated.counter', { completed, total })}
+          </Tag>
+          <Box dataHook={`setup-step-chevron-${step.id}`}>
+            <Chevron width="20" height="20" />
+          </Box>
+        </Box>
+      </Box>
+    </div>
+  );
+
+  const childList = expanded && (
+    <Box
+      dataHook={`setup-step-children-${step.id}`}
+      direction="vertical"
+      gap={isMobile ? 'SP3' : 'SP1'}
+      paddingLeft={isMobile ? 'SP4' : 'SP5'}
+      marginTop={isMobile ? 'SP3' : 'SP1'}
+    >
+      {children.map((child) => (
+        <React.Fragment key={child.id}>{renderChild(child)}</React.Fragment>
+      ))}
+    </Box>
+  );
+
+  if (isMobile) {
+    return (
+      <div data-hook={`setup-step-${step.id}`} className={st(classes.card)}>
+        <Box direction="vertical" padding="SP4">
+          {header}
+          {childList}
+        </Box>
+      </div>
+    );
+  }
+
+  return (
+    <div data-hook={`setup-step-${step.id}`} className={st(classes.row)}>
+      {header}
+      {childList}
+    </div>
+  );
+};

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+import { ConfirmSmall, CircleSmallFilledSmall } from '@wix/wix-ui-icons-common';
+import { SetupWidgetStepStatus } from '@wix/bex-core';
+
+/**
+ * Leading status indicator for a step. Mirrors the existing Setup widget:
+ * green check when completed, muted dot when disabled, blue dot otherwise.
+ */
+export const SetupStepIcon = ({
+  status,
+}: {
+  status: SetupWidgetStepStatus;
+}) => {
+  if (status === 'completed') {
+    return (
+      <Box marginTop="3px">
+        <ConfirmSmall width="18px" height="18px" color="var(--wsr-color-G20)" />
+      </Box>
+    );
+  }
+
+  const color =
+    status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
+
+  return (
+    <Box marginTop="3px">
+      <CircleSmallFilledSmall width="18px" height="18px" color={color} />
+    </Box>
+  );
+};

package/src/components/SetupWidget/SetupStepRow.tsx

@@ -0,0 +1,196 @@
+import React from 'react';
+import {
+  Box,
+  Text,
+  Button,
+  TextButton,
+  Badge,
+  Divider,
+  Tooltip,
+} from '@wix/design-system';
+import { SetupWidgetStep } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { SetupStepIcon } from './SetupStepIcon';
+import { st, classes } from './SetupWidget.st.css.js';
+
+export interface SetupStepRowProps {
+  step: SetupWidgetStep;
+  /** Highlighted + bold row (the recommended (primary) or expanded step). */
+  isFocused: boolean;
+  /** Inline content is shown below the row. */
+  expanded: boolean;
+  onActivate: () => void;
+  /** Supplies the inline-expansion content (render prop on the widget). */
+  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
+}
+
+/**
+ * Desktop step row. Recreated from the existing Setup widget:
+ * - completed → green check, struck-through title, optional completed CTA
+ * - disabled → muted bullet + disabled CTA (permission-denied)
+ * - in-progress → "In progress" badge next to the title
+ * - focused → blue surface, bold title, primary CTA
+ * - hoverable rows tint blue on hover (handled in Stylable)
+ */
+export const SetupStepRow = ({
+  step,
+  isFocused,
+  expanded,
+  onActivate,
+  renderStepContent,
+}: SetupStepRowProps) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  const isInProgress = step.status === 'in-progress';
+  const isCompleted = step.status === 'completed';
+  const isDisabled = step.status === 'disabled';
+  const isInlineExpanded = expanded && step.expansionMode === 'inline';
+
+  const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;
+  // Completed steps stay actionable when they carry a completed CTA (G2).
+  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
+  const clickable = (!isCompleted && !isDisabled) || showCompletedCta;
+  const hoverable = !isFocused && !isCompleted && !isDisabled;
+
+  const handleClick = clickable ? onActivate : undefined;
+
+  return (
+    <div
+      data-hook={`setup-step-${step.id}`}
+      className={st(classes.row, {
+        focused: isFocused,
+        hoverable,
+        clickable,
+      })}
+      onClick={handleClick}
+      onKeyDown={
+        clickable
+          ? (event: React.KeyboardEvent) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onActivate();
+              }
+            }
+          : undefined
+      }
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+    >
+      {/* Reserve the CTA button's height (small button = 30px) so rows keep a
+          stable height whether or not they render a CTA — otherwise completed
+          rows (which drop the CTA) would shrink and the widget would reflow. */}
+      <Box
+        align="space-between"
+        verticalAlign="middle"
+        width="100%"
+        minHeight="30px"
+      >
+        <Box minHeight="24px" verticalAlign="middle">
+          <SetupStepIcon status={step.status} />
+          <Box
+            paddingLeft="SP2"
+            paddingRight="SP2"
+            verticalAlign="middle"
+            gap="SP1"
+          >
+            <Text
+              dataHook={`setup-step-title-${step.id}`}
+              size="small"
+              skin={isDisabled ? 'disabled' : 'standard'}
+              weight={isFocused ? 'bold' : 'thin'}
+              secondary={isCompleted}
+              light={isCompleted}
+            >
+              {isCompleted ? <del>{step.title}</del> : step.title}
+            </Text>
+            {isInProgress && !isInlineExpanded && (
+              <Box marginTop="2px">
+                <Badge size="tiny" skin="urgent" type="transparent">
+                  {t('cairo.setupWidget.step.inProgress')}
+                </Badge>
+              </Box>
+            )}
+          </Box>
+        </Box>
+        {showCta &&
+          (() => {
+            const ctaNode = (
+              <Box verticalAlign="middle">
+                <Button
+                  dataHook={`setup-step-cta-${step.id}`}
+                  size="small"
+                  priority={!isDisabled && !isFocused ? 'secondary' : 'primary'}
+                  disabled={isDisabled}
+                  ellipsis={false}
+                  onClick={(event: React.MouseEvent) => {
+                    event.stopPropagation();
+                    onActivate();
+                  }}
+                >
+                  {step.ctaLabel}
+                </Button>
+              </Box>
+            );
+
+            // Disabled steps explain why the CTA is disabled (G5).
+            return isDisabled ? (
+              <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')
+                }
+              >
+                {ctaNode}
+              </Tooltip>
+            ) : (
+              ctaNode
+            );
+          })()}
+        {showCompletedCta && (
+          <Box
+            verticalAlign="middle"
+            marginRight="SP2"
+            className={st(classes.completedCta)}
+          >
+            <TextButton
+              dataHook={`setup-step-cta-${step.id}`}
+              size="small"
+              onClick={(event: React.MouseEvent) => {
+                event.stopPropagation();
+                onActivate();
+              }}
+            >
+              {step.completedCtaLabel}
+            </TextButton>
+          </Box>
+        )}
+      </Box>
+      {isInlineExpanded && (
+        <Box
+          dataHook={`setup-step-content-${step.id}`}
+          direction="vertical"
+          paddingLeft="SP5"
+          paddingRight="SP1"
+          paddingBottom="SP1"
+          marginTop="SP2"
+        >
+          <Box marginBottom="SP2">
+            <Divider />
+          </Box>
+          {/* Stop clicks/keys inside the consumer widget from bubbling to the
+              row's toggle handler — otherwise interacting with the content
+              (e.g. an input) would collapse the card. */}
+          <div
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => event.stopPropagation()}
+          >
+            {renderStepContent?.(step)}
+          </div>
+        </Box>
+      )}
+    </div>
+  );
+};

package/src/components/SetupWidget/SetupWidget.st.css

@@ -0,0 +1,95 @@
+@property st-global(--wds-color-border-dark-secondary);
+@property st-global(--wds-color-border-standard-primary);
+@property st-global(--wds-color-border-standard-secondary);
+@property st-global(--wds-color-fill-standard-tertiary);
+@property st-global(--wds-color-fill-standard-tertiary-hover);
+@property st-global(--wsr-color-D60);
+@property st-global(--wsr-color-D80);
+@property st-global(--wsr-color-B30);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-B60);
+@property st-global(--wds-space-100);
+@property st-global(--wds-border-radius-200);
+@property st-global(--wds-border-radius-400);
+
+.root {}
+
+/* ---------------------------------------------------------------------------
+ * Desktop step row — bordered card with hover/focus tinting. Hover only
+ * applies to rows that are actually interactive (not focused / completed /
+ * locked), gated by the `hoverable` state.
+ *
+ * Every var() carries the WDS fallback chain — semantic --wds token →
+ * legacy --wsr token → hard-coded value — so the widget renders correctly
+ * even when no theme stylesheet is loaded (same chains WDS ships itself).
+ * ------------------------------------------------------------------------- */
+.row {
+  -st-states: focused, hoverable, clickable;
+
+  display: flex;
+  flex-direction: column;
+  /* nearest default-theme token to the ~7-8px row padding; matches the SP1
+   * inner gaps for a consistent 6px rhythm */
+  padding: var(--wds-space-100, 6px);
+  border-radius: var(--wds-border-radius-200, 4px);
+  border: 1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
+  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
+  /* clip (not hidden) keeps focus rings on the inner CTA from being cut off */
+  overflow: clip;
+}
+
+.row:clickable {
+  cursor: pointer;
+}
+
+.row:hoverable:hover {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+  border-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
+}
+
+.row:focused {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+  border-color: var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF));
+}
+
+/* Completed step's CTA is revealed on row hover/focus (desktop), mirroring the
+ * existing Setup widget. It still occupies space so the row height is stable. */
+.completedCta {
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.row:hover .completedCta,
+.row:focus-within .completedCta {
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------
+ * Mobile step card — shadowed card; the focused (primary) card gets a soft
+ * blue surface so the screen has one clear next-action target.
+ * ------------------------------------------------------------------------- */
+.card {
+  -st-states: primary, clickable;
+
+  display: block;
+  width: 100%;
+  border: none;
+  border-radius: var(--wds-border-radius-400, 8px);
+  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
+  box-shadow: 0 0 6px 0 rgba(0, 6, 36, 0.1), 0 2px 4px 0 rgba(0, 6, 36, 0.05);
+  overflow: clip;
+  box-sizing: border-box;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+.card:primary {
+  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
+}
+
+.card:clickable {
+  cursor: pointer;
+}

package/src/components/SetupWidget/SetupWidget.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "SetupWidget713352316";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"SetupWidget713352316__root","row":"SetupWidget713352316__row","completedCta":"SetupWidget713352316__completedCta","card":"SetupWidget713352316__card"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-border-standard-primary":"--wds-color-border-standard-primary","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-B30":"--wsr-color-B30","wsr-color-B40":"--wsr-color-B40","wsr-color-B60":"--wsr-color-B60","wds-space-100":"--wds-space-100","wds-border-radius-200":"--wds-border-radius-200","wds-border-radius-400":"--wds-border-radius-400"}; 
+
+
+
+