Merged in feat/use-new-input-component (pull request #3324)

feat(SW-3659): Use new input component

* Use new input component

* Update error formatter

* Merged master into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Merge branch 'master' into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Update Input stories

* Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component

* Update Storybook logo

* Add some new demo icon input story

* Fix the clear content button position

* Fix broken password input icon

* Merged master into feat/use-new-input-component

* Merged master into feat/use-new-input-component

* Add aria-hidden to required asterisk

* Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component

* Merge branch 'master' into feat/use-new-input-component


Approved-by: Bianca Widstam
Approved-by: Matilda Landström

packages/design-system/lib/components/Input/input.module.css

@@ -1,3 +1,13 @@
+/* Label positioned above input (outside container) */
+.labelAbove {
+  color: var(--Text-Default);
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Body-Supporting-text-Size);
+  font-weight: var(--Body-Supporting-text-Font-weight-2);
+  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
+  line-height: 1.5;
+}
+
 .container {
   align-content: center;
   background-color: var(--Surface-Primary-Default);
@@ -10,8 +20,13 @@
   box-sizing: border-box;
   cursor: text;
 
-  .container:has(.input:focus):not(:has(.input:disabled)),
-  .container:has(.input:focus):not(:has(.input:read-only)) {
+  &:has(.input:focus):not(:has(.input:disabled)):not(
+      :has(.input:read-only)
+    ):not(:has(.input[data-invalid='true'])):not(
+      :has(.input[aria-invalid='true'])
+    ):not(:has(.input[data-warning='true'])):not(
+      :has(.input[data-validation-state='warning'])
+    ):not([data-validation-state='warning']) {
     outline-offset: -2px;
     outline: 2px solid var(--Border-Interactive-Focus);
   }
@@ -26,11 +41,35 @@
   &:has(.input[data-invalid='true'], .input[aria-invalid='true']) {
     border-color: var(--Border-Interactive-Error);
 
-    &:focus-within {
+    &:focus-within,
+    &:has(.input:focus) {
       outline-offset: -2px;
       outline: 2px solid var(--Border-Interactive-Error);
+      border-color: var(--Border-Interactive-Error);
     }
   }
+
+  &:has(.input[data-warning='true']),
+  &:has(.input[data-validation-state='warning']),
+  &[data-validation-state='warning'] {
+    background-color: var(--Surface-Feedback-Warning-light);
+    border-color: var(--Border-Interactive-Focus);
+
+    &:focus-within,
+    &:has(.input:focus) {
+      outline-offset: -2px;
+      outline: 2px solid var(--Border-Interactive-Focus);
+      border-color: var(--Border-Interactive-Focus);
+    }
+  }
+}
+
+.containerWithLeftIcon {
+  padding-left: calc(var(--Space-x5) + 4px);
+}
+
+.containerWithRightIcon {
+  padding-right: calc(var(--Space-x5));
 }
 
 .input {
@@ -41,6 +80,7 @@
   order: 2;
   padding: 0;
   transition: height 150ms ease;
+  width: 100%;
 
   &:focus,
   &:placeholder-shown,
@@ -56,6 +96,43 @@
   }
 }
 
+/* Input with label on top - always has proper height */
+.inputTopLabel {
+  height: 24px;
+  order: 2;
+}
+
+.inputContainer {
+  position: relative;
+}
+
+.leftIconContainer {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  bottom: 0;
+  margin: auto 0 auto var(--Space-x15);
+}
+
+.rightIconContainer {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto var(--Space-x15) auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rightIconButton {
+  width: 24px;
+  height: 24px;
+}
+
 @media (hover: hover) {
   .input:active:not(:disabled) {
     height: 24px;