feat: autofill all fields on enter details and countryselector clean up

2025-05-06 08:43:15 +02:00
parent 81c2afe570
commit 4d41d4fd92
9 changed files with 290 additions and 33 deletions
--- a/apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css
@@ -0,0 +1,158 @@
+.select {
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+  position: relative;
+
+  &[data-required] .label::after {
+    content: " *";
+  }
+
+  &[data-open] {
+    .chevron {
+      rotate: -90deg;
+    }
+  }
+
+  &[data-focused] {
+    border-color: 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);
+  height: 56px;
+  padding: var(--Space-x15);
+  width: 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);
+  }
+}