diff --git a/apps/partner-sas/components/LanguageSwitcher/index.tsx b/apps/partner-sas/components/LanguageSwitcher/index.tsx index 547343375..2e6193670 100644 --- a/apps/partner-sas/components/LanguageSwitcher/index.tsx +++ b/apps/partner-sas/components/LanguageSwitcher/index.tsx @@ -17,7 +17,7 @@ import { } from "@scandic-hotels/common/constants/language" import { Button } from "@scandic-hotels/design-system/Button" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { languageSwitcherVariants } from "./variants" diff --git a/apps/partner-sas/components/Menu/FooterMenu/index.tsx b/apps/partner-sas/components/Menu/FooterMenu/index.tsx index fc3091c1f..64f63a5e1 100644 --- a/apps/partner-sas/components/Menu/FooterMenu/index.tsx +++ b/apps/partner-sas/components/Menu/FooterMenu/index.tsx @@ -11,7 +11,7 @@ import { rates, } from "@scandic-hotels/common/constants/routes/customerService" import { sasEuroBonus } from "@scandic-hotels/common/constants/routes/sasEuroBonus" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { LanguageSwitcher } from "@/components/LanguageSwitcher" diff --git a/apps/partner-sas/components/Menu/NavigationMenu/index.tsx b/apps/partner-sas/components/Menu/NavigationMenu/index.tsx index 99f26af13..8fc9f60e4 100644 --- a/apps/partner-sas/components/Menu/NavigationMenu/index.tsx +++ b/apps/partner-sas/components/Menu/NavigationMenu/index.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl" import { customerService } from "@scandic-hotels/common/constants/routes/customerService" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { LanguageSwitcher } from "@/components/LanguageSwitcher" diff --git a/apps/partner-sas/components/Menu/index.tsx b/apps/partner-sas/components/Menu/index.tsx index 1e9bb37ba..3b35d729b 100644 --- a/apps/partner-sas/components/Menu/index.tsx +++ b/apps/partner-sas/components/Menu/index.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react" import { useMediaQuery } from "usehooks-ts" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx index 13acdca2d..c78019d27 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx @@ -55,7 +55,11 @@ export default async function HotelPagePage( } else { return (
- +
) } diff --git a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx index fc5056dc4..920c5bc1c 100644 --- a/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx +++ b/apps/scandic-web/app/[lang]/(no-layout)/(protected)/link-employment-error/page.tsx @@ -7,7 +7,7 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { supportEmail, supportPhone } from "@/constants/contactSupport" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx index dc3b093fa..78dfce782 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/components/SASModal.tsx @@ -2,7 +2,7 @@ import { useIntl } from "react-intl" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./SASModal.module.css" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx index 6f4201364..04cf04726 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/layout.tsx @@ -2,7 +2,7 @@ import { ArrowLeft } from "react-feather" import { overview as profileOverview } from "@scandic-hotels/common/constants/routes/myPages" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { getIntl } from "@/i18n" import background from "@/public/_static/img/partner/sas/sas_x_scandic_airplane_window_background.jpg" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx index 31e53d6d5..832a7287e 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/link/LinkAccountForm.tsx @@ -9,8 +9,8 @@ import { profileEdit } from "@scandic-hotels/common/constants/routes/myPages" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx index cdabcdb94..8a5c3c331 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx @@ -1,10 +1,9 @@ import { redirect } from "next/navigation" -import React from "react" import { z } from "zod" import Footnote from "@scandic-hotels/design-system/Footnote" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { env } from "@/env/server" diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx index 659b4d95a..90b54e22b 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.tsx @@ -7,7 +7,7 @@ import { type ReactNode, useState, useTransition } from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" diff --git a/apps/scandic-web/components/Blocks/Accordion/index.tsx b/apps/scandic-web/components/Blocks/Accordion/index.tsx index ae4193e60..3906f2711 100644 --- a/apps/scandic-web/components/Blocks/Accordion/index.tsx +++ b/apps/scandic-web/components/Blocks/Accordion/index.tsx @@ -1,5 +1,6 @@ "use client" +import { cx } from "class-variance-authority" import { useState } from "react" import Accordion from "@scandic-hotels/design-system/Accordion" @@ -7,7 +8,7 @@ import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml" import { Section } from "@/components/Section" -import SectionHeader from "@/components/Section/Header/Deprecated" +import { SectionHeader } from "@/components/Section/Header" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import styles from "./accordion.module.css" @@ -26,9 +27,11 @@ export default function AccordionSection({ accordion, title }: AccordionProps) { return (
- + {accordion.map((acc) => acc ? ( diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx index dd87435bf..e6536e22e 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx @@ -4,7 +4,7 @@ import { usePathname } from "next/navigation" import { useIntl } from "react-intl" import { dt } from "@scandic-hotels/common/dt" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import Table from "@scandic-hotels/design-system/Table" import { Typography } from "@scandic-hotels/design-system/Typography" import { Transactions } from "@scandic-hotels/trpc/enums/transactions" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx index fd7b7ec6e..fde2d930a 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx @@ -1,5 +1,5 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import Title from "@scandic-hotels/design-system/Title" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx index b78299ab1..aaf67823f 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx @@ -4,7 +4,7 @@ import { dt } from "@scandic-hotels/common/dt" import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import Title from "@scandic-hotels/design-system/Title" import useLang from "@/hooks/useLang" diff --git a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx index ea2e5f1e9..128c7ba06 100644 --- a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx +++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx @@ -1,6 +1,6 @@ import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" +import Link from "@scandic-hotels/design-system/OldDSLink" import Preamble from "@scandic-hotels/design-system/Preamble" import Title from "@scandic-hotels/design-system/Title" diff --git a/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx b/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx index b97c99fb1..eba189214 100644 --- a/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx +++ b/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx @@ -1,5 +1,5 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./shortcutsListItems.module.css" diff --git a/apps/scandic-web/components/Blocks/Table/index.tsx b/apps/scandic-web/components/Blocks/Table/index.tsx index a166c125d..0770adf72 100644 --- a/apps/scandic-web/components/Blocks/Table/index.tsx +++ b/apps/scandic-web/components/Blocks/Table/index.tsx @@ -97,9 +97,9 @@ export default function TableBlock({ data }: TableBlockProps) { {showMoreVisible ? ( ) : null} diff --git a/apps/scandic-web/components/Blocks/Table/table.module.css b/apps/scandic-web/components/Blocks/Table/table.module.css index ee1e165f6..3a44c1db4 100644 --- a/apps/scandic-web/components/Blocks/Table/table.module.css +++ b/apps/scandic-web/components/Blocks/Table/table.module.css @@ -1,6 +1,12 @@ .tableWrapper { display: grid; - border: 1px solid var(--Base-Border-Subtle); + border: 1px solid var(--Border-Default); border-radius: var(--Corner-radius-sm); overflow: hidden; } + +.showMoreButton { + border-top: 1px solid var(--Border-Default); + background-color: var(--Surface-Primary-Default); + border-radius: 0; +} diff --git a/apps/scandic-web/components/Breadcrumbs/index.tsx b/apps/scandic-web/components/Breadcrumbs/index.tsx index fefd3a96b..12bd931e9 100644 --- a/apps/scandic-web/components/Breadcrumbs/index.tsx +++ b/apps/scandic-web/components/Breadcrumbs/index.tsx @@ -5,15 +5,11 @@ import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas" import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs" -interface Props extends Pick { +interface Props extends Omit { subpageTitle?: string } -export default async function Breadcrumbs({ - color, - size, - subpageTitle, -}: Props) { +export default async function Breadcrumbs({ subpageTitle, ...props }: Props) { const caller = await serverClient() const breadcrumbs = await caller.contentstack.breadcrumbs.get() if (!breadcrumbs?.length) { @@ -34,7 +30,7 @@ export default async function Breadcrumbs({ __html: JSON.stringify(jsonSchema.jsonLd), }} /> - + ) } diff --git a/apps/scandic-web/components/ContentCard/contentCard.module.css b/apps/scandic-web/components/ContentCard/contentCard.module.css index 677dc8ecd..b605dd9ac 100644 --- a/apps/scandic-web/components/ContentCard/contentCard.module.css +++ b/apps/scandic-web/components/ContentCard/contentCard.module.css @@ -1,5 +1,15 @@ .card { display: grid; + + &:hover { + .imageContainer, + .image { + border-radius: var(--Corner-radius-lg); + } + .image { + transform: scale(1.05); + } + } } .imageContainer { @@ -21,34 +31,28 @@ border-radius 0.3s ease-in-out; } -.card:hover, -.card:hover .imageContainer, -.card:hover .image { - border-radius: var(--Corner-radius-lg); -} - -.card:hover .image { - transform: scale(1.05); -} - .promoTag { position: absolute; top: 14px; left: 14px; - text-transform: uppercase; } .content { display: flex; - padding: var(--Spacing-x-one-and-half); + padding: var(--Space-x15); flex-direction: column; align-items: flex-start; - gap: var(--Spacing-x-one-and-half); + gap: var(--Space-x15); align-self: stretch; } +.link { + text-decoration: none; + color: inherit; +} + @media (min-width: 768px) { .content { - padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) 0; + padding: var(--Space-x2) var(--Space-x2) var(--Space-x2) 0; } } diff --git a/apps/scandic-web/components/ContentCard/index.tsx b/apps/scandic-web/components/ContentCard/index.tsx index 8c164f879..34854f28b 100644 --- a/apps/scandic-web/components/ContentCard/index.tsx +++ b/apps/scandic-web/components/ContentCard/index.tsx @@ -1,8 +1,8 @@ -import Body from "@scandic-hotels/design-system/Body" +import NextLink from "next/link" + import Chip from "@scandic-hotels/design-system/Chip" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" -import Subtitle from "@scandic-hotels/design-system/Subtitle" +import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./contentCard.module.css" @@ -46,8 +46,12 @@ export default function ContentCard({ ) : null}
- {heading} - {bodyText} + +

{heading}

+ + +

{bodyText}

+
) @@ -55,6 +59,7 @@ export default function ContentCard({ if (!link) return card const linkProps = { + className: styles.link, ...(link.openInNewTab && { target: "_blank", rel: "noopener noreferrer", @@ -62,8 +67,8 @@ export default function ContentCard({ } return ( - + {card} - + ) } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx index 5638fc922..f7017133e 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx @@ -8,7 +8,7 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import ImageFallback from "@scandic-hotels/design-system/ImageFallback" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { useDestinationPageCitiesMapStore } from "@/stores/destination-page-cities-map" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx index 9e7fe851e..236d347fd 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx @@ -6,7 +6,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Image from "@scandic-hotels/design-system/Image" import ImageFallback from "@scandic-hotels/design-system/ImageFallback" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { useDestinationDataStore } from "@/stores/destination-data" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/LocationsList/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/LocationsList/index.tsx index 25cd22b46..462859b4e 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/LocationsList/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/LocationsList/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable formatjs/no-literal-string-in-jsx */ import { setMapUrlFromCountryPage } from "@scandic-hotels/common/hooks/map/useSetMapUrlFromCountryPage" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./locationsList.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 4e56b3a1a..c96eea2cd 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 Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { getIntl } from "@/i18n" diff --git a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx index a4a4ce676..a99eb0f0f 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/SeoFilters/index.tsx @@ -4,7 +4,7 @@ import { useIntl } from "react-intl" import Accordion from "@scandic-hotels/design-system/Accordion" import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem" -import Link from "@scandic-hotels/design-system/Link" +import Link from "@scandic-hotels/design-system/OldDSLink" import { useDestinationDataStore } from "@/stores/destination-data" diff --git a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css index 9ec9151d5..2962db74a 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css @@ -1,5 +1,5 @@ .amenitiesContainer { - background-color: var(--Base-Surface-Subtle-Normal); + background-color: var(--Surface-Secondary-Default); border-radius: var(--Corner-radius-lg); padding: var(--Space-x3) var(--Space-x3) var(--Space-x15) var(--Space-x3); display: grid; diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx index 156c00a98..00b2e1842 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx @@ -4,7 +4,7 @@ import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting" import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Link from "@scandic-hotels/design-system/Link" +import { TextLink } from "@scandic-hotels/design-system/TextLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { Country } from "@scandic-hotels/trpc/types/country" @@ -31,6 +31,7 @@ interface IntroSectionProps { location: HotelLocation tripAdvisor: HotelTripAdvisor contactInformation: Hotel["contactInformation"] + isThemed: boolean } export default async function IntroSection({ @@ -40,6 +41,7 @@ export default async function IntroSection({ address, tripAdvisor, contactInformation, + isThemed, }: IntroSectionProps) { const intl = await getIntl() const { streetAddress, city, country } = address @@ -61,7 +63,11 @@ export default async function IntroSection({
- + {intl.formatMessage({ id: "hotel.introSection.welcomeTo", defaultMessage: "Welcome to", @@ -86,16 +92,10 @@ export default async function IntroSection({ })} >
- + {phoneNumber} - + {!showLocalCharges && ( )} - + {email} - +
diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css index f4c4a599c..a5275a571 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css @@ -1,28 +1,19 @@ .introSection { - display: grid; - gap: var(--Space-x2); position: relative; + display: grid; + gap: var(--Space-x3); max-width: var(--hotel-page-intro-section-width); } -.localCharges::before { - content: " ("; -} - -.localCharges::after { - content: ")"; -} - .mainContent { display: grid; - gap: var(--Space-x15); justify-items: start; + gap: var(--Space-x1); } -.subtitleContent { +.titleContainer { display: grid; - gap: var(--Space-x05); - justify-items: start; + gap: var(--Space-x025); } .title { @@ -30,19 +21,18 @@ } .script { - transform: rotate(-4deg); color: var(--Text-Accent-Primary); -} - -.titleContainer { - display: grid; - gap: var(--Space-x2); + &:not(.isThemed) { + transform: rotate(-3deg); + transform-origin: left; + } } .contactAddress, .contactInformation { display: grid; gap: var(--Space-x1); + justify-items: start; } .contactAddress { @@ -60,10 +50,25 @@ display: flex; flex-direction: column; gap: var(--Space-x15); + align-items: flex-start; +} + +.localCharges::before { + content: " ("; +} + +.localCharges::after { + content: ")"; +} + +.subtitleContent { + display: grid; + justify-items: start; + gap: var(--Space-x05); } @media screen and (max-width: 767px) { - .divider { + .contactInformationDivider { display: none; } } @@ -77,6 +82,7 @@ .phoneNumber { flex-direction: row; + align-items: center; gap: var(--Space-x1); } } diff --git a/apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx index 1c695bf80..c0f3db4fe 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx @@ -3,9 +3,8 @@ import { cx } from "class-variance-authority" import { useMemo, useRef, useState } from "react" -import { Typography } from "@scandic-hotels/design-system/Typography" - import { Section } from "@/components/Section" +import { SectionHeader } from "@/components/Section/Header" import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton" import { RoomCard } from "./RoomCard" @@ -34,16 +33,11 @@ export function Rooms({ heading, rooms, preamble }: RoomsProps) { return (
-
- -

{heading}

- - {preamble && ( - -

{preamble}

- - )} -
+
    diff --git a/apps/scandic-web/components/ContentType/HotelPage/Rooms/rooms.module.css b/apps/scandic-web/components/ContentType/HotelPage/Rooms/rooms.module.css index 19816954c..31a8324c1 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Rooms/rooms.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/Rooms/rooms.module.css @@ -4,16 +4,6 @@ color: var(--Text-Default); } -.sectionHeader { - display: grid; - gap: var(--Space-x15); - max-width: var(--hotel-page-intro-section-width); -} - -.heading { - color: var(--Text-Heading); -} - .scrollRef { position: absolute; top: calc(-1 * var(--hotel-page-scroll-margin-top)); @@ -30,6 +20,10 @@ } } +.showMoreButton { + justify-self: center; +} + @media screen and (min-width: 768px) { .roomsList { grid-template-columns: repeat(2, 1fr); diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/contactInformation.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/contactInformation.module.css index 6cfb50913..e4e5806e9 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/contactInformation.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/contactInformation.module.css @@ -13,6 +13,7 @@ "contact socials" "email email" "ecoLabel ecoLabel"; + font-style: normal; } .address { diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx index 9c0c67c99..f241ffaad 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx @@ -1,7 +1,9 @@ +import NextLink from "next/link" + import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon" import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/Link" +import { TextLink } from "@scandic-hotels/design-system/TextLink" import { Typography } from "@scandic-hotels/design-system/Typography" import LocalCallCharges from "@/components/LocalCallCharges" @@ -34,117 +36,94 @@ export default async function ContactInformation({ })} -
    -
    - + +
    +

    {intl.formatMessage({ id: "common.address", defaultMessage: "Address", })}

    - - - -

    {hotelAddress.streetAddress}

    -

    {hotelAddress.city}

    -     -     -
    -
    - + +
    +

    {hotelAddress.streetAddress}

    +

    {hotelAddress.city}

    +
    +     +
    +

    {intl.formatMessage({ id: "common.drivingDirections", defaultMessage: "Driving directions", })}

    - - - {intl.formatMessage({ - id: "common.googleMaps", - defaultMessage: "Google Maps", - })} - -
    -
    - + + {intl.formatMessage({ + id: "common.googleMaps", + defaultMessage: "Google Maps", + })} + +
    +

    {intl.formatMessage({ id: "common.contactUs", defaultMessage: "Contact us", })}

    - - - {contact.phoneNumber} - - -
    - {socials.instagram || socials.facebook ? ( -
    - + + {contact.phoneNumber} + + +
    + {socials.instagram || socials.facebook ? ( +

    {intl.formatMessage({ id: "common.followUs", defaultMessage: "Follow us", })}

    - -
    - {socials.instagram && ( - - - - )} - {socials.facebook && ( - - - - )} +
    + {socials.instagram && ( + + + + )} + {socials.facebook && ( + + + + )} +
    -
    - ) : null} -
    - + ) : null} +

    {intl.formatMessage({ id: "common.email", defaultMessage: "Email", })}

    - - - {contact.email} - -
    - {ecoLabels.nordicEcoLabel && ( -
    - {intl.formatMessage({ -
    + + {contact.email} + +
    + {ecoLabels.nordicEcoLabel && ( +
    + {intl.formatMessage({ - +

    {intl.formatMessage({ id: "common.nordicSwanEcolabel", @@ -152,12 +131,12 @@ export default async function ContactInformation({ })}

    {ecoLabels.svanenEcoLabelCertificateNumber}

    - +
    -
    - )} -
    + )} +
    +
    ) } diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css index 841d6848e..06827f4da 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/activities.module.css @@ -1,7 +1,7 @@ .buttonContainer { background-color: var(--Background-Primary); - border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x4) var(--Spacing-x2); + border-top: 1px solid var(--Border-Default); + padding: var(--Space-x4) var(--Space-x2); width: 100%; position: absolute; left: 0; diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx index 6dc4c2693..94d985555 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx @@ -1,7 +1,6 @@ -import Link from "@scandic-hotels/design-system/Link" -import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" -import Preamble from "@scandic-hotels/design-system/Preamble" +import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import SidePeek from "@scandic-hotels/design-system/SidePeek" +import { Typography } from "@scandic-hotels/design-system/Typography" import { getIntl } from "@/i18n" @@ -28,13 +27,19 @@ export default async function ActivitiesSidePeek({ defaultMessage: "Close", })} > - {preamble} + +

    {preamble}

    +
    - + + {sidepeekCTA} +
    ) diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx index e2c9f2ef9..ee7c62be7 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx @@ -47,17 +47,16 @@ export default async function MeetingsAndConferencesSidePeek({ ) : null} {descriptions?.medium && ( - +

    {descriptions.medium}

     )} {roomText || seatingText ? ( - - - {roomText} - {roomText && seatingText &&
    } - {seatingText} -     + +
    + {roomText ? {roomText} : null} + {seatingText ? {seatingText} : null} +
    ) : null} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css index 0bfd52ced..6b56ba6ff 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css @@ -1,15 +1,15 @@ .wrapper { display: grid; - gap: var(--Spacing-x3); + gap: var(--Space-x3); margin-bottom: calc( - var(--Spacing-x4) * 2 + 80px + var(--Space-x4) * 2 + 80px ); /* Creates space between the wrapper and buttonContainer */ } .buttonContainer { background-color: var(--Background-Primary); - border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x4) var(--Spacing-x2); + border-top: 1px solid var(--Border-Default); + padding: var(--Space-x4) var(--Space-x2); width: 100%; position: absolute; left: 0; @@ -17,5 +17,6 @@ } .capacityDetails { + display: grid; color: var(--Text-Secondary); } diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx index bee68cd62..d4d712b0c 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx @@ -1,6 +1,6 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" -import Link from "@scandic-hotels/design-system/Link" import OpeningHours from "@scandic-hotels/design-system/OpeningHours" +import { TextLink } from "@scandic-hotels/design-system/TextLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { getIntl } from "@/i18n" @@ -81,20 +81,14 @@ export default async function RestaurantBarItem({
      {menus.map(({ name, url }) => (
    • - + {name} - +
      • ))}
    diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/restaurantBar.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/restaurantBar.module.css index 3da2da7d8..81726aa35 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/restaurantBar.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/restaurantBar.module.css @@ -1,9 +1,9 @@ .content { display: grid; - gap: var(--Spacing-x4); + gap: var(--Space-x4); } .item:not(:last-child) { - border-bottom: 1px solid var(--Base-Border-Subtle); - padding-bottom: var(--Spacing-x4); + border-bottom: 1px solid var(--Border-Default); + padding-bottom: var(--Space-x4); } diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/roomFacilities.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/roomFacilities.module.css index 03fcb3d6f..d82e26032 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/roomFacilities.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/roomFacilities.module.css @@ -5,8 +5,8 @@ .item { display: flex; - gap: var(--Spacing-x1); - margin-bottom: var(--Spacing-x-half); + gap: var(--Space-x1); + margin-bottom: var(--Space-x05); align-items: self-start; justify-content: flex-start; color: var(--Text-Secondary); @@ -32,7 +32,7 @@ @media screen and (min-width: 768px) { .facilities { column-count: 2; - column-gap: var(--Spacing-x2); + column-gap: var(--Space-x2); } .ctaWrapper { diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css index 7e394c599..9dbb3c850 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css @@ -1,15 +1,15 @@ .content { display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); position: relative; margin-bottom: calc( - var(--Spacing-x4) * 2 + 80px + var(--Space-x4) * 2 + 80px ); /* Creates space between the wrapper and buttonContainer */ } .innerContent { display: grid; - gap: var(--Spacing-x-one-and-half); + gap: var(--Space-x15); } .guests { @@ -24,8 +24,8 @@ .buttonContainer { background-color: var(--Background-Primary); - border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x4) var(--Spacing-x2); + border-top: 1px solid var(--Border-Default); + padding: var(--Space-x4) var(--Space-x2); width: 100%; position: absolute; left: 0; diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css index c34410dc1..4b44588fc 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/wellnessAndExercise.module.css @@ -1,7 +1,7 @@ .wrapper { display: flex; flex-direction: column; - gap: var(--Spacing-x4); + gap: var(--Space-x4); /* Creates space between the wrapper and buttonContainer depending on which buttons are present */ &.hasSpaPage, @@ -16,12 +16,12 @@ .buttonContainer { background-color: var(--Background-Primary); - border-top: 1px solid var(--Base-Border-Subtle); - padding: var(--Spacing-x4) var(--Spacing-x2); + border-top: 1px solid var(--Border-Default); + padding: var(--Space-x4) var(--Space-x2); width: 100%; position: absolute; left: 0; bottom: 0; display: grid; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } diff --git a/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx index 7c3709c8e..02b923dee 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx @@ -26,9 +26,13 @@ import { HotelHashValues } from "@/types/enums/hotelPage" interface TabNavigationProps { pageSections: HotelPageSections + isThemed: boolean } -export default function TabNavigation({ pageSections }: TabNavigationProps) { +export default function TabNavigation({ + pageSections, + isThemed, +}: TabNavigationProps) { const [activeHash, setActiveHash] = useState() const tabNavigationRef = useRef(null) const tabRefs = useMemo(() => new Map(), []) @@ -94,6 +98,7 @@ export default function TabNavigation({ pageSections }: TabNavigationProps) {
    nav { diff --git a/apps/scandic-web/components/ContentType/HotelPage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/index.tsx index e88850170..dfccac83a 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/index.tsx @@ -1,10 +1,11 @@ +import { cx } from "class-variance-authority" +import NextLink from "next/link" import { notFound } from "next/navigation" import { Suspense } from "react" import { dt } from "@scandic-hotels/common/dt" import { safeTry } from "@scandic-hotels/common/utils/safeTry" import { Alert } from "@scandic-hotels/design-system/Alert" -import Link from "@scandic-hotels/design-system/Link" import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK" import { type HotelPageData } from "@scandic-hotels/trpc/types/hotelPage" @@ -18,6 +19,7 @@ import { getIntl } from "@/i18n" import { getLang } from "@/i18n/serverContext" import { setFacilityCards } from "@/utils/facilityCards" import { generateHotelSchema } from "@/utils/jsonSchemas" +import { Theme } from "@/utils/theme/types" import MapCard from "./Map/MapCard" import MapWithCardWrapper from "./Map/MapWithCard" @@ -57,11 +59,13 @@ import { HotelHashValues } from "@/types/enums/hotelPage" interface HotelPageProps { hotelData: HotelData hotelPageData: HotelPageData + theme: Theme } export default async function HotelPage({ hotelData, hotelPageData, + theme, }: HotelPageProps) { const lang = await getLang() const intl = await getIntl() @@ -147,6 +151,8 @@ export default async function HotelPage({ ) const trackingHotelData = getTrackingHotelData(hotelData.hotel) + const isThemed = theme !== Theme.scandic + return (