fix(form): change color for disabled step

Author: MartinWeb

packages/Form/steps/src/Step.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithoutRef } from 'react';
-import StepNoLink from './StepNoLink';
+import StepDisabled from './StepDisabled';
 import StepLink from './StepLink';
 import StepCurrent from './StepCurrent';
 
@@ -42,7 +42,7 @@ const Step = ({
       );
     default:
       return (
-        <StepNoLink
+        <StepDisabled
           id={id}
           title={title}
           classModifier={classModifier}

packages/Form/steps/src/StepDisabled.tsx

@@ -0,0 +1,10 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import StepNoLink from './StepNoLink';
+
+type Props = ComponentPropsWithoutRef<typeof StepNoLink>;
+const StepDisabled = ({
+  className = 'disabled af-steps-list-step',
+  ...otherProps
+}: Props) => <StepNoLink className={className} {...otherProps} />;
+
+export default StepDisabled;

packages/Form/steps/src/__tests__/__snapshots__/Step.spec.tsx.snap

@@ -51,7 +51,7 @@ exports[`<Steps> renders Steps correctly 1`] = `
         </a>
       </li>
       <li
-        class="af-steps-list-step number"
+        class="disabled af-steps-list-step number"
         title="Final step"
       >
         <div

packages/Form/steps/src/step-form-new.scss

@@ -70,10 +70,15 @@ $steps-color-active: mix($black, $brand-primary, 20%);
       }
 
       &.disabled {
-        color: $color-btn-disabled;
+        color: $color-gray-1;
 
         &::before {
-          color: $color-btn-disabled;
+          color: $color-gray-1;
+        }
+
+        & .af-steps-list-stepNumber,
+        & .af-steps-list-stepTitle {
+          color: $color-gray-1;
         }
       }