feat(ui): url step for steps component EBS-1316

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;
+      }
+    }
   }
 }

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')

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,13 +30,23 @@ export const circleThemePropertyGroups: CircleThemePropertyGroup[] = [
     properties: {
       '--border-color': '--cvi-color-sapphire-blue-13',
       '--color': '--cvi-color-sapphire-blue-13',
+      '--background-color': 'transparent',
     },
   },
   {
     theme: 'light',
     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',
     },
   },
 ];

libs/ui/src/lib/steps/steps/steps.component.html

@@ -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,14 +71,18 @@ <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]"
               [dataAttribute]="'next_step_button_' + this.currentStepIndex">
         <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>

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();
+  });
 });

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',
+  },
+};

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();
+  }
 }