@snack-uikit/stepper 0.4.3-preview-00fa1de0.0 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.0 (2023-12-28)
+
+
+### Features
+
+* **FF-3960:** add step description, change step layout ([bbda81d](https://github.com/cloud-ru-tech/snack-uikit/commit/bbda81d731bcde8a00577ec63d089d120808a90a))
+
+
+
+
+
+## 0.4.3 (2023-12-25)
+
+### Only dependencies have been changed
+* [@snack-uikit/truncate-string@0.4.3](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## 0.4.2 (2023-12-18)
 
 ### Only dependencies have been changed

package/dist/components/Stepper/Stepper.js

@@ -96,7 +96,7 @@ export function Stepper(_a) {
             setCurrentStepState(STEP_STATE.Current);
         }
     }, [currentStepState]);
-    const stepper = (_jsx("div", Object.assign({ className: cn(styles.stepper, className) }, extractSupportProps(props), { children: stepsView.map((step, index, all) => (_jsx(Step, { step: step, isLast: all.length - 1 === index, "data-test-id": props['data-test-id'] }, step.title + index))) })));
+    const stepper = (_jsx("div", Object.assign({ className: cn(styles.stepper, className) }, extractSupportProps(props), { children: stepsView.map((step, index) => (_jsx(Step, { step: step, "data-test-id": props['data-test-id'] }, step.title + index))) })));
     const stepperApi = { goNext, goPrev, currentStepIndex, isCompleted, resetValidation, stepCount: steps.length };
     return _jsx(StepperContext.Provider, { value: stepperApi, children: children(Object.assign({ stepper }, stepperApi)) });
 }

package/dist/helperComponents/Icon/styles.module.css

@@ -1,7 +1,7 @@
 .icon{
   width:var(--size-stepper-step-status, 32px);
   height:var(--size-stepper-step-status, 32px);
-  border-radius:var(--radius-stepper-step-status, 16px);
+  border-radius:var(--radius-stepper-step-status, 24px);
   border-width:var(--border-width-stepper-step-status, 2px);
   overflow:hidden;
   display:inline-flex;

package/dist/helperComponents/Step/Step.d.ts

@@ -3,6 +3,5 @@ import { StepViewData } from '../../types';
 export type StepProps = WithSupportProps<{
     step: StepViewData;
     className?: string;
-    isLast: boolean;
 }>;
-export declare function Step({ step, className, isLast, 'data-test-id': testId, ...props }: StepProps): import("react/jsx-runtime").JSX.Element;
+export declare function Step({ step, className, 'data-test-id': testId, ...props }: StepProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Step/Step.js

@@ -21,6 +21,6 @@ import styles from './styles.module.css';
 const getTailTestId = getTestIdBuilder('_element-tail');
 const getStepTestId = getTestIdBuilder('_element-step');
 export function Step(_a) {
-    var { step, className, isLast, 'data-test-id': testId } = _a, props = __rest(_a, ["step", "className", "isLast", 'data-test-id']);
-    return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("button", { className: styles.content, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state, children: [_jsx(Icon, Object.assign({}, step, { className: styles.icon })), _jsx(Typography.SansBodyM, { className: styles.title, tag: 'div', children: _jsx(TruncateString, { text: step.title }) })] }), !isLast && (_jsx("div", { className: styles.tail, "data-completed": step.state === STEP_STATE.Completed || undefined, "data-test-id": getTailTestId(testId), children: _jsx("div", { className: styles.tailLine }) }))] })));
+    var { step, className, 'data-test-id': testId } = _a, props = __rest(_a, ["step", "className", 'data-test-id']);
+    return (_jsxs("div", Object.assign({ className: cn(styles.step, className), "data-state": step.state }, extractSupportProps(props), { children: [_jsxs("div", { className: styles.track, children: [_jsx("button", { className: styles.statusContainer, onClick: step.onClick, disabled: !step.onClick, "data-test-id": getStepTestId(testId), "data-state": step.state, children: _jsx(Icon, Object.assign({}, step, { className: styles.icon })) }), _jsx("div", { className: styles.tail, "data-completed": step.state === STEP_STATE.Completed || undefined, "data-test-id": getTailTestId(testId), children: _jsx("div", { className: styles.tailLine }) })] }), _jsxs("div", { className: styles.content, children: [_jsx(Typography.SansBodyM, { className: styles.title, tag: 'div', children: _jsx(TruncateString, { text: step.title }) }), step.description && (_jsx(Typography.SansBodyS, { className: styles.description, tag: 'div', children: _jsx(TruncateString, { text: step.description, maxLines: 2 }) }))] })] })));
 }

package/dist/helperComponents/Step/styles.module.css

@@ -1,13 +1,11 @@
 .tailLine{
   height:var(--size-stepper-step-track-line, 2px);
+  border-radius:var(--radius-stepper-step-track-line, 2px);
   flex-grow:1;
   background-color:var(--sys-neutral-decor-default, #dedede);
 }
 
 .tail{
-  height:var(--size-stepper-step-track-container, 32px);
-  padding-left:var(--space-stepper-step-track, 8px);
-  padding-right:var(--space-stepper-step-track, 8px);
   display:flex;
   flex-grow:1;
   flex-shrink:1;
@@ -20,22 +18,36 @@
 
 .title{
   overflow:hidden;
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.description{
+  overflow:hidden;
+  color:var(--sys-neutral-text-light, #898989);
 }
 
 .step{
+  gap:var(--space-stepper-step-container-gap, 4px);
+  padding-right:var(--space-stepper-step-container-padding-right, 8px);
   display:flex;
   flex:1;
+  flex-direction:column;
   align-items:center;
   justify-content:center;
   min-width:0;
 }
-.step:last-child{
-  max-width:-moz-max-content;
-  max-width:max-content;
+
+.track{
+  gap:var(--space-stepper-step-track-gap, 8px);
+  display:flex;
+  width:100%;
 }
 
-.content{
-  gap:var(--space-stepper-step-content-gap, 8px);
+.statusContainer{
+  width:var(--size-stepper-step-status, 32px);
+  height:var(--size-stepper-step-status, 32px);
+  border-radius:var(--radius-stepper-step-status, 24px);
+  border-width:var(--border-width-stepper-step-status, 2px);
   overflow:hidden;
   display:flex;
   flex-shrink:1;
@@ -46,20 +58,26 @@
   background-color:transparent;
   border:none;
 }
-.content:focus-visible{
+.statusContainer:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
   outline-color:var(--sys-available-complementary, #131313);
   outline-offset:var(--spacing-state-focus-offset, 2px);
 }
-.content:not([disabled]){
+.statusContainer:not([disabled]){
   cursor:pointer;
 }
-.content:not([disabled]):focus-visible, .content:not([disabled]):hover{
+.statusContainer:not([disabled]):focus-visible, .statusContainer:not([disabled]):hover{
   color:var(--sys-neutral-text-light, #898989);
 }
 
 .icon{
   flex-shrink:0;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  width:100%;
 }

package/dist/types.d.ts

@@ -4,6 +4,7 @@ export type StepState = ValueOf<typeof STEP_STATE>;
 export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
 export type StepData = {
     title: string;
+    description?: string;
     validation?(): Promise<StepValidationResult>;
 };
 export type StepViewData = StepData & {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.4.3-preview-00fa1de0.0",
+  "version": "0.5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@snack-uikit/icons": "0.19.2",
     "@snack-uikit/loaders": "0.5.0",
-    "@snack-uikit/truncate-string": "0.4.3-preview-00fa1de0.0",
-    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/truncate-string": "0.4.4",
+    "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "197debfa780364e989e8de7c27ebe15474429c57"
+  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
 }

package/src/components/Stepper/Stepper.tsx

@@ -148,13 +148,8 @@ export function Stepper({
 
   const stepper = (
     <div className={cn(styles.stepper, className)} {...extractSupportProps(props)}>
-      {stepsView.map((step, index, all) => (
-        <Step
-          key={step.title + index}
-          step={step}
-          isLast={all.length - 1 === index}
-          data-test-id={props['data-test-id']}
-        />
+      {stepsView.map((step, index) => (
+        <Step key={step.title + index} step={step} data-test-id={props['data-test-id']} />
       ))}
     </div>
   );

package/src/helperComponents/Step/Step.tsx

@@ -13,28 +13,25 @@ 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) {
+export function Step({ step, className, '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.SansBodyM className={styles.title} tag='div'>
-          <TruncateString text={step.title} />
-        </Typography.SansBodyM>
-      </button>
-      {!isLast && (
+      <div className={styles.track}>
+        <button
+          className={styles.statusContainer}
+          onClick={step.onClick}
+          disabled={!step.onClick}
+          data-test-id={getStepTestId(testId)}
+          data-state={step.state}
+        >
+          <Icon {...step} className={styles.icon} />
+        </button>
+
         <div
           className={styles.tail}
           data-completed={step.state === STEP_STATE.Completed || undefined}
@@ -42,7 +39,19 @@ export function Step({ step, className, isLast, 'data-test-id': testId, ...props
         >
           <div className={styles.tailLine} />
         </div>
-      )}
+      </div>
+
+      <div className={styles.content}>
+        <Typography.SansBodyM className={styles.title} tag='div'>
+          <TruncateString text={step.title} />
+        </Typography.SansBodyM>
+
+        {step.description && (
+          <Typography.SansBodyS className={styles.description} tag='div'>
+            <TruncateString text={step.description} maxLines={2} />
+          </Typography.SansBodyS>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -9,8 +9,6 @@
 }
 
 .tail {
-  @include composite-var($stepper-step-track-container);
-
   display: flex;
   flex-grow: 1;
   flex-shrink: 1;
@@ -25,23 +23,35 @@
 
 .title {
   overflow: hidden;
+  color: $sys-neutral-text-main;
+}
+
+.description {
+  overflow: hidden;
+  color: $sys-neutral-text-light;
 }
 
 .step {
+  @include composite-var($stepper-step-container);
+
   display: flex;
   flex: 1;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 
   min-width: 0;
+}
 
-  &:last-child {
-    max-width: max-content;
-  }
+.track {
+  @include composite-var($stepper-step-track);
+
+  display: flex;
+  width: 100%;
 }
 
-.content {
-  @include composite-var($stepper-step-container-content);
+.statusContainer {
+  @include composite-var($stepper-step-status-container);
 
   overflow: hidden;
   display: flex;
@@ -74,3 +84,9 @@
 .icon {
   flex-shrink: 0;
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}

package/src/types.ts

@@ -8,6 +8,7 @@ export type StepValidationResult = ValueOf<typeof STEP_VALIDATION_RESULT>;
 
 export type StepData = {
   title: string;
+  description?: string;
   validation?(): Promise<StepValidationResult>;
 };