@wix/patterns 1.414.0 → 1.415.0

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep3654182521";
+var _namespace_ = "PickerContentAdditionalStep2347860189";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep3654182521__root","titles":"PickerContentAdditionalStep3654182521__titles","suffix":"PickerContentAdditionalStep3654182521__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep2347860189__root","titles":"PickerContentAdditionalStep2347860189__titles","suffix":"PickerContentAdditionalStep2347860189__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerTableListItem245239186";
+var _namespace_ = "PickerTableListItem743710588";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerTableListItem245239186__root"};
+export var classes = {"root":"PickerTableListItem743710588__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ScrollableContent3940092606";
+var _namespace_ = "ScrollableContent1998605952";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ScrollableContent3940092606__root"};
+export var classes = {"root":"ScrollableContent1998605952__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/AllCompleteState.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Card, Box, Heading, Text, Button } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+
+export interface AllCompleteStateProps {
+  dataHook?: string;
+  /** Fired when the celebratory CTA is clicked. */
+  onCtaClick?: () => void;
+}
+
+/**
+ * Shown when every step is completed. Built from WDS primitives only (no
+ * illustration assets yet — a richer happy-moment hero is a later design
+ * handoff). Mirrors the "You're all set" variant of the existing widget.
+ */
+export const AllCompleteState = observer(
+  ({ dataHook, onCtaClick }: AllCompleteStateProps) => {
+    const { translate: t } = useWixPatternsContainer();
+
+    return (
+      <Card dataHook={dataHook}>
+        <Box
+          dataHook="setup-all-complete"
+          direction="vertical"
+          padding="SP9"
+          align="center"
+          backgroundColor="B50"
+          gap="SP3"
+        >
+          <Heading size="medium">
+            {t('cairo.setupWidget.allComplete.title')}
+          </Heading>
+          <Text size="medium" secondary>
+            {t('cairo.setupWidget.allComplete.subtitle')}
+          </Text>
+          <Box gap="SP2">
+            <Button priority="primary" onClick={onCtaClick}>
+              {t('cairo.setupWidget.allComplete.cta')}
+            </Button>
+          </Box>
+        </Box>
+      </Card>
+    );
+  },
+);

package/src/components/SetupWidget/SetupStepCard.tsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import {
+  Box,
+  Text,
+  Button,
+  TextButton,
+  Badge,
+  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 SetupStepCardProps {
+  step: SetupWidgetStep;
+  /** The recommended next step — soft blue surface + primary CTA. */
+  isPrimary: boolean;
+  /** Inline content is shown below the header. */
+  expanded: boolean;
+  onActivate: () => void;
+  renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
+}
+
+/**
+ * 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.
+ */
+export const SetupStepCard = ({
+  step,
+  isPrimary,
+  expanded,
+  onActivate,
+  renderStepContent,
+}: SetupStepCardProps) => {
+  const { translate: t } = 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 (
+    <div
+      data-hook={`setup-step-${step.id}`}
+      className={st(classes.card, { primary: isPrimary, clickable })}
+      onClick={clickable ? onActivate : undefined}
+      role={clickable ? 'button' : undefined}
+      tabIndex={clickable ? 0 : undefined}
+      onKeyDown={
+        clickable
+          ? (event: React.KeyboardEvent) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onActivate();
+              }
+            }
+          : undefined
+      }
+    >
+      <Box direction="vertical" gap="SP2" padding="SP4">
+        <Box gap="SP2" verticalAlign="top">
+          <SetupStepIcon status={step.status} />
+          <Box direction="vertical" gap="SP1">
+            <Text
+              dataHook={`setup-step-title-${step.id}`}
+              size="small"
+              weight={isPrimary ? 'bold' : 'thin'}
+              skin={isDisabled ? 'disabled' : 'standard'}
+              secondary={isCompleted}
+            >
+              {isCompleted ? <del>{step.title}</del> : step.title}
+            </Text>
+            {isInProgress && (
+              <Box>
+                <Badge size="tiny" skin="urgent" type="transparent">
+                  {t('cairo.setupWidget.step.inProgress')}
+                </Badge>
+              </Box>
+            )}
+          </Box>
+        </Box>
+
+        {!isCompleted && step.description && (
+          <Text size="small" secondary>
+            {step.description}
+          </Text>
+        )}
+
+        {isInlineExpanded && (
+          <Box dataHook={`setup-step-content-${step.id}`} direction="vertical">
+            {/* Stop clicks/keys inside the consumer widget from bubbling to
+                the card'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>
+        )}
+
+        {!isCompleted &&
+          !isInlineExpanded &&
+          step.ctaLabel &&
+          (() => {
+            const ctaButton = (
+              <Button
+                dataHook={`setup-step-cta-${step.id}`}
+                fullWidth
+                size="medium"
+                priority={isPrimary ? 'primary' : 'secondary'}
+                disabled={isDisabled}
+                onClick={(event: React.MouseEvent) => {
+                  event.stopPropagation();
+                  onActivate();
+                }}
+              >
+                {step.ctaLabel}
+              </Button>
+            );
+
+            // 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')
+                }
+              >
+                <Box>{ctaButton}</Box>
+              </Tooltip>
+            ) : (
+              ctaButton
+            );
+          })()}
+
+        {isCompleted && step.completedCtaLabel && !isDisabled && (
+          <Box>
+            <TextButton
+              dataHook={`setup-step-cta-${step.id}`}
+              size="small"
+              onClick={(event: React.MouseEvent) => {
+                event.stopPropagation();
+                onActivate();
+              }}
+            >
+              {step.completedCtaLabel}
+            </TextButton>
+          </Box>
+        )}
+      </Box>
+    </div>
+  );
+};

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>
+  );
+};