From d0f4d07a0afc0b6c6a3f5998cd0cca47052a6731 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Thu, 4 Jul 2024 11:23:32 +0200
Subject: [PATCH] feat: changes to variants and styling

---
 .../AccordionItem/accordionItem.module.css    | 26 +++++++++++++------
 .../Accordion/AccordionItem/index.tsx         |  3 ++-
 .../Accordion/AccordionItem/variants.ts       |  9 +++++--
 .../Accordion/accordion.module.css            |  9 ++++---
 .../TempDesignSystem/Accordion/index.tsx      |  5 ++--
 .../TempDesignSystem/Accordion/variants.ts    |  9 +++++--
 6 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
index fac317a58..234566ac5 100644
--- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
+++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
@@ -6,6 +6,13 @@
   padding: var(--Spacing-x1);
 }
 
+.accordionItem.light {
+  background-color: var(--Base-Surface-Primary-Normal);
+}
+.accordionItem.subtle {
+  background-color: var(--Base-Background-Normal);
+}
+
 .summary {
   position: relative;
   display: flex;
@@ -19,16 +26,22 @@
   transition: background-color 0.3s;
 }
 .summary:hover,
-.summary:focus {
-  background-color: var(--Base-Surface-Primary-light-Hover);
+.accordionItem details[open] .summary {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt, #f2ece6);
 }
+.accordionItem.light .summary:hover,
+.accordionItem.light details[open] .summary {
+  background-color: var(--Base-Surface-Primary-light-Hover, #f9f6f4);
+}
+.accordionItem.subtle .summary:hover,
+.accordionItem.subtle details[open] .summary {
+  background-color: var(--Base-Surface-Primary-Normal);
+}
+
 .accordionItem.card .summary {
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   border-radius: var(--Corner-radius-Medium);
 }
-.accordionItem.faq .summary {
-  padding: var(--Spacing-x2) 0;
-}
 
 .title {
   flex-grow: 1;
@@ -40,9 +53,6 @@
   max-height: 0;
   transition: max-height 0.3s;
 }
-.accordionItem.faq .content {
-  padding: 0;
-}
 
 .chevron {
   transition: transform 0.3s;
diff --git a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
index ccf81cd3a..84be2d010 100644
--- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -14,6 +14,7 @@ export default function AccordionItem({
   children,
   icon,
   title,
+  theme,
   variant,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
@@ -42,7 +43,7 @@ export default function AccordionItem({
   }
 
   return (
-    <li className={accordionItemVariants({ variant })}>
+    <li className={accordionItemVariants({ variant, theme })}>
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}
diff --git a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts
index f30eaaefa..dde0e253d 100644
--- a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts
+++ b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts
@@ -6,10 +6,15 @@ export const accordionItemVariants = cva(styles.accordionItem, {
   variants: {
     variant: {
       card: styles.card,
-      faq: styles.faq,
+    },
+    theme: {
+      default: styles.default,
+      light: styles.light,
+      subtle: styles.subtle,
     },
   },
   defaultVariants: {
-    variant: "faq",
+    variant: "card",
+    theme: "default",
   },
 })
diff --git a/components/TempDesignSystem/Accordion/accordion.module.css b/components/TempDesignSystem/Accordion/accordion.module.css
index 7e95784bd..63529495b 100644
--- a/components/TempDesignSystem/Accordion/accordion.module.css
+++ b/components/TempDesignSystem/Accordion/accordion.module.css
@@ -4,10 +4,11 @@
 
 .accordion.card {
   border-radius: var(--Corner-radius-Medium);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  background-color: white;
 }
 
-.accordion.faq {
-  background-color: var(--Base-Background-Primary-Normal);
+.accordion.light {
+  background-color: var(--Base-Surface-Primary-Normal);
+}
+.accordion.subtle {
+  background-color: var(--Base-Background-Normal);
 }
diff --git a/components/TempDesignSystem/Accordion/index.tsx b/components/TempDesignSystem/Accordion/index.tsx
index 98ba687e2..64afe99b9 100644
--- a/components/TempDesignSystem/Accordion/index.tsx
+++ b/components/TempDesignSystem/Accordion/index.tsx
@@ -7,13 +7,14 @@ import { accordionVariants } from "./variants"
 export default function Accordion({
   children,
   className,
+  theme,
   variant,
 }: AccordionProps) {
   return (
-    <ul className={accordionVariants({ className, variant })}>
+    <ul className={accordionVariants({ className, variant, theme })}>
       {Children.map(children, (child) => {
         if (isValidElement<AccordionItemProps>(child)) {
-          return cloneElement(child, { variant })
+          return cloneElement(child, { variant, theme })
         } else {
           return child
         }
diff --git a/components/TempDesignSystem/Accordion/variants.ts b/components/TempDesignSystem/Accordion/variants.ts
index 7b12f74d7..6fd5b8a7f 100644
--- a/components/TempDesignSystem/Accordion/variants.ts
+++ b/components/TempDesignSystem/Accordion/variants.ts
@@ -6,10 +6,15 @@ export const accordionVariants = cva(styles.accordion, {
   variants: {
     variant: {
       card: styles.card,
-      faq: styles.faq,
+    },
+    theme: {
+      default: styles.default,
+      light: styles.light,
+      subtle: styles.subtle,
     },
   },
   defaultVariants: {
-    variant: "faq",
+    variant: "card",
+    theme: "default",
   },
 })