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/InputLabel/InputLabel.tsx

@@ -9,6 +9,7 @@ export function InputLabel({
   required,
   disabled,
   size,
+  ...rest
 }: InputLabelProps) {
   const classNames = inputLabelVariants({
     size,
@@ -18,5 +19,10 @@ export function InputLabel({
     className,
   })
 
-  return <span className={classNames}>{children}</span>
+  return (
+    <span className={classNames} {...rest}>
+      {children}
+      {required && <span aria-hidden="true">{' *'}</span>}
+    </span>
+  )
 }

packages/design-system/lib/components/InputLabel/inputLabel.module.css

@@ -39,10 +39,6 @@
   order: unset;
 }
 
-.required:after {
-  content: ' *';
-}
-
 input:focus ~ .inputLabel,
 input:placeholder-shown ~ .inputLabel,
 input[value]:not([value='']) ~ .inputLabel,