Files
web/packages/design-system/lib/components/InfoCard/variants.ts
Rasmus Langvad d0546926a9 Merged in fix/3697-prettier-configs (pull request #3396)
fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood
2026-01-07 12:45:50 +00:00

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)