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

packages/design-system/lib/components/JsonToHtml/renderOptions.tsx

@@ -4,7 +4,6 @@ import { Divider } from '../Divider'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import Image from '../Image'
 import ImageContainer from '../ImageContainer'
-import Link from '../Link'
 import Table from '../Table'
 import { Typography } from '../Typography'
 
@@ -21,6 +20,7 @@ import {
   mapImageVaultAssetResponseToImageVaultAsset,
   mapInsertResponseToImageVaultAsset,
 } from '@scandic-hotels/common/utils/imageVault'
+import { TextLink } from '../TextLink'
 import type { EmbedByUid } from './JsonToHtml'
 import type { Attributes } from './types/rte/attrs'
 import {
@@ -90,7 +90,7 @@ export const renderOptions: RenderOptions = {
 
     const { className, ...props } = extractPossibleAttributes(node.attrs)
     return (
-      <Link
+      <TextLink
         key={node.uid}
         className={className}
         {...props}
@@ -98,7 +98,7 @@ export const renderOptions: RenderOptions = {
         target={
           typeof node.attrs.target === 'string' ? node.attrs.target : '_blank'
         }
-        textDecoration="underline"
+        isInline
       >
         {next(
           // Sometimes editors happen to nest a reference inside a link and vice versa.
@@ -107,7 +107,7 @@ export const renderOptions: RenderOptions = {
           embeds,
           fullRenderOptions
         )}
-      </Link>
+      </TextLink>
     )
   },
 
@@ -400,13 +400,12 @@ export const renderOptions: RenderOptions = {
       } else if (node.attrs['display-type'] === 'link' && node.attrs.href) {
         const { className, ...props } = extractPossibleAttributes(node.attrs)
         return (
-          <Link
+          <TextLink
             key={node.uid}
             className={className}
             href={node.attrs.href as string}
-            textDecoration="underline"
             target="_blank"
-            variant="icon"
+            isInline
             {...props}
           >
             {next(
@@ -417,7 +416,7 @@ export const renderOptions: RenderOptions = {
               fullRenderOptions
             )}
             <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-          </Link>
+          </TextLink>
         )
       }
     }
@@ -462,12 +461,12 @@ export const renderOptions: RenderOptions = {
         }
 
         return (
-          <Link
+          <TextLink
             key={node.uid}
             className={className}
             {...props}
             href={entryHref ?? nodeHref}
-            textDecoration="underline"
+            isInline
           >
             {next(
               // Sometimes editors happen to nest a reference inside a link and vice versa.
@@ -476,7 +475,7 @@ export const renderOptions: RenderOptions = {
               embeds,
               fullRenderOptions
             )}
-          </Link>
+          </TextLink>
         )
       }
     }