Merged in fix/SW-2188-disable-fields-logged-in-user-enter-details (pull request #2595)

fix(SW-2188): disable enter details fields when logged in

* fix(SW-2188): disable enter details fields when logged in


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/Form/Country/CountryCombobox.tsx

@@ -32,7 +32,7 @@ export default function CountryCombobox({
   lang = 'en',
   countries,
   name = 'country',
-  readOnly = false,
+  disabled = false,
   registerOptions = {},
 }: CountryProps) {
   const { startsWith } = useFilter({ sensitivity: 'base' })
@@ -84,7 +84,7 @@ export default function CountryCombobox({
         aria-label={label}
         className={styles.select}
         data-testid={name}
-        isReadOnly={readOnly}
+        isDisabled={disabled}
         isRequired={Boolean(registerOptions?.required)}
         isInvalid={fieldState.invalid}
         name={name}

packages/design-system/lib/components/Form/Country/CountrySelect.tsx

@@ -18,7 +18,7 @@ export default function CountrySelect({
   countries,
   lang = 'en',
   name = 'country',
-  readOnly = false,
+  disabled = false,
   registerOptions = {},
 }: CountryProps) {
   const { field, formState, fieldState } = useController({
@@ -53,7 +53,7 @@ export default function CountrySelect({
       <Select
         items={items}
         label={label}
-        isReadOnly={readOnly}
+        isDisabled={disabled}
         isRequired={Boolean(registerOptions?.required)}
         isInvalid={fieldState.invalid}
         name={name}

packages/design-system/lib/components/Form/Country/country.module.css

@@ -34,6 +34,8 @@
   }
 
   &[data-disabled] {
+    border: transparent;
+
     .inner {
       background-color: var(--Surface-Primary-Disabled);
       color: var(--Text-Interactive-Disabled);
@@ -41,7 +43,8 @@
 
     .button,
     .input,
-    .label {
+    .label,
+    .chevron {
       color: var(--Text-Interactive-Disabled);
     }
   }
@@ -54,6 +57,7 @@
 .inner {
   align-items: center;
   box-sizing: border-box;
+  border-radius: var(--Corner-radius-md);
   display: flex;
   gap: var(--Space-x1);
   padding: var(--Space-x15);

packages/design-system/lib/components/Form/Country/country.ts

@@ -13,7 +13,7 @@ export type CountryProps = {
   lang?: string
   name?: string
   placeholder?: string
-  readOnly?: boolean
+  disabled?: boolean
   registerOptions?: RegisterOptions
 }