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/TextLink/TextLink.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { expect } from 'storybook/test'
+
+import { TextLink } from '.'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+import { config } from './variants'
+
+const meta: Meta<typeof TextLink> = {
+  title: 'Components/TextLink',
+  component: TextLink,
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: Object.keys(config.variants.theme),
+      default: config.defaultVariants.theme,
+    },
+    isInline: {
+      control: 'boolean',
+      default: false,
+      description:
+        'Should be used when the link is placed inside a text block, removes the padding.',
+    },
+    isDisabled: {
+      control: 'boolean',
+      default: false,
+      description: 'Disables the link and makes it non-interactive.',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TextLink>
+
+export const Default: Story = {
+  args: {
+    href: 'https://www.scandichotels.com/en',
+  },
+  render: (args) => <TextLink {...args}>Default link</TextLink>,
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const Inverted: Story = {
+  args: {
+    ...Default.args,
+    theme: 'Inverted',
+  },
+  render: (args) => <TextLink {...args}>Inverted link</TextLink>,
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+  render: (args) => <TextLink {...args}>Disabled link</TextLink>,
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: (args) => (
+    <TextLink {...args}>
+      Link with icon
+      <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
+    </TextLink>
+  ),
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    typography: 'Link/sm',
+  },
+  render: (args) => <TextLink {...args}>Small link</TextLink>,
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const SmallWithIcon: Story = {
+  args: {
+    ...Default.args,
+    typography: 'Link/sm',
+  },
+  render: (args) => (
+    <TextLink {...args}>
+      Small link with icon
+      <MaterialIcon icon="arrow_forward" size={20} color="CurrentColor" />
+    </TextLink>
+  ),
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}
+
+export const Inline: Story = {
+  args: {
+    ...Default.args,
+    isInline: true,
+  },
+  render: (args) => (
+    <Typography variant="Body/Paragraph/mdRegular">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+        <TextLink {...args}>Inline link</TextLink> Curabitur vitae neque non
+        ipsum efficitur hendrerit at ut nulla. Cras in tellus et ligula posuere
+        ullamcorper. Praesent pulvinar rutrum metus ut gravida.
+      </p>
+    </Typography>
+  ),
+  play: async ({ canvasElement }) => {
+    const link = canvasElement.querySelector('a')
+    if (!link) throw new Error('Link not found')
+    expect(link).toBeInTheDocument()
+  },
+}