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

2024-06-18 08:15:57 +02:00
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
--- a/components/TempDesignSystem/Select/index.tsx
+++ b/components/TempDesignSystem/Select/index.tsx
@@ -0,0 +1,98 @@
+"use client"
+import { useState } from "react"
+import {
+  Button,
+  type Key,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select as ReactAriaSelect,
+  SelectValue,
+} from "react-aria-components"
+
+import Label from "@/components/TempDesignSystem/Form/Label"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import SelectChevron from "../Form/SelectChevron"
+
+import styles from "./select.module.css"
+
+import type {
+  SelectPortalContainer,
+  SelectPortalContainerArgs,
+  SelectProps,
+} from "./select"
+
+export default function Select({
+  "aria-label": ariaLabel,
+  defaultSelectedKey,
+  items,
+  label,
+  name,
+  onSelect,
+  placeholder,
+  value,
+}: SelectProps) {
+  const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
+
+  function setRef(node: SelectPortalContainerArgs) {
+    if (node) {
+      setRootDiv(node)
+    }
+  }
+
+  function handleOnSelect(key: Key) {
+    onSelect(key)
+  }
+
+  return (
+    <div className={styles.container} ref={setRef}>
+      <ReactAriaSelect
+        aria-label={ariaLabel}
+        className={styles.select}
+        defaultSelectedKey={defaultSelectedKey}
+        name={name}
+        onSelectionChange={handleOnSelect}
+        placeholder={placeholder}
+        selectedKey={value as Key}
+      >
+        <Body asChild fontOnly>
+          <Button className={styles.input}>
+            <div className={styles.inputContentWrapper}>
+              <Label size="small">{label}</Label>
+              <SelectValue />
+            </div>
+            <SelectChevron />
+          </Button>
+        </Body>
+        <Body asChild fontOnly>
+          <Popover
+            className={styles.popover}
+            placement="bottom"
+            shouldFlip={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={rootDiv}
+          >
+            <ListBox className={styles.listBox}>
+              {items.map((item) => (
+                <ListBoxItem
+                  aria-label={String(item)}
+                  className={styles.listBoxItem}
+                  id={item.value}
+                  key={item.label}
+                >
+                  {item.label}
+                </ListBoxItem>
+              ))}
+            </ListBox>
+          </Popover>
+        </Body>
+      </ReactAriaSelect>
+    </div>
+  )
+}
--- a/components/TempDesignSystem/Select/select.module.css
+++ b/components/TempDesignSystem/Select/select.module.css
@@ -0,0 +1,68 @@
+.container {
+  position: relative;
+}
+
+.select {
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.select[data-focused="true"] {
+  border: 1px solid var(--Scandic-Blue-90);
+  outline: none;
+}
+
+.input {
+  align-items: center;
+  background-color: var(--Scandic-Opacity-White-100);
+  border: none;
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Base-Text-UI-High-contrast);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  height: 60px;
+  outline: none;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  text-align: left;
+}
+
+.inputContentWrapper {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  flex: 1 0 0;
+}
+
+.popover {
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  overflow: auto;
+  width: 100%;
+}
+
+.listBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.listBoxItem {
+  padding: var(--Spacing-x2);
+}
+
+.listBoxItem[data-focused="true"] {
+  background: var(--UI-Input-Controls-Surface-Hover, var(--Scandic-Blue-00));
+  outline: none;
+}
+
+.listBoxItem[data-selected="true"] {
+  font-weight: 500;
+}
--- a/components/TempDesignSystem/Select/select.ts
+++ b/components/TempDesignSystem/Select/select.ts
@@ -0,0 +1,15 @@
+import type { Key } from "react-aria-components"
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onSelect"> {
+  defaultSelectedKey?: Key
+  items: { label: string; value: Key }[]
+  label: string
+  name: string
+  onSelect: (key: Key) => void
+  placeholder?: string
+  value?: string | number
+}
+
+export type SelectPortalContainer = HTMLDivElement | undefined
+export type SelectPortalContainerArgs = HTMLDivElement | null