From e649a842c6555dbadbdeb1e53b24e2c5ef7e70e7 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Wed, 29 May 2024 14:49:15 +0200
Subject: [PATCH] feat: add initial design to Select

---
 .../TempDesignSystem/Form/Select/index.tsx    | 21 +++---
 .../Form/Select/select.module.css             | 69 +++++++++++++------
 2 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/components/TempDesignSystem/Form/Select/index.tsx b/components/TempDesignSystem/Form/Select/index.tsx
index 95a5b4d68..4c7445824 100644
--- a/components/TempDesignSystem/Form/Select/index.tsx
+++ b/components/TempDesignSystem/Form/Select/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { useRef } from "react"
+import { RefObject, useEffect, useRef, useState } from "react"
 import {
   Button,
   type Key,
@@ -21,20 +21,23 @@ export default function Select({
   "aria-label": ariaLabel,
   items,
   label,
-  name,
+  // name,
   onSelect,
   placeholder,
   value,
   defaultSelectedKey,
 }: SelectProps) {
-  const divRef = useRef<HTMLDivElement>(null)
-
+  const ref = useRef<HTMLDivElement>(null)
+  const [rootDiv, setRootDiv] = useState<HTMLDivElement | null>(null)
+  useEffect(() => {
+    setRootDiv(ref.current)
+  }, [ref])
   function handleOnSelect(key: Key) {
     onSelect(key)
   }
 
   return (
-    <div className={styles.date} ref={divRef}>
+    <div className={styles.container} ref={ref}>
       <ReactAriaSelect
         defaultSelectedKey={defaultSelectedKey}
         aria-label={ariaLabel}
@@ -43,9 +46,11 @@ export default function Select({
         placeholder={placeholder}
         selectedKey={value as Key}
       >
-        <Label className={styles.label}>{label}</Label>
         <Button className={styles.input}>
-          <SelectValue />
+          <div className={styles.inputContentWrapper}>
+            <Label className={styles.label}>{label}</Label>
+            <SelectValue />
+          </div>
           <SelectChevron />
         </Button>
         <Popover
@@ -58,7 +63,7 @@ export default function Select({
            * 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 ?? undefined}
         >
           <ListBox className={styles.listBox}>
             {items.map((item) => (
diff --git a/components/TempDesignSystem/Form/Select/select.module.css b/components/TempDesignSystem/Form/Select/select.module.css
index 11620e027..33c520be2 100644
--- a/components/TempDesignSystem/Form/Select/select.module.css
+++ b/components/TempDesignSystem/Form/Select/select.module.css
@@ -1,4 +1,4 @@
-.date {
+.container {
   position: relative;
 }
 
@@ -7,51 +7,76 @@
   font-family: var(--typography-Footnote-Regular-fontFamily);
   font-size: var(--typography-Footnote-Regular-fontSize);
   font-weight: 400;
-  position: absolute;
-  left: 1.6rem;
+  line-height: 100%;
 }
 
 .select {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.select[data-focused="true"] {
+  border: 1px solid var(--UI-Text-Active, #0d1f5f);
+  outline: none;
 }
 
 .input {
-  align-items: end;
-  background-color: var(--some-white-color, #fff);
-  border: 1px solid var(--Base-Input-Controls-Border-Normal, #b8a79a);
-  border-radius: 0.8rem;
-  color: var(--some-black-color, #757575);
-  display: grid;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  background-color: var(--Scandic-Opacity-White-100);
+  border: none;
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Base-Text-UI-High-contrast);
+  height: 5.6rem;
+  font-family: var(--ff-fira-sans);
   font-size: 1.6rem;
   font-weight: 400;
-  gap: 1rem;
-  grid-template-columns: 1fr auto;
-  height: 5.6rem;
-  /* letter-spacing: -1.5%; */
-  line-height: 2.4rem;
-  padding: 0.8rem 1.6rem;
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  line-height: 100%;
+  outline: none;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  text-align: left;
+}
+
+.inputContentWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.6rem;
+  flex: 1 0 0;
 }
 
 .popover {
   background-color: var(--some-white-color, #fff);
-  border: var(--border);
-  border-radius: var(--radius);
+  border-radius: var(--Corner-radius-Medium);
+  display: inline-flex;
+  flex-direction: column;
+  font-size: var(--typography-Body-Regular-fontSize);
+  gap: var(--Spacing-x1);
   overflow: auto;
   width: 100%;
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
 }
 
 .listBox {
-  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
 }
 
 .listBoxItem {
-  padding: 0 0.8rem;
+  padding: var(--Spacing-x2);
 }
 
-.listBoxItem[data-selected="true"],
 .listBoxItem[data-focused="true"] {
-  background-color: rgba(75, 75, 75, 0.2);
+  background: var(--UI-Input-Controls-Surface-Hover, var(--Scandic-Blue-00));
+  outline: none;
+}
+
+.listBoxItem[data-selected="true"] {
+  font-weight: 500;
 }