Merge pull request #4176 from alphagov/password-input-component

Add the password input component

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add the password input component ([PR #4176](https://github.com/alphagov/govuk_publishing_components/pull/4176))
+
 ## 43.0.2
 
 * LUX version 4.0.26 ([PR #4192](https://github.com/alphagov/govuk_publishing_components/pull/4192))

app/assets/javascripts/component_guide/application.js

@@ -3,4 +3,5 @@
 //= require ../govuk_publishing_components/dependencies
 //= require ../govuk_publishing_components/components/accordion
 //= require ../govuk_publishing_components/components/intervention
+//= require ../govuk_publishing_components/components/password-input
 //= require ../govuk_publishing_components/components/tabs

app/assets/javascripts/govuk_publishing_components/components/password-input.js

@@ -0,0 +1,5 @@
+// This component relies on JavaScript from GOV.UK Frontend
+// = require govuk/components/password-input/password-input.bundle.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.Modules.GovukPasswordInput = window.GOVUKFrontend.PasswordInput

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -59,6 +59,7 @@
 @import "components/option-select";
 @import "components/organisation-logo";
 @import "components/panel";
+@import "components/password-input";
 @import "components/phase-banner";
 @import "components/previous-and-next-navigation";
 @import "components/print-link";

app/assets/stylesheets/govuk_publishing_components/components/_password-input.scss

@@ -0,0 +1,2 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/password-input/password-input";

app/views/govuk_publishing_components/components/_password_input.html.erb

@@ -0,0 +1,78 @@
+<%
+  add_gem_component_stylesheet("password-input")
+
+  label_text ||= t("components.password_input.label")
+
+  error_text ||= nil
+  error_text_prefix ||= t("components.password_input.error_text_prefix")
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({ module: "govuk-password-input" })
+  component_helper.add_class('govuk-form-group')
+  component_helper.add_class('govuk-form-group--error') if error_text
+  component_helper.add_class('govuk-password-input')
+  component_helper.add_class('gem-c-password-input')
+  component_helper.add_class(shared_helper.get_margin_bottom)
+
+  uid = SecureRandom.hex(4)
+
+  label_for = uid + '-password-input'
+
+  input_name = 'password'
+  input_id = uid + '-password-input'
+
+  aria_controls = uid + '-password-input'
+
+  input_classes = %w(govuk-input govuk-password-input__input govuk-js-password-input-input)
+
+  if error_text
+    label_for << '-with-error-message'
+    input_id << '-with-error-message'
+    input_name << '-input-with-error-message'
+    input_classes << 'govuk-input--error'
+    aria_controls << '-with-error-message'
+    paragraph_id = uid + '-password-input-with-error-message-error'
+  end
+
+%>
+
+<%= tag.div(**component_helper.all_attributes) do %>
+  <%= render "govuk_publishing_components/components/label", {
+    text: label_text,
+    html_for: label_for
+  } %>
+  <% if error_text %>
+    <p id="<%= paragraph_id %>" class="govuk-error-message">
+      <span class="govuk-visually-hidden"><%= error_text_prefix %>:</span> <%= error_text %>
+    </p>
+  <% end %>
+
+  <div class="govuk-input__wrapper govuk-password-input__wrapper">
+    <%= tag.input(
+      name: input_name,
+      type: "password",
+      class: input_classes,
+      id: input_id,
+      spellcheck: false,
+      autocomplete: "current-password",
+      autocapitalize: "none",
+      aria: {
+        describedby: paragraph_id
+      }) %>
+
+    <%= tag.button(
+      type: "button",
+      class: "govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle",
+      data: {
+        module: "govuk-button"
+      },
+      hidden: true,
+      aria: {
+        controls: aria_controls,
+        label: t("components.password_input.button_aria_label")
+      }) do %>
+        <%= t("components.password_input.button") %>
+      <% end %>
+  </div>
+<% end %>

app/views/govuk_publishing_components/components/docs/password_input.yml

@@ -0,0 +1,45 @@
+name: Password input
+description: The password input component helps users to create and enter passwords.
+govuk_frontend_components:
+  - password-input
+
+accessibility_criteria: |
+  The password input component must:
+
+    * accept focus
+    * be focusable with a keyboard
+    * be usable with a keyboard
+    * be usable with touch
+    * indicate when they have focus
+    * be recognisable as form input elements
+    * have correctly associated labels
+    * have the appropriate type of 'password'
+    * have an appropriate validation message if there was an error
+    * allow users to interact with any 'show password' button
+    * allow users to use `autocomplete` to securely create and enter passwords
+    * allow users to copy and paste into the password input
+
+  When CSS and / or JavaScript is unavailable, the component must:
+
+  * fallback to a regular input element, with the show/hide button hidden
+
+uses_component_wrapper_helper: true
+
+examples:
+  default:
+    data:
+  with_error:
+    description: If there is a validation error, passing error text will style the password input component with error styles, and semantically state that there was a validation error.
+    data:
+      error_text: Enter a password
+  with_custom_label_and_error_text:
+    description: For translations or other purposes, the text presented to the user in this component can be changed. Note that the error text prefix is hidden visually and used by assistive tools when there is an error. By default, the prefix is "Error".
+    data:
+      label_text: Secret number
+      error_text_prefix: Incompatible
+      error_text: 6 is scared of 7, so they can't be next to each other.
+  with_margin_bottom:
+    description: |
+      The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of `30px`.
+    data:
+      margin_bottom: 5

config/locales/ar.yml

@@ -148,6 +148,11 @@ ar:
       selected:
     organisation_schema:
       all_content_search_description: العثور عن كل المحتوى من %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: ترقيم الصفحات

config/locales/az.yml

@@ -145,6 +145,11 @@ az:
       selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-dan bütün məzmunu tap"
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Səhifələrə bölmə

config/locales/be.yml

@@ -151,6 +151,11 @@ be:
       selected:
     organisation_schema:
       all_content_search_description: Шукаць увесь змест з %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Месцаванне старонак

config/locales/bg.yml

@@ -149,6 +149,11 @@ bg:
       selected:
     organisation_schema:
       all_content_search_description: Намиране на цялото съдържание от %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Страниране

config/locales/bn.yml

@@ -146,6 +146,11 @@ bn:
       selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-এর সকল বিষয়বস্তু খুঁজে বের করুন"
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: পেজিনেশন

config/locales/cs.yml

@@ -150,6 +150,11 @@ cs:
       selected:
     organisation_schema:
       all_content_search_description: Najít veškerý obsah z %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Stránkování

config/locales/cy.yml

@@ -149,6 +149,11 @@ cy:
       selected:
     organisation_schema:
       all_content_search_description: Dod o hyd i'r holl gynnwys gan %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Tudalennu

config/locales/da.yml

@@ -146,6 +146,11 @@ da:
       selected:
     organisation_schema:
       all_content_search_description: Find alt indhold fra %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Paginering

config/locales/de.yml

@@ -149,6 +149,11 @@ de:
       selected:
     organisation_schema:
       all_content_search_description: Alle Inhalte von %{organisation} finden
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Seitenzahlen

config/locales/dr.yml

@@ -147,6 +147,11 @@ dr:
       selected:
     organisation_schema:
       all_content_search_description: تمام محتویات را از اینجا بدست بیاورید %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: صفحه گذاری

config/locales/el.yml

@@ -145,6 +145,11 @@ el:
       selected:
     organisation_schema:
       all_content_search_description: Εύρεση όλου του περιεχομένου από τον οργανισμό %{Organization}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Σελιδοποίηση

config/locales/en.yml

@@ -252,6 +252,11 @@ en:
       selected: selected
     organisation_schema:
       all_content_search_description: Find all content from %{organisation}
+    password_input:
+      label: "Password"
+      button: "Show"
+      button_aria_label: "Show password"
+      error_text_prefix: "Error"
     previous_and_next_navigation:
       next: Next
       pagination: Pagination

config/locales/es-419.yml

@@ -145,6 +145,11 @@ es-419:
       selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Paginación

config/locales/es.yml

@@ -145,6 +145,11 @@ es:
       selected:
     organisation_schema:
       all_content_search_description: Buscar todo el contenido de %{organization}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Paginación

config/locales/et.yml

@@ -148,6 +148,11 @@ et:
       selected:
     organisation_schema:
       all_content_search_description: Leidke kogu ettevõtte %{organization} sisu
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Lehekülgede jaotus

config/locales/fa.yml

@@ -144,6 +144,11 @@ fa:
       selected:
     organisation_schema:
       all_content_search_description: یافتن تمام محتوا از %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: صفحه‌بندی

config/locales/fi.yml

@@ -147,6 +147,11 @@ fi:
       selected:
     organisation_schema:
       all_content_search_description: Etsi kaikki sisältö alkaen %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Sivunumerointi

config/locales/fr.yml

@@ -145,6 +145,11 @@ fr:
       selected:
     organisation_schema:
       all_content_search_description: Rechercher tout le contenu de %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Pagination

config/locales/gd.yml

@@ -147,6 +147,11 @@ gd:
       selected:
     organisation_schema:
       all_content_search_description: Faigh gach rud ó %{organisation}
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: Leathanach

config/locales/gu.yml

@@ -145,6 +145,11 @@ gu:
       selected:
     organisation_schema:
       all_content_search_description: "%{organisation} થી તમામ સામગ્રી શોધો"
+    password_input:
+      button:
+      button_aria_label:
+      error_text_prefix:
+      label:
     previous_and_next_navigation:
       next:
       pagination: પૃષ્ઠ ક્રમાંકન