Merge branch 'develop' into feature/tracking

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

@@ -21,7 +21,6 @@
 }
 
 .checkbox {
-  flex-grow: 1;
   width: 24px;
   height: 24px;
   min-width: 24px;

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

@@ -28,7 +28,7 @@ export default function Card({
   const { register } = useFormContext()
 
   return (
-    <label className={styles.label} data-declined={declined}>
+    <label className={styles.label} data-declined={declined} tabIndex={0}>
       <Caption className={styles.title} type="label" uppercase>
         {title}
       </Caption>

components/TempDesignSystem/Form/Date/index.tsx

@@ -28,62 +28,36 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     rules: registerOptions,
   })
 
-  const [dateSegments, setDateSegment] = useState<{
-    year: number | null
-    month: number | null
-    date: number | null
-    daysInMonth: number
-  }>({
-    year: null,
-    month: null,
-    date: null,
-    daysInMonth: 31,
-  })
-
   const currentYear = new Date().getFullYear()
+
   const months = rangeArray(1, 12).map((month) => ({
     value: month,
     label: `${month}`,
   }))
+
   const years = rangeArray(1900, currentYear - 18)
     .reverse()
     .map((year) => ({ value: year, label: year.toString() }))
 
+  // Ensure the user can't select a date that doesn't exist.
+  const daysInMonth = dt(currentValue).daysInMonth()
+  const days = rangeArray(1, daysInMonth).map((day) => ({
+    value: day,
+    label: `${day}`,
+  }))
+
   function createOnSelect(selector: DateName) {
     /**
      * Months are 0 index based and therefore we
      * must subtract by 1 to get the selected month
      */
     return (select: Key) => {
-      const value =
-        selector === DateName.month ? Number(select) - 1 : Number(select)
-      const newSegments = { ...dateSegments, [selector]: value }
-
-      /**
-       * Update daysInMonth when year or month changes
-       * to ensure the user can't select a date that doesn't exist.
-       */
-      if (selector === DateName.year || selector === DateName.month) {
-        const year = selector === DateName.year ? value : newSegments.year
-        const month = selector === DateName.month ? value : newSegments.month
-        if (year !== null && month !== null) {
-          newSegments.daysInMonth = dt().year(year).month(month).daysInMonth()
-        } else if (month !== null) {
-          newSegments.daysInMonth = dt().month(month).daysInMonth()
-        }
+      if (selector === DateName.month) {
+        select = Number(select) - 1
       }
-
-      if (Object.values(newSegments).every((val) => val !== null)) {
-        const newDate = dt()
-          .utc()
-          .set("year", newSegments.year!)
-          .set("month", newSegments.month!)
-          .set("date", Math.min(newSegments.date!, newSegments.daysInMonth))
-
-        setValue(name, newDate.format("YYYY-MM-DD"))
-        trigger(name)
-      }
-      setDateSegment(newSegments)
+      const newDate = dt(currentValue).set(selector, Number(select))
+      setValue(name, newDate.format("YYYY-MM-DD"))
+      trigger(name)
     }
   }
 
@@ -117,11 +91,6 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
           {(segment) => {
             switch (segment.type) {
               case "day":
-                const maxDays = dateSegments.daysInMonth
-                const days = rangeArray(1, maxDays).map((day) => ({
-                  value: day,
-                  label: `${day}`,
-                }))
                 return (
                   <div className={styles.day}>
                     <Select

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

@@ -1,7 +1,7 @@
 .phone {
   display: grid;
   gap: var(--Spacing-x2);
-  grid-template-columns: max(164px) 1fr;
+  grid-template-columns: minmax(124px, 164px) 1fr;
 
   --react-international-phone-background-color: var(--Main-Grey-White);
   --react-international-phone-border-color: var(--Scandic-Beige-40);