scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-162): final design edit profile page

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-18 08:15:57 +02:00
committed by Christel Westerberg
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/TempDesignSystem/Form/Country/index.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { ErrorMessage } from "@hookform/error-message"
import { useRef } from "react"
import { useState } from "react"
import {
Button,
ComboBox,
@@ -14,21 +14,33 @@ import {
import { useController, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Label from "@/components/TempDesignSystem/Form/Label"
import SelectChevron from "@/components/TempDesignSystem/Form/SelectChevron"
import Body from "@/components/TempDesignSystem/Text/Body"
import SelectChevron from "../SelectChevron"
import { countries } from "./countries"
import styles from "./country.module.css"
import type { CountryProps } from "./country"
import type {
CountryPortalContainer,
CountryPortalContainerArgs,
CountryProps,
} from "./country"
export default function CountrySelect({
label,
name = "country",
registerOptions,
registerOptions = {},
}: CountryProps) {
const { formatMessage } = useIntl()
const divRef = useRef<HTMLDivElement>(null)
const [rootDiv, setRootDiv] = useState<CountryPortalContainer>(undefined)
function setRef(node: CountryPortalContainerArgs) {
if (node) {
setRootDiv(node)
}
}
const { control, setValue } = useFormContext()
const { field } = useController({
control,
@@ -43,7 +55,7 @@ export default function CountrySelect({
const selectCountryLabel = formatMessage({ id: "Select a country" })
return (
<div className={styles.container} ref={divRef}>
<div className={styles.container} ref={setRef}>
<ComboBox
aria-label={formatMessage({ id: "Select country of residence" })}
className={styles.select}
@@ -55,6 +67,13 @@ export default function CountrySelect({
selectedKey={field.value}
>
<div className={styles.comboBoxContainer}>
<Label
className={styles.label}
size="small"
required={!!registerOptions.required}
>
{label}
</Label>
<Body asChild fontOnly>
<Input
aria-label={selectCountryLabel}
@@ -73,13 +92,14 @@ export default function CountrySelect({
className={styles.popover}
placement="bottom"
shouldFlip={false}
shouldUpdatePosition={false}
/**
* react-aria uses portals to render Popover in body
* unless otherwise specified. We need it to be contained
* by this component to both access css variables assigned
* on the container as well as to not overflow it at any time.
*/
UNSTABLE_portalContainer={divRef.current ?? undefined}
UNSTABLE_portalContainer={rootDiv}
>
<ListBox>
{countries.map((country, idx) => (