Merge pull request #2481 from SpareBank1/semantiske-farger-accordion

Semantiske farger accordion

.storybook/main.ts

@@ -1,5 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite';
-
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
 import { join, dirname } from 'path';
 
 /**

packages/ffe-accordion/less/ffe-accordion.less

@@ -1,2 +1,116 @@
-@import 'theme';
-@import 'accordion';
+.ffe-accordion {
+    --ffe-v-accordion-hover-color: var(
+        --ffe-color-surface-primary-default-hover
+    );
+    --ffe-v-accordion-border-color: var(--ffe-color-border-primary-subtle);
+    --ffe-v-accordion-border-hover-color: var(--ffe-color-border-primary-hover);
+    --ffe-v-accordion-border-focus-color: var(
+        --ffe-color-border-interactive-focus
+    );
+    --ffe-v-accordion-header-text-color: var(--ffe-color-foreground-emphasis);
+    --ffe-v-accordion-body-text-color: var(--ffe-color-foreground-default);
+
+    width: 100%;
+    border: var(--ffe-g-border-width) solid transparent;
+    font-family: var(--ffe-g-font);
+
+    .ffe-accordion-item__heading {
+        margin: 0;
+    }
+
+    .ffe-accordion-item {
+        color: var(--ffe-v-accordion-body-text-color);
+        margin-bottom: var(--ffe-spacing-xs);
+        transition: all var(--ffe-transition-duration)
+            var(--ffe-ease);
+        border-radius: 16px;
+        border: var(--ffe-g-border-width) solid
+            var(--ffe-v-accordion-border-color);
+
+        @media (hover: hover) and (pointer: fine) {
+            &:hover {
+                border-color: var(--ffe-v-accordion-border-hover-color);
+            }
+        }
+
+        &__heading,
+        &__body {
+            overflow-wrap: anywhere;
+            margin: 0;
+        }
+
+        &__heading-button {
+            width: 100%;
+            background: none;
+            border: none;
+            padding: var(--ffe-spacing-sm);
+            font-family: var(--ffe-g-font-heading-small);
+            cursor: pointer;
+            outline: none;
+            color: var(--ffe-v-accordion-header-text-color);
+            border-radius: 16px;
+            transition: background-color var(--ffe-transition-duration)
+                var(--ffe-ease);
+
+            &--open {
+                border-radius: 16px 16px 0 0;
+            }
+
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    background-color: var(--ffe-v-accordion-hover-color);
+                }
+            }
+        }
+
+        &__heading-button-content {
+            text-align: left;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--ffe-spacing-xs);
+        }
+
+        &__heading-icon-wrapper {
+            line-height: 0;
+        }
+
+        &__heading-icon.ffe-icons {
+            display: block;
+            flex: 0 0 auto;
+            color: var(--ffe-v-accordion-header-text-color);
+            transition:
+                transform var(--ffe-transition-duration)
+                    var(--ffe-ease-in-out-back),
+                color var(--ffe-transition-duration) var(--ffe-ease);
+        }
+
+        &__body {
+            padding: var(--ffe-spacing-xs) var(--ffe-spacing-sm)
+                var(--ffe-spacing-md);
+            color: var(--ffe-v-accordion-body-text-color);
+        }
+
+        &--open {
+            &:not(:last-of-type) {
+                margin-bottom: var(--ffe-spacing-md);
+            }
+
+            .ffe-accordion-item__heading-icon {
+                transform: rotateZ(180deg);
+            }
+        }
+
+        &--focus {
+            box-shadow: 0 0 0 var(--ffe-g-border-width-focus)
+                var(--ffe-v-accordion-border-focus-color);
+
+            @media (hover: hover) and (pointer: fine) {
+                &:hover {
+                    border-color: var(--ffe-v-accordion-border-color);
+                }
+            }
+        }
+    }
+}