Merge branch 'develop' into feature/tracking

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

@@ -9,6 +9,11 @@
   background: var(--UI-Input-Controls-Fill-Selected);
 }
 
+.container[data-disabled] .checkbox {
+  border: 1px solid var(--UI-Input-Controls-Border-Disabled);
+  background: var(--UI-Input-Controls-Surface-Disabled);
+}
+
 .checkboxContainer {
   display: flex;
   align-items: flex-start;
@@ -20,13 +25,12 @@
   width: 24px;
   height: 24px;
   min-width: 24px;
-  border: 2px solid var(--UI-Input-Controls-Border-Normal);
+  border: 1px solid var(--UI-Input-Controls-Border-Normal);
   border-radius: 4px;
   transition: all 200ms;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 200ms;
   forced-color-adjust: none;
 }
 

components/TempDesignSystem/Form/Checkbox/checkbox.ts

@@ -1,7 +0,0 @@
-import { RegisterOptions } from "react-hook-form"
-
-export interface CheckboxProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  name: string
-  registerOptions?: RegisterOptions
-}

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -7,10 +7,10 @@ import { InfoCircleIcon } from "@/components/Icons"
 import CheckIcon from "@/components/Icons/Check"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import { CheckboxProps } from "./checkbox"
-
 import styles from "./checkbox.module.css"
 
+import { CheckboxProps } from "@/types/components/checkbox"
+
 export default function Checkbox({
   name,
   children,
@@ -29,6 +29,7 @@ export default function Checkbox({
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
+      isDisabled={registerOptions?.disabled}
     >
       {({ isSelected }) => (
         <>

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

@@ -29,14 +29,14 @@ export default function Card({
 
   return (
     <label className={styles.label} data-declined={declined}>
-      <Caption className={styles.title} textTransform="bold" uppercase>
+      <Caption className={styles.title} type="label" uppercase>
         {title}
       </Caption>
       {subtitle ? (
         <Caption
           className={styles.subtitle}
           color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
-          textTransform="bold"
+          type="regular"
         >
           {subtitle}
         </Caption>

components/TempDesignSystem/Form/Date/index.tsx

@@ -20,8 +20,8 @@ import type { DateProps } from "./date"
 
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const intl = useIntl()
-  const d = useWatch({ name })
-  const { control, setValue } = useFormContext()
+  const currentValue = useWatch({ name })
+  const { control, setValue, trigger } = useFormContext()
   const { field } = useController({
     control,
     name,
@@ -47,7 +47,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   }))
   const years = rangeArray(1900, currentYear - 18)
     .reverse()
-    .map((year) => ({ value: year, label: `${year}` }))
+    .map((year) => ({ value: year, label: year.toString() }))
 
   function createOnSelect(selector: DateName) {
     /**
@@ -68,6 +68,8 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         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()
         }
       }
 
@@ -79,6 +81,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
           .set("date", Math.min(newSegments.date!, newSegments.daysInMonth))
 
         setValue(name, newDate.format("YYYY-MM-DD"))
+        trigger(name)
       }
       setDateSegment(newSegments)
     }
@@ -95,9 +98,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
      * date, but we can't check isNan since
      * we recieve the date as "1999-01-01"
      */
-    dateValue = dt(d).isValid() ? parseDate(d) : null
+    dateValue = dt(currentValue).isValid() ? parseDate(currentValue) : null
   } catch (error) {
-    console.error(error)
+    console.warn("Known error for parse date in DateSelect: ", error)
   }
 
   return (
@@ -130,9 +133,10 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="DD"
                       required
                       tabIndex={3}
-                      defaultValue={
+                      defaultSelectedKey={
                         segment.isPlaceholder ? undefined : segment.value
                       }
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
@@ -148,9 +152,10 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="MM"
                       required
                       tabIndex={2}
-                      defaultValue={
+                      defaultSelectedKey={
                         segment.isPlaceholder ? undefined : segment.value
                       }
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )
@@ -166,9 +171,10 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
                       placeholder="YYYY"
                       required
                       tabIndex={1}
-                      defaultValue={
+                      defaultSelectedKey={
                         segment.isPlaceholder ? undefined : segment.value
                       }
+                      value={segment.isPlaceholder ? undefined : segment.value}
                     />
                   </div>
                 )

components/TempDesignSystem/Form/NewPassword/index.tsx

@@ -30,10 +30,11 @@ export default function NewPassword({
   placeholder = "",
   registerOptions = {},
   label,
+  visibilityToggleable = true,
 }: NewPasswordProps) {
   const { control } = useFormContext()
   const intl = useIntl()
-  const [isPasswordVisible, setPasswordVisible] = useState(false)
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false)
 
   function getErrorMessage(key: PasswordValidatorKey) {
     switch (key) {
@@ -69,7 +70,9 @@ export default function NewPassword({
             onChange={field.onChange}
             validationBehavior="aria"
             value={field.value}
-            type={isPasswordVisible ? "text" : "password"}
+            type={
+              visibilityToggleable && isPasswordVisible ? "text" : "password"
+            }
           >
             <div className={styles.inputWrapper}>
               <AriaInputWithLabel
@@ -78,18 +81,24 @@ export default function NewPassword({
                 id={field.name}
                 label={intl.formatMessage({ id: "New password" })}
                 placeholder={placeholder}
-                type={isPasswordVisible ? "text" : "password"}
+                type={
+                  visibilityToggleable && isPasswordVisible
+                    ? "text"
+                    : "password"
+                }
               />
-              <Button
-                className={styles.eyeIcon}
-                type="button"
-                variant="icon"
-                size="small"
-                intent="tertiary"
-                onClick={() => setPasswordVisible(!isPasswordVisible)}
-              >
-                {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
-              </Button>
+              {visibilityToggleable ? (
+                <Button
+                  className={styles.eyeIcon}
+                  type="button"
+                  variant="icon"
+                  size="small"
+                  intent="tertiary"
+                  onClick={() => setIsPasswordVisible((value) => !value)}
+                >
+                  {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
+                </Button>
+              ) : null}
             </div>
             {field.value ? (
               <div className={styles.errors}>

components/TempDesignSystem/Form/NewPassword/newPassword.ts

@@ -4,6 +4,7 @@ export interface NewPasswordProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
   registerOptions?: RegisterOptions
+  visibilityToggleable?: boolean
 }
 
 export interface IconProps {