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/TempDesignSystem/ShowMoreButton/index.tsx

@@ -2,30 +2,30 @@
 
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 
-import { showMoreButtonVariants } from "./variants"
+import type { ComponentProps } from "react"
 
-import styles from "./showMoreButton.module.css"
-
-import type { ShowMoreButtonProps } from "./showMoreButton"
+interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
+  showLess?: boolean
+  textShowMore?: string
+  textShowLess?: string
+  loadMoreData: () => void
+}
 
 export default function ShowMoreButton({
-  className,
-  buttonIntent,
-  intent,
-  disabled,
+  variant = "Text",
+  color = "Primary",
+  size = "Medium",
+  typography = "Body/Paragraph/mdBold",
   showLess,
   textShowMore,
   textShowLess,
   loadMoreData,
+  ...props
 }: ShowMoreButtonProps) {
   const intl = useIntl()
-  const classNames = showMoreButtonVariants({
-    className,
-    buttonIntent,
-  })
 
   if (!textShowMore) {
     textShowMore = intl.formatMessage({
@@ -42,25 +42,25 @@ export default function ShowMoreButton({
   }
 
   return (
-    <div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
-      <Button
-        className={styles.button}
-        disabled={disabled}
-        onClick={loadMoreData}
-        variant="icon"
-        type="button"
-        theme="base"
-        intent={intent ?? "text"}
-        fullWidth={intent ? true : false}
-        size={intent && "small"}
-      >
-        <MaterialIcon
-          icon="keyboard_arrow_down"
-          className={styles.icon}
-          color="CurrentColor"
-        />
-        {showLess ? textShowLess : textShowMore}
-      </Button>
-    </div>
+    <Button
+      variant={variant}
+      color={color}
+      size={size}
+      onPress={loadMoreData}
+      typography={typography}
+      {...props}
+    >
+      {showLess ? (
+        <>
+          <MaterialIcon icon="keyboard_arrow_up" color="CurrentColor" />
+          <span>{textShowLess}</span>
+        </>
+      ) : (
+        <>
+          <MaterialIcon icon="keyboard_arrow_down" color="CurrentColor" />
+          <span>{textShowMore}</span>
+        </>
+      )}
+    </Button>
   )
 }

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.module.css

@@ -1,23 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-}
-
-.table {
-  display: grid;
-  justify-content: stretch;
-  border-top: 1px solid var(--Base-Border-Subtle);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-
-.table .button {
-  border-radius: 0;
-}
-
-.icon {
-  transition: transform 0.3s;
-}
-
-.showLess .icon {
-  transform: rotate(180deg);
-}

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/showMoreButton.ts

@@ -1,15 +0,0 @@
-import type { ButtonPropsRAC } from "@scandic-hotels/design-system/OldDSButton"
-import type { VariantProps } from "class-variance-authority"
-
-import type { showMoreButtonVariants } from "./variants"
-
-export interface ShowMoreButtonProps
-  extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
-    VariantProps<typeof showMoreButtonVariants> {
-  disabled?: boolean
-  showLess?: boolean
-  textShowMore?: string
-  textShowLess?: string
-  loadMoreData: () => void
-  intent?: ButtonPropsRAC["intent"]
-}

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/variants.ts

@@ -1,11 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./showMoreButton.module.css"
-
-export const showMoreButtonVariants = cva(styles.container, {
-  variants: {
-    buttonIntent: {
-      table: styles.table,
-    },
-  },
-})