Merged in feat/sw-3219-move-accordion-to-design-system (pull request #2601)

feat(SW-3219): Move accordion to design-system

* Inline types

* Move Accordion to design-system


Approved-by: Bianca Widstam

packages/design-system/lib/components/Accordion/AccordionItem/accordionItem.module.css

@@ -0,0 +1,62 @@
+.accordionItem {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.accordionItem.card {
+  padding: var(--Spacing-x1);
+}
+
+.accordionItem.sidepeek {
+  padding: var(--Spacing-x1) 0;
+}
+
+.summary {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  cursor: pointer;
+  color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  transition: background-color 0.3s;
+}
+.summary.card:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+.accordionItem.light .summary:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover);
+}
+.accordionItem.subtle .summary:hover {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.accordionItem.card .summary {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  border-radius: var(--Corner-radius-md);
+}
+
+.accordionItem.sidepeek .summary {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  align-items: center;
+}
+
+.title {
+  flex-grow: 1;
+}
+
+.content {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x1);
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.3s;
+}
+
+.chevron {
+  transition: transform 0.3s;
+  flex-shrink: 0;
+}
+details[open] .chevron {
+  transform: rotate(180deg);
+}

packages/design-system/lib/components/Accordion/AccordionItem/index.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { type ReactNode, useRef } from 'react'
+
+import Body from '../../Body'
+import { IconByIconName } from '../../Icons/IconByIconName'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import Subtitle from '../../Subtitle'
+
+import { accordionItemVariants } from './variants'
+
+import styles from './accordionItem.module.css'
+
+import type { IconName } from '../../Icons/iconName'
+import type { VariantProps } from 'class-variance-authority'
+
+export interface AccordionItemProps
+  extends React.HtmlHTMLAttributes<HTMLDetailsElement>,
+    VariantProps<typeof accordionItemVariants> {
+  title: string
+  iconName?: IconName
+  icon?: ReactNode
+  subtitle?: string
+  onOpen?: () => void
+}
+
+export default function AccordionItem({
+  children,
+  icon,
+  iconName,
+  title,
+  theme,
+  variant,
+  className,
+  subtitle,
+  onOpen,
+}: AccordionItemProps) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const detailsRef = useRef<HTMLDetailsElement>(null)
+
+  const IconComp = icon
+    ? icon
+    : iconName && (
+        <IconByIconName
+          iconName={iconName}
+          color="Icon/Interactive/Default"
+          size={24}
+        />
+      )
+
+  function toggleAccordion() {
+    const details = detailsRef.current
+    const content = contentRef.current
+    if (details && content) {
+      if (details.open) {
+        content.style.maxHeight = `${content.scrollHeight}px`
+        content.addEventListener(
+          'transitionend',
+          () => {
+            // Remove maxHeight after transition to allow content to transition multiple times
+            content.style.maxHeight = 'none'
+          },
+          { once: true }
+        )
+
+        onOpen?.()
+      } else {
+        content.style.maxHeight = '0'
+      }
+    }
+  }
+
+  return (
+    <li className={accordionItemVariants({ className, variant, theme })}>
+      <details ref={detailsRef} onToggle={toggleAccordion}>
+        <summary className={styles.summary}>
+          {IconComp}
+          {variant === 'sidepeek' ? (
+            <Subtitle
+              className={styles.title}
+              type="two"
+              color="baseTextHighContrast"
+            >
+              {title}
+            </Subtitle>
+          ) : (
+            <div className={styles.title}>
+              {subtitle ? (
+                <Subtitle type="two" color="baseTextHighContrast">
+                  {title}
+                </Subtitle>
+              ) : (
+                <Body textTransform="bold" color="baseTextHighContrast">
+                  {title}
+                </Body>
+              )}
+              {subtitle && <Body color="baseTextHighContrast">{subtitle}</Body>}
+            </div>
+          )}
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            className={styles.chevron}
+            color="Icon/Interactive/Default"
+            size={20}
+          />
+        </summary>
+        <div ref={contentRef} className={styles.content}>
+          {children}
+        </div>
+      </details>
+    </li>
+  )
+}

packages/design-system/lib/components/Accordion/AccordionItem/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './accordionItem.module.css'
+
+export const accordionItemVariants = cva(styles.accordionItem, {
+  variants: {
+    variant: {
+      card: styles.card,
+      sidepeek: styles.sidepeek,
+    },
+    theme: {
+      default: styles.default,
+      light: styles.light,
+      subtle: styles.subtle,
+    },
+  },
+  defaultVariants: {
+    variant: 'card',
+    theme: 'default',
+  },
+})

packages/design-system/lib/components/Accordion/accordion.module.css

@@ -0,0 +1,25 @@
+.accordion {
+  list-style: none;
+}
+
+.accordion.card {
+  border-radius: var(--Corner-radius-md);
+}
+
+.accordion.light {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+.accordion.subtle {
+  background-color: var(--Background-Primary);
+}
+
+.accordion li:last-child {
+  border: none;
+}
+
+.accordion details > summary {
+  list-style: none;
+}
+.accordion details > summary::-webkit-details-marker {
+  display: none;
+}

packages/design-system/lib/components/Accordion/index.tsx

@@ -0,0 +1,30 @@
+import { Children, cloneElement, isValidElement } from 'react'
+
+import { accordionVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+
+import type { AccordionItemProps } from './AccordionItem'
+
+interface AccordionProps
+  extends React.HtmlHTMLAttributes<HTMLUListElement>,
+    VariantProps<typeof accordionVariants> {}
+
+export default function Accordion({
+  children,
+  className,
+  theme,
+  variant,
+}: AccordionProps) {
+  return (
+    <ul className={accordionVariants({ className, variant, theme })}>
+      {Children.map(children, (child) => {
+        if (isValidElement<AccordionItemProps>(child)) {
+          return cloneElement(child, { variant, theme })
+        } else {
+          return child
+        }
+      })}
+    </ul>
+  )
+}

packages/design-system/lib/components/Accordion/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './accordion.module.css'
+
+export const accordionVariants = cva(styles.accordion, {
+  variants: {
+    variant: {
+      card: styles.card,
+      sidepeek: styles.sidepeek,
+    },
+    theme: {
+      default: styles.default,
+      light: styles.light,
+      subtle: styles.subtle,
+    },
+  },
+  defaultVariants: {
+    variant: 'card',
+    theme: 'default',
+  },
+})