Merge branch 'master' into feature/tracking

components/TempDesignSystem/Form/Checkbox/checkbox.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   color: var(--text-color);
+  cursor: pointer;
 }
 
 .container[data-selected] .checkbox {

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -12,6 +12,7 @@ import styles from "./checkbox.module.css"
 import { CheckboxProps } from "@/types/components/checkbox"
 
 export default function Checkbox({
+  className,
   name,
   children,
   registerOptions,
@@ -25,16 +26,17 @@ export default function Checkbox({
 
   return (
     <AriaCheckbox
-      className={styles.container}
+      className={`${styles.container} ${className}`}
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
       isDisabled={registerOptions?.disabled}
+      excludeFromTabOrder
     >
       {({ isSelected }) => (
         <>
           <span className={styles.checkboxContainer}>
-            <span className={styles.checkbox}>
+            <span className={styles.checkbox} tabIndex={0}>
               {isSelected && <CheckIcon color="white" />}
             </span>
             {children}

components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx

@@ -1,7 +0,0 @@
-import Card from "./_Card"
-
-import type { CheckboxProps } from "./_Card/card"
-
-export default function CheckboxCard(props: CheckboxProps) {
-  return <Card {...props} type="checkbox" />
-}

components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css

@@ -1,5 +1,4 @@
 .label {
-  align-self: flex-start;
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Large);

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -15,6 +15,7 @@ export default function Card({
   iconHeight = 32,
   iconWidth = 32,
   declined = false,
+  defaultChecked,
   highlightSubtitle = false,
   id,
   list,
@@ -45,6 +46,7 @@ export default function Card({
       <input
         {...register(name)}
         aria-hidden
+        defaultChecked={defaultChecked}
         id={id || name}
         hidden
         type={type}

components/TempDesignSystem/Form/Date/date.module.css

@@ -1,4 +1,8 @@
 /* Leaving, will most likely get deleted */
+.datePicker {
+  container-name: datePickerContainer;
+  container-type: inline-size;
+}
 .container {
   display: grid;
   gap: var(--Spacing-x2);
@@ -27,3 +31,10 @@
 .year.invalid > div > div {
   border-color: var(--Scandic-Red-60);
 }
+
+@container datePickerContainer (max-width: 350px) {
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+}

components/TempDesignSystem/Form/Date/index.tsx

@@ -115,6 +115,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
       ref={field.ref}
       value={dateValue}
       data-testid={name}
+      className={styles.datePicker}
     >
       <Group>
         <DateInput className={styles.container}>

components/TempDesignSystem/Form/FilterChip/_Chip/chip.module.css

@@ -2,11 +2,13 @@
   display: flex;
   align-items: center;
   gap: var(--Spacing-x-half);
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  padding: calc(var(--Spacing-x1) - 2px) var(--Spacing-x-one-and-half);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
   background-color: var(--Base-Surface-Secondary-light-Normal);
   cursor: pointer;
+  height: 32px;
+  background-color: var(--Base-Surface-Secondary-light-Normal);
 }
 
 .label[data-selected="true"],
@@ -21,8 +23,9 @@
 }
 
 .label[data-disabled="true"] {
-  background-color: var(--Base-Button-Primary-Fill-Disabled);
-  border-color: var(--Base-Button-Primary-Fill-Disabled);
+  background-color: var(--UI-Input-Controls-Surface-Disabled);
+  border-color: var(--UI-Input-Controls-Border-Disabled);
+  color: var(--Base-Text-Disabled);
   cursor: not-allowed;
 }
 

components/TempDesignSystem/Form/Phone/index.tsx

@@ -78,67 +78,69 @@ export default function Phone({
   }
 
   return (
-    <div className={`${styles.phone} ${className}`}>
-      <CountrySelector
-        disabled={readOnly}
-        dropdownArrowClassName={styles.arrow}
-        flagClassName={styles.flag}
-        onSelect={handleSelectCountry}
-        preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
-        selectedCountry={country.iso2}
-        renderButtonWrapper={(props) => (
-          <button
-            {...props.rootProps}
-            className={styles.select}
-            tabIndex={0}
-            type="button"
-            data-testid="country-selector"
-          >
-            <Label required={!!registerOptions.required} size="small">
-              {intl.formatMessage({ id: "Country code" })}
-            </Label>
-            <span className={styles.selectContainer}>
-              {props.children}
-              <Body asChild fontOnly>
-                <DialCodePreview
-                  className={styles.dialCode}
-                  dialCode={country.dialCode}
-                  prefix="+"
+    <div className={`${styles.wrapper} ${className}`}>
+      <div className={styles.phone}>
+        <CountrySelector
+          disabled={readOnly}
+          dropdownArrowClassName={styles.arrow}
+          flagClassName={styles.flag}
+          onSelect={handleSelectCountry}
+          preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
+          selectedCountry={country.iso2}
+          renderButtonWrapper={(props) => (
+            <button
+              {...props.rootProps}
+              className={styles.select}
+              tabIndex={0}
+              type="button"
+              data-testid="country-selector"
+            >
+              <Label required={!!registerOptions.required} size="small">
+                {intl.formatMessage({ id: "Country code" })}
+              </Label>
+              <span className={styles.selectContainer}>
+                {props.children}
+                <Body asChild fontOnly>
+                  <DialCodePreview
+                    className={styles.dialCode}
+                    dialCode={country.dialCode}
+                    prefix="+"
+                  />
+                </Body>
+                <ChevronDownIcon
+                  className={styles.chevron}
+                  color="grey80"
+                  height={18}
+                  width={18}
                 />
-              </Body>
-              <ChevronDownIcon
-                className={styles.chevron}
-                color="grey80"
-                height={18}
-                width={18}
-              />
-            </span>
-          </button>
-        )}
-      />
-      <TextField
-        aria-label={ariaLabel}
-        defaultValue={field.value}
-        isDisabled={disabled ?? field.disabled}
-        isInvalid={fieldState.invalid}
-        isRequired={!!registerOptions?.required}
-        isReadOnly={readOnly}
-        name={field.name}
-        type="tel"
-      >
-        <AriaInputWithLabel
-          {...field}
-          id={field.name}
-          label={label}
-          onChange={handleChange}
-          placeholder={placeholder}
-          readOnly={readOnly}
-          required={!!registerOptions.required}
-          type="tel"
-          value={inputValue}
+              </span>
+            </button>
+          )}
         />
-        <ErrorMessage errors={formState.errors} name={field.name} />
-      </TextField>
+        <TextField
+          aria-label={ariaLabel}
+          defaultValue={field.value}
+          isDisabled={disabled ?? field.disabled}
+          isInvalid={fieldState.invalid}
+          isRequired={!!registerOptions?.required}
+          isReadOnly={readOnly}
+          name={field.name}
+          type="tel"
+        >
+          <AriaInputWithLabel
+            {...field}
+            id={field.name}
+            label={label}
+            onChange={handleChange}
+            placeholder={placeholder}
+            readOnly={readOnly}
+            required={!!registerOptions.required}
+            type="tel"
+            value={inputValue}
+          />
+          <ErrorMessage errors={formState.errors} name={field.name} />
+        </TextField>
+      </div>
     </div>
   )
 }

components/TempDesignSystem/Form/Phone/phone.module.css

@@ -1,3 +1,7 @@
+.wrapper {
+  container-name: phoneContainer;
+  container-type: inline-size;
+}
 .phone {
   display: grid;
   gap: var(--Spacing-x2);
@@ -100,3 +104,10 @@
   justify-self: flex-start;
   padding: 0;
 }
+
+@container phoneContainer (max-width: 350px) {
+  .phone {
+    display: flex;
+    flex-direction: column;
+  }
+}