71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { cva } from 'class-variance-authority'
|
|
|
|
import { DEFAULT_THEME, Theme } from '@scandic-hotels/common/utils/theme'
|
|
import styles from './infoCard.module.css'
|
|
|
|
const variantKeys = {
|
|
theme: {
|
|
'Primary 1': 'Primary 1',
|
|
'Primary 2': 'Primary 2',
|
|
'Primary 3': 'Primary 3',
|
|
Accent: 'Accent',
|
|
Image: 'Image',
|
|
White: 'White',
|
|
},
|
|
height: {
|
|
fixed: 'fixed',
|
|
dynamic: 'dynamic',
|
|
},
|
|
} as const
|
|
|
|
export const infoCardConfig = {
|
|
variants: {
|
|
theme: {
|
|
[variantKeys.theme['Primary 1']]: styles['theme-primary-1'],
|
|
[variantKeys.theme['Primary 2']]: styles['theme-primary-2'],
|
|
[variantKeys.theme['Primary 3']]: styles['theme-primary-3'],
|
|
[variantKeys.theme['Accent']]: styles['theme-accent'],
|
|
[variantKeys.theme['Image']]: styles['theme-image'],
|
|
[variantKeys.theme['White']]: styles['theme-white'],
|
|
},
|
|
height: {
|
|
[variantKeys.height.fixed]: styles['height-fixed'],
|
|
[variantKeys.height.dynamic]: styles['height-dynamic'],
|
|
},
|
|
// Only Theme.scandic can be used with the Angled variant.
|
|
// The topTitleAngled variant will be applied using the compoundVariants.
|
|
topTitleAngled: {
|
|
true: undefined,
|
|
false: undefined,
|
|
},
|
|
// The hotelTheme is not used to apply styles directly,
|
|
// but is needed for compound variants and to get the correct button color.
|
|
// The class name for the hotelTheme is applied on page level.
|
|
hotelTheme: {
|
|
[Theme.scandic]: undefined,
|
|
[Theme.downtownCamper]: undefined,
|
|
[Theme.haymarket]: undefined,
|
|
[Theme.scandicGo]: undefined,
|
|
[Theme.grandHotel]: undefined,
|
|
[Theme.hotelNorge]: undefined,
|
|
[Theme.marski]: undefined,
|
|
[Theme.theDock]: undefined,
|
|
},
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
hotelTheme: Theme.scandic,
|
|
topTitleAngled: true,
|
|
class: styles['top-title-angled'],
|
|
},
|
|
],
|
|
defaultVariants: {
|
|
theme: variantKeys.theme['Primary 1'],
|
|
height: variantKeys.height.fixed,
|
|
topTitleAngled: false,
|
|
hotelTheme: DEFAULT_THEME,
|
|
},
|
|
}
|
|
|
|
export const infoCardVariants = cva(styles.infoCard, infoCardConfig)
|