From dde1c2b78faff401da9666cf0d97d6ca6237793f Mon Sep 17 00:00:00 2001
From: HeleneKassandra <helene.kassandra.juterud@sparebank1.no>
Date: Tue, 22 Aug 2023 16:50:10 +0200
Subject: [PATCH] fix(ffe-system-message): endre til material symbols BREAKING
 CHANGE: Endrer fra fill til color, fjerner svg-relatert styling

---
 .../less/system-message.less                  | 58 ++++---------------
 1 file changed, 12 insertions(+), 46 deletions(-)

diff --git a/packages/ffe-system-message/less/system-message.less b/packages/ffe-system-message/less/system-message.less
index e70cabb5a3..3f92f1914c 100644
--- a/packages/ffe-system-message/less/system-message.less
+++ b/packages/ffe-system-message/less/system-message.less
@@ -1,23 +1,5 @@
 // System message
 //
-// Markup:
-// <div class="ffe-system-message-wrapper ffe-system-message-wrapper{{modifier_class}}">
-//     <div class="ffe-system-message">
-//         <span class="ffe-system-message__icon">
-//             <svg focusable="false" viewBox="0 0 200 200" height="150" width="150">
-//                 <path d="M 99.881897,0.6403911 A 16.561559,16.561559 0 0 0 83.588292,17.412148 l 0,93.862982 a 16.561559,16.561559 0 1 0 33.102158,0 l 0,-93.862982 A 16.561559,16.561559 0 0 0 99.881897,0.6403911 z M 100.13937,162.6938 c -9.145783,0 -16.551078,7.4053 -16.551078,16.55107 0,9.1458 7.405295,16.58787 16.551078,16.58787 9.14579,0 16.55108,-7.44207 16.55108,-16.58787 0,-9.14577 -7.40529,-16.55107 -16.55108,-16.55107 z"></path>
-//             </svg>
-//         </span>
-//         <p class="ffe-system-message__content">Lorem ipsum dolor sit amet.</p>
-//         <button aria-label="Lukk" class="ffe-system-message__close"
-//             type="button">
-//             <svg focusable="false" viewBox="0 0 200 200" height="150" width="150">
-//                 <path d="M18.77,0c-3.562,0-7.125,1.347-9.834,4.044l-4.429,4.439c-5.381,5.394-5.381,14.25,0,19.68l71.19,71.83-71.66,71.83c-5.381,5.394-5.381,14.25,0,19.68l4.429,4.439c5.381,5.394,14.22,5.394,19.64,0l71.66-71.83,71.65,71.83c5.381,5.394,14.23,5.394,19.65,0l4.429-4.439c5.381-5.394,5.381-14.25,0-19.68l-71.19-71.83,71.66-71.83c5.381-4.914,5.381-13.78,0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64,0l-72.13,71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
-//             </svg>
-//         </button>
-//     </div>
-// </div>
-//
 // --error      - Error message
 // --info       - Generic info
 // --news       - News
@@ -27,7 +9,6 @@
 
 .ffe-system-message-wrapper {
     color: var(--ffe-farge-svart);
-    fill: currentColor;
     transition: height @ffe-transition-duration @ffe-ease-in-out-back;
     overflow: hidden;
     border-radius: @ffe-spacing-xs;
@@ -72,10 +53,10 @@
     }
     &--error {
         background-color: var(--ffe-v-system-message-error-bg-color);
-        fill: var(--ffe-farge-hvit);
 
         .ffe-system-message__icon {
             background: var(--ffe-v-system-message-error-icon-bg-color);
+            color: var(--ffe-farge-hvit);
         }
     }
 
@@ -89,29 +70,29 @@
     }
     &--info {
         background-color: var(--ffe-v-system-message-info-bg-color);
-        fill: var(--ffe-farge-hvit);
 
         .ffe-system-message__icon {
             background: var(--ffe-v-system-message-info-icon-bg-color);
+            color: var(--ffe-farge-hvit);
         }
     }
 
     &--news&--coloredbg {
         background-color: var(--ffe-v-system-message-variant-bg-color);
         color: var(--ffe-farge-svart);
-        fill: var(--ffe-farge-hvit);
         .native & {
             @media (prefers-color-scheme: dark) {
                 background-color: var(--ffe-v-system-message-news-bg-color);
                 color: var(--ffe-farge-hvit);
-                fill: var(--ffe-v-system-message-news-icon-color);
             }
         }
         .ffe-system-message__icon {
             background: var(--ffe-v-system-message-news-icon-color);
+            color: var(--ffe-farge-hvit);
             .native & {
                 @media (prefers-color-scheme: dark) {
                     background: var(--ffe-farge-hvit);
+                    color: var(--ffe-v-system-message-news-icon-color);
                 }
             }
         }
@@ -119,9 +100,9 @@
     &--news {
         background-color: var(--ffe-v-system-message-news-bg-color);
         color: var(--ffe-farge-hvit);
-        fill: var(--ffe-v-system-message-news-icon-color);
         .ffe-system-message__icon {
             background: var(--ffe-farge-hvit);
+            color: var(--ffe-v-system-message-news-icon-color);
         }
     }
 
@@ -135,9 +116,9 @@
     }
     &--success {
         background-color: var(--ffe-v-system-message-success-bg-color);
-        fill: var(--ffe-farge-hvit);
         .ffe-system-message__icon {
             background: var(--ffe-v-system-message-news-icon-bg-color);
+            color: var(--ffe-farge-hvit);
         }
     }
 }
@@ -159,13 +140,8 @@
         height: 2rem;
         width: 2rem;
         margin-right: @ffe-spacing-sm;
-
-        > svg {
-            height: 50%;
-            position: relative;
-            margin: auto;
-            width: 50%;
-        }
+        align-items: center;
+        justify-content: center;
     }
 
     &__content {
@@ -185,35 +161,25 @@
         background: transparent;
         border: 2px solid transparent;
         border-radius: 5px;
-        color: inherit;
         cursor: pointer;
         align-self: flex-start;
         width: 3rem;
         height: 3rem;
         padding-top: @ffe-spacing-xs;
         box-sizing: border-box;
-        fill: var(--ffe-v-system-message-close-button-color);
+        color: var(--ffe-v-system-message-close-button-color);
 
         &:hover {
-            fill: var(--ffe-v-system-message-close-button-color-hover);
+            color: var(--ffe-v-system-message-close-button-color-hover);
         }
         &:focus {
             border: 2px solid
                 var(--ffe-v-system-message-close-button-border-color-focus);
         }
-        > svg {
-            height: 1rem;
-            width: 1rem;
-            .native & {
-                @media (prefers-color-scheme: dark) {
-                    fill: inherit;
-                }
-            }
-        }
         .ffe-system-message-wrapper--news & {
-            fill: var(--ffe-farge-hvit);
+            color: var(--ffe-farge-hvit);
             &:hover {
-                fill: var(--ffe-farge-lysvarmgraa);
+                color: var(--ffe-farge-lysvarmgraa);
             }
             &:focus {
                 border: 2px solid var(--ffe-farge-hvit);