@spaced-out/ui-design-system 0.1.125 → 0.1.126

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.126](https://github.com/spaced-out/ui-design-system/compare/v0.1.125...v0.1.126) (2024-08-30)
+
+
+### Bug Fixes
+
+* 🖼️ stepper component step color and custom icon changes  ([#261](https://github.com/spaced-out/ui-design-system/issues/261)) ([038d129](https://github.com/spaced-out/ui-design-system/commit/038d12945065634f736b65a328f96c589f8307cf))
+
 ### [0.1.125](https://github.com/spaced-out/ui-design-system/compare/v0.1.124...v0.1.125) (2024-08-29)
 
 

package/lib/components/Stepper/Step/Step.js

@@ -57,17 +57,13 @@ const Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.stepCounter)
   }, completed && !active ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "check",
-    color: iconName ? 'success' : 'inversePrimary',
-    type: "solid",
-    size: iconName ? 'medium' : 'small'
+    type: _Icon.ICON_TYPE.solid,
+    size: _Icon.ICON_SIZE.small,
+    className: _StepperModule.default.stepIcon
   }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconName,
-    className: (0, _classify.default)(_StepperModule.default.stepIcon, {
-      [_StepperModule.default.selected]: active,
-      [_StepperModule.default.completed]: completed,
-      [_StepperModule.default.disabled]: disabled
-    }),
-    size: "medium",
+    className: _StepperModule.default.stepIcon,
+    size: _Icon.ICON_SIZE.small,
     type: iconType
   }) : (index + 1).toString())), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content)

package/lib/components/Stepper/Step/Step.js.flow

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import classify from '../../../utils/classify';
 import type {IconType} from '../../Icon';
-import {Icon} from '../../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
 
 import css from '../Stepper.module.css';
 
@@ -95,21 +95,17 @@ export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
             {completed && !active ? (
               <Icon
                 name="check"
-                color={iconName ? 'success' : 'inversePrimary'}
-                type="solid"
-                size={iconName ? 'medium' : 'small'}
+                type={ICON_TYPE.solid}
+                size={ICON_SIZE.small}
+                className={css.stepIcon}
               />
             ) : (
               <React.Fragment>
                 {iconName ? (
                   <Icon
                     name={iconName}
-                    className={classify(css.stepIcon, {
-                      [css.selected]: active,
-                      [css.completed]: completed,
-                      [css.disabled]: disabled,
-                    })}
-                    size="medium"
+                    className={css.stepIcon}
+                    size={ICON_SIZE.small}
                     type={iconType}
                   />
                 ) : (

package/lib/components/Stepper/Stepper.module.css

@@ -1,10 +1,12 @@
 @value (
   colorFillPrimary,
+  colorFillSecondary,
   colorSuccessDark,
   colorBackgroundTertiary,
   colorFillDisabled,
   colorTextSecondary,
   colorTextPrimary,
+  colorTextClickable,
   colorTextDisabled,
   colorTextInversePrimary,
   colorBorderSecondary
@@ -39,7 +41,7 @@
 .stepWrapper {
   position: relative;
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   gap: spaceSmall;
   width: sizeFluid;
 }
@@ -60,16 +62,16 @@
   color: colorTextSecondary;
 }
 
-.stepWrapperCounter.selected {
+.stepWrapperCounter.completed {
   background-color: colorFillPrimary;
   border: borderWidthPrimary solid transparent;
   color: colorTextInversePrimary;
 }
 
-.stepWrapperCounter.completed {
-  background-color: colorSuccessDark;
+.stepWrapperCounter.selected {
+  background-color: colorFillSecondary;
   border: borderWidthPrimary solid transparent;
-  color: colorTextInversePrimary;
+  color: colorTextClickable;
 }
 
 .stepWrapperCounter.disabled {
@@ -78,32 +80,15 @@
   color: colorTextDisabled;
 }
 
-.stepWrapperCounter.withIcon {
-  border: initial;
-  border-radius: initial;
-  background-color: initial;
-}
-
 .stepIcon {
   color: inherit;
 }
 
-.stepIcon.selected {
-  color: colorFillPrimary;
-}
-
-.stepIcon.completed {
-  color: colorSuccessDark;
-}
-
-.stepIcon.disabled {
-  color: colorTextDisabled;
-}
-
 .stepContent {
   display: flex;
   flex-flow: column;
   gap: spaceXXSmall;
+  margin-top: spaceXXSmall;
 }
 
 .stepLabelWrapper {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.125",
+  "version": "0.1.126",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {