Merged in chore/SW-3145-move-country (pull request #2545)

chore: SW-3145 Moved country into design system

* chore: SW-3145 Moved country into design system


Approved-by: Anton Gunnarsson

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

@@ -0,0 +1,72 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useController } from 'react-hook-form'
+
+import { Select } from '../../Select'
+
+import { ErrorMessage } from '../ErrorMessage'
+
+import type { CountryProps } from './country'
+
+const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
+
+export default function CountrySelect({
+  className = '',
+  errorMessage,
+  label,
+  countries,
+  lang = 'en',
+  name = 'country',
+  readOnly = false,
+  registerOptions = {},
+}: CountryProps) {
+  const { field, formState, fieldState } = useController({
+    name,
+    rules: registerOptions,
+  })
+
+  const items = useMemo(() => {
+    function mapCountry(country: (typeof countries)[number]) {
+      return {
+        value: country.code,
+        label: country.displayName || country.name,
+      }
+    }
+
+    const collator = new Intl.Collator(lang)
+    const prioCountries = countries
+      .filter((c) => prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    const restCountries = countries
+      .filter((c) => !prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    return [...prioCountries, ...restCountries]
+  }, [lang, countries])
+
+  return (
+    <div className={className}>
+      <Select
+        items={items}
+        label={label}
+        isReadOnly={readOnly}
+        isRequired={Boolean(registerOptions?.required)}
+        isInvalid={fieldState.invalid}
+        name={name}
+        onBlur={field.onBlur}
+        onSelectionChange={(c) => field.onChange(c ?? '')}
+        selectedKey={field.value}
+        data-testid={name}
+      />
+      <ErrorMessage
+        errors={formState.errors}
+        name={name}
+        messageLabel={errorMessage}
+      />
+    </div>
+  )
+}