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
This commit is contained in:
Anton Gunnarsson
@@ -1,62 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import type { IconName } from "@scandic-hotels/design-system/Icons/iconName"
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
import type { accordionItemVariants } from "./variants"
|
||||
|
||||
export interface AccordionItemProps
|
||||
extends React.HtmlHTMLAttributes<HTMLDetailsElement>,
|
||||
VariantProps<typeof accordionItemVariants> {
|
||||
title: string
|
||||
iconName?: IconName
|
||||
icon?: ReactNode
|
||||
trackingId?: string
|
||||
subtitle?: string
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useRef } from "react"
|
||||
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
|
||||
import { trackAccordionClick } from "@/utils/tracking"
|
||||
|
||||
import { accordionItemVariants } from "./variants"
|
||||
|
||||
import styles from "./accordionItem.module.css"
|
||||
|
||||
import type { AccordionItemProps } from "./accordionItem"
|
||||
|
||||
export default function AccordionItem({
|
||||
children,
|
||||
icon,
|
||||
iconName,
|
||||
title,
|
||||
theme,
|
||||
variant,
|
||||
className,
|
||||
trackingId,
|
||||
subtitle,
|
||||
}: 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 }
|
||||
)
|
||||
if (trackingId) {
|
||||
trackAccordionClick(trackingId)
|
||||
}
|
||||
} 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>
|
||||
)
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
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",
|
||||
},
|
||||
})
|
||||
@@ -1,25 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import type { VariantProps } from "class-variance-authority"
|
||||
|
||||
import type { accordionVariants } from "./variants"
|
||||
|
||||
export interface AccordionProps
|
||||
extends React.HtmlHTMLAttributes<HTMLUListElement>,
|
||||
VariantProps<typeof accordionVariants> {}
|
||||
@@ -1,25 +0,0 @@
|
||||
import { Children, cloneElement, isValidElement } from "react"
|
||||
|
||||
import { accordionVariants } from "./variants"
|
||||
|
||||
import type { AccordionProps } from "./accordion"
|
||||
import type { AccordionItemProps } from "./AccordionItem/accordionItem"
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
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",
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user