Merge branch 'master' into feature/tracking

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -10,7 +10,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   cursor: pointer;
   color: var(--Base-Text-High-contrast);
   font-family: var(--typography-Body-Bold-fontFamily);
@@ -29,7 +29,7 @@
 }
 
 .accordionItem.card .summary {
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   border-radius: var(--Corner-radius-Medium);
 }
 
@@ -38,7 +38,7 @@
 }
 
 .content {
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x1);
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.3s;
@@ -46,6 +46,7 @@
 
 .chevron {
   transition: transform 0.3s;
+  flex-shrink: 0;
 }
 details[open] .chevron {
   transform: rotate(180deg);

components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -50,7 +50,12 @@ export default function AccordionItem({
         <summary className={styles.summary}>
           {IconComp && <IconComp className={styles.icon} color="burgundy" />}
           <span className={styles.title}>{title}</span>
-          <ChevronDownIcon className={styles.chevron} color="burgundy" />
+          <ChevronDownIcon
+            className={styles.chevron}
+            color="burgundy"
+            width={20}
+            height={20}
+          />
         </summary>
         <div ref={contentRef} className={styles.content}>
           {children}

components/TempDesignSystem/Alert/Sidepeek/index.tsx

@@ -30,7 +30,7 @@ export default function AlertSidepeek({
         wrapping
       >
         {ctaText}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
       </Button>
       {sidePeekIsOpen ? (
         <SidePeek

components/TempDesignSystem/Card/card.module.css

@@ -48,57 +48,34 @@
 }
 
 .themeOne {
-  --font-color: var(--Primary-Light-On-Surface-Text);
-  --script-color: var(--Primary-Light-On-Surface-Accent);
-
   background: var(--Primary-Light-Surface-Normal);
 }
 
 .themeTwo {
-  --font-color: var(--Secondary-Light-On-Surface-Text);
-  --script-color: var(--Secondary-Light-On-Surface-Accent);
-
   background: var(--Secondary-Light-Surface-Normal);
 }
 
 .themeThree {
-  --font-color: var(--Tertiary-Light-On-Surface-Text);
-  --script-color: var(--Tertiary-Light-On-Surface-Accent);
-
   background: var(--Tertiary-Light-Surface-Normal);
 }
 
 .themePrimaryDark {
-  --font-color: var(--Primary-Dark-On-Surface-Text);
-  --script-color: var(--Primary-Dark-On-Surface-Accent);
-
   background: var(--Primary-Dark-Surface-Normal);
 }
 
 .themePrimaryDim {
-  --font-color: var(--Primary-Dim-On-Surface-Text);
-  --script-color: var(--Primary-Dim-On-Surface-Accent);
-
   background: var(--Primary-Dim-Surface-Normal);
 }
 
 .themePrimaryInverted {
-  --font-color: var(--Primary-Light-On-Surface-Text);
-  --script-color: var(--Primary-Light-On-Surface-Accent);
-
   background: var(--Base-Surface-Primary-light-Normal);
 }
 
 .themePrimaryStrong {
-  --font-color: var(--Primary-Strong-On-Surface-Text);
-  --script-color: var(--Primary-Strong-On-Surface-Accent);
-
   background: var(--Primary-Strong-Surface-Normal);
 }
 
 .themeImage {
-  --font-color: var(--Base-Text-Inverted);
-  --script-color: var(--Base-Text-Inverted);
 }
 
 .themeImage .content {
@@ -111,19 +88,10 @@
 }
 
 .scriptedTitle {
-  color: var(--script-color);
   padding: var(--Spacing-x1);
   margin: 0;
 }
 
-.heading {
-  color: var(--font-color);
-}
-
-.bodyText {
-  color: var(--font-color);
-}
-
 .buttonContainer {
   display: flex;
   gap: var(--Spacing-x1);

components/TempDesignSystem/Card/index.tsx

@@ -5,8 +5,13 @@ import Button from "@/components/TempDesignSystem/Button"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getTheme } from "@/utils/cardTheme"
 
+import {
+  getBodyFontColor,
+  getButtonTheme,
+  getScriptFontColor,
+  getTitleFontColor,
+} from "./utils"
 import { cardVariants } from "./variants"
 
 import styles from "./card.module.css"
@@ -28,7 +33,10 @@ export default function Card({
   onPrimaryButtonClick,
   onSecondaryButtonClick,
 }: CardProps) {
-  const buttonTheme = getTheme(theme)
+  const buttonTheme = getButtonTheme(theme)
+  const titleFontColor = getTitleFontColor(theme)
+  const scriptFontColor = getScriptFontColor(theme)
+  const bodyFontColor = getBodyFontColor(theme)
 
   imageHeight = imageHeight || 320
 
@@ -64,6 +72,7 @@ export default function Card({
               className={styles.scriptedTitle}
               type="two"
               tilted="small"
+              color={scriptFontColor}
             >
               {scriptedTopTitle}
             </BiroScript>
@@ -71,15 +80,15 @@ export default function Card({
         ) : null}
         <Title
           as="h4"
-          className={styles.heading}
           level="h3"
           textAlign="center"
           textTransform="regular"
+          color={titleFontColor}
         >
           {heading}
         </Title>
         {bodyText ? (
-          <Body className={styles.bodyText} textAlign="center">
+          <Body textAlign="center" color={bodyFontColor}>
             {bodyText}
           </Body>
         ) : null}

components/TempDesignSystem/Card/utils.ts

@@ -0,0 +1,98 @@
+import { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
+import { bodyVariants } from "@/components/TempDesignSystem/Text/Body/variants"
+import { headingVariants } from "@/components/TempDesignSystem/Text/Title/variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
+import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+
+export function getTitleFontColor(
+  theme: CardProps["theme"]
+): VariantProps<typeof headingVariants>["color"] {
+  switch (theme) {
+    case "one":
+      return "primaryLight"
+    case "two":
+      return "secondaryLight"
+    case "three":
+      return "tertiaryLight"
+    case "primaryDark":
+      return "primaryDark"
+    case "primaryDim":
+      return "primaryDim"
+    case "primaryInverted":
+      return "primaryLight"
+    case "primaryStrong":
+      return "primaryStrong"
+    case "image":
+      return "baseText"
+  }
+}
+
+export function getScriptFontColor(
+  theme: CardProps["theme"]
+): VariantProps<typeof biroScriptVariants>["color"] {
+  switch (theme) {
+    case "one":
+      return "primaryLightOnSurfaceAccent"
+    case "two":
+      return "secondaryLightAccent"
+    case "three":
+      return "tertiaryLightAccent"
+    case "primaryDark":
+      return "pink"
+    case "primaryDim":
+      return "primaryDimAccent"
+    case "primaryInverted":
+      return "primaryLightOnSurfaceAccent"
+    case "primaryStrong":
+      return "primaryStrongAccent"
+    case "image":
+      return "baseText"
+  }
+}
+
+export function getBodyFontColor(
+  theme: CardProps["theme"]
+): VariantProps<typeof bodyVariants>["color"] {
+  switch (theme) {
+    case "one":
+      return "primaryLight"
+    case "two":
+      return "secondaryLight"
+    case "three":
+      return "tertiaryLight"
+    case "primaryDark":
+      return "primaryDark"
+    case "primaryDim":
+      return "primaryDim"
+    case "primaryInverted":
+      return "primaryLight"
+    case "primaryStrong":
+      return "primaryStrong"
+    case "image":
+      return "baseText"
+  }
+}
+
+export function getButtonTheme(
+  theme: CardProps["theme"]
+): ButtonProps["theme"] {
+  switch (theme) {
+    case "two":
+      return "secondaryLight"
+    case "three":
+      return "tertiaryLight"
+    case "primaryDark":
+      return "primaryDark"
+    case "primaryStrong":
+    case "image":
+      return "primaryStrong"
+    case "one":
+    case "primaryDim":
+    case "primaryInverted":
+    default:
+      return "primaryLight"
+  }
+}

components/TempDesignSystem/Form/Country/index.tsx

@@ -34,7 +34,7 @@ export default function CountrySelect({
   readOnly = false,
   registerOptions = {},
 }: CountryProps) {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const [rootDiv, setRootDiv] = useState<CountryPortalContainer>(undefined)
 
   function setRef(node: CountryPortalContainerArgs) {
@@ -53,13 +53,12 @@ export default function CountrySelect({
     setValue(name, country)
   }
 
-  const selectCountryLabel = formatMessage({ id: "Select a country" })
+  const selectCountryLabel = intl.formatMessage({ id: "Select a country" })
 
   return (
     <div className={`${styles.container} ${className}`} ref={setRef}>
       <ComboBox
-        aria-label={formatMessage({ id: "Select country of residence" })}
-        className={styles.select}
+        aria-label={intl.formatMessage({ id: "Select country of residence" })}
         isInvalid={fieldState.invalid}
         isReadOnly={readOnly}
         isRequired={!!registerOptions?.required}

components/TempDesignSystem/Form/Date/index.tsx

@@ -83,7 +83,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         .date(Number(day))
 
       if (newDate.isValid()) {
-        setValue(name, newDate.format("YYYY-MM-DD"), {
+        setValue(name, newDate.format("YYYY-MM-D"), {
           shouldDirty: true,
           shouldTouch: true,
           shouldValidate: true,

components/TempDesignSystem/Form/Phone/index.tsx

@@ -36,7 +36,7 @@ export default function Phone({
     required: true,
   },
 }: PhoneProps) {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const { control, setValue, trigger } = useFormContext()
   const phone = useWatch({ name })
 
@@ -95,7 +95,7 @@ export default function Phone({
             data-testid="country-selector"
           >
             <Label required={!!registerOptions.required} size="small">
-              {formatMessage({ id: "Country code" })}
+              {intl.formatMessage({ id: "Country code" })}
             </Label>
             <span className={styles.selectContainer}>
               {props.children}

components/TempDesignSystem/Form/SelectChevron/index.tsx

@@ -5,7 +5,7 @@ import styles from "./chevron.module.css"
 export default function SelectChevron() {
   return (
     <span aria-hidden="true" className={styles.chevron}>
-      <ChevronDownIcon color="grey80" />
+      <ChevronDownIcon color="grey80" width={20} height={20} />
     </span>
   )
 }

components/TempDesignSystem/Link/index.tsx

@@ -21,6 +21,7 @@ export default function Link({
   scroll = true,
   prefetch,
   variant,
+  weight,
   trackingId,
   onClick,
   /**
@@ -43,6 +44,7 @@ export default function Link({
     textDecoration,
     color,
     size,
+    weight,
     variant,
   })
 

components/TempDesignSystem/Link/link.module.css

@@ -65,7 +65,6 @@
 
 .shortcut {
   align-items: center;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
   display: grid;
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
@@ -74,7 +73,13 @@
   grid-template-columns: 1fr auto;
   letter-spacing: var(--typography-Body-Regular-letterSpacing);
   line-height: var(--typography-Body-Regular-lineHeight);
-  padding: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  transition: background-color 0.3s;
+}
+
+.shortcut:hover {
+  background-color: var(--UI-Input-Controls-Surface-Hover);
 }
 
 .shortcut:last-of-type {
@@ -149,20 +154,25 @@
   color: var(--Base-Text-Medium-contrast);
 }
 
-.red {
-  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
-}
-
 .peach80:hover,
 .peach80:active {
   color: var(--Base-Text-High-contrast);
 }
 
+.peach80 *,
+.peach80 * {
+  fill: var(--Base-Text-Medium-contrast);
+}
+
 .peach80:hover *,
 .peach80:active * {
   fill: var(--Base-Text-High-contrast);
 }
 
+.red {
+  color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
+}
+
 .white {
   color: var(--Base-Button-Primary-On-Fill-Normal);
 }
@@ -208,6 +218,14 @@
   letter-spacing: var(--typography-Caption-Bold-letterSpacing);
   line-height: var(--typography-Caption-Bold-lineHeight);
 }
+.bold {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: 500
+    /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
+}
 
 .menu {
   display: flex;
@@ -218,11 +236,6 @@
   padding: var(--Spacing-x1);
   gap: var(--Spacing-x-one-and-half);
   color: var(--Base-Text-High-contrast);
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
   border-radius: var(--Corner-radius-Medium);
 }
 
@@ -231,6 +244,12 @@
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 
+.navigation {
+  color: var(--Base-Text-High-contrast);
+  text-decoration: none;
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
 .signupVerification {
   background-color: var(--Base-Button-Primary-Fill-Normal);
   color: var(--Base-Button-Inverted-Fill-Normal);

components/TempDesignSystem/Link/variants.ts

@@ -26,12 +26,16 @@ export const linkVariants = cva(styles.link, {
       none: styles.noDecoration,
       underline: styles.underline,
     },
+    weight: {
+      bold: styles.bold,
+    },
     variant: {
       breadcrumb: styles.breadcrumb,
       default: styles.default,
       icon: styles.icon,
       underscored: styles.underscored,
       myPageMobileDropdown: styles.myPageMobileDropdown,
+      navigation: styles.navigation,
       menu: styles.menu,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,

components/TempDesignSystem/Select/index.tsx

@@ -35,6 +35,7 @@ export default function Select({
   tabIndex,
   value,
   maxHeight,
+  showRadioButton = false,
 }: SelectProps) {
   const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
 
@@ -88,7 +89,7 @@ export default function Select({
               {items.map((item) => (
                 <ListBoxItem
                   aria-label={String(item)}
-                  className={styles.listBoxItem}
+                  className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton}`}
                   id={item.value}
                   key={item.label}
                   data-testid={item.label}

components/TempDesignSystem/Select/select.module.css

@@ -52,11 +52,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
 }
 
 .listBoxItem {
   padding: var(--Spacing-x1);
-  margin: var(--Spacing-x0) var(--Spacing-x2);
 }
 
 .listBoxItem[data-focused="true"],
@@ -65,3 +65,23 @@
   border-radius: var(--Corner-radius-Medium,);
   outline: none;
 }
+
+.listBoxItem.showRadioButton {
+  display: flex;
+  align-items: center;
+}
+
+.listBoxItem.showRadioButton:before {
+  display: flex;
+  content: "";
+  margin-right: var(--Spacing-x-one-and-half);
+  background-color: white;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--Base-Border-Normal);
+}
+
+.listBoxItem[data-selected="true"].showRadioButton:before {
+  box-shadow: inset 0 0 0 8px var(--UI-Input-Controls-Fill-Selected);
+}

components/TempDesignSystem/Select/select.ts

@@ -10,6 +10,7 @@ export interface SelectProps
   placeholder?: string
   value?: string | number
   maxHeight?: number
+  showRadioButton?: boolean
 }
 
 export type SelectPortalContainer = HTMLDivElement | undefined

components/TempDesignSystem/Table/table.module.css

@@ -19,9 +19,7 @@
 
 .th {
   padding: var(--Spacing-x2);
-
   text-align: left;
-  text-wrap: nowrap;
 }
 
 .td {

components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -31,7 +31,7 @@ export default function TeaserCardSidepeek({
         wrapping
       >
         {button.call_to_action_text}
-        <ChevronRightIcon />
+        <ChevronRightIcon height={20} width={20} />
       </Button>
       <SidePeek
         title={heading}

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -77,3 +77,23 @@
 .pink {
   color: var(--Primary-Dark-On-Surface-Accent);
 }
+
+.secondaryLightAccent {
+  color: var(--Secondary-Light-On-Surface-Accent);
+}
+
+.tertiaryLightAccent {
+  color: var(--Tertiary-Light-On-Surface-Accent);
+}
+
+.primaryDimAccent {
+  color: var(--Primary-Dim-On-Surface-Accent);
+}
+
+.primaryStrongAccent {
+  color: var(--Primary-Strong-On-Surface-Accent);
+}
+
+.baseText {
+  color: var(--Base-Text-Inverted);
+}

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -12,6 +12,11 @@ const config = {
       primaryLightOnSurfaceAccent: styles.plosa,
       red: styles.red,
       pink: styles.pink,
+      secondaryLightAccent: styles.secondaryLightAccent,
+      tertiaryLightAccent: styles.tertiaryLightAccent,
+      primaryDimAccent: styles.primaryDimAccent,
+      primaryStrongAccent: styles.primaryStrongAccent,
+      baseText: styles.baseText,
     },
     textAlign: {
       center: styles.center,

components/TempDesignSystem/Text/Body/body.module.css

@@ -73,11 +73,11 @@
 }
 
 .textMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+  color: var(--Base-Text-Medium-contrast);
 }
 
 .textHighContrast {
-  color: var(--UI-Text-High-contrast);
+  color: var(--Base-Text-High-contrast);
 }
 
 .baseTextMediumContrast {
@@ -111,3 +111,31 @@
 .disabled {
   color: var(--Base-Text-Disabled);
 }
+
+.primaryLight {
+  color: var(--Primary-Light-On-Surface-Text);
+}
+
+.secondaryLight {
+  color: var(--Secondary-Light-On-Surface-Text);
+}
+
+.tertiaryLight {
+  color: var(--Tertiary-Light-On-Surface-Text);
+}
+
+.primaryDark {
+  color: var(--Primary-Dark-On-Surface-Text);
+}
+
+.primaryDim {
+  color: var(--Primary-Dim-On-Surface-Text);
+}
+
+.primaryStrong {
+  color: var(--Primary-Strong-On-Surface-Text);
+}
+
+.baseText {
+  color: var(--Base-Text-Inverted);
+}

components/TempDesignSystem/Text/Body/variants.ts

@@ -19,6 +19,13 @@ const config = {
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
+      primaryLight: styles.primaryLight,
+      secondaryLight: styles.secondaryLight,
+      tertiaryLight: styles.tertiaryLight,
+      primaryDark: styles.primaryDark,
+      primaryDim: styles.primaryDim,
+      primaryStrong: styles.primaryStrong,
+      baseText: styles.baseText,
     },
     textAlign: {
       center: styles.textAlignCenter,

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -59,6 +59,10 @@
   color: var(--Scandic-Brand-Pale-Peach);
 }
 
+.baseTextMediumContrast {
+  color: var(--Base-Text-High-contrast);
+}
+
 .uiTextHighContrast {
   color: var(--UI-Text-High-contrast);
 }
@@ -67,6 +71,10 @@
   color: var(--UI-Text-Medium-contrast);
 }
 
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
 .red {
   color: var(--Scandic-Brand-Scandic-Red);
 }

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -9,8 +9,10 @@ const config = {
       burgundy: styles.burgundy,
       disabled: styles.disabled,
       pale: styles.pale,
+      baseTextMediumContrast: styles.baseTextMediumContrast,
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
       red: styles.red,
     },
     textAlign: {

components/TempDesignSystem/Text/Title/title.module.css

@@ -113,3 +113,31 @@
 .white {
   color: var(--UI-Opacity-White-100);
 }
+
+.primaryLight {
+  color: var(--Primary-Light-On-Surface-Text);
+}
+
+.secondaryLight {
+  color: var(--Secondary-Light-On-Surface-Text);
+}
+
+.tertiaryLight {
+  color: var(--Tertiary-Light-On-Surface-Text);
+}
+
+.primaryDark {
+  color: var(--Primary-Dark-On-Surface-Text);
+}
+
+.primaryDim {
+  color: var(--Primary-Dim-On-Surface-Text);
+}
+
+.primaryStrong {
+  color: var(--Primary-Strong-On-Surface-Text);
+}
+
+.baseText {
+  color: var(--Base-Text-Inverted);
+}

components/TempDesignSystem/Text/Title/variants.ts

@@ -11,6 +11,13 @@ const config = {
       peach80: styles.peach80,
       red: styles.red,
       white: styles.white,
+      primaryLight: styles.primaryLight,
+      secondaryLight: styles.secondaryLight,
+      tertiaryLight: styles.tertiaryLight,
+      primaryDark: styles.primaryDark,
+      primaryDim: styles.primaryDim,
+      primaryStrong: styles.primaryStrong,
+      baseText: styles.baseText,
     },
     textAlign: {
       center: styles.center,