feat(ui): reorderable-list reverse the order of items (#211)

EBS-1193 STPA-293 Co-authored-by: keit.jarve <keit.jarve@nortal.com>
e-gov · Nov 27, 2023 · f4ad191 · f4ad191
1 parent 331c2cc
commit f4ad191
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/libs/styles/src/lib/scss/components/_reorderable-list.scss b/libs/styles/src/lib/scss/components/_reorderable-list.scss
@@ -6,7 +6,7 @@
   padding: get-spacing('haapsalu');
   position: relative;
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
   width: 100%;
   gap: get-spacing('haapsalu');
 

diff --git a/libs/ui/src/lib/reorderable-list/reorderable-list-item/reorderable-list-item.component.html b/libs/ui/src/lib/reorderable-list/reorderable-list-item/reorderable-list-item.component.html
@@ -7,19 +7,19 @@
 </button>
 
 <div class="cvi-reorderable-list__ordering-buttons">
-  <button (click)="moveStepTo('next')"
-          [dataAttribute]="'step-' + orderNr + '-set-as-next-button'"
-          [ngClass]="setAsNextStepButtonVisible ? '' : 'hidden'"
-          aria-label="Next">
+  <button (click)="moveStepTo('previous')"
+          [dataAttribute]="'step-' + orderNr + '-set-as-previous-button'"
+          [ngClass]="setAsPreviousStepButtonVisible ? '' : 'hidden'"
+          aria-label="Previous">
     <cvi-ng-icon name="arrow_up_alt" svgClass="cvi-reorderable-list__order-button-icon"></cvi-ng-icon>
   </button>
   <div [dataAttribute]="'step-' + orderNr + '-order-nr'" class="cvi-reorderable-list__order-nr">
     {{ orderNr }}
   </div>
-  <button (click)="moveStepTo('previous')"
-          [dataAttribute]="'step-' + orderNr + '-set-as-previous-button'"
-          [ngClass]="setAsPreviousStepButtonVisible ? '' : 'hidden'"
-          aria-label="Previous">
+  <button (click)="moveStepTo('next')"
+          [dataAttribute]="'step-' + orderNr + '-set-as-next-button'"
+          [ngClass]="setAsNextStepButtonVisible ? '' : 'hidden'"
+          aria-label="Next">
     <cvi-ng-icon name="arrow_down_alt" svgClass="cvi-reorderable-list__order-button-icon"></cvi-ng-icon>
   </button>
 </div>