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.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/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> {}

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

@@ -1,19 +1,28 @@
-"use client"
+'use client'
 
-import { useRef } from "react"
+import { type ReactNode, 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 Body from '../../Body'
+import { IconByIconName } from '../../Icons/IconByIconName'
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import Subtitle from '../../Subtitle'
 
-import { trackAccordionClick } from "@/utils/tracking"
+import { accordionItemVariants } from './variants'
 
-import { accordionItemVariants } from "./variants"
+import styles from './accordionItem.module.css'
 
-import styles from "./accordionItem.module.css"
+import type { IconName } from '../../Icons/iconName'
+import type { VariantProps } from 'class-variance-authority'
 
-import type { AccordionItemProps } from "./accordionItem"
+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,
@@ -23,8 +32,8 @@ export default function AccordionItem({
   theme,
   variant,
   className,
-  trackingId,
   subtitle,
+  onOpen,
 }: AccordionItemProps) {
   const contentRef = useRef<HTMLDivElement>(null)
   const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -46,18 +55,17 @@ export default function AccordionItem({
       if (details.open) {
         content.style.maxHeight = `${content.scrollHeight}px`
         content.addEventListener(
-          "transitionend",
+          'transitionend',
           () => {
             // Remove maxHeight after transition to allow content to transition multiple times
-            content.style.maxHeight = "none"
+            content.style.maxHeight = 'none'
           },
           { once: true }
         )
-        if (trackingId) {
-          trackAccordionClick(trackingId)
-        }
+
+        onOpen?.()
       } else {
-        content.style.maxHeight = "0"
+        content.style.maxHeight = '0'
       }
     }
   }
@@ -67,7 +75,7 @@ export default function AccordionItem({
       <details ref={detailsRef} onToggle={toggleAccordion}>
         <summary className={styles.summary}>
           {IconComp}
-          {variant === "sidepeek" ? (
+          {variant === 'sidepeek' ? (
             <Subtitle
               className={styles.title}
               type="two"

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

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./accordionItem.module.css"
+import styles from './accordionItem.module.css'
 
 export const accordionItemVariants = cva(styles.accordionItem, {
   variants: {
@@ -15,7 +15,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
     },
   },
   defaultVariants: {
-    variant: "card",
-    theme: "default",
+    variant: 'card',
+    theme: 'default',
   },
 })

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

@@ -1,9 +1,14 @@
-import { Children, cloneElement, isValidElement } from "react"
+import { Children, cloneElement, isValidElement } from 'react'
 
-import { accordionVariants } from "./variants"
+import { accordionVariants } from './variants'
 
-import type { AccordionProps } from "./accordion"
-import type { AccordionItemProps } from "./AccordionItem/accordionItem"
+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,

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

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./accordion.module.css"
+import styles from './accordion.module.css'
 
 export const accordionVariants = cva(styles.accordion, {
   variants: {
@@ -15,7 +15,7 @@ export const accordionVariants = cva(styles.accordion, {
     },
   },
   defaultVariants: {
-    variant: "card",
-    theme: "default",
+    variant: 'card',
+    theme: 'default',
   },
 })

packages/design-system/package.json

@@ -4,6 +4,8 @@
   "version": "1.0.0-beta.1",
   "type": "module",
   "exports": {
+    "./Accordion": "./dist/components/Accordion/index.js",
+    "./Accordion/AccordionItem": "./dist/components/Accordion/AccordionItem/index.js",
     "./BackToTopButton": "./dist/components/BackToTopButton/index.js",
     "./Body": "./dist/components/Body/index.js",
     "./Button": "./dist/components/Button/index.js",