import type { VariantProps } from "class-variance-authority" import { Theme } from "@scandic-hotels/common/utils/theme" import type { variants as buttonVariants } from "../Button/variants" import type { infoCardVariants } from "./variants" type ButtonVariants = VariantProps type InfoCardButtonProps = { primaryButton: { variant: ButtonVariants["variant"] color: ButtonVariants["color"] } secondaryButton: { variant: ButtonVariants["variant"] color: ButtonVariants["color"] } } const PRIMARY = { variant: "Primary", color: "Primary" } as const const PRIMARY_INVERTED = { variant: "Primary", color: "Inverted" } as const const SECONDARY = { variant: "Secondary", color: "Primary" } as const const SECONDARY_INVERTED = { variant: "Secondary", color: "Inverted" } as const const TERTIARY = { variant: "Tertiary", color: "Primary" } as const // Determine button variant and color based on card theme and hotel theme. // This is done to avoid low contrast issues and conflicting colors in // certain combinations and according to design guidelines. export function getButtonProps( cardTheme: VariantProps["theme"], hotelTheme: Theme | null = Theme.scandic ): InfoCardButtonProps { let buttonProps: InfoCardButtonProps = { primaryButton: TERTIARY, secondaryButton: SECONDARY, } // Image theme always uses inverted buttons, regardless of hotel theme if (cardTheme === "Image") { return { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } switch (hotelTheme) { case Theme.scandic: if (cardTheme === "Primary 2" || cardTheme === "Primary 3") { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.downtownCamper: if ( cardTheme === "Primary 1" || cardTheme === "Primary 2" || cardTheme === "Primary 3" || cardTheme === "Accent" ) { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.haymarket: if (cardTheme === "Primary 1" || cardTheme === "White") { buttonProps = { primaryButton: PRIMARY, secondaryButton: SECONDARY, } } else if ( cardTheme === "Primary 2" || cardTheme === "Primary 3" || cardTheme === "Accent" ) { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.scandicGo: if (cardTheme === "Primary 1" || cardTheme === "Primary 2") { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.grandHotel: if ( cardTheme === "Primary 2" || cardTheme === "Primary 3" || cardTheme === "Accent" || cardTheme === "White" ) { buttonProps = { primaryButton: PRIMARY, secondaryButton: SECONDARY, } } else if (cardTheme === "Primary 1") { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.hotelNorge: if ( cardTheme === "Primary 1" || cardTheme === "Primary 2" || cardTheme === "Primary 3" ) { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.marski: if (cardTheme === "Primary 1") { buttonProps = { primaryButton: TERTIARY, secondaryButton: SECONDARY_INVERTED, } } else if (cardTheme === "White") { buttonProps = { primaryButton: PRIMARY, secondaryButton: SECONDARY, } } else if ( cardTheme === "Primary 2" || cardTheme === "Primary 3" || cardTheme === "Accent" ) { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.theDock: if ( cardTheme === "Primary 1" || cardTheme === "Accent" || cardTheme === "White" ) { buttonProps = { primaryButton: PRIMARY, secondaryButton: SECONDARY, } } else if (cardTheme === "Primary 2" || cardTheme === "Primary 3") { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break case Theme.bassinSeven: if ( cardTheme === "Primary 3" || cardTheme === "Accent" || cardTheme === "White" ) { buttonProps = { primaryButton: PRIMARY, secondaryButton: SECONDARY, } } else if (cardTheme === "Primary 1" || cardTheme === "Primary 2") { buttonProps = { primaryButton: PRIMARY_INVERTED, secondaryButton: SECONDARY_INVERTED, } } break default: break } return buttonProps }