From 37b406de53c6f346099af38eb1265ca12f2e8d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= <tuva.odegard@sparebank1.no>
Date: Mon, 19 Aug 2024 13:57:55 +0200
Subject: [PATCH] feat(ffe-cards): groupcard, fjernet nopadding og oppdatert
 utseende

---
 packages/ffe-cards/less/group-card.less | 66 +++++++++++++++++++++----
 packages/ffe-cards/less/theme.less      |  5 ++
 2 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/packages/ffe-cards/less/group-card.less b/packages/ffe-cards/less/group-card.less
index 9df93aeeb8..4179b5bed2 100644
--- a/packages/ffe-cards/less/group-card.less
+++ b/packages/ffe-cards/less/group-card.less
@@ -5,10 +5,10 @@
     .card-background-styling();
 
     border: none;
-    box-shadow: none;
+    box-shadow: var(--ffe-v-cards-common-card-box-shadow);
 
-    &--shadow {
-        box-shadow: var(--ffe-v-cards-common-card-box-shadow);
+    &--no-shadow {
+        box-shadow: none;
     }
 
     & > :first-child {
@@ -25,16 +25,26 @@
         border-radius: var(--ffe-v-cards-common-card-border-radius);
     }
 
-    &__element {
-        padding: var(--ffe-spacing-sm);
-        border: 2px solid transparent;
-        transition: all var(--ffe-transition-duration) var(--ffe-ease);
-        margin: 0;
+    &__title {
+        .ffe-h6();
+
+        padding: var(--ffe-spacing-sm) var(--ffe-spacing-md);
+        border: 1px solid transparent;
+        border-bottom-color: var(
+            --ffe-v-cards-common-group-card-separation-border-color
+        );
+        margin-bottom: 0;
 
-        &--no-padding {
-            padding: 0;
+        &--no-separator {
+            border-bottom-color: transparent;
         }
+    }
 
+    &__element {
+        padding: var(--ffe-spacing-md);
+        border: 1px solid transparent;
+        transition: all var(--ffe-transition-duration) var(--ffe-ease);
+        margin: 0;
         border-bottom-color: var(
             --ffe-v-cards-common-group-card-separation-border-color
         );
@@ -48,12 +58,48 @@
             .clickable-card-styling();
         }
     }
+
+    &__footer {
+        padding: var(--ffe-spacing-sm) var(--ffe-spacing-md);
+        border: 1px solid transparent;
+        background-color: var(--ffe-v-group-card-footer-background-color);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &--clickable {
+            .clickable-card-styling();
+
+            color: var(--ffe-farge-fjell);
+        }
+    }
 }
 
 .native & {
     @media (prefers-color-scheme: dark) {
         .ffe-group-card {
             .card-background-dm-styling();
+
+            box-shadow: none;
+            border: 1px solid
+                var(--ffe-v-cards-common-group-card-separation-border-color-dm);
+
+            &__title {
+                color: var(--ffe-farge-vann-30);
+            }
+
+            &__title,
+            &__element {
+                border-bottom-color: var(
+                    --ffe-v-cards-common-group-card-separation-border-color-dm
+                );
+            }
+
+            &__footer {
+                background-color: var(
+                    --ffe-v-group-card-footer-background-color-dm
+                );
+            }
         }
     }
 }
diff --git a/packages/ffe-cards/less/theme.less b/packages/ffe-cards/less/theme.less
index f5fb581251..0d953c9ad6 100644
--- a/packages/ffe-cards/less/theme.less
+++ b/packages/ffe-cards/less/theme.less
@@ -12,6 +12,11 @@
     --ffe-v-cards-common-group-card-separation-border-color: var(
         --ffe-farge-lysgraa
     );
+    --ffe-v-cards-common-group-card-separation-border-color-dm: var(
+        --ffe-farge-koksgraa
+    );
+    --ffe-v-group-card-footer-background-color: var(--ffe-farge-syrin-30);
+    --ffe-v-group-card-footer-background-color-dm: var(--ffe-farge-koksgraa);
 
     @media (prefers-color-scheme: dark) {
         .native {