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

apps/scandic-web/components/Blocks/Accordion/index.tsx

@@ -2,11 +2,12 @@
 
 import { useState } from "react"
 
+import Accordion from "@scandic-hotels/design-system/Accordion"
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
+
 import JsonToHtml from "@/components/JsonToHtml"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
-import Accordion from "@/components/TempDesignSystem/Accordion"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
 import styles from "./accordion.module.css"

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx

@@ -1,6 +1,6 @@
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/index.tsx

@@ -1,7 +1,6 @@
+import Accordion from "@scandic-hotels/design-system/Accordion"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 
-import Accordion from "@/components/TempDesignSystem/Accordion"
-
 import Destination from "./Destination"
 
 import styles from "./destinationsList.module.css"

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx

@@ -1,3 +1,4 @@
+import Accordion from "@scandic-hotels/design-system/Accordion"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 
 import AccessibilityAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility"
@@ -5,7 +6,6 @@ import BreakfastAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekCont
 import CheckInCheckOutAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut"
 import ParkingAccordionItem from "@/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking"
 import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
-import Accordion from "@/components/TempDesignSystem/Accordion"
 import { getIntl } from "@/i18n"
 import { appendSlugToPathname } from "@/utils/appendSlugToPathname"
 

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -1,14 +1,14 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import Accordion from "@scandic-hotels/design-system/Accordion"
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import Body from "@scandic-hotels/design-system/Body"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 
-import Accordion from "@/components/TempDesignSystem/Accordion"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage"

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx

@@ -2,11 +2,12 @@
 
 import { useIntl } from "react-intl"
 
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import { trackAccordionClick } from "@/utils/tracking"
 
 import styles from "./sidePeekAccordion.module.css"
 
@@ -30,7 +31,7 @@ export default function AccessibilityAccordionItem({
       iconName={IconName.Accessibility}
       className={styles.accordionItem}
       variant="sidepeek"
-      trackingId="amenities:accessibility"
+      onOpen={() => trackAccordionClick("amenities:accessibility")}
     >
       <div className={styles.accessibilityContent}>
         <Typography variant="Body/Paragraph/mdRegular">

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx

@@ -3,12 +3,13 @@
 import { useIntl } from "react-intl"
 
 import { isDefined } from "@scandic-hotels/common/utils/isDefined"
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
 
 import OpeningHours from "@/components/OpeningHours"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import { trackAccordionClick } from "@/utils/tracking"
 
 import styles from "./sidePeekAccordion.module.css"
 
@@ -42,7 +43,7 @@ export default function BreakfastAccordionItem({
       iconName={IconName.CoffeeAlt}
       variant="sidepeek"
       className={styles.accordionItem}
-      trackingId="amenities:breakfast"
+      onOpen={() => trackAccordionClick("amenities:breakfast")}
     >
       {openingHours ? (
         <OpeningHours

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/CheckInCheckOut.tsx

@@ -2,11 +2,12 @@
 
 import { useIntl } from "react-intl"
 
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import { trackAccordionClick } from "@/utils/tracking"
 
 import styles from "./sidePeekAccordion.module.css"
 
@@ -25,7 +26,7 @@ export default function CheckInCheckOutAccordionItem({
       iconName={IconName.Business}
       variant="sidepeek"
       className={styles.accordionItem}
-      trackingId="amenities:check-in"
+      onOpen={() => trackAccordionClick("amenities:check-in")}
     >
       <div className={styles.checkInCheckOutContent}>
         <Typography variant="Title/Overline/sm">

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx

@@ -2,12 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
 import ParkingInformation from "@/components/ParkingInformation"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import { trackAccordionClick } from "@/utils/tracking"
 
 import styles from "./sidePeekAccordion.module.css"
 
@@ -32,7 +33,7 @@ export default function ParkingAccordionItem({
       iconName={IconName.Parking}
       variant="sidepeek"
       className={styles.accordionItem}
-      trackingId="amenities:parking"
+      onOpen={() => trackAccordionClick("amenities:parking")}
     >
       <div className={styles.parkingContent}>
         {elevatorPitch ? (

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx

@@ -2,6 +2,8 @@ import { useIntl } from "react-intl"
 
 import { changeOrCancelDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import Accordion from "@scandic-hotels/design-system/Accordion"
+import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import IconChip from "@scandic-hotels/design-system/IconChip"
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -14,8 +16,6 @@ import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
 import { sumPackages } from "@/components/HotelReservation/utils"
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
 import ImageGallery from "@/components/ImageGallery"
-import Accordion from "@/components/TempDesignSystem/Accordion"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import useLang from "@/hooks/useLang"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx

@@ -2,13 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import Accordion from "@scandic-hotels/design-system/Accordion"
 import SidePeek from "@scandic-hotels/design-system/SidePeek"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import ButtonLink from "@/components/ButtonLink"
 import Contact from "@/components/HotelReservation/Contact"
 import AdditionalAmenities from "@/components/SidePeeks/AmenitiesSidepeekContent/AdditionalAmenities"
-import Accordion from "@/components/TempDesignSystem/Accordion"
 
 import AccessibilityAccordionItem from "../AmenitiesSidepeekContent/Accordions/Accessibility"
 import BreakfastAccordionItem from "../AmenitiesSidepeekContent/Accordions/Breakfast"

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -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);
-}

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts

@@ -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
-}

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -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>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/variants.ts

@@ -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",
-  },
-})

apps/scandic-web/components/TempDesignSystem/Accordion/accordion.module.css

@@ -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;
-}

apps/scandic-web/components/TempDesignSystem/Accordion/accordion.ts

@@ -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> {}

apps/scandic-web/components/TempDesignSystem/Accordion/index.tsx

@@ -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>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Accordion/variants.ts

@@ -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",
-  },
-})