From 8824af240b664bd70bdb96bbc7d1d9ac0e0bad6e Mon Sep 17 00:00:00 2001 From: Anton Gunnarsson Date: Thu, 7 Aug 2025 14:30:36 +0000 Subject: [PATCH] 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 --- .../components/Blocks/Accordion/index.tsx | 5 ++- .../DestinationsList/Destination/index.tsx | 2 +- .../HotelsSection/DestinationsList/index.tsx | 3 +- .../HotelPage/SidePeeks/Amenities/index.tsx | 2 +- .../Ancillaries/AddedAncillaries/index.tsx | 4 +- .../Accordions/Accessibility.tsx | 5 ++- .../Accordions/Breakfast.tsx | 5 ++- .../Accordions/CheckInCheckOut.tsx | 5 ++- .../Accordions/Parking.tsx | 5 ++- .../SidePeeks/BookedRoomSidePeek/index.tsx | 4 +- .../SidePeeks/HotelSidePeek/index.tsx | 2 +- .../Accordion/AccordionItem/accordionItem.ts | 15 ------- .../TempDesignSystem/Accordion/accordion.ts | 7 --- .../AccordionItem/accordionItem.module.css | 0 .../Accordion/AccordionItem/index.tsx | 44 +++++++++++-------- .../Accordion/AccordionItem/variants.ts | 8 ++-- .../Accordion/accordion.module.css | 0 .../lib/components}/Accordion/index.tsx | 13 ++++-- .../lib/components}/Accordion/variants.ts | 8 ++-- packages/design-system/package.json | 2 + 20 files changed, 68 insertions(+), 71 deletions(-) delete mode 100644 apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts delete mode 100644 apps/scandic-web/components/TempDesignSystem/Accordion/accordion.ts rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Accordion/AccordionItem/accordionItem.module.css (100%) rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Accordion/AccordionItem/index.tsx (70%) rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Accordion/AccordionItem/variants.ts (68%) rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Accordion/accordion.module.css (100%) rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Accordion/index.tsx (54%) rename {apps/scandic-web/components/TempDesignSystem => packages/design-system/lib/components}/Accordion/variants.ts (68%) diff --git a/apps/scandic-web/components/Blocks/Accordion/index.tsx b/apps/scandic-web/components/Blocks/Accordion/index.tsx index 06867a84c..5b9634dfc 100644 --- a/apps/scandic-web/components/Blocks/Accordion/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx index 490428f54..9c42670c4 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/Destination/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/index.tsx index 5fe75ecd0..15f29be8c 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/DestinationsList/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx index 94f4ec20e..2a183f7b2 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx index b827550f8..d8230ae9a 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx index 7aacfe7d2..5be4738ae 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Accessibility.tsx +++ b/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")} >
diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx index 44a3e55e1..7a06a40b8 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx +++ b/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 ? ( trackAccordionClick("amenities:check-in")} >
diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx index f50847fcf..9e8a94562 100644 --- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx +++ b/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")} >
{elevatorPitch ? ( diff --git a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx index 7a759ae0c..40989b6b6 100644 --- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx index c03d7ac76..9e1c4a85a 100644 --- a/apps/scandic-web/components/SidePeeks/HotelSidePeek/index.tsx +++ b/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" diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts b/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts deleted file mode 100644 index 128344876..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts +++ /dev/null @@ -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, - VariantProps { - title: string - iconName?: IconName - icon?: ReactNode - trackingId?: string - subtitle?: string -} diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/accordion.ts b/apps/scandic-web/components/TempDesignSystem/Accordion/accordion.ts deleted file mode 100644 index 1d2417512..000000000 --- a/apps/scandic-web/components/TempDesignSystem/Accordion/accordion.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { VariantProps } from "class-variance-authority" - -import type { accordionVariants } from "./variants" - -export interface AccordionProps - extends React.HtmlHTMLAttributes, - VariantProps {} diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/packages/design-system/lib/components/Accordion/AccordionItem/accordionItem.module.css similarity index 100% rename from apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css rename to packages/design-system/lib/components/Accordion/AccordionItem/accordionItem.module.css diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/packages/design-system/lib/components/Accordion/AccordionItem/index.tsx similarity index 70% rename from apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx rename to packages/design-system/lib/components/Accordion/AccordionItem/index.tsx index 052581e52..ddb1f4385 100644 --- a/apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx +++ b/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, + VariantProps { + 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(null) const detailsRef = useRef(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({
{IconComp} - {variant === "sidepeek" ? ( + {variant === 'sidepeek' ? ( , + VariantProps {} export default function Accordion({ children, diff --git a/apps/scandic-web/components/TempDesignSystem/Accordion/variants.ts b/packages/design-system/lib/components/Accordion/variants.ts similarity index 68% rename from apps/scandic-web/components/TempDesignSystem/Accordion/variants.ts rename to packages/design-system/lib/components/Accordion/variants.ts index 0ed8a67fc..3a1035a56 100644 --- a/apps/scandic-web/components/TempDesignSystem/Accordion/variants.ts +++ b/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', }, }) diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 279d1c9a9..0140c5c91 100644 --- a/packages/design-system/package.json +++ b/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",