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 default: break } return buttonProps }