Merged in fix/3693-group-inputs-storybook (pull request #3402)

fix(SW-3693): Refactor Input stories to use FormInput component and showcase all controls

* Refactor Input stories to use FormInput component and showcase all controls

* Updated stories and added autocomplete prop to PasswordInput

* Merge branch 'master' into fix/3693-group-inputs-storybook

* Use FormTextArea in stories for TextArea to show description and error texts

* Merged master into fix/3693-group-inputs-storybook

* Merge branch 'master' into fix/3693-group-inputs-storybook

* Removed redundant font name and fixed broken icons in stories

* Merge branch 'fix/3693-group-inputs-storybook' of bitbucket.org:scandic-swap/web into fix/3693-group-inputs-storybook

* Merged master into fix/3693-group-inputs-storybook

* Merge branch 'master' into fix/3693-group-inputs-storybook


Approved-by: Bianca Widstam

packages/design-system/lib/components/PasswordInput/PasswordInput.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useState } from "react"
-import { TextField } from "react-aria-components"
+import { Text, TextField } from "react-aria-components"
 import {
   Controller,
   type RegisterOptions,
@@ -9,7 +9,7 @@ import {
 } from "react-hook-form"
 import { useIntl, type IntlShape } from "react-intl"
 
-import { MaterialIcon } from "../Icons/MaterialIcon"
+import { MaterialIcon, type MaterialIconProps } from "../Icons/MaterialIcon"
 import { Input } from "../Input"
 import { Typography } from "../Typography"
 
@@ -28,6 +28,10 @@ interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement>
   visibilityToggleable?: boolean
   isNewPassword?: boolean
   errorFormatter?: (intl: IntlShape, errorMessage?: string) => string
+  /** Helper text displayed below the input (hidden when there's an error) */
+  description?: string
+  descriptionIcon?: MaterialIconProps["icon"]
+  autoComplete?: string
 }
 
 export const PasswordInput = ({
@@ -41,6 +45,9 @@ export const PasswordInput = ({
   isNewPassword = false,
   className = "",
   errorFormatter,
+  description = "",
+  descriptionIcon = "info",
+  autoComplete,
 }: PasswordInputProps) => {
   const { control } = useFormContext()
   const intl = useIntl()
@@ -48,6 +55,10 @@ export const PasswordInput = ({
 
   const formatErrorMessage = errorFormatter ?? defaultErrorFormatter
 
+  // Automatically set autocomplete based on isNewPassword if not explicitly provided
+  const autocompleteValue =
+    autoComplete ?? (isNewPassword ? "new-password" : "current-password")
+
   return (
     <Controller
       disabled={disabled}
@@ -75,6 +86,7 @@ export const PasswordInput = ({
 
         const hasError = !!fieldState.error
         const showRequirements = isNewPassword && !!field.value
+        const showDescription = description && !fieldState.error
 
         return (
           <TextField
@@ -115,6 +127,7 @@ export const PasswordInput = ({
                     ? "text"
                     : "password"
                 }
+                autoComplete={autocompleteValue}
               />
               {visibilityToggleable ? (
                 <button
@@ -143,6 +156,13 @@ export const PasswordInput = ({
               ) : null}
             </div>
 
+            {showDescription ? (
+              <Text className={styles.description} slot="description">
+                <MaterialIcon icon={descriptionIcon} size={20} />
+                {description}
+              </Text>
+            ) : null}
+
             {showRequirements ? (
               <NewPasswordValidation
                 value={field.value}