feat: Password Input component

site/data/sidebar.yml

@@ -78,6 +78,7 @@
   pages:
     - title: Overview
     - title: Text input
+    - title: Password input
     - title: Text area
     - title: Select
       draft: true

site/src/content/docs/forms/password-input.mdx

@@ -0,0 +1,144 @@
+---
+title: Password input
+description: A password input is a form field specifically designed to securely capture a user’s confidential password.
+aliases:
+  - "/docs/forms/password-input/"
+toc: true
+---
+
+import { getVersionedDocsPath } from '@libs/path'
+
+<Callout type="info">
+{/* TODO: set the right url for design documentation */}
+You can find here the [OUDS password input design guidelines](https://r.orange.fr/r/S-ouds-doc-password-input).
+</Callout>
+
+## Overview
+
+The password input masks the characters as they are typed, typically replacing them with dots, in order to protect the input from being read by others nearby.
+While the primary goal is to enhance privacy and security, the field may also include usability features such as a "show/hide password" toggle and helper text to guide password creation.
+
+A password input is a specific configuration of the [text input]([[docsref:/forms/text-input]]). It uses a `.text-input` wrapper to create a textual form field with OUDS styles, then wraps a pair of `<input class="text-input-field">` and `<label>` elements in `.text-input-container`. Note that the `<label>` must come before the `<input>`.
+
+A `placeholder` attribute is required on each `<input>` as our CSS-only floating label implementation relies on the `:placeholder-shown` pseudo-element to detect when the input is empty.
+
+<Callout type="info">
+Even if you don't need a placeholder, <em>you must always define the placeholder attribute with a single space character</em>. This ensures the label behaves correctly by preventing it from overlapping the input text when a value is entered.
+</Callout>
+
+<Callout type="info">
+All other available features of the text input component can be used with the password input, such as leading icons, helper text, and validation states. Please refer to the [text input documentation]([[docsref:/forms/text-input]]) for more details.
+</Callout>
+
+<Example code={`<div class="text-input mb-medium">
+    <div class="text-input-container">
+      <label for="inputPassword">Password</label>
+      <input type="password" id="inputPassword" class="text-input-field" placeholder=" ">
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
+  </div>
+  <div class="text-input mb-medium">
+    <div class="text-input-container">
+      <svg aria-hidden="true">
+        <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/>
+      </svg>
+      <label for="inputPasswordIcon">Password</label>
+      <input type="password" id="inputPasswordIcon" class="text-input-field" placeholder="Minimum 8 characters">
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
+  </div>
+  <div class="text-input mb-medium">
+    <div class="text-input-container">
+      <svg aria-hidden="true">
+        <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/>
+      </svg>
+      <label for="inputPasswordPrefix">Password</label>
+      <div class="input-container" data-bs-prefix="DEV-">
+        <input type="password" id="inputPasswordPrefix" aria-describedby="inputPasswordPrefixHelper" class="text-input-field" placeholder=" ">
+      </div>
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
+    <p id="inputPasswordPrefixHelper" class="helper-text">Enter a password with at least 8 characters (without the DEV- prefix).</p>
+  </div>
+  <div class="text-input mb-medium">
+    <div class="text-input-container text-input-container-outlined">
+      <svg aria-hidden="true">
+        <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/>
+      </svg>
+      <label for="inputPasswordOutlined">Password</label>
+      <input type="password" id="inputPasswordOutlined" aria-describedby="inputPasswordOutlinedHelper" class="text-input-field" placeholder=" ">
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
+    <p id="inputPasswordOutlinedHelper" class="helper-text">Enter a password with at least 8 characters</p>
+  </div>
+   <div class="text-input mb-medium">
+    <div class="text-input-container text-input-container-outlined">
+      <svg aria-hidden="true">
+        <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/>
+      </svg>
+      <label for="inputPasswordOutlinedValue">Password</label>
+      <input type="password" id="inputPasswordOutlinedValue" aria-describedby="inputPasswordOutlinedValueHelper" class="text-input-field" placeholder=" " value="My$ecureP@ssw0rd">
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
+    <p id="inputPasswordOutlinedValueHelper" class="helper-text">Enter a password with at least 8 characters</p>
+  </div>
+  <div class="text-input mb-medium">
+    <div class="text-input-container">
+      <label for="inputPasswordInvalid">Password</label>
+      <div class="input-container" data-bs-prefix="DEV-">
+        <input type="password" id="inputPasswordInvalid" class="text-input-field is-invalid" aria-describedby="inputPasswordInvalidError" placeholder=" " value="12345">
+      </div>
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
+    <p id="inputPasswordInvalidHelper" class="helper-text">Enter a password with at least 8 characters (without the DEV- prefix).</p>
+    <p id="inputPasswordInvalidError" class="error-text">Password must be at least 8 characters (without the DEV- prefix).</p>
+  </div>
+  <div class="text-input">
+    <div class="text-input-container text-input-container-outlined">
+      <svg aria-hidden="true">
+        <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/>
+      </svg>
+      <label for="inputPasswordOutlinedInvalid">Password</label>
+      <div class="input-container" data-bs-prefix="DEV-">
+        <input type="password" id="inputPasswordOutlinedInvalid" class="text-input-field is-invalid" aria-describedby="inputPasswordOutlinedInvalidError" placeholder=" " value="12345">
+      </div>
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
+    <p id="inputPasswordOutlinedInvalidHelper" class="helper-text">Enter a password with at least 8 characters (without the DEV- prefix).</p>
+    <p id="inputPasswordOutlinedInvalidError" class="error-text">Password must be at least 8 characters (without the DEV- prefix).</p>
+  </div>`} />

site/src/content/docs/migrations/migration.mdx

@@ -24,6 +24,10 @@ toc: true
 
 - <span class="tag tag-small rounded-none tag-positive">New</span> `.control-items-list` and `.control-item-error-message` has been added.
 
+#### Password Input
+
+- <span class="tag tag-small rounded-none tag-positive">New</span> Password input has been implemented. Read more in our [password input page]([[docsref:/forms/password-input]]).
+
 #### Radio buttons
 
 - <span class="tag tag-small rounded-none tag-warning">Warning</span> Radio button component has been updated to 1.4.0. Read more in our [radio button page]([[docsref:/forms/radio-button]]).