From 7a28b73802943fcbe0c298e1f3c5e3847bac4034 Mon Sep 17 00:00:00 2001
From: "Mihkel.Paloots" <mihkel.paloots@nortal.com>
Date: Wed, 3 Apr 2024 09:32:40 +0300
Subject: [PATCH 1/8] feat(ui): url step for steps component EBS-1316

---
 .../src/lib/scss/components/_steps.scss       |  6 +++
 libs/ui/src/lib/circle/circle.component.ts    |  4 +-
 libs/ui/src/lib/circle/circle.ts              | 13 ++++-
 .../src/lib/steps/steps/steps.component.html  | 23 ++++++++-
 .../lib/steps/steps/steps.component.spec.ts   | 17 +++++++
 .../steps/steps/steps.component.stories.ts    | 49 +++++++++++++++++++
 .../ui/src/lib/steps/steps/steps.component.ts | 14 ++++++
 7 files changed, 122 insertions(+), 4 deletions(-)

diff --git a/libs/styles/src/lib/scss/components/_steps.scss b/libs/styles/src/lib/scss/components/_steps.scss
index e438773cf..11978f8e5 100644
--- a/libs/styles/src/lib/scss/components/_steps.scss
+++ b/libs/styles/src/lib/scss/components/_steps.scss
@@ -339,5 +339,11 @@
         @include cvi-screenreader-text;
       }
     }
+
+    #{$base}__display_desktop {
+      @include cvi-breakpoint-down(sm) {
+        display: none;
+      }
+    }
   }
 }
diff --git a/libs/ui/src/lib/circle/circle.component.ts b/libs/ui/src/lib/circle/circle.component.ts
index b674b88d7..b6ffd4504 100644
--- a/libs/ui/src/lib/circle/circle.component.ts
+++ b/libs/ui/src/lib/circle/circle.component.ts
@@ -53,7 +53,9 @@ export class CircleComponent {
 
   @HostBinding('style.--background-color')
   get hostStyleBackgroundColor(): string | null {
-    return this.getSeverityProperty('--background-color');
+    return this.severity === 'none'
+      ? this.getThemeProperty('--background-color')
+      : this.getSeverityProperty('--background-color');
   }
 
   @HostBinding('style.--progress')
diff --git a/libs/ui/src/lib/circle/circle.ts b/libs/ui/src/lib/circle/circle.ts
index 9c933cf42..94a6fb3f7 100644
--- a/libs/ui/src/lib/circle/circle.ts
+++ b/libs/ui/src/lib/circle/circle.ts
@@ -1,10 +1,11 @@
-export type CircleTheme = 'dark' | 'light';
+export type CircleTheme = 'dark' | 'light' | 'dark-filled';
 
 export type CircleSeverity = 'none' | 'success' | 'error' | 'info';
 
 export type CircleThemeProperties = {
   '--border-color': string;
   '--color': string;
+  '--background-color': string;
 };
 
 export type CircleThemePropertyGroup = {
@@ -29,6 +30,7 @@ export const circleThemePropertyGroups: CircleThemePropertyGroup[] = [
     properties: {
       '--border-color': '--cvi-color-sapphire-blue-13',
       '--color': '--cvi-color-sapphire-blue-13',
+      '--background-color': 'transparent',
     },
   },
   {
@@ -36,6 +38,15 @@ export const circleThemePropertyGroups: CircleThemePropertyGroup[] = [
     properties: {
       '--border-color': '--cvi-color-white',
       '--color': '--cvi-color-white',
+      '--background-color': 'transparent',
+    },
+  },
+  {
+    theme: 'dark-filled',
+    properties: {
+      '--border-color': '--cvi-color-sapphire-blue-13',
+      '--color': '--cvi-color-white',
+      '--background-color': '--cvi-color-sapphire-blue-13',
     },
   },
 ];
diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
index d96b35b40..345ea89ee 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.html
+++ b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -18,7 +18,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
                   [theme]="i === currentStepIndex || this.stepStatuses[i] === 'success' || this.stepStatuses[i] === 'error'  ? 'light' : 'dark'"
                   [severity]="this.stepStatuses[i] | toStepCircleSeverity"
                   [iconName]="this.stepStatuses[i] | toStepCircleIconName">
-                  {{ i + 1 }}
+                  <b>{{ i + 1 }}</b>
                 </cvi-ng-circle>
                 <span class="cvi-steps__list-item-title">{{ stepTitle }}</span>
               </cvi-ng-track>
@@ -41,6 +41,21 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
           </cvi-ng-track>
         </button>
       </li>
+      <li *ngIf="urlStepTitle"
+          class="cvi-steps__list-item cvi-steps__display_desktop">
+        <button class="cvi-steps__list-item-button" style="background-color: white;" (click)="urlStepClicked()">
+          <cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
+            <div class="cvi-steps__list-item-circle-wrapper--desktop">
+              <cvi-ng-track [gap]="2" [verticalAlignment]="'center'">
+                <cvi-ng-circle [iconName]="'arrow_a_right'"
+                               [theme]="'dark-filled'">
+                </cvi-ng-circle>
+                <span class="cvi-steps__list-item-title">{{ urlStepTitle }}</span>
+              </cvi-ng-track>
+            </div>
+          </cvi-ng-track>
+        </button>
+      </li>
     </ol>
     <ng-content></ng-content>
     <div *ngIf="this.stepChildren.length > 1 && this.currentStepIndex !== null"
@@ -56,7 +71,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
           {{ this.stepTitles[this.currentStepIndex - 1] }}
         </span>
       </button>
-      <button *ngIf="this.currentStepIndex < this.stepChildren.length - 1"
+      <button *ngIf="this.currentStepIndex < this.stepChildren.length - 1 || urlStepTitle"
               class="cvi-steps__directional-button cvi-steps__directional-button--direction-next"
               (click)="stepSelected(this.currentStepIndex + 1)"
               [title]="this.stepTitles[this.currentStepIndex + 1]"
@@ -64,6 +79,10 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
         <span class="cvi-steps__directional-button-label">
           {{ this.stepTitles[this.currentStepIndex + 1] }}
         </span>
+        <span *ngIf="urlStepTitle && currentStepIndex === stepTitles.length - 1"
+              class="cvi-steps__directional-button-label">
+          {{ (urlStepLabel ? urlStepLabel : '') + urlStepTitle }}
+        </span>
         <cvi-ng-icon [name]="'arrow_a_right'" [svgClass]="'cvi-steps__directional-button-icon'"></cvi-ng-icon>
       </button>
     </div>
diff --git a/libs/ui/src/lib/steps/steps/steps.component.spec.ts b/libs/ui/src/lib/steps/steps/steps.component.spec.ts
index 42d1abaf9..6437c97b2 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.spec.ts
+++ b/libs/ui/src/lib/steps/steps/steps.component.spec.ts
@@ -26,4 +26,21 @@ describe('StepsComponent', () => {
     expect(component.stepChange.emit).toBeCalledTimes(1);
     expect(component.stepChange.emit).toBeCalledWith(1);
   });
+
+  it('should emit url step click when stepSelected is called with stepIndex equal to stepTitles length', () => {
+    jest.spyOn(component.urlStepClick, 'emit');
+    component.stepTitles = ['index_0', 'index_1']
+    component.stepSelected(2);
+
+    expect(component.urlStepClick.emit).toBeCalledTimes(1);
+    expect(component.urlStepClick.emit).toBeCalledWith();
+  });
+
+  it('should emit url step click when urlStepClicked is called', () => {
+    jest.spyOn(component.urlStepClick, 'emit');
+    component.urlStepClicked();
+
+    expect(component.urlStepClick.emit).toBeCalledTimes(1);
+    expect(component.urlStepClick.emit).toBeCalledWith();
+  });
 });
diff --git a/libs/ui/src/lib/steps/steps/steps.component.stories.ts b/libs/ui/src/lib/steps/steps/steps.component.stories.ts
index d377ae1ee..d7374cd47 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.stories.ts
+++ b/libs/ui/src/lib/steps/steps/steps.component.stories.ts
@@ -263,3 +263,52 @@ export const WithStepStatuses = TemplateWithStepStatus.bind({});
 WithStepStatuses.args = {
   currentStepIndex: 0,
 };
+
+const TemplateWithUrlStep: Story = (args) => ({
+  component: StepsComponent,
+  props: {
+    ...args,
+    urlClicked: false,
+  },
+  /* template */
+  template: `
+      <cvi-ng-notification *ngIf="urlClicked"
+                           [severity]="'success'"
+                           [showCloseButton]="false"
+                           [title]="'URL step clicked'">
+        URL STEP CLICKED! Clicking url step emits an event <b>urlStepClick</b> that can be used for redirections to other pages and etc.
+      </cvi-ng-notification>
+      <cvi-ng-steps [title]="title" [currentStepIndex]="currentStepIndex" [urlStepTitle]="urlStepTitle" (urlStepClick)="urlClicked = true" [urlStepLabel]="urlStepLabel">
+        <cvi-ng-step>
+          <cvi-ng-step-panel title="First">
+            <span>This is just a normal step</span>
+          </cvi-ng-step-panel>
+        </cvi-ng-step>
+        <cvi-ng-step>
+          <cvi-ng-step-panel title="Second">
+            <span>This is another normal step, except when you are using mobile. Mobile has arrow button that can be used for redirections to other pages and etc.</span>
+          </cvi-ng-step-panel>
+        </cvi-ng-step>
+      </cvi-ng-steps>
+  `,
+});
+export const WithURLStep = TemplateWithUrlStep.bind({});
+WithURLStep.args = {
+  currentStepIndex: 0,
+  urlStepTitle: 'Navigate to somewhere or do something',
+  urlStepLabel: 'Next step in your journey: '
+};
+
+export const MobileWithURLStep = TemplateWithUrlStep.bind({});
+MobileWithURLStep.args = {
+  urlStepTitle: 'Navigate to somewhere or do something'
+};
+MobileWithURLStep.parameters = {
+  layout: 'fullscreen',
+  backgrounds: {
+    default: 'light',
+  },
+  viewport: {
+    defaultViewport: 'iphone12mini',
+  },
+};
diff --git a/libs/ui/src/lib/steps/steps/steps.component.ts b/libs/ui/src/lib/steps/steps/steps.component.ts
index 1ad3931ce..5a30b3715 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.ts
+++ b/libs/ui/src/lib/steps/steps/steps.component.ts
@@ -28,6 +28,10 @@ export class StepsComponent
 {
   @Input() title!: string;
 
+  @Input() urlStepTitle?: string;
+
+  @Input() urlStepLabel?: string;
+
   /** Internal */
   private _currentStepIndex: number | null = null;
 
@@ -50,6 +54,8 @@ export class StepsComponent
 
   @Output() stepChange = new EventEmitter<number>();
 
+  @Output() urlStepClick = new EventEmitter<any>();
+
   stepStatuses!: ('success' | 'error' | null)[];
   stepTitles!: string[];
   @Input() currentProgressCSSVar = 0;
@@ -141,6 +147,10 @@ export class StepsComponent
     if (this.currentStepIndex == stepIndex) {
       return;
     }
+    if (this.stepTitles.length == stepIndex) {
+      this.urlStepClicked()
+      return;
+    }
     this.anyStepSelected = true;
     this.currentStepIndex = stepIndex;
     this.hideStepsContent();
@@ -159,4 +169,8 @@ export class StepsComponent
       ((stepIndex + 1) / this.stepTitles.length) * 100
     );
   }
+
+  urlStepClicked() {
+    this.urlStepClick.emit();
+  }
 }

From 1d085a5ebc2bdf306581aee92d6c23c3604a96f8 Mon Sep 17 00:00:00 2001
From: "Mihkel.Paloots" <mihkel.paloots@nortal.com>
Date: Wed, 3 Apr 2024 09:34:34 +0300
Subject: [PATCH 2/8] feat(ui): eslint EBS-1316

---
 libs/ui/src/lib/steps/steps/steps.component.spec.ts    | 2 +-
 libs/ui/src/lib/steps/steps/steps.component.stories.ts | 4 ++--
 libs/ui/src/lib/steps/steps/steps.component.ts         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/ui/src/lib/steps/steps/steps.component.spec.ts b/libs/ui/src/lib/steps/steps/steps.component.spec.ts
index 6437c97b2..896f2cf50 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.spec.ts
+++ b/libs/ui/src/lib/steps/steps/steps.component.spec.ts
@@ -29,7 +29,7 @@ describe('StepsComponent', () => {
 
   it('should emit url step click when stepSelected is called with stepIndex equal to stepTitles length', () => {
     jest.spyOn(component.urlStepClick, 'emit');
-    component.stepTitles = ['index_0', 'index_1']
+    component.stepTitles = ['index_0', 'index_1'];
     component.stepSelected(2);
 
     expect(component.urlStepClick.emit).toBeCalledTimes(1);
diff --git a/libs/ui/src/lib/steps/steps/steps.component.stories.ts b/libs/ui/src/lib/steps/steps/steps.component.stories.ts
index d7374cd47..91c222f62 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.stories.ts
+++ b/libs/ui/src/lib/steps/steps/steps.component.stories.ts
@@ -296,12 +296,12 @@ export const WithURLStep = TemplateWithUrlStep.bind({});
 WithURLStep.args = {
   currentStepIndex: 0,
   urlStepTitle: 'Navigate to somewhere or do something',
-  urlStepLabel: 'Next step in your journey: '
+  urlStepLabel: 'Next step in your journey: ',
 };
 
 export const MobileWithURLStep = TemplateWithUrlStep.bind({});
 MobileWithURLStep.args = {
-  urlStepTitle: 'Navigate to somewhere or do something'
+  urlStepTitle: 'Navigate to somewhere or do something',
 };
 MobileWithURLStep.parameters = {
   layout: 'fullscreen',
diff --git a/libs/ui/src/lib/steps/steps/steps.component.ts b/libs/ui/src/lib/steps/steps/steps.component.ts
index 5a30b3715..e98561bed 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.ts
+++ b/libs/ui/src/lib/steps/steps/steps.component.ts
@@ -148,7 +148,7 @@ export class StepsComponent
       return;
     }
     if (this.stepTitles.length == stepIndex) {
-      this.urlStepClicked()
+      this.urlStepClicked();
       return;
     }
     this.anyStepSelected = true;

From fa21d98e7603fe79b876f291f43f37eaebcfd036 Mon Sep 17 00:00:00 2001
From: "Mihkel.Paloots" <mihkel.paloots@nortal.com>
Date: Wed, 3 Apr 2024 11:03:32 +0300
Subject: [PATCH 3/8] feat(ui): refactor EBS-1316

---
 libs/ui/src/lib/steps/steps/steps.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
index 345ea89ee..a27b293f6 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.html
+++ b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -18,7 +18,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
                   [theme]="i === currentStepIndex || this.stepStatuses[i] === 'success' || this.stepStatuses[i] === 'error'  ? 'light' : 'dark'"
                   [severity]="this.stepStatuses[i] | toStepCircleSeverity"
                   [iconName]="this.stepStatuses[i] | toStepCircleIconName">
-                  <b>{{ i + 1 }}</b>
+                  {{ i + 1 }}
                 </cvi-ng-circle>
                 <span class="cvi-steps__list-item-title">{{ stepTitle }}</span>
               </cvi-ng-track>

From e5305428c130ff212a6c409d528d1e286d001547 Mon Sep 17 00:00:00 2001
From: "Mihkel.Paloots" <mihkel.paloots@nortal.com>
Date: Wed, 3 Apr 2024 12:00:11 +0300
Subject: [PATCH 4/8] feat(ui): remove dark-filled theme EBS-1316

---
 libs/ui/src/lib/circle/circle.component.ts       |  4 +---
 libs/ui/src/lib/circle/circle.ts                 | 13 +------------
 libs/ui/src/lib/steps/steps/steps.component.html |  4 +++-
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/libs/ui/src/lib/circle/circle.component.ts b/libs/ui/src/lib/circle/circle.component.ts
index b6ffd4504..b674b88d7 100644
--- a/libs/ui/src/lib/circle/circle.component.ts
+++ b/libs/ui/src/lib/circle/circle.component.ts
@@ -53,9 +53,7 @@ export class CircleComponent {
 
   @HostBinding('style.--background-color')
   get hostStyleBackgroundColor(): string | null {
-    return this.severity === 'none'
-      ? this.getThemeProperty('--background-color')
-      : this.getSeverityProperty('--background-color');
+    return this.getSeverityProperty('--background-color');
   }
 
   @HostBinding('style.--progress')
diff --git a/libs/ui/src/lib/circle/circle.ts b/libs/ui/src/lib/circle/circle.ts
index 94a6fb3f7..9c933cf42 100644
--- a/libs/ui/src/lib/circle/circle.ts
+++ b/libs/ui/src/lib/circle/circle.ts
@@ -1,11 +1,10 @@
-export type CircleTheme = 'dark' | 'light' | 'dark-filled';
+export type CircleTheme = 'dark' | 'light';
 
 export type CircleSeverity = 'none' | 'success' | 'error' | 'info';
 
 export type CircleThemeProperties = {
   '--border-color': string;
   '--color': string;
-  '--background-color': string;
 };
 
 export type CircleThemePropertyGroup = {
@@ -30,7 +29,6 @@ export const circleThemePropertyGroups: CircleThemePropertyGroup[] = [
     properties: {
       '--border-color': '--cvi-color-sapphire-blue-13',
       '--color': '--cvi-color-sapphire-blue-13',
-      '--background-color': 'transparent',
     },
   },
   {
@@ -38,15 +36,6 @@ export const circleThemePropertyGroups: CircleThemePropertyGroup[] = [
     properties: {
       '--border-color': '--cvi-color-white',
       '--color': '--cvi-color-white',
-      '--background-color': 'transparent',
-    },
-  },
-  {
-    theme: 'dark-filled',
-    properties: {
-      '--border-color': '--cvi-color-sapphire-blue-13',
-      '--color': '--cvi-color-white',
-      '--background-color': '--cvi-color-sapphire-blue-13',
     },
   },
 ];
diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
index a27b293f6..145a655ea 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.html
+++ b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -48,7 +48,9 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
             <div class="cvi-steps__list-item-circle-wrapper--desktop">
               <cvi-ng-track [gap]="2" [verticalAlignment]="'center'">
                 <cvi-ng-circle [iconName]="'arrow_a_right'"
-                               [theme]="'dark-filled'">
+                               [theme]="'light'"
+                               [severity]="'info'"
+                               style="--cvi-circle-border-color: var(--cvi-color-sapphire-blue-13)">
                 </cvi-ng-circle>
                 <span class="cvi-steps__list-item-title">{{ urlStepTitle }}</span>
               </cvi-ng-track>

From f4efe4f8604ed4f05c819318efe40edde17f4e22 Mon Sep 17 00:00:00 2001
From: "Mihkel.Paloots" <mihkel.paloots@nortal.com>
Date: Thu, 4 Apr 2024 09:11:29 +0300
Subject: [PATCH 5/8] feat(ui): implement modifier class EBS-1316

---
 libs/styles/src/lib/scss/components/_steps.scss  | 10 ++++------
 libs/ui/src/lib/steps/steps/steps.component.html |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/libs/styles/src/lib/scss/components/_steps.scss b/libs/styles/src/lib/scss/components/_steps.scss
index 11978f8e5..e6afd3b60 100644
--- a/libs/styles/src/lib/scss/components/_steps.scss
+++ b/libs/styles/src/lib/scss/components/_steps.scss
@@ -95,6 +95,10 @@
         #{$base}.is-any-step-selected &:not(.is-current) {
           @include cvi-screenreader-text;
         }
+
+        &--is-url-step {
+          display: none;
+        }
       }
       @include cvi-breakpoint-up(sm) {
         min-height: 72px;
@@ -339,11 +343,5 @@
         @include cvi-screenreader-text;
       }
     }
-
-    #{$base}__display_desktop {
-      @include cvi-breakpoint-down(sm) {
-        display: none;
-      }
-    }
   }
 }
diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
index 145a655ea..7b3764a8a 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.html
+++ b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -42,7 +42,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
         </button>
       </li>
       <li *ngIf="urlStepTitle"
-          class="cvi-steps__list-item cvi-steps__display_desktop">
+          class="cvi-steps__list-item--is-url-step">
         <button class="cvi-steps__list-item-button" style="background-color: white;" (click)="urlStepClicked()">
           <cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
             <div class="cvi-steps__list-item-circle-wrapper--desktop">

From 7900a0edd0cd37e334210956475ac6fd98cce3e9 Mon Sep 17 00:00:00 2001
From: "Mihkel.Paloots" <mihkel.paloots@nortal.com>
Date: Thu, 4 Apr 2024 15:08:15 +0300
Subject: [PATCH 6/8] feat(ui): refactor list item url step css EBS-1316

---
 .../src/lib/scss/components/_steps.scss       | 28 ++++++++++++++++---
 .../src/lib/steps/steps/steps.component.html  |  2 +-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/libs/styles/src/lib/scss/components/_steps.scss b/libs/styles/src/lib/scss/components/_steps.scss
index e6afd3b60..851f9de89 100644
--- a/libs/styles/src/lib/scss/components/_steps.scss
+++ b/libs/styles/src/lib/scss/components/_steps.scss
@@ -95,10 +95,6 @@
         #{$base}.is-any-step-selected &:not(.is-current) {
           @include cvi-screenreader-text;
         }
-
-        &--is-url-step {
-          display: none;
-        }
       }
       @include cvi-breakpoint-up(sm) {
         min-height: 72px;
@@ -122,6 +118,30 @@
       }
     }
 
+    #{$base}__list-item-url-step {
+      @include cvi-breakpoint-down(sm) {
+        display: none;
+      }
+      @include cvi-breakpoint-up(sm) {
+        min-height: 72px;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: 0;
+        border-radius: var(--cvi-radius-l);
+        filter: url('#round') drop-shadow(0 1px 5px rgba(var(--cvi-color-rgb-black) / .15));
+        transition: filter .3s;
+
+        &:hover,
+        &:focus {
+          filter: url('#round') drop-shadow(0 1px 5px rgba(var(--cvi-color-rgb-black) / .3));
+        }
+
+        &:focus-within {
+          filter: url('#round') drop-shadow(0 0 2px var(--cvi-color-black));
+        }
+      }
+    }
+
     #{$base}__list-item-button {
       position: relative;
       font-size: get-font-size(100);
diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
index 7b3764a8a..07bdfed78 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.html
+++ b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -42,7 +42,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
         </button>
       </li>
       <li *ngIf="urlStepTitle"
-          class="cvi-steps__list-item--is-url-step">
+          class="cvi-steps__list-item-url-step">
         <button class="cvi-steps__list-item-button" style="background-color: white;" (click)="urlStepClicked()">
           <cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
             <div class="cvi-steps__list-item-circle-wrapper--desktop">

From 7c888bd23da6305a86d7897eb73bb845d1836ca0 Mon Sep 17 00:00:00 2001
From: "Mihkel.Paloots" <mihkel.paloots@nortal.com>
Date: Thu, 4 Apr 2024 16:21:37 +0300
Subject: [PATCH 7/8] feat(ui): list item url step title css EBS-1316

---
 libs/styles/src/lib/scss/components/_steps.scss  | 8 ++++++++
 libs/ui/src/lib/steps/steps/steps.component.html | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/libs/styles/src/lib/scss/components/_steps.scss b/libs/styles/src/lib/scss/components/_steps.scss
index 851f9de89..c109b2c21 100644
--- a/libs/styles/src/lib/scss/components/_steps.scss
+++ b/libs/styles/src/lib/scss/components/_steps.scss
@@ -213,6 +213,14 @@
       }
     }
 
+    #{$base}__list-item-url-step-title {
+      word-break: break-word;
+      @include cvi-breakpoint-up(sm) {
+          text-decoration: underline;
+          color: get-color(sapphire-blue-13);
+        }
+      }
+
     #{$base}__list-item-arrow-icon-wrapper {
       @include cvi-breakpoint-up(sm) {
         display: none;
diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
index 07bdfed78..4e8489feb 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.html
+++ b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -52,7 +52,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
                                [severity]="'info'"
                                style="--cvi-circle-border-color: var(--cvi-color-sapphire-blue-13)">
                 </cvi-ng-circle>
-                <span class="cvi-steps__list-item-title">{{ urlStepTitle }}</span>
+                <span class="cvi-steps__list-item-url-step-title">{{ urlStepTitle }}</span>
               </cvi-ng-track>
             </div>
           </cvi-ng-track>

From 2300b10b679a0f680185d4844747d65585c462af Mon Sep 17 00:00:00 2001
From: Aleksandr Beliaev <aleksandr.beliaev@nortal.com>
Date: Thu, 4 Apr 2024 16:45:18 +0300
Subject: [PATCH 8/8] fix(ui): restored disappeared shadow on an URL step in
 cvi-steps Sass component

---
 .../src/lib/scss/components/_steps.scss       | 36 ++++---------------
 .../src/lib/steps/steps/steps.component.html  |  4 +--
 2 files changed, 8 insertions(+), 32 deletions(-)

diff --git a/libs/styles/src/lib/scss/components/_steps.scss b/libs/styles/src/lib/scss/components/_steps.scss
index c109b2c21..c7a772df6 100644
--- a/libs/styles/src/lib/scss/components/_steps.scss
+++ b/libs/styles/src/lib/scss/components/_steps.scss
@@ -95,6 +95,8 @@
         #{$base}.is-any-step-selected &:not(.is-current) {
           @include cvi-screenreader-text;
         }
+
+        
       }
       @include cvi-breakpoint-up(sm) {
         min-height: 72px;
@@ -116,28 +118,10 @@
           filter: url('#round') drop-shadow(0 0 2px var(--cvi-color-black));
         }
       }
-    }
-
-    #{$base}__list-item-url-step {
-      @include cvi-breakpoint-down(sm) {
-        display: none;
-      }
-      @include cvi-breakpoint-up(sm) {
-        min-height: 72px;
-        flex-grow: 1;
-        flex-shrink: 1;
-        flex-basis: 0;
-        border-radius: var(--cvi-radius-l);
-        filter: url('#round') drop-shadow(0 1px 5px rgba(var(--cvi-color-rgb-black) / .15));
-        transition: filter .3s;
-
-        &:hover,
-        &:focus {
-          filter: url('#round') drop-shadow(0 1px 5px rgba(var(--cvi-color-rgb-black) / .3));
-        }
-
-        &:focus-within {
-          filter: url('#round') drop-shadow(0 0 2px var(--cvi-color-black));
+      
+      &--is-url-step {
+        @include cvi-breakpoint-down(sm) {
+          display: none;
         }
       }
     }
@@ -213,14 +197,6 @@
       }
     }
 
-    #{$base}__list-item-url-step-title {
-      word-break: break-word;
-      @include cvi-breakpoint-up(sm) {
-          text-decoration: underline;
-          color: get-color(sapphire-blue-13);
-        }
-      }
-
     #{$base}__list-item-arrow-icon-wrapper {
       @include cvi-breakpoint-up(sm) {
         display: none;
diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
index 4e8489feb..3bcb8306e 100644
--- a/libs/ui/src/lib/steps/steps/steps.component.html
+++ b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -42,7 +42,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
         </button>
       </li>
       <li *ngIf="urlStepTitle"
-          class="cvi-steps__list-item-url-step">
+          class="cvi-steps__list-item cvi-steps__list-item--is-url-step">
         <button class="cvi-steps__list-item-button" style="background-color: white;" (click)="urlStepClicked()">
           <cvi-ng-track [layout]="'flex'" [horizontalAlignment]="'justify'" [verticalAlignment]="'center'">
             <div class="cvi-steps__list-item-circle-wrapper--desktop">
@@ -52,7 +52,7 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
                                [severity]="'info'"
                                style="--cvi-circle-border-color: var(--cvi-color-sapphire-blue-13)">
                 </cvi-ng-circle>
-                <span class="cvi-steps__list-item-url-step-title">{{ urlStepTitle }}</span>
+                <span class="cvi-steps__list-item-title">{{ urlStepTitle }}</span>
               </cvi-ng-track>
             </div>
           </cvi-ng-track>