[OUDS] Show password example

site/data/examples.yml

@@ -53,6 +53,8 @@
       description: 'Use loading buttons in an accessible way.'
     - name: Download app
       description: 'A way to illustrate a download app page.'
+    - name: Show password
+      description: 'A show/hide password button.'
 
 - category: 'Bootstrap examples'
   bootstrap: true

site/src/assets/examples/show-password/index.astro

@@ -0,0 +1,47 @@
+---
+import JsDocs from '@components/shortcodes/JsDocs.astro'
+import { getVersionedDocsPath } from '@libs/path'
+
+export const title = 'Show password'
+export const extra_css = ['show-password.css']
+export const extra_js = [{src: 'show-password.js'}]
+export const aliases = [
+  '/examples/show-password',
+  '/docs/examples/show-password'
+]
+---
+
+<main class="container-fluid container-max-width">
+  <h1 class="py-medium">Show password button</h1>
+
+  <p>Find here an example of how to implement a password input with a show password button, show/hide the password value and manage the button icon and label, in an accessible way.</p>
+
+  <div class="text-input mb-medium component-max-width">
+    <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" id="togglePassword">
+        <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="accordion" id="code-accordion">
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+          See Javascript code
+        </button>
+      </h2>
+      <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#code-accordion">
+        <div class="accordion-body border border-subtle p-none">
+          <JsDocs name="show-password" file="site/src/assets/examples/show-password/show-password.js" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+</main>

site/src/assets/examples/show-password/show-password.css

@@ -0,0 +1,15 @@
+.accordion-item {
+  max-width: 55rem;
+}
+
+.accordion-body {
+  margin-bottom: 5rem;
+}
+
+.accordion-body .highlight {
+  padding: 24px 24px 0;
+}
+
+.accordion-collapse {
+  background-color: var(--bs-color-bg-secondary);
+}

site/src/assets/examples/show-password/show-password.js

@@ -0,0 +1,30 @@
+// js-docs-start show-password
+// Manage show password button
+(() => {
+  'use strict'
+  // Toggle password visibility
+  const togglePasswordButton = document.querySelector('#togglePassword')
+  if (togglePasswordButton) {
+    const passwordInput = document.querySelector('#inputPassword')
+    const iconUse = togglePasswordButton.querySelector('use')
+    const visuallyHiddenText = togglePasswordButton.querySelector('.visually-hidden')
+
+    togglePasswordButton.addEventListener('click', event => {
+      event.preventDefault()
+
+      // Toggle the type attribute to make the password visible or hidden
+      const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password'
+      passwordInput.setAttribute('type', type)
+
+      // Toggle the icon, the visually-hidden text for accessibility reasons
+      if (type === 'text') {
+        iconUse.setAttribute('xlink:href', iconUse.getAttribute('xlink:href').replace('accessibility-vision', 'hide'))
+        visuallyHiddenText.textContent = 'Hide password'
+      } else {
+        iconUse.setAttribute('xlink:href', iconUse.getAttribute('xlink:href').replace('hide', 'accessibility-vision'))
+        visuallyHiddenText.textContent = 'Show password'
+      }
+    })
+  }
+})()
+// js-docs-end show-password

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

@@ -30,6 +30,8 @@ A `placeholder` attribute is required on each `<input>` as our CSS-only floating
   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:/components/text-input]]) for more details.
 </Callout>
 
+You will need to write some additional JavaScript code to make the show/hide password button work properly: change the icon and the input type to display the password. You can find a complete example in our [show password live example]([[docsref:/examples/show-password/]]).
+
 <Example buttonLabel="all variations of password input" code={`<div class="text-input mb-medium">
     <div class="text-input-container">
       <label for="inputPassword">Password</label>

site/src/content/docs/getting-started/migration-from-boosted.mdx

@@ -168,7 +168,7 @@ Now you should write:
 </button>
 ```
 
-You will have to make some extra Javascript to change the styles and update the status message like explained in the documentation. You can find a complete example in our [loading buttons live example]([[docsref:/examples/loading-buttons/]]).
+You will have to make some extra JavaScript to change the styles and update the status message like explained in the documentation. You can find a complete example in our [loading buttons live example]([[docsref:/examples/loading-buttons/]]).
 
 </div>