@snack-uikit/stepper 0.2.19-preview-85c5f47b.0

package/src/helperComponents/Icon/Icon.tsx

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
+import { Sun } from '@snack-uikit/loaders';
+import { Typography } from '@snack-uikit/typography';
+
+import { StepState } from '../../constants';
+import styles from './styles.module.scss';
+
+export type IconProps = {
+  state: StepState;
+  number: number;
+  className?: string;
+};
+
+function getContent(state: StepState, number: number) {
+  switch (state) {
+    case StepState.Completed:
+      return <CheckSVG />;
+    case StepState.Rejected:
+      return <CrossSVG />;
+    case StepState.Loading:
+      return <Sun size={Sun.sizes.S} />;
+    default:
+      return number;
+  }
+}
+
+export function Icon({ state, number, className }: IconProps) {
+  const content = useMemo(() => getContent(state, number), [number, state]);
+
+  return (
+    <div data-state={state} className={cn(styles.icon, className)}>
+      {typeof content === 'number' ? <Typography.SansLabelL>{content}</Typography.SansLabelL> : content}
+    </div>
+  );
+}

package/src/helperComponents/Icon/index.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/src/helperComponents/Icon/styles.module.scss

@@ -0,0 +1,45 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-stepper';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.icon {
+  @include composite-var($stepper-step-status-container);
+
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  &[data-state='completed'] {
+    color: $sys-primary-accent-default;
+    background-color: $sys-primary-decor-default;
+  }
+
+  &[data-state='current'] {
+    color: $sys-primary-on-accent;
+    background-color: $sys-primary-accent-default;
+  }
+
+  &[data-state='waiting'] {
+    box-sizing: border-box;
+    color: $sys-neutral-text-support;
+    border-color: $sys-neutral-decor-default;
+    border-style: solid;
+  }
+
+  &[data-state='loading'] {
+    box-sizing: border-box;
+    color: $sys-neutral-accent-default;
+    border-color: $sys-neutral-decor-default;
+    border-style: solid;
+  }
+
+  &[data-state='rejected'] {
+    color: $sys-red-on-accent;
+    background-color: $sys-red-accent-default;
+  }
+}

package/src/helperComponents/Step/Step.tsx

@@ -0,0 +1,54 @@
+import cn from 'classnames';
+
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { StepState } from '../../constants';
+import { StepViewData } from '../../types';
+import { getTestIdBuilder } from '../../utils';
+import { Icon } from '../Icon';
+import styles from './styles.module.scss';
+
+export type StepProps = WithSupportProps<{
+  step: StepViewData;
+  className?: string;
+  isLast: boolean;
+}>;
+
+const getTailTestId = getTestIdBuilder('_element-tail');
+const getStepTestId = getTestIdBuilder('_element-step');
+
+export function Step({ step, className, isLast, 'data-test-id': testId, ...props }: StepProps) {
+  return (
+    <div className={cn(styles.step, className)} data-state={step.state} {...extractSupportProps(props)}>
+      <button
+        className={styles.content}
+        onClick={step.onClick}
+        disabled={!step.onClick}
+        data-test-id={getStepTestId(testId)}
+        data-state={step.state}
+      >
+        <Icon {...step} className={styles.icon} />
+        <Typography
+          className={styles.title}
+          tag={Typography.tags.div}
+          family={Typography.families.Sans}
+          role={Typography.roles.Body}
+          size={Typography.sizes.M}
+        >
+          <TruncateString text={step.title} />
+        </Typography>
+      </button>
+      {!isLast && (
+        <div
+          className={styles.tail}
+          data-completed={step.state === StepState.Completed || undefined}
+          data-test-id={getTailTestId(testId)}
+        >
+          <div className={styles.tailLine} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/Step/index.ts

@@ -0,0 +1 @@
+export * from './Step';

package/src/helperComponents/Step/styles.module.scss

@@ -0,0 +1,76 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-stepper';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.tailLine {
+  @include composite-var($stepper-step-track-line);
+
+  flex-grow: 1;
+  background-color: $sys-neutral-decor-default;
+}
+
+.tail {
+  @include composite-var($stepper-step-track-container);
+
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  align-items: center;
+
+  min-width: $dimension-2m;
+
+  &[data-completed] .tailLine {
+    background-color: $sys-primary-accent-default;
+  }
+}
+
+.title {
+  overflow: hidden;
+}
+
+.step {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 0;
+
+  &:last-child {
+    max-width: max-content;
+  }
+}
+
+.content {
+  @include composite-var($stepper-step-container-content);
+
+  overflow: hidden;
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+
+  margin: 0;
+  padding: 0;
+
+  color: $sys-neutral-text-main;
+
+  background-color: transparent;
+  border: none;
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+    outline-offset: $spacing-state-focus-offset;
+  }
+
+  &:not([disabled]) {
+    cursor: pointer;
+    &:focus-visible, &:hover {
+      color: $sys-neutral-text-light;
+    }
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './Step';
+export * from './Icon';

package/src/hooks.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { StepperContext } from './StepperContext';
+
+export const useStepperApi = () => useContext(StepperContext);

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/src/types.ts

@@ -0,0 +1,21 @@
+import { StepState, StepValidationResult } from './constants';
+
+export type StepData = {
+  title: string;
+  validation?(): Promise<StepValidationResult>;
+};
+
+export type StepViewData = StepData & {
+  onClick?(): void;
+  state: StepState;
+  number: number;
+};
+
+export type StepperApi = {
+  goNext(): void;
+  goPrev(): void;
+  resetValidation(): void;
+  isCompleted: boolean;
+  currentStepIndex: number;
+  stepCount: number;
+};

package/src/utils.ts

@@ -0,0 +1,2 @@
+export const getTestIdBuilder = (postfix?: string) => (testId?: string) =>
+  postfix && testId ? `${testId}${postfix}` : undefined;