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
2025-07-10 12:20:49 +00:00
parent 5f9af2701e
commit 2f72a0437b
27 changed files with 229 additions and 136 deletions
--- a/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
+++ b/packages/design-system/lib/components/Form/Country/CountryCombobox.tsx
@@ -0,0 +1,164 @@
+'use client'
+
+import { type SyntheticEvent, useMemo, useState } from 'react'
+import {
+  Button,
+  ComboBox,
+  Input,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  useFilter,
+} from 'react-aria-components'
+import { useController } from 'react-hook-form'
+
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+import { Typography } from '../../Typography'
+import { ErrorMessage } from '../ErrorMessage'
+
+import styles from './country.module.css'
+
+import type { CountryProps } from './country'
+
+const prioCountryCode = ['DE', 'DK', 'FI', 'NO', 'SE']
+
+export default function CountryCombobox({
+  // hack used since chrome does not respect autocomplete="off"
+  autoComplete = 'nope',
+  className = '',
+  errorMessage,
+  label,
+  lang = 'en',
+  countries,
+  name = 'country',
+  readOnly = false,
+  registerOptions = {},
+}: CountryProps) {
+  const { startsWith } = useFilter({ sensitivity: 'base' })
+  const [filterValue, setFilterValue] = useState('')
+  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)
+      .filter((item) => startsWith(item.label, filterValue))
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    const restCountries = countries
+      .filter((c) => !prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .filter((item) => startsWith(item.label, filterValue))
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    return [...prioCountries, ...restCountries]
+  }, [filterValue, lang, startsWith, countries])
+
+  function handleOnInput(evt: SyntheticEvent<HTMLInputElement>) {
+    setFilterValue(evt.currentTarget.value)
+    const isAutoCompleteEvent = !('inputType' in evt.nativeEvent)
+    if (isAutoCompleteEvent) {
+      const { value } = evt.currentTarget
+      const cc = countries.find((c) => c.name === value || c.code === value)
+      if (cc) {
+        field.onChange(cc.code)
+      }
+    }
+  }
+
+  return (
+    <div className={className}>
+      <ComboBox
+        aria-label={label}
+        className={styles.select}
+        data-testid={name}
+        isReadOnly={readOnly}
+        isRequired={Boolean(registerOptions?.required)}
+        isInvalid={fieldState.invalid}
+        name={name}
+        onBlur={field.onBlur}
+        onSelectionChange={(c) => field.onChange(c ?? '')}
+        selectedKey={field.value}
+        menuTrigger="focus"
+      >
+        <Label className={styles.inner}>
+          <span className={styles.displayText}>
+            <Typography variant="Label/xsRegular">
+              <span className={`${styles.label} ${styles.labelValue}`}>
+                {label}
+              </span>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span className={`${styles.label} ${styles.labelEmpty}`}>
+                {label}
+              </span>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <Input
+                autoComplete={autoComplete}
+                className={styles.input}
+                onInput={handleOnInput}
+                ref={field.ref}
+              />
+            </Typography>
+          </span>
+          <Button className={styles.button}>
+            <MaterialIcon
+              aria-hidden="true"
+              className={styles.chevron}
+              color="Icon/Default"
+              icon="chevron_right"
+              size={24}
+            />
+          </Button>
+        </Label>
+        <Popover
+          className={styles.popover}
+          crossOffset={-8}
+          offset={22}
+          shouldFlip={false}
+        >
+          <ListBox className={styles.listBox}>
+            {items.map((item) => (
+              <ListBoxItem
+                className={styles.listBoxItem}
+                key={item.value}
+                id={item.value}
+                textValue={item.label}
+              >
+                {({ isSelected }) => (
+                  <Typography
+                    variant={
+                      isSelected
+                        ? 'Body/Paragraph/mdBold'
+                        : 'Body/Paragraph/mdRegular'
+                    }
+                  >
+                    <span>{item.label}</span>
+                  </Typography>
+                )}
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </Popover>
+      </ComboBox>
+      <ErrorMessage
+        errors={formState.errors}
+        name={name}
+        messageLabel={errorMessage}
+      />
+    </div>
+  )
+}
--- a/packages/design-system/lib/components/Form/Country/CountrySelect.tsx
+++ b/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>
+  )
+}
--- a/packages/design-system/lib/components/Form/Country/country.module.css
+++ b/packages/design-system/lib/components/Form/Country/country.module.css
@@ -0,0 +1,160 @@
+.select {
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+  position: relative;
+  height: 56px;
+
+  &[data-required] .label::after {
+    content: ' *';
+  }
+
+  &[data-open] {
+    .chevron {
+      rotate: -90deg;
+    }
+  }
+
+  &[data-focused] {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
+
+    .button,
+    .input {
+      outline: none;
+    }
+
+    .input {
+      min-height: 18px;
+    }
+
+    .label {
+      color: var(--Text-Interactive-Focus);
+    }
+  }
+
+  &[data-disabled] {
+    .inner {
+      background-color: var(--Surface-Primary-Disabled);
+      color: var(--Text-Interactive-Disabled);
+    }
+
+    .button,
+    .input,
+    .label {
+      color: var(--Text-Interactive-Disabled);
+    }
+  }
+
+  &[data-invalid] {
+    border-color: var(--Border-Interactive-Error);
+  }
+}
+
+.inner {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--Space-x1);
+  padding: var(--Space-x15);
+  width: 100%;
+  height: 100%;
+}
+
+.displayText {
+  cursor: text;
+  display: flex;
+  gap: calc(var(--Space-x05) / 2);
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+}
+
+.label {
+  color: var(--Text-Interactive-Placeholder);
+  transition: font-size 150ms ease;
+  white-space: nowrap;
+
+  &.labelValue {
+    display: none;
+  }
+
+  &.labelEmpty {
+    display: none;
+  }
+}
+
+.inner:has(input:placeholder-shown, input[data-focused='true'], input:valid)
+  .labelValue {
+  display: initial;
+}
+
+.inner:has(input[value='']:not([data-focused='true'])) .labelEmpty {
+  display: initial;
+}
+
+.input {
+  background: none;
+  border: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  transition: min-height 150ms ease;
+  width: 100%;
+
+  &[value]:not([value='']) {
+    min-height: 18px;
+  }
+}
+
+.button {
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+.chevron {
+  rotate: 90deg;
+}
+
+.popover {
+  background-color: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  min-width: 280px;
+  outline: none;
+  overflow: auto;
+  padding: var(--Space-x2);
+  scrollbar-color: var(--Icon-Interactive-Disabled);
+  scrollbar-width: thin;
+}
+
+.listBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  outline: none;
+}
+
+.listBoxItem {
+  align-items: center;
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Default);
+  display: flex;
+  gap: var(--Space-x1);
+  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
+
+  &[data-focused] {
+    outline: none;
+  }
+
+  &[data-focused],
+  &[data-hovered] {
+    background-color: var(--Surface-Primary-Hover);
+  }
+}
--- a/packages/design-system/lib/components/Form/Country/country.ts
+++ b/packages/design-system/lib/components/Form/Country/country.ts
@@ -0,0 +1,21 @@
+import type { RegisterOptions } from 'react-hook-form'
+
+export type CountryProps = {
+  autoComplete?: string
+  className?: string
+  errorMessage?: string
+  label: string
+  countries: {
+    code: string
+    name: string
+    displayName?: string
+  }[]
+  lang?: string
+  name?: string
+  placeholder?: string
+  readOnly?: boolean
+  registerOptions?: RegisterOptions
+}
+
+export type CountryPortalContainer = HTMLDivElement | undefined
+export type CountryPortalContainerArgs = HTMLDivElement | null
--- a/packages/design-system/lib/components/Form/Country/index.tsx
+++ b/packages/design-system/lib/components/Form/Country/index.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { useMediaQuery } from 'usehooks-ts'
+
+import CountryCombobox from './CountryCombobox'
+import CountrySelect from './CountrySelect'
+
+import type { CountryProps } from './country'
+
+export default function Country(props: CountryProps) {
+  const isDesktop = useMediaQuery('(min-width: 768px)', {
+    initializeWithValue: false,
+  })
+
+  return isDesktop ? (
+    <CountryCombobox {...props} />
+  ) : (
+    <CountrySelect {...props} />
+  )
+}
--- a/packages/design-system/lib/components/Form/ErrorMessage/Error.tsx
+++ b/packages/design-system/lib/components/Form/ErrorMessage/Error.tsx
@@ -0,0 +1,18 @@
+import { MaterialIcon } from '../../Icons/MaterialIcon'
+
+import styles from './error.module.css'
+import { Typography } from '../../Typography'
+
+export function Error({ children }: React.PropsWithChildren) {
+  return (
+    <Typography
+      className={styles.message}
+      variant="Body/Supporting text (caption)/smRegular"
+    >
+      <span>
+        <MaterialIcon icon="info" color="Icon/Feedback/Error" />
+        {children}
+      </span>
+    </Typography>
+  )
+}
--- a/packages/design-system/lib/components/Form/ErrorMessage/error.module.css
+++ b/packages/design-system/lib/components/Form/ErrorMessage/error.module.css
@@ -0,0 +1,7 @@
+.message {
+  align-items: center;
+  color: var(--Text-Interactive-Error);
+  display: flex;
+  gap: var(--Space-x05);
+  margin: var(--Space-x1) 0 0;
+}
--- a/packages/design-system/lib/components/Form/ErrorMessage/errorMessage.ts
+++ b/packages/design-system/lib/components/Form/ErrorMessage/errorMessage.ts
@@ -0,0 +1,18 @@
+import type { FieldValuesFromFieldErrors } from '@hookform/error-message'
+import type {
+  FieldErrors,
+  FieldName,
+  FieldValues,
+  Message,
+  MultipleFieldErrors,
+} from 'react-hook-form'
+
+export type ErrorMessageProps<TFieldErrors> = {
+  errors?: FieldErrors<FieldValues>
+  name: FieldName<FieldValuesFromFieldErrors<TFieldErrors>>
+  messageLabel?: Message
+  render?: (data: {
+    message: Message
+    messages?: MultipleFieldErrors
+  }) => React.ReactNode
+}
--- a/packages/design-system/lib/components/Form/ErrorMessage/index.tsx
+++ b/packages/design-system/lib/components/Form/ErrorMessage/index.tsx
@@ -0,0 +1,19 @@
+import { ErrorMessage as RHFErrorMessage } from '@hookform/error-message'
+
+import { Error } from './Error'
+
+import type { ErrorMessageProps } from './errorMessage'
+
+export function ErrorMessage<T>({
+  errors,
+  name,
+  messageLabel,
+}: ErrorMessageProps<T>) {
+  return (
+    <RHFErrorMessage
+      errors={errors}
+      name={name}
+      render={({ message }) => <Error>{messageLabel ?? message}</Error>}
+    />
+  )
+}
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -15,6 +15,8 @@
    "./Divider": "./dist/components/Divider/index.js",
    "./Footnote": "./dist/components/Footnote/index.js",
    "./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",
+    "./Form/Country": "./dist/components/Form/Country/index.js",
+    "./Form/ErrorMessage": "./dist/components/Form/ErrorMessage/index.js",
    "./Form/RadioCard": "./dist/components/Form/RadioCard/index.js",
    "./Input": "./dist/components/Input/index.js",
    "./Label": "./dist/components/Label/index.js",