Merge remote-tracking branch 'origin' into feature/tracking

2024-12-05 15:12:09 +01:00
parent 7b56bd0cda 963df41ed5
commit 6a4364e1c4
114 changed files with 1388 additions and 653 deletions
--- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
+++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
@@ -6,6 +6,10 @@
  padding: var(--Spacing-x1);
 }

+.accordionItem.sidepeek {
+  padding: var(--Spacing-x1) 0;
+}
+
 .summary {
  position: relative;
  display: flex;
@@ -18,7 +22,7 @@
  font-weight: var(--typography-Body-Bold-fontWeight);
  transition: background-color 0.3s;
 }
-.summary:hover {
+.summary.card:hover {
  background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 .accordionItem.light .summary:hover {
@@ -33,6 +37,11 @@
  border-radius: var(--Corner-radius-Medium);
 }

+.accordionItem.sidepeek .summary {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  align-items: center;
+}
+
 .title {
  flex-grow: 1;
 }
--- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -50,16 +50,10 @@ export default function AccordionItem({
    <li className={accordionItemVariants({ className, variant, theme })}>
      <details ref={detailsRef} onToggle={toggleAccordion}>
        <summary className={styles.summary}>
-          {IconComp && <IconComp className={styles.icon} color="burgundy" />}
-          {variant === "card" ? (
-            <Body
-              textTransform="bold"
-              color="baseTextHighContrast"
-              className={styles.title}
-            >
-              {title}
-            </Body>
-          ) : (
+          {IconComp && (
+            <IconComp className={styles.icon} color="baseTextHighcontrast" />
+          )}
+          {variant === "sidepeek" ? (
            <Subtitle
              className={styles.title}
              type="two"
@@ -67,6 +61,14 @@ export default function AccordionItem({
            >
              {title}
            </Subtitle>
+          ) : (
+            <Body
+              textTransform="bold"
+              color="baseTextHighContrast"
+              className={styles.title}
+            >
+              {title}
+            </Body>
          )}
          <ChevronDownIcon
            className={styles.chevron}
--- a/components/TempDesignSystem/Accordion/AccordionItem/variants.ts
+++ b/components/TempDesignSystem/Accordion/AccordionItem/variants.ts
@@ -6,6 +6,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
  variants: {
    variant: {
      card: styles.card,
+      sidepeek: styles.sidepeek,
    },
    theme: {
      default: styles.default,
--- a/components/TempDesignSystem/Accordion/variants.ts
+++ b/components/TempDesignSystem/Accordion/variants.ts
@@ -6,6 +6,7 @@ export const accordionVariants = cva(styles.accordion, {
  variants: {
    variant: {
      card: styles.card,
+      sidepeek: styles.sidepeek,
    },
    theme: {
      default: styles.default,
--- a/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx
@@ -2,7 +2,7 @@

 import { useState } from "react"

-import { ChevronRightIcon } from "@/components/Icons"
+import { ChevronRightSmallIcon } from "@/components/Icons"
 import JsonToHtml from "@/components/JsonToHtml"
 import Button from "@/components/TempDesignSystem/Button"

@@ -31,7 +31,7 @@ export default function TeaserCardSidepeek({
        wrapping
      >
        {button.call_to_action_text}
-        <ChevronRightIcon height={20} width={20} />
+        <ChevronRightSmallIcon />
      </Button>
      <SidePeek
        title={heading}
@@ -44,13 +44,7 @@ export default function TeaserCardSidepeek({
        />
        <div className={styles.ctaContainer}>
          {primary_button && (
-            <Button
-              asChild
-              theme="base"
-              intent="primary"
-              size="small"
-              className={styles.ctaButton}
-            >
+            <Button asChild theme="base" intent="primary" size="small">
              <Link
                href={primary_button.href}
                target={primary_button.openInNewTab ? "_blank" : undefined}
@@ -61,12 +55,7 @@ export default function TeaserCardSidepeek({
            </Button>
          )}
          {secondary_button && (
-            <Button
-              asChild
-              intent="secondary"
-              size="small"
-              className={styles.ctaButton}
-            >
+            <Button asChild intent="secondary" size="small">
              <Link
                href={secondary_button.href}
                target={secondary_button.openInNewTab ? "_blank" : undefined}
--- a/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/components/TempDesignSystem/TeaserCard/index.tsx
@@ -41,9 +41,7 @@ export default function TeaserCard({
        <Subtitle textAlign="left" type="two" color="black">
          {title}
        </Subtitle>
-        <Body color="black" className={styles.body}>
-          {description}
-        </Body>
+        <Body color="black">{description}</Body>
        {sidePeekButton && sidePeekContent ? (
          <TeaserCardSidepeek
            button={sidePeekButton}
@@ -77,6 +75,8 @@ export default function TeaserCard({
                <Link
                  href={secondaryButton.href}
                  target={secondaryButton.openInNewTab ? "_blank" : undefined}
+                  color="burgundy"
+                  weight="bold"
                >
                  {secondaryButton.title}
                </Link>