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/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"