Merged in feature/SW-3595-sas-info-boxes (pull request #3177)

Feature/SW-3595 Add info boxes to SAS start page & Eurobonus alert to select-hotel page on SAS

* wip

* feat(SW-3595): Add info boxes to SAS start page

* Add InfoBox to design-system
* Add background gradient to SAS start page

* update variable naming and conditionalize the eurobonus message on select-hotel

* SAS startpage update default message

* make select-hotel a bit more generic with slot={} instead of alert={}


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Alert/Alert.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Alert } from './index'
+import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
+import { expect, fn } from 'storybook/test'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['banner', 'inline'],
+    },
+    type: {
+      control: { type: 'select' },
+      options: Object.values(AlertTypeEnum),
+    },
+    close: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'inline',
+    type: AlertTypeEnum.Info,
+    heading: 'Heading',
+    text: 'Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.',
+    close: undefined,
+    ariaRole: 'alert',
+  },
+  play: async ({ canvas }) => {
+    canvas.findByRole('alert')
+  },
+}
+
+export const Closable: Story = {
+  args: {
+    variant: 'inline',
+    type: AlertTypeEnum.Info,
+    heading: 'Heading',
+    text: 'Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.',
+    close: fn(),
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.close).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const WithPhonenumber: Story = {
+  args: {
+    variant: 'inline',
+    type: AlertTypeEnum.Info,
+    heading: 'Heading',
+    text: 'Caramels danish jelly-o pudding tart croissant. Pie cotton candy jujubes carrot cake gummies. Apple pie cake chocolate bar halvah tootsie roll bonbon cheesecake. Brownie dessert macaroon bear claw pastry.',
+    close: fn(),
+    phoneContact: {
+      displayText: 'Call us:',
+      phoneNumber: '+4685551234',
+      footnote: 'Available 24/7',
+    },
+  },
+}

packages/design-system/lib/components/Icons/IconByIconName.tsx

@@ -192,6 +192,8 @@ export function IconByIconName({
       return <MaterialIcon icon="concierge" {...props} />
     case IconName.Cultural:
       return <MaterialIcon icon="theater_comedy" {...props} />
+    case IconName.CreditCard:
+      return <MaterialIcon icon="credit_card" {...props} />
     case IconName.Diamond:
       return <MaterialIcon icon="diamond" {...props} />
     case IconName.Directions:

packages/design-system/lib/components/Icons/iconName.ts

@@ -7,9 +7,9 @@ export enum IconName {
   AirConditioningInRoom = 'AirConditioningInRoom',
   Airplane = 'Airplane',
   ArmChair = 'ArmChair',
+  ArrowFrom = 'ArrowFrom',
   ArrowLeft = 'ArrowLeft',
   ArrowLeftSmall = 'ArrowLeftSmall',
-  ArrowFrom = 'ArrowFrom',
   ArrowRight = 'ArrowRight',
   ArrowRightSmall = 'ArrowRightSmall',
   ArrowTo = 'ArrowTo',
@@ -22,6 +22,7 @@ export enum IconName {
   Bike = 'Bike',
   Bouquet = 'Bouquet',
   Bowling = 'Bowling',
+  Breakfast = 'Breakfast',
   Business = 'Business',
   BusinessCentre = 'BusinessCentre',
   Calendar = 'Calendar',
@@ -51,6 +52,7 @@ export enum IconName {
   ConferenceRoom = 'ConferenceRoom',
   ConvenienceStore24h = 'ConvenienceStore24h',
   ConventionCentre = 'ConventionCentre',
+  CreditCard = 'CreditCard',
   CroissantCoffeeEgg = 'CroissantCoffeeEgg',
   CrossCircle = 'CrossCircle',
   CrossCircleOutline = 'CrossCircleOutline',
@@ -92,8 +94,8 @@ export enum IconName {
   HandKey = 'HandKey',
   Hanger = 'Hanger',
   HangerAlt = 'HangerAlt',
-  Heat = 'Heat',
   Heart = 'Heart',
+  Heat = 'Heat',
   Hiking = 'Hiking',
   HotelNight = 'HotelNight',
   House = 'House',
@@ -108,15 +110,15 @@ export enum IconName {
   Kettle = 'Kettle',
   Kids = 'Kids',
   KidsMocktail = 'KidsMocktail',
-  Landscape = 'Landscape',
+  Kitchen = 'Kitchen',
   Lamp = 'Lamp',
+  Landscape = 'Landscape',
   LaptopSafe = 'LaptopSafe',
   LaundryMachine = 'LaundryMachine',
   Link = 'Link',
   LocalBar = 'LocalBar',
   Location = 'Location',
   Lock = 'Lock',
-  Breakfast = 'Breakfast',
   Luggage = 'Luggage',
   LuggageLockers = 'LuggageLockers',
   MagicWand = 'MagicWand',
@@ -163,11 +165,11 @@ export enum IconName {
   StarFilled = 'StarFilled',
   Street = 'Street',
   Swim = 'Swim',
-  Theatre = 'Theatre',
   Swipe = 'Swipe',
+  Theatre = 'Theatre',
   Thermostat = 'Thermostat',
-  Toilet = 'Toilet',
   Ticket = 'Ticket',
+  Toilet = 'Toilet',
   Train = 'Train',
   Tripadvisor = 'Tripadvisor',
   Trophy = 'Trophy',
@@ -179,5 +181,4 @@ export enum IconName {
   WarningTriangle = 'WarningTriangle',
   Wheelchair = 'Wheelchair',
   Wifi = 'Wifi',
-  Kitchen = 'Kitchen',
 }

packages/design-system/lib/components/InfoBox/InfoBox.module.css

@@ -0,0 +1,40 @@
+.infoBox {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+
+  padding: var(--Space-x2) var(--Space-x3);
+  border-radius: var(--Corner-radius-Medium);
+  align-items: center;
+
+  background: var(--Background-Secondary);
+
+  &.sasBlue {
+    background: var(--SAS-Blue-90);
+  }
+
+  .iconContainer {
+    display: flex;
+    width: 24px;
+    padding: var(--Space-x05);
+    border-radius: 100%;
+    aspect-ratio: 1 / 1;
+    box-sizing: content-box;
+    align-items: center;
+    justify-content: center;
+    color: white;
+
+    background: var(--Surface-Brand-Accent-OnAccent-Accent);
+
+    &.sasBlue {
+      color: white;
+      background: var(--SAS-Blue-Default);
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--Space-x05);
+  }
+}

packages/design-system/lib/components/InfoBox/InfoBox.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { expect } from 'storybook/test'
+import { InfoBox, Props } from './InfoBox'
+import { IconName } from '../Icons/iconName'
+
+const meta: Meta<typeof InfoBox> = {
+  title: 'Components/InfoBox',
+  component: InfoBox,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    theme: 'Default',
+    icon: IconName.Accessibility,
+    heading: 'Heading',
+    text: 'This is an informational message',
+  },
+  argTypes: {
+    icon: {
+      control: { type: 'select' },
+      options: Object.values(IconName),
+    },
+    theme: {
+      control: { type: 'select' },
+      options: ['Default', 'SAS-Blue'] satisfies Props['theme'][],
+    },
+  },
+
+  play: async ({ canvas, args }) => {
+    const article = await canvas.findByRole('article')
+    await expect(article).toBeVisible()
+
+    const heading = await canvas.findByRole('heading', { name: args.heading })
+    await expect(heading).toBeVisible()
+
+    const paragraph = await canvas.findByText(args.text)
+    await expect(paragraph).toBeVisible()
+  },
+}
+
+export const WithoutIcon: Story = {
+  args: {
+    heading: 'Heading',
+    text: 'This is an informational message',
+  },
+}

packages/design-system/lib/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,57 @@
+import { cva } from 'class-variance-authority'
+import { IconByIconName } from '../Icons/IconByIconName'
+import { IconName } from '../Icons/iconName'
+import { Typography } from '../Typography'
+import styles from './InfoBox.module.css'
+import type { VariantProps } from 'class-variance-authority'
+
+const infoBoxVariants = cva(styles.infoBox, {
+  variants: {
+    theme: {
+      'SAS-Blue': styles.sasBlue,
+      Default: styles.default,
+    },
+  },
+  defaultVariants: {
+    theme: 'Default',
+  },
+})
+
+const iconVariants = cva(styles.iconContainer, {
+  variants: {
+    theme: {
+      'SAS-Blue': styles.sasBlue,
+      Default: styles.default,
+    },
+  },
+  defaultVariants: {
+    theme: 'Default',
+  },
+})
+
+export type Props = {
+  heading: string
+  text: string
+  theme?: VariantProps<typeof infoBoxVariants>['theme']
+  icon?: IconName
+}
+
+export function InfoBox({ heading, text, theme, icon }: Props) {
+  return (
+    <article className={infoBoxVariants({ theme })}>
+      {icon && (
+        <div className={iconVariants({ theme })}>
+          <IconByIconName iconName={icon} color={'CurrentColor'} />
+        </div>
+      )}
+      <div className={styles.content}>
+        <Typography variant="Body/Paragraph/mdBold">
+          <h2>{heading}</h2>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{text}</p>
+        </Typography>
+      </div>
+    </article>
+  )
+}