- {activitiesCards.map((card) => (
-
+ {activityCards.length ? (
+
+ {activityCards.map((card) => (
+
))}
) : null}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/Facilities/utils.ts b/apps/scandic-web/components/ContentType/HotelPage/Facilities/utils.ts
new file mode 100644
index 000000000..ca170dd10
--- /dev/null
+++ b/apps/scandic-web/components/ContentType/HotelPage/Facilities/utils.ts
@@ -0,0 +1,144 @@
+import type { InfoCardProps } from "@scandic-hotels/design-system/InfoCard"
+import type { ApiImage, FacilityData } from "@scandic-hotels/trpc/types/hotel"
+import type { ActivityCard } from "@scandic-hotels/trpc/types/hotelPage"
+import type { IntlShape } from "react-intl"
+
+import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
+import type { HotelPageSections } from "@/types/components/hotelPage/sections"
+import { HotelHashValues } from "@/types/enums/hotelPage"
+
+type CardTheme = NonNullable
+type FacilityType = "wellness" | "meetings" | "restaurant"
+type Facility = FacilityData & { type: FacilityType }
+
+interface FacilityRow {
+ heading: string
+ images: ApiImage[]
+ id: string
+ topTitle: string | null
+ sidepeekHref: string
+ theme: CardTheme
+}
+
+export function mapFacilityDataToFacilities(
+ restaurantImages: FacilityData | null,
+ conferencesAndMeetings: FacilityData | null,
+ healthAndWellness: FacilityData | null,
+ pageSections: HotelPageSections
+): Facility[] {
+ const facilities: Facility[] = []
+ if (pageSections.restaurant && restaurantImages) {
+ facilities.push({
+ ...restaurantImages,
+ headingText: pageSections.restaurant.heading,
+ type: "restaurant",
+ })
+ }
+ if (pageSections.meetings && conferencesAndMeetings) {
+ facilities.push({
+ ...conferencesAndMeetings,
+ headingText: pageSections.meetings.heading,
+ type: "meetings",
+ })
+ }
+ if (pageSections.wellness && healthAndWellness) {
+ facilities.push({
+ ...healthAndWellness,
+ headingText: pageSections.wellness.heading,
+ type: "wellness",
+ })
+ }
+
+ return facilities
+}
+
+export function mapFacilitiesToFacilityRows(
+ intl: IntlShape,
+ facilities: Facility[]
+): FacilityRow[] {
+ const mappedFacilities = facilities.map((f) => {
+ const images = f.heroImages.slice(0, 2)
+ const facilityType = f.type
+ const id = HotelHashValues[facilityType] ?? facilityType
+ const sidepeekSlug = SidepeekSlugs[facilityType] ?? null
+
+ return {
+ heading: f.headingText,
+ images,
+ id,
+ topTitle: getTopTitle(intl, facilityType),
+ sidepeekHref: `?s=${sidepeekSlug}`,
+ theme: getTheme(facilityType),
+ }
+ })
+
+ return mappedFacilities
+}
+
+function getTopTitle(intl: IntlShape, facilityType: FacilityType) {
+ switch (facilityType) {
+ case "wellness":
+ return intl.formatMessage({
+ id: "hotelPage.facilities.wellnessTopTitle",
+ defaultMessage: "Here's to your health!",
+ })
+ case "meetings":
+ return intl.formatMessage({
+ id: "hotelPage.facilities.meetingsTopTitle",
+ defaultMessage: "Great minds meet here",
+ })
+ case "restaurant":
+ return intl.formatMessage({
+ id: "hotelPage.facilities.restaurantTopTitle",
+ defaultMessage: "Good vibes, great bites!",
+ })
+ default:
+ return null
+ }
+}
+
+function getTheme(facilityType: FacilityType): CardTheme {
+ switch (facilityType) {
+ case "wellness":
+ return "Primary 1"
+ case "meetings":
+ return "Accent"
+ case "restaurant":
+ return "Primary 3"
+ default:
+ return "White"
+ }
+}
+
+export function mapActivityCardsToInfoCards(
+ activityCards: ActivityCard[]
+): InfoCardProps[] {
+ return activityCards.map((card) => {
+ const image = card.backgroundImage
+ const mappedCard: InfoCardProps = {
+ theme: !!image ? "Image" : "Primary 3",
+ heading: card.heading,
+ bodyText: card.bodyText,
+ topTitle: card.scriptedTopTitle,
+ }
+
+ if (image) {
+ mappedCard.backgroundImage = {
+ src: image.url,
+ alt: image.meta.alt ?? "",
+ dimensions: image.dimensions,
+ focalPoint: image.focalPoint,
+ }
+ mappedCard.primaryButton = {
+ href: `?s=${card.sidepeekSlug}`,
+ text: card.ctaText,
+ }
+ } else {
+ mappedCard.secondaryButton = {
+ href: `?s=${card.sidepeekSlug}`,
+ text: card.ctaText,
+ }
+ }
+ return mappedCard
+ })
+}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
index a5275a571..b85b987ac 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -67,6 +67,20 @@
gap: var(--Space-x05);
}
+.localCharges::before {
+ content: " (";
+}
+
+.localCharges::after {
+ content: ")";
+}
+
+.subtitleContent {
+ display: grid;
+ justify-items: start;
+ gap: var(--Space-x05);
+}
+
@media screen and (max-width: 767px) {
.contactInformationDivider {
display: none;
diff --git a/apps/scandic-web/components/ContentType/HotelPage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/index.tsx
index dfccac83a..7dca96823 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/index.tsx
@@ -5,6 +5,7 @@ import { Suspense } from "react"
import { dt } from "@scandic-hotels/common/dt"
import { safeTry } from "@scandic-hotels/common/utils/safeTry"
+import { DEFAULT_THEME, type Theme } from "@scandic-hotels/common/utils/theme"
import { Alert } from "@scandic-hotels/design-system/Alert"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { type HotelPageData } from "@scandic-hotels/trpc/types/hotelPage"
@@ -17,9 +18,7 @@ import HotelCampaigns from "@/components/ContentType/HotelPage/Campaigns"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
-import { setFacilityCards } from "@/utils/facilityCards"
import { generateHotelSchema } from "@/utils/jsonSchemas"
-import { Theme } from "@/utils/theme/types"
import MapCard from "./Map/MapCard"
import MapWithCardWrapper from "./Map/MapWithCard"
@@ -35,7 +34,7 @@ import TripAdvisorSidePeek from "./SidePeeks/Tripadvisor"
import WellnessAndExerciseSidePeek from "./SidePeeks/WellnessAndExercise"
import AmenitiesList from "./AmenitiesList"
import DialogshiftWidget from "./DialogshiftWidget"
-import Facilities from "./Facilities"
+import { Facilities } from "./Facilities"
import IntroSection from "./IntroSection"
import PreviewImages from "./PreviewImages"
import { Rooms } from "./Rooms"
@@ -131,12 +130,8 @@ export default async function HotelPage({
},
sectionHeadings
)
-
- const facilities = setFacilityCards(
- restaurantImages ?? undefined,
- conferencesAndMeetings ?? undefined,
- healthAndWellness ?? undefined,
- pageSections
+ const activities = activitiesCards.map(
+ (card) => card.upcoming_activities_card
)
const coordinates = {
@@ -151,7 +146,7 @@ export default async function HotelPage({
)
const trackingHotelData = getTrackingHotelData(hotelData.hotel)
- const isThemed = theme !== Theme.scandic
+ const isThemed = theme !== DEFAULT_THEME
return (
@@ -225,14 +220,14 @@ export default async function HotelPage({
preamble={hotelRoomElevatorPitchText}
/>
) : null}
- {facilities && (
-
- )}
+
{campaignsBlock ? (
{
- card: FacilityCard | CardProps
- imageCards?: FacilityImage[]
-}
diff --git a/apps/scandic-web/types/components/hotelPage/facilities.ts b/apps/scandic-web/types/components/hotelPage/facilities.ts
index c1d476e90..f22e3fb62 100644
--- a/apps/scandic-web/types/components/hotelPage/facilities.ts
+++ b/apps/scandic-web/types/components/hotelPage/facilities.ts
@@ -1,73 +1,3 @@
-import type {
- Amenities,
- Facility,
- HealthFacilities,
-} from "@scandic-hotels/trpc/types/hotel"
-import type { ActivitiesCard } from "@scandic-hotels/trpc/types/hotelPage"
-
-import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-
-export type FacilitiesProps = {
- facilities: Facility[]
- activitiesCards: ActivitiesCard[]
- amenities: Amenities
- healthFacilities: HealthFacilities
-}
-
-export type FacilityImage = {
- backgroundImage: CardProps["backgroundImage"]
- theme: CardProps["theme"]
- id: string
-}
-
-export type FacilityCard = {
- secondaryButton: {
- href: string
- title: string
- openInNewTab?: boolean
- isExternal: boolean
- scrollOnClick: boolean
- }
- heading: string
- scriptedTopTitle?: string
- theme: CardProps["theme"]
- id: string
-}
-
-export type FacilityCardType = FacilityImage | FacilityCard
-export type FacilityGrid = FacilityCardType[]
-export type Facilities = FacilityGrid[]
-
-export type CardGridProps = {
- facilitiesCardGrid: FacilityGrid
-}
-
-export enum FacilityCardTypeEnum {
- wellness = "wellness",
- conference = "meetings",
- restaurant = "restaurants",
-}
-
-export enum RestaurantHeadings {
- generic = "Good vibes, great bites!",
- restaurantAndBar = "Restaurant & Bar",
- bar = "Bar",
- restaurant = "Restaurant",
- breakfastRestaurant = "Breakfast Restaurant",
-}
-
-export enum WellnessHeadings {
- generic = "Here's to your health!",
- GymPool = "Gym & Pool",
- GymSauna = "Gym & Sauna",
- GymPoolSaunaRelax = "Gym, Pool, Sauna & Relax",
- GymJacuzziSaunaRelax = "Gym, Jacuzzi, Sauna & Relax",
-}
-
-export enum MeetingsHeading {
- Default = "Great minds meet here",
-}
-
export enum HealthFacilitiesEnum {
Jacuzzi = "Jacuzzi",
Gym = "Gym",
@@ -77,12 +7,6 @@ export enum HealthFacilitiesEnum {
OutdoorPool = "OutdoorPool",
}
-export const FacilityCardButtonText = {
- RESTAURANT: "Read more",
- MEETINGS: "Read more",
- WELLNESS: "Read more",
-} as const
-
export enum ExternalGymDetails {
NameOfExternalGym = "NameOfExternalGym",
DistanceToExternalGym = "DistanceToExternalGym",
diff --git a/apps/scandic-web/utils/facilityCards.ts b/apps/scandic-web/utils/facilityCards.ts
deleted file mode 100644
index 59a7fee3f..000000000
--- a/apps/scandic-web/utils/facilityCards.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-import { FacilityEnum } from "@scandic-hotels/common/constants/facilities"
-
-import type {
- Amenities,
- Facility,
- FacilityData,
- HealthFacilities,
-} from "@scandic-hotels/trpc/types/hotel"
-
-import {
- type Facilities,
- type FacilityCard,
- FacilityCardButtonText,
- type FacilityCardType,
- FacilityCardTypeEnum,
- type FacilityGrid,
- type FacilityImage,
- HealthFacilitiesEnum,
- MeetingsHeading,
- RestaurantHeadings,
- WellnessHeadings,
-} from "@/types/components/hotelPage/facilities"
-import {
- type HotelHashValue,
- SidepeekSlugs,
-} from "@/types/components/hotelPage/hotelPage"
-import type { HotelPageSections } from "@/types/components/hotelPage/sections"
-import { HotelHashValues } from "@/types/enums/hotelPage"
-import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-
-export function setFacilityCards(
- restaurantImages: FacilityData | undefined,
- conferencesAndMeetings: FacilityData | undefined,
- healthAndWellness: FacilityData | undefined,
- pageSections: HotelPageSections
-): Facility[] {
- const facilities = []
- if (pageSections.restaurant) {
- facilities.push(
- setFacilityCard(
- restaurantImages,
- FacilityCardTypeEnum.restaurant,
- pageSections.restaurant.heading
- )
- )
- }
- if (pageSections.meetings) {
- facilities.push(
- setFacilityCard(
- conferencesAndMeetings,
- FacilityCardTypeEnum.conference,
- pageSections.meetings.heading
- )
- )
- }
- if (pageSections.wellness) {
- facilities.push(
- setFacilityCard(
- healthAndWellness,
- FacilityCardTypeEnum.wellness,
- pageSections.wellness.heading
- )
- )
- }
- return facilities
-}
-
-function setFacilityCard(
- facility: FacilityData | undefined,
- type: FacilityCardTypeEnum,
- heading: string
-): Facility {
- return {
- ...facility,
- id: type,
- headingText: heading,
- heroImages: facility?.heroImages ?? [],
- }
-}
-
-export function isFacilityCard(card: FacilityCardType): card is FacilityCard {
- return "heading" in card
-}
-
-export function isFacilityImage(card: FacilityCardType): card is FacilityImage {
- return "backgroundImage" in card
-}
-
-function setCardProps(
- theme: CardProps["theme"],
- buttonText: (typeof FacilityCardButtonText)[keyof typeof FacilityCardButtonText],
- href: HotelHashValue,
- heading: string,
- slug: SidepeekSlugs,
- scriptedTopTitle?: string
-): FacilityCard {
- return {
- theme,
- id: href,
- heading,
- scriptedTopTitle,
- secondaryButton: {
- href: `?s=${slug}`,
- title: buttonText,
- isExternal: false,
- scrollOnClick: false,
- },
- }
-}
-
-export function setFacilityCardGrids(
- facilities: Facility[],
- amenities: Amenities,
- healthFacilities: HealthFacilities
-): Facilities {
- const cards: Facilities = facilities
- .filter((fac) => !!fac.headingText)
- .map((facility) => {
- let card: FacilityCard
-
- const grid: FacilityGrid = facility.heroImages
- .slice(0, 2)
- .map((image) => {
- // Can be a maximum 2 images per grid
- const img: FacilityImage = {
- backgroundImage: {
- url: image.src,
- title: image.title || image.title_En,
- meta: {
- alt: image.altText,
- caption: image.altText_En,
- },
- id: image.src,
- },
- theme: "image",
- id: image.src,
- }
- return img
- })
-
- switch (facility.id) {
- case FacilityCardTypeEnum.wellness:
- const wellnessTitle = getWellnessHeading(healthFacilities)
- card = setCardProps(
- "one",
- FacilityCardButtonText.WELLNESS,
- HotelHashValues.wellness,
- facility.headingText,
- SidepeekSlugs.wellness,
- wellnessTitle
- )
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions
- facilities.findIndex((f) => f === facility) % 2 === 0
- ? grid.unshift(card)
- : grid.push(card)
-
- break
-
- case FacilityCardTypeEnum.conference:
- card = setCardProps(
- "primaryDim",
- FacilityCardButtonText.MEETINGS,
- HotelHashValues.meetings,
- facility.headingText,
- SidepeekSlugs.meetings,
- MeetingsHeading.Default
- )
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions
- facilities.findIndex((f) => f === facility) % 2 === 0
- ? grid.unshift(card)
- : grid.push(card)
- break
-
- case FacilityCardTypeEnum.restaurant:
- const restaurantTitle = getRestaurantHeading(amenities)
- card = setCardProps(
- "primaryDark",
- FacilityCardButtonText.RESTAURANT,
- HotelHashValues.restaurant,
- facility.headingText,
- SidepeekSlugs.restaurant,
- restaurantTitle
- )
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions
- facilities.findIndex((f) => f === facility) % 2 === 0
- ? grid.unshift(card)
- : grid.push(card)
- break
- }
- return grid
- })
- return cards
-}
-
-function getRestaurantHeading(amenities: Amenities): RestaurantHeadings {
- // For now return a generic message for all
- return RestaurantHeadings.generic
-
- // TODO: Revisit logic below when Content team decides to do so.
- const hasBar = amenities.some(
- (facility) =>
- facility.id === FacilityEnum.Bar ||
- facility.id === FacilityEnum.RooftopBar ||
- facility.id === FacilityEnum.Skybar
- )
- const hasRestaurant = amenities.some(
- (facility) => facility.id === FacilityEnum.Restaurant
- )
-
- if (hasBar && hasRestaurant) {
- return RestaurantHeadings.restaurantAndBar
- } else if (hasBar) {
- return RestaurantHeadings.bar
- } else if (hasRestaurant) {
- return RestaurantHeadings.restaurant
- }
- return RestaurantHeadings.breakfastRestaurant
-}
-
-function getWellnessHeading(
- healthFacilities: HealthFacilities
-): WellnessHeadings | undefined {
- // For now return a generic message for all
- return WellnessHeadings.generic
-
- // TODO: Revisit logic below when Content team decides to do so.
- const hasGym = healthFacilities.some(
- (facility) => facility.type === HealthFacilitiesEnum.Gym
- )
- const hasSauna = healthFacilities.some(
- (faility) => faility.type === HealthFacilitiesEnum.Sauna
- )
- const hasRelax = healthFacilities.some(
- (facility) => facility.type === HealthFacilitiesEnum.Relax
- )
- const hasJacuzzi = healthFacilities.some(
- (facility) => facility.type === HealthFacilitiesEnum.Jacuzzi
- )
- const hasPool = healthFacilities.some(
- (facility) =>
- facility.type === HealthFacilitiesEnum.IndoorPool ||
- facility.type === HealthFacilitiesEnum.OutdoorPool
- )
-
- if (hasGym && hasJacuzzi && hasSauna && hasRelax) {
- return WellnessHeadings.GymJacuzziSaunaRelax
- } else if (hasGym && hasPool && hasSauna && hasRelax) {
- return WellnessHeadings.GymPoolSaunaRelax
- } else if (hasGym && hasSauna) {
- return WellnessHeadings.GymSauna
- } else if (hasGym && hasPool) {
- return WellnessHeadings.GymPool
- }
- return undefined
-}
-
-export function filterFacilityCards(cards: FacilityGrid) {
- const card = cards.filter((card) => isFacilityCard(card))
- const images = cards.filter((card) => isFacilityImage(card))
-
- return {
- card: card[0] as FacilityCard,
- images: images as FacilityImage[],
- }
-}
diff --git a/apps/scandic-web/utils/theme/types.ts b/apps/scandic-web/utils/theme/types.ts
deleted file mode 100644
index 21d2221ea..000000000
--- a/apps/scandic-web/utils/theme/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export enum Theme {
- downtownCamper = "downtown-camper",
- grandHotel = "grand-hotel",
- haymarket = "haymarket",
- hotelNorge = "hotel-norge",
- marski = "marski",
- scandic = "scandic",
- scandicGo = "scandic-go",
-}
-
-export const DEFAULT_THEME = Theme.scandic
-export const THEMES = Object.values(Theme)
diff --git a/packages/common/package.json b/packages/common/package.json
index 0eb2e5731..044ac9804 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -64,6 +64,7 @@
"./utils/promiseWithTimeout": "./utils/promiseWithTimeout.ts",
"./utils/rangeArray": "./utils/rangeArray.ts",
"./utils/safeTry": "./utils/safeTry.ts",
+ "./utils/theme": "./utils/theme.ts",
"./utils/toCapitalCase": "./utils/toCapitalCase.ts",
"./utils/url": "./utils/url.ts",
"./utils/zod/*": "./utils/zod/*.ts"
diff --git a/apps/scandic-web/utils/theme/index.ts b/packages/common/utils/theme.ts
similarity index 67%
rename from apps/scandic-web/utils/theme/index.ts
rename to packages/common/utils/theme.ts
index 3d3491abc..482a9d767 100644
--- a/apps/scandic-web/utils/theme/index.ts
+++ b/packages/common/utils/theme.ts
@@ -1,7 +1,19 @@
import { SignatureHotelEnum } from "@scandic-hotels/common/constants/signatureHotels"
import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
-import { DEFAULT_THEME, Theme } from "./types"
+export enum Theme {
+ scandic = "scandic",
+ downtownCamper = "downtown-camper",
+ haymarket = "haymarket",
+ scandicGo = "scandic-go",
+ grandHotel = "grand-hotel",
+ hotelNorge = "hotel-norge",
+ marski = "marski",
+ theDock = "the-dock",
+}
+
+export const DEFAULT_THEME = Theme.scandic
+export const THEMES = Object.values(Theme)
function getSignatureHotelTheme(hotelId: string) {
switch (hotelId) {
@@ -15,8 +27,10 @@ function getSignatureHotelTheme(hotelId: string) {
return Theme.grandHotel
case SignatureHotelEnum.Marski:
return Theme.marski
+ case SignatureHotelEnum.TheDock:
+ return Theme.theDock
default:
- return Theme.scandic
+ return DEFAULT_THEME
}
}
diff --git a/packages/design-system/lib/components/ImageFallback/index.tsx b/packages/design-system/lib/components/ImageFallback/index.tsx
index f5f727cbd..c8a672860 100644
--- a/packages/design-system/lib/components/ImageFallback/index.tsx
+++ b/packages/design-system/lib/components/ImageFallback/index.tsx
@@ -1,8 +1,9 @@
+import { cx } from 'class-variance-authority'
import { MaterialIcon } from '../Icons/MaterialIcon'
import styles from './imageFallback.module.css'
-interface ImageFallbackProps {
+interface ImageFallbackProps extends React.HTMLAttributes {
width?: string
height?: string
}
@@ -10,9 +11,15 @@ interface ImageFallbackProps {
export default function ImageFallback({
width = '100%',
height = '100%',
+ className,
+ ...props
}: ImageFallbackProps) {
return (
-
+
= {
+ title: 'Components/InfoCard',
+ component: InfoCard,
+ argTypes: {
+ topTitle: {
+ control: 'text',
+ table: {
+ type: { summary: 'string' },
+ },
+ },
+ topTitleAngled: {
+ control: 'boolean',
+ description:
+ 'Whether the top title should be angled. Only applies when `hotelTheme` is set to `Theme.scandic`.',
+ type: 'boolean',
+ },
+ heading: {
+ control: 'text',
+ table: {
+ type: { summary: 'string' },
+ },
+ },
+ bodyText: {
+ control: 'text',
+ table: {
+ type: { summary: 'string' },
+ },
+ },
+ theme: {
+ control: 'select',
+ options: Object.keys(infoCardConfig.variants.theme),
+ table: {
+ type: {
+ summary: Object.keys(infoCardConfig.variants.theme).join(' | '),
+ },
+ },
+ },
+ height: {
+ control: 'select',
+ options: Object.keys(infoCardConfig.variants.height),
+ table: {
+ type: {
+ summary: Object.keys(infoCardConfig.variants.height).join(' | '),
+ },
+ },
+ },
+ hotelTheme: {
+ control: 'select',
+ options: Object.keys(infoCardConfig.variants.hotelTheme),
+ description:
+ 'The hotel theme to adjust button colors for better contrast.',
+ table: {
+ type: { summary: 'Theme', detail: Object.values(Theme).join(' | ') },
+ },
+ },
+ backgroundImage: {
+ control: 'object',
+ table: {
+ type: {
+ summary: 'InfoCardBackgroundImage',
+ detail:
+ '{ src: string, alt?: string, focalPoint?: { x: number, y: number }, dimensions?: { width: number, height: number, aspectRatio?: number } }',
+ },
+ },
+ },
+ primaryButton: {
+ control: 'object',
+ table: {
+ type: {
+ summary: 'InfoCardButton',
+ detail:
+ '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
+ },
+ },
+ },
+ secondaryButton: {
+ control: 'object',
+ table: {
+ type: {
+ summary: 'InfoCardButton',
+ detail:
+ '{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
+ },
+ },
+ },
+ },
+ args: { ...DEFAULT_ARGS },
+ decorators: [
+ (Story, context) => {
+ if (context.name.toLowerCase().indexOf('all themes') >= 0) {
+ return (
+
+ {Object.keys(infoCardConfig.variants.theme).map((theme) => {
+ console.log(theme)
+ const args = {
+ ...context.args,
+ backgroundImage:
+ theme === 'Image'
+ ? {
+ src: './img/img1.jpg',
+ alt: 'Image alt text',
+ }
+ : undefined,
+ }
+ return (
+
+
{theme}
+
+
+ )
+ })}
+
+
+
+ )
+ },
+ ],
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ ...meta.args,
+ },
+}
+
+export const Primary_1: Story = {
+ args: {
+ ...meta.args,
+ theme: 'Primary 1',
+ },
+}
+
+export const Primary_2: Story = {
+ args: {
+ ...meta.args,
+ theme: 'Primary 2',
+ },
+}
+
+export const Primary_3: Story = {
+ args: {
+ ...meta.args,
+ theme: 'Primary 3',
+ },
+}
+
+export const Accent: Story = {
+ args: {
+ ...meta.args,
+ theme: 'Accent',
+ },
+}
+
+export const White: Story = {
+ args: {
+ ...meta.args,
+ theme: 'White',
+ },
+}
+
+export const Image: Story = {
+ args: {
+ ...meta.args,
+ backgroundImage: {
+ src: './img/img1.jpg',
+ alt: 'Image alt text',
+ },
+ theme: 'Image',
+ },
+}
+
+export const AllThemesScandic: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.scandic,
+ },
+}
+
+export const AllThemesDowntownCamper: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.downtownCamper,
+ },
+}
+
+export const AllThemesHaymarket: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.haymarket,
+ },
+}
+
+export const AllThemesScandicGo: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.scandicGo,
+ },
+}
+
+export const AllThemesGrandHotel: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.grandHotel,
+ },
+}
+
+export const AllThemesHotelNorge: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.hotelNorge,
+ },
+}
+
+export const AllThemesMarski: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.marski,
+ },
+}
+
+export const AllThemesTheDock: Story = {
+ args: {
+ ...meta.args,
+ hotelTheme: Theme.theDock,
+ },
+}
diff --git a/packages/design-system/lib/components/InfoCard/InfoCard.tsx b/packages/design-system/lib/components/InfoCard/InfoCard.tsx
new file mode 100644
index 000000000..b5474cea1
--- /dev/null
+++ b/packages/design-system/lib/components/InfoCard/InfoCard.tsx
@@ -0,0 +1,100 @@
+import ButtonLink from '../ButtonLink'
+import Image from '../Image'
+import { Typography } from '../Typography'
+
+import { getButtonProps } from './utils'
+
+import { infoCardVariants } from './variants'
+
+import styles from './infoCard.module.css'
+
+import ImageFallback from '../ImageFallback'
+import type { InfoCardProps } from './types'
+
+export function InfoCard({
+ primaryButton,
+ secondaryButton,
+ topTitle,
+ heading,
+ bodyText,
+ className,
+ theme,
+ height,
+ backgroundImage,
+ topTitleAngled,
+ hotelTheme,
+}: InfoCardProps) {
+ const classNames = infoCardVariants({
+ theme,
+ hotelTheme,
+ topTitleAngled,
+ height,
+ className,
+ })
+ const buttonProps = getButtonProps(theme, hotelTheme)
+
+ return (
+
+ {theme === 'Image' ? (
+
+ {backgroundImage ? (
+
+ ) : (
+
+ )}
+
+ ) : null}
+
+
+ {topTitle ? (
+
+ {topTitle}
+
+ ) : null}
+
+ {heading}
+
+
+ {bodyText ? (
+
+ {bodyText}
+
+ ) : null}
+
+ {primaryButton ? (
+
+ {primaryButton.text}
+
+ ) : null}
+ {secondaryButton ? (
+
+ {secondaryButton.text}
+
+ ) : null}
+
+
+