From 7f8e8d6c021a7d8141da7e0e50e4a5fbcbc177d2 Mon Sep 17 00:00:00 2001
From: HeleneKassandra <helene.kassandra.juterud@sparebank1.no>
Date: Wed, 13 Mar 2024 13:10:29 +0100
Subject: [PATCH] feat(ffe-lists): legg til detailListCard komponent styling

---
 packages/ffe-lists/less/detail-list-card.less | 72 +++++++++++++++++++
 packages/ffe-lists/less/lists.less            |  1 +
 packages/ffe-lists/less/theme.less            |  6 +-
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 packages/ffe-lists/less/detail-list-card.less

diff --git a/packages/ffe-lists/less/detail-list-card.less b/packages/ffe-lists/less/detail-list-card.less
new file mode 100644
index 0000000000..80c548bfcb
--- /dev/null
+++ b/packages/ffe-lists/less/detail-list-card.less
@@ -0,0 +1,72 @@
+.ffe-detail-list-card {
+    background-color: var(--ffe-v-detail-list-card-background-color);
+    border-radius: var(--ffe-v-detail-list-card-border-radius);
+    font-family: var(--ffe-g-font);
+    font-variant-numeric: tabular-nums;
+
+    &__item:not(:last-child) {
+        border-bottom: 1px solid var(--ffe-v-detail-list-card-border-color);
+    }
+
+    &__item {
+        padding: var(--ffe-spacing-sm);
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: var(--ffe-spacing-xs);
+        overflow-wrap: anywhere;
+        text-wrap: balance;
+
+        &:is(button) {
+            background-color: transparent;
+            border: 0;
+            width: 100%;
+            color: inherit;
+        }
+
+        &:is(a) {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        &:is(:first-child) {
+            border-radius: var(--ffe-v-detail-list-card-border-radius)
+                var(--ffe-v-detail-list-card-border-radius) 0 0;
+        }
+
+        &:is(:last-child) {
+            border-radius: 0 0 var(--ffe-v-detail-list-card-border-radius)
+                var(--ffe-v-detail-list-card-border-radius);
+        }
+
+        &-label {
+            font-family: var(--ffe-g-font-heading-small);
+            color: var(--ffe-g-secondary-color);
+        }
+
+        &-value {
+            margin: 0; // Removes the default dd-element margin when it breaks to a new line
+            display: flex;
+            align-items: center;
+        }
+
+        &--clickable {
+            cursor: pointer;
+
+            &:focus-visible {
+                box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+                outline: none;
+            }
+
+            @media (hover: hover) {
+                &:hover {
+                    box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+                    outline: none;
+                }
+            }
+        }
+        @media (max-width: 299px) {
+            flex-direction: column;
+        }
+    }
+}
diff --git a/packages/ffe-lists/less/lists.less b/packages/ffe-lists/less/lists.less
index e9a2b4712a..9a60a22a7e 100644
--- a/packages/ffe-lists/less/lists.less
+++ b/packages/ffe-lists/less/lists.less
@@ -1,3 +1,4 @@
 @import 'theme';
 @import './regular-lists.less';
 @import './description-list.less';
+@import './detail-list-card.less';
diff --git a/packages/ffe-lists/less/theme.less b/packages/ffe-lists/less/theme.less
index 7392624e98..dc65714441 100644
--- a/packages/ffe-lists/less/theme.less
+++ b/packages/ffe-lists/less/theme.less
@@ -4,7 +4,9 @@
     --ffe-v-lists-description-description-color: var(--ffe-farge-svart);
     --ffe-v-lists-check-list-check-icon-color: var(--ffe-farge-skog);
     --ffe-v-lists-check-list-cross-icon-color: var(--ffe-farge-baer);
-
+    --ffe-v-detail-list-card-background-color: var(--ffe-farge-hvit);
+    --ffe-v-detail-list-card-border-color: var(--ffe-farge-lysgraa);
+    --ffe-v-detail-list-card-border-radius: 16px;
     @media (prefers-color-scheme: dark) {
         .native {
             --ffe-v-lists-title-color: var(--ffe-farge-hvit);
@@ -12,6 +14,8 @@
                 --ffe-farge-lysgraa
             );
             --ffe-v-lists-check-list-check-icon-color: var(--ffe-farge-skog-70);
+            --ffe-v-detail-list-card-background-color: #1c1c1c;
+            --ffe-v-detail-list-card-border-color: var(--ffe-farge-koksgraa);
         }
     }
 }