feat(ui): code review changes EBS-1314

e-gov · May 7, 2024 · e1bcabb · e1bcabb
1 parent 7485a08
commit e1bcabb
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 33 deletions.
diff --git a/apps/ui-e2e/src/component/steps.component.cy.ts b/apps/ui-e2e/src/component/steps.component.cy.ts
@@ -45,9 +45,9 @@ describe('StepsComponent', () => {
 
   it('Renders steps with scrollbar and clicks right button to make left button visible', () => {
     cy.loadStory('Angular Steps Steps', 'Default with scroll');
-    cy.shouldNotExist('button[aria-label="left-scroll-button"]');
-    cy.get('button[aria-label="right-scroll-button"]').click();
+    cy.shouldNotExist('button[id="steps-left-scroll-button"]');
+    cy.get('button[id="steps-right-scroll-button"]').click();
 
-    cy.shouldExist('button[aria-label="left-scroll-button"]');
+    cy.shouldExist('button[id="steps-left-scroll-button"]');
   });
 });
diff --git a/libs/styles/src/lib/scss/components/_steps.scss b/libs/styles/src/lib/scss/components/_steps.scss
@@ -78,6 +78,8 @@
       @include cvi-breakpoint-up(sm) {
         #{$base}.is-scrollable & {
           display: flex;
+          padding-left: get-spacing('loksa');
+          padding-right: get-spacing('loksa');
         }
 
         display: grid;
@@ -105,7 +107,7 @@
       @include cvi-breakpoint-up(sm) {
         #{$base}.is-scrollable & {
           min-width: 247px;
-          height: 72px;
+          height: 100%;
         }
 
         min-height: 72px;
@@ -358,7 +360,10 @@
     }
 
     #{$base}.is-scrollable {
-      & #{$base}__scroll-container {
+      #{$base}__scroll-wrapper {
+        position: relative;
+      }
+      #{$base}__scroll-container {
         @include cvi-breakpoint-down(sm) {
           display: grid;
         }
@@ -371,22 +376,21 @@
       }
     }
 
-      & #{$base}__scroll-button {
+      #{$base}__scroll-button {
         @include cvi-breakpoint-down(sm) {
           display: none;
         }
         @include cvi-breakpoint-up(sm) {
         position: absolute;
-        height: 72px;
+        z-index: get-z-index('steps', '__scroll-button');
+        height: calc(100% - get-spacing('kuressaare'));
         width: 32px;
         background-color: get-color(black-coral-20);
         opacity: 0.8;
         display: flex;
         line-height: 0;
         justify-content: center;
         align-items: center;
-        margin-left: get-spacing('haapsalu');
-        margin-right: get-spacing('haapsalu');
 
         &--left-scroll {
           left: 0;
@@ -395,13 +399,12 @@
         &--right-scroll {
           right: 0;
         }
-
-        &--scroll-icon {
-          height: get-spacing('haapsalu');
-          fill: get-color(white);
-        }
       }
     }
-  }
-}
 
+    #{$base}__scroll-button-icon {
+      height: get-spacing('haapsalu');
+      fill: get-color(white);
+    }
+  }
+}
diff --git a/libs/styles/src/lib/scss/settings/variables/_z-indexes.scss b/libs/styles/src/lib/scss/settings/variables/_z-indexes.scss
@@ -19,4 +19,7 @@ $cvi-z-indexes: (
   'datepicker': (
     '__calender',
   ),
+  'steps': (
+    '__scroll-button',
+  ),
 );
diff --git a/libs/ui/src/lib/steps/steps/steps.component.html b/libs/ui/src/lib/steps/steps/steps.component.html
@@ -4,7 +4,28 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
 </div>
 <div class="cvi-steps__inner-wrapper">
   <div class="cvi-steps__inner" dataAttribute="steps_container">
+    <div class="cvi-steps__scroll-wrapper">
       <div #stepScrollBar class="cvi-steps__scroll-container">
+        <div>
+          <button *ngIf="isScrollable && !leftEdgeVisible"
+                  id="steps-left-scroll-button"
+                  class="cvi-steps__scroll-button cvi-steps__scroll-button--left-scroll"
+                  (click)="onClickScroll(-150)">
+            <cvi-ng-icon [name]="'arrow_a_left'"
+                         svgClass="cvi-steps__scroll-button-icon">
+            </cvi-ng-icon>
+          </button>
+
+          <button *ngIf="isScrollable && !rightEdgeVisible"
+                  id="steps-right-scroll-button"
+                  class="cvi-steps__scroll-button cvi-steps__scroll-button--right-scroll"
+                  (click)="onClickScroll(150)">
+            <cvi-ng-icon [name]="'arrow_a_right'"
+                         svgClass="cvi-steps__scroll-button-icon">
+            </cvi-ng-icon>
+          </button>
+        </div>
+
         <div #leftEdge style="width: 1px"></div>
         <ol class="cvi-steps__list">
           <li class="cvi-steps__list-item"
@@ -62,23 +83,9 @@ <h1 *ngIf="title" class="cvi-steps__title" dataAttribute="steps_title">{{ title
           </li>
         </ol>
         <div #rightEdge style="width: 1px"></div>
-        <button *ngIf="isScrollable && !leftEdgeVisible"
-                aria-label="left-scroll-button"
-                class="cvi-steps__scroll-button cvi-steps__scroll-button--left-scroll"
-                (click)="onClickScroll(-150)">
-          <cvi-ng-icon [name]="'arrow_a_left'"
-                       svgClass="cvi-steps__scroll-button--scroll-icon">
-          </cvi-ng-icon>
-        </button>
-        <button *ngIf="isScrollable && !rightEdgeVisible"
-                aria-label="right-scroll-button"
-                class="cvi-steps__scroll-button cvi-steps__scroll-button--right-scroll"
-                (click)="onClickScroll(150)">
-          <cvi-ng-icon [name]="'arrow_a_right'"
-                       svgClass="cvi-steps__scroll-button--scroll-icon">
-          </cvi-ng-icon>
-        </button>
-        </div>
+      </div>
+    </div>
+
     <ng-content></ng-content>
     <div *ngIf="this.stepChildren.length > 1 && this.currentStepIndex !== null"
         class="cvi-steps__directional-buttons"

diff --git a/libs/ui/src/lib/steps/steps/steps.component.stories.ts b/libs/ui/src/lib/steps/steps/steps.component.stories.ts
@@ -108,6 +108,11 @@ export const DefaultWithSelectedStep = {
 
 export const DefaultWithScroll = {
   ...Default,
+  parameters: {
+    viewport: {
+      defaultViewport: 'ipad',
+    },
+  },
   args: {
     isScrollable: true,
   },