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

components/TempDesignSystem/Form/Country/country.module.css

@@ -1,35 +1,46 @@
 .container {
-  --select-border: 2px solid var(--UI-Grey-60);
-  --select-width: min(28rem, 100%);
+  position: relative;
 }
 
 .comboBoxContainer {
   background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-radius: var(--Corner-radius-Medium);
+  border-style: solid;
+  border-width: 1px;
   display: grid;
-  grid-template-areas: "content";
-  width: var(--select-width);
+  gap: var(--Spacing-x-half);
+  grid-template-areas:
+    "label chevron"
+    "input chevron";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  height: 60px;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+}
+
+.label {
+  grid-area: label;
 }
 
 .input {
   background-color: var(--Main-Grey-White);
-  border: var(--select-border);
-  border-radius: var(--Corner-radius-Small);
-  grid-area: content;
-  height: 40px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-  width: var(--select-width);
+  border: none;
+  grid-area: input;
+  height: 18px;
+  padding: 0;
 }
 
 .input,
 .listBoxItem {
-  color: var(--UI-Grey-60);
+  color: var(--Main-Grey-100);
 }
 
 .button {
   background: none;
   border: none;
   cursor: pointer;
-  grid-area: content;
+  grid-area: chevron;
   height: 100%;
   justify-self: flex-end;
   padding-left: 0;
@@ -38,13 +49,27 @@
 
 .popover {
   background-color: var(--Main-Grey-White);
-  border: var(--select-border);
-  border-radius: var(--Corner-radius-Small);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Medium);
+  left: 0px;
+  max-height: 400px;
   overflow: auto;
-  padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x1);
-  width: var(--select-width);
+  padding: var(--Spacing-x2);
+  top: calc(60px + var(--Spacing-x1));
+  width: 100%;
 }
 
 .listBoxItem {
-  padding: 0 var(--Spacing-x1);
-}
+  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
+    var(--Spacing-x2);
+}
+
+.listBoxItem[data-selected="true"],
+.listBoxItem:hover {
+  background-color: var(--Scandic-Blue-00);
+  border-radius: var(--Corner-radius-Medium);
+  cursor: pointer;
+  outline: none;
+}

components/TempDesignSystem/Form/Country/country.ts

@@ -1,6 +1,11 @@
 import type { RegisterOptions } from "react-hook-form"
 
 export type CountryProps = {
+  label: string
   name?: string
+  placeholder?: string
   registerOptions?: RegisterOptions
 }
+
+export type CountryPortalContainer = HTMLDivElement | undefined
+export type CountryPortalContainerArgs = HTMLDivElement | null

components/TempDesignSystem/Form/Country/index.tsx

@@ -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) => (