Merged in feat/BOOK-61-refactor-hotel-page-css-variables (pull request #3014)

Feat/BOOK-61 refactor hotel page css variables

* feat(BOOK-61): Breadcrumbs

* feat(BOOK-61): intro section

* feat(BOOK-61): show more button

* feat(BOOK-61): rooms section

* feat(BOOK-61): sidepeeks

* feat(BOOK-61): deprecated old Link component

* feat(BOOK-61): added new TextLink component to the design-system

* feat(BOOK-61): replaced deprecated links with new TextLink component

* feat(BOOK-61): miscellaneous changes


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

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 (
     <Section className={styles.accordionSection} id={HotelHashValues.faq}>
-      <SectionHeader textTransform="uppercase" title={title} />
+      <SectionHeader heading={title} typography="Title/md" />
       <Accordion
-        className={`${styles.accordion} ${allAccordionsVisible ? styles.allVisible : ""}`}
+        className={cx(styles.accordion, {
+          [styles.allVisible]: allAccordionsVisible,
+        })}
       >
         {accordion.map((acc) =>
           acc ? (

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"

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"

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"

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"
 

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"

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

@@ -97,9 +97,9 @@ export default function TableBlock({ data }: TableBlockProps) {
         </Table>
         {showMoreVisible ? (
           <ShowMoreButton
+            className={styles.showMoreButton}
             loadMoreData={handleShowMore}
             showLess={showLessVisible}
-            buttonIntent="table"
           />
         ) : null}
       </div>

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