fix(ffe-header): remove button dependencies

SpareBank1 · Sep 24, 2024 · fabf75c · fabf75c
1 parent a6b9359
commit fabf75c
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 67 deletions.
diff --git a/packages/ffe-header/less/ffe-header.less b/packages/ffe-header/less/ffe-header.less
@@ -148,31 +148,28 @@
         border: none;
     }
 
+    &__logout-button,
     &__icon-button {
-        .ffe-inline-button();
-
-        color: var(--ffe-v-primary-color);
-
-        &:active:extend(.ffe-inline-button:active) {
-        }
-
-        &:focus:extend(.ffe-inline-button:focus) {
-        }
-
-        /* stylelint-disable declaration-block-no-duplicate-properties */
-        &:extend(.ffe-inline-button--tertiary);
-
-        @media (hover: hover) and (pointer: fine) {
-            &:hover:extend(.ffe-inline-button--tertiary:hover) {
-            }
-        }
-
-        /* stylelint-enable declaration-block-no-duplicate-properties */
+        border: none;
+        margin: 0;
+        padding: 0;
+        width: auto;
+        overflow: visible;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        line-height: normal;
+        text-align: inherit;
+        cursor: pointer;
+    }
 
-        &::after {
-            &:extend(.ffe-inline-button--tertiary::after);
+    &__icon-button {
+        color: var(--ffe-v-header-icon-button-color);
+        border-bottom: 2px solid var(--ffe-v-header-icon-button-color);
 
-            border: none;
+        &:focus-visible {
+            outline: 2px solid var(--ffe-v-header-icon-button-color);
+            outline-offset: 2px;
         }
 
         &--user-nav {
@@ -188,55 +185,42 @@
     }
 
     &__logout-button {
-        &:extend(.ffe-button);
-        &:extend(.ffe-button--secondary);
-
-        margin: var(--ffe-spacing-xs) 0;
-        border-radius: 20px;
-        padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm);
-
-        &::after:extend(.ffe-button::after) {
+        --color: var(--ffe-v-header-logout-color);
+        --color-hover: var(--ffe-v-header-logout-color-hover);
+        --background-color: var(--ffe-v-header-logout-background-color);
+        --background-color-hover: var(
+            --ffe-v-header-logout-background-color-hover
+        );
+        --border-color: var(--ffe-v-header-logout-border-color);
+        --border-color-hover: var(--ffe-v-header-logout-border-color-hover);
+
+        color: var(--color);
+        background: var(--background-color);
+        border: 2px solid var(--border-color);
+        line-height: 1.2;
+        padding: calc(var(--ffe-spacing-xs) + 2px) var(--ffe-spacing-md); // The + 2px is ensure button is 44px after we made a change to line-height.
+        border-radius: 6em;
+
+        &:focus-visible {
+            outline: 2px solid var(--border-color);
+            outline-offset: 2px;
         }
 
-        &:focus::after:extend(.ffe-button:focus::after) {
-        }
-
-        &:focus:not(:focus-visible)::after:extend(
-                .ffe-button:focus:not(:focus-visible)::after
-            ) {
-        }
-
-        &:focus:extend(.ffe-button:focus) {
-        }
-
-        &:focus:extend(.ffe-button--secondary:focus) {
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                --background-color: var(--background-color-hover);
+                --border-color: var(--border-color-hover);
+                --color: var(--color-hover);
+            }
         }
 
         @media (hover: hover) and (pointer: fine) {
             &:hover:extend(.ffe-button--secondary:hover) {
             }
         }
-
-        &:active:extend(.ffe-button:active) {
-        }
-
-        &:active:extend(.ffe-button--secondary:active) {
-        }
-
-        &--loading {
-            &:extend(.ffe-button--loading);
-        }
-
-        &--loading &-label {
-            &:extend(.ffe-button--loading .ffe-button__label);
-        }
-
-        &--loading &-spinner {
-            &:extend(.ffe-button--loading .ffe-button__spinner);
-        }
     }
 
-    &__logout-button-spinner {
+    /*    &__logout-button-spinner {
         &:extend(.ffe-button__spinner);
 
         padding: 4px 16px;
@@ -256,13 +240,13 @@
                 transform: rotate(360deg);
             }
         }
-    }
+    }*/
 
-    &__logout-button-label {
+    /*    &__logout-button-label {
         &:extend(.ffe-button__label);
 
         color: var(--ffe-v-logout-button-label-color-text);
-    }
+    }*/
 
     &__user-icon,
     &__user-chevron-icon,

diff --git a/packages/ffe-header/less/theme.less b/packages/ffe-header/less/theme.less
@@ -16,7 +16,14 @@
     --ffe-v-usernav-link-hover-background-color: var(--ffe-farge-frost-30);
     --ffe-v-usernav-link-focus-background-color: var(--ffe-farge-frost-30);
     --ffe-v-usernav-list-border-color: var(--ffe-farge-vann);
-    --ffe-v-logout-button-label-color-text: var(--ffe-farge-vann);
+
+    --ffe-v-header-icon-button-color: var(--ffe-farge-vann);
+    --ffe-v-header-logout-color: var(--ffe-farge-vann);
+    --ffe-v-header-logout-color-hover: var(--ffe-farge-hvit);
+    --ffe-v-header-logout-border-color: var(--ffe-farge-vann);
+    --ffe-v-header-logout-border-color-hover: var(--ffe-farge-vann);
+    --ffe-v-header-logout-background-color: var(--ffe-farge-hvit);
+    --ffe-v-header-logout-background-color-hover: var(--ffe-farge-vann);
 
     @media (prefers-color-scheme: dark) {
         .regard-color-scheme-preference {
@@ -38,7 +45,16 @@
             --ffe-v-usernav-header-link-hover-focus-color: var(
                 --ffe-farge-svart
             );
-            --ffe-v-logout-button-label-color-text: var(--ffe-farge-vann-30);
+
+            --ffe-v-header-icon-button-color: var(--ffe-farge-vann-30);
+            --ffe-v-header-logout-color: var(--ffe-farge-vann-30);
+            --ffe-v-header-logout-color-hover: var(--ffe-farge-svart);
+            --ffe-v-header-logout-border-color: var(--ffe-farge-vann-70);
+            --ffe-v-header-logout-border-color-hover: var(--ffe-farge-vann-30);
+            --ffe-v-header-logout-background-color: var(--ffe-farge-svart);
+            --ffe-v-header-logout-background-color-hover: var(
+                --ffe-farge-vann-30
+            );
         }
     }
 }
diff --git a/packages/ffe-header/package.json b/packages/ffe-header/package.json
@@ -20,7 +20,6 @@
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.9.0",
-        "@sb1/ffe-buttons": "^19.0.8",
         "@sb1/ffe-core": "^29.1.3",
         "@sb1/ffe-webfonts": "^5.0.13",
         "less": "^4.1.2",