refactor: edit icon

Author: NiclasNorin

source/js/steps/StepUIManager.ts

@@ -1,8 +1,5 @@
 class StepUIManager implements StepUIManagerInterface {
     private visibilityHiddenClass: string = 'u-visibility--hidden';
-    private editIconName: string = 'edit';
-    private closeIconName: string = 'close';
-    private iconAttribute: string = 'data-material-symbol';
     private nextButtonLabelElement: HTMLElement|null;
     private maxSteps: number;
 
@@ -24,8 +21,8 @@ class StepUIManager implements StepUIManagerInterface {
         }
 
         this.prevButton.classList.toggle(this.visibilityHiddenClass, activeStep === 0);
-        this.steps[activeStep].getEditButtonIcon().setAttribute(this.iconAttribute, this.closeIconName);
-        this.steps[previousActiveStep].getEditButtonIcon().setAttribute(this.iconAttribute, this.editIconName);
+        this.steps[previousActiveStep].getEditButton().classList.remove(this.visibilityHiddenClass);
+        this.steps[activeStep].getEditButton().classList.add(this.visibilityHiddenClass);
     }
 }
 

source/js/steps/helper/getSteps.ts

@@ -6,17 +6,15 @@ export function getSteps(container: HTMLElement): StepsObject {
         const step = stepContainer.querySelector('[data-js-frontend-form-step]');
         const id   = step?.getAttribute('data-js-frontend-form-step');
         const editButton = stepContainer.querySelector('[data-js-frontend-form-step-edit]');
-        const editButtonIcon = editButton?.querySelector('.c-icon');
 
-        if (!id || !editButton || !editButtonIcon) {
+        if (!id || !editButton) {
             console.error("Missing data-js-frontend-form-step attribute");
             return;
         }
 
         const stepId = parseInt(id);
         steps[stepId] = StepFactory.createStep(
             editButton as HTMLElement,
-            editButtonIcon as HTMLElement,
             step as HTMLElement,
             stepId
         );

source/js/steps/step.ts

@@ -2,7 +2,6 @@ class Step implements StepInterface {
 
     constructor(
         private editButton: HTMLElement,
-        private editButtonIcon: HTMLElement,
         private stepContainer: HTMLElement,
         public animateStepHelperInstance: AnimateStepHelperInterface,
         private id: number
@@ -29,10 +28,6 @@ class Step implements StepInterface {
         return this.editButton;
     }
 
-    public getEditButtonIcon(): HTMLElement {
-        return this.editButtonIcon;
-    }
-
     public getId(): number {
         return this.id;
     }

source/js/steps/stepFactory.ts

@@ -2,10 +2,9 @@ import AnimateStepHelper from './animation/animateStepHelper';
 import Step from './step';
 
 class StepFactory {
-    public static createStep(editButton: HTMLElement, editButtonIcon: HTMLElement, step: HTMLElement, id: number): Step {
+    public static createStep(editButton: HTMLElement, step: HTMLElement, id: number): Step {
         return new Step(
             editButton,
-            editButtonIcon,
             step,
             new AnimateStepHelper(step),
             id

source/js/steps/stepInterface.d.ts

@@ -5,7 +5,6 @@ interface StepInterface {
     onEdit(callback: () => void): void;
     getStepContainer(): HTMLElement;
     getEditButton(): HTMLElement;
-    getEditButtonIcon(): HTMLElement;
 }
 
 interface SubmitInterface {

source/php/Module/views/step.blade.php

@@ -27,11 +27,12 @@
                 @endif
             @endelement
             @button([
-                'icon' => $index === 0 ? 'close' : 'edit',
+                'icon' => 'edit',
                 'size' => 'md',
                 'style' => 'basic',
                 'classList' => [
                     'mod-frontend-form__step-header-edit',
+                    $index === 0 ? 'u-visibility--hidden' : ''
                 ],
                 'attributeList' => [
                     'role' => 'button',