govuk_publishing_components 23.7.3 → 23.8.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 75f61bf34f923cb81dd2f54ac1d0b13e57654e901f8e82823adb6752c0bf3039
4
- data.tar.gz: 7237262c7552db55b7f73861ec5f81e4c30b7806b9f409e7bbda73ca02ee6cc6
3
+ metadata.gz: b355f4e112330597b8729fccdf92f6c93cf5fe6a7747085c7cbba64cab1f3ef8
4
+ data.tar.gz: 955729aea91b01f3b0f1821760171ada7a753a61ccc67d340c1e933a488e82aa
5
5
  SHA512:
6
- metadata.gz: 0c4ff693cf242a5f6d5bb23d5d95a426bd097ad2e94af4519756b9b91e2af61db15e6ebb9a79de9bb3f569ca77762b052cd07aeeab2e2ca257d5084bc0baaf11
7
- data.tar.gz: c0a26d3c76e16881fc348ab176e3cf6c65702b942214435d64e9af22a51cb82cf9e123711e164bd96e1f93f5e4135448f23d033a7560008333638de4661f17a7
6
+ metadata.gz: 3c73ebd1e6e8891b6bc2cc5f9dfb0a0262fd0c8144c7201722b88bd9bcabafb52cb1af42e00a42295fbf5c370a0813a3ee2a7df3b033415116f65fe0bcfeb489
7
+ data.tar.gz: a3c007af74d59f71a41a54328d2ee8682dcbf26779b8d366c9f47f96e330d9f21856e242bbef1223cf2d1490fa258ff3e658b84d7ae1c969d9db43a225067374
data/README.md CHANGED
@@ -22,6 +22,7 @@ Components should be added to this gem if they are required in more than one app
22
22
  - [Run the component guide](/docs/run-component-guide.md)
23
23
  - [Move a component from an application to the gem](/docs/moving-components-upstream-into-this-gem.md)
24
24
  - [Publish/release a new version of the gem](/docs/publishing-to-rubygems.md)
25
+ - [Keep this gem in sync with the Design System](/docs/upgrade-govuk-frontend.md)
25
26
 
26
27
  ## Architecture / structure
27
28
 
@@ -39,13 +40,13 @@ There are 2 types of helper classes in this app:
39
40
  GOV.UK Publishing Components also makes [GOV.UK Design System](https://design-system.service.gov.uk/) styles and components available to GOV.UK's frontend applications. This gem consumes [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) via [Yarn](https://classic.yarnpkg.com/).
40
41
 
41
42
  ## Browser and assistive technology support
43
+
42
44
  GOV.UK Publishing Components shares the same standards in terms of browser and assistive technology support with [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend#browser-and-assistive-technology-support).
43
45
 
44
46
  ## Documentation
45
47
 
46
48
  [See the rubydoc.info documentation](http://www.rubydoc.info/gems/govuk_publishing_components)
47
49
 
48
-
49
50
  ## Working locally
50
51
 
51
52
  ### Install dependencies
@@ -8,6 +8,11 @@
8
8
  var POSTCODE_PATTERN = /[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9][ABD-HJLNPQ-Z]{2}/gi
9
9
  var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
10
10
 
11
+ // specific URL parameters to be redacted from accounts URLs
12
+ var RESET_PASSWORD_TOKEN_PATTERN = /reset_password_token=[a-zA-Z0-9-]+/g
13
+ var UNLOCK_TOKEN_PATTERN = /unlock_token=[a-zA-Z0-9-]+/g
14
+ var STATE_PATTERN = /state=.[^&]+/g
15
+
11
16
  function shouldStripDates () {
12
17
  return ($('meta[name="govuk:static-analytics:strip-dates"]').length > 0)
13
18
  }
@@ -35,6 +40,10 @@
35
40
 
36
41
  pii.prototype.stripPIIFromString = function (string) {
37
42
  var stripped = string.replace(EMAIL_PATTERN, '[email]')
43
+ stripped = stripped.replace(RESET_PASSWORD_TOKEN_PATTERN, 'reset_password_token=[reset_password_token]')
44
+ stripped = stripped.replace(UNLOCK_TOKEN_PATTERN, 'unlock_token=[unlock_token]')
45
+ stripped = stripped.replace(STATE_PATTERN, 'state=[state]')
46
+
38
47
  if (this.stripDatePII === true) {
39
48
  stripped = stripped.replace(DATE_PATTERN, '[date]')
40
49
  }
@@ -0,0 +1,63 @@
1
+ window.GOVUK = window.GOVUK || {}
2
+ window.GOVUK.Modules = window.GOVUK.Modules || {};
3
+
4
+ (function (Modules) {
5
+ function ShowPassword () { }
6
+
7
+ ShowPassword.prototype.start = function ($module) {
8
+ this.$module = $module[0]
9
+ this.input = this.$module.querySelector('.gem-c-input')
10
+ this.$module.togglePassword = this.togglePassword.bind(this)
11
+ this.$module.revertToPasswordOnFormSubmit = this.revertToPasswordOnFormSubmit.bind(this)
12
+ this.input.classList.add('gem-c-input--with-password')
13
+
14
+ this.showPasswordText = this.$module.getAttribute('data-show')
15
+ this.hidePasswordText = this.$module.getAttribute('data-hide')
16
+ this.shownPassword = this.$module.getAttribute('data-announce-show')
17
+ this.hiddenPassword = this.$module.getAttribute('data-announce-hide')
18
+
19
+ // wrap the input in a new div
20
+ this.wrapper = document.createElement('div')
21
+ this.wrapper.classList.add('gem-c-show-password__input-wrapper')
22
+ this.input.parentNode.insertBefore(this.wrapper, this.input)
23
+ this.wrapper.appendChild(this.input)
24
+
25
+ // create and append the button
26
+ this.showHide = document.createElement('button')
27
+ this.showHide.className = 'gem-c-show-password__toggle'
28
+ this.showHide.setAttribute('aria-controls', this.input.getAttribute('id'))
29
+ this.showHide.innerHTML = this.showPasswordText
30
+ this.wrapper.insertBefore(this.showHide, this.input.nextSibling)
31
+
32
+ // create and append the status text for screen readers
33
+ this.statusText = document.createElement('span')
34
+ this.statusText.classList.add('govuk-visually-hidden')
35
+ this.statusText.innerHTML = this.hiddenPassword
36
+ this.statusText.setAttribute('aria-live', 'polite')
37
+ this.wrapper.insertBefore(this.statusText, this.showHide.nextSibling)
38
+
39
+ this.showHide.addEventListener('click', this.$module.togglePassword)
40
+
41
+ this.parentForm = this.input.form
42
+ var disableFormSubmitCheck = this.$module.getAttribute('data-disable-form-submit-check')
43
+
44
+ if (this.parentForm && !disableFormSubmitCheck) {
45
+ this.parentForm.addEventListener('submit', this.$module.revertToPasswordOnFormSubmit)
46
+ }
47
+ }
48
+
49
+ ShowPassword.prototype.togglePassword = function (event) {
50
+ event.preventDefault()
51
+ this.showHide.innerHTML = this.showHide.innerHTML === this.showPasswordText ? this.hidePasswordText : this.showPasswordText
52
+ this.statusText.innerHTML = this.statusText.innerHTML === this.shownPassword ? this.hiddenPassword : this.shownPassword
53
+ this.input.setAttribute('type', this.input.getAttribute('type') === 'text' ? 'password' : 'text')
54
+ }
55
+
56
+ ShowPassword.prototype.revertToPasswordOnFormSubmit = function (event) {
57
+ this.showHide.innerHTML = this.showPasswordText
58
+ this.statusText.innerHTML = this.hiddenPassword
59
+ this.input.setAttribute('type', 'password')
60
+ }
61
+
62
+ Modules.ShowPassword = ShowPassword
63
+ })(window.GOVUK.Modules)
@@ -60,6 +60,7 @@
60
60
  @import "components/search";
61
61
  @import "components/select";
62
62
  @import "components/share-links";
63
+ @import "components/show-password";
63
64
  @import "components/skip-link";
64
65
  @import "components/step-by-step-nav-header";
65
66
  @import "components/step-by-step-nav-related";
@@ -40,7 +40,7 @@ $share-button-height: 32px;
40
40
  left: 0;
41
41
  width: $share-button-width;
42
42
  height: $share-button-height;
43
- vertical-align: top;
43
+ line-height: $share-button-height;
44
44
  }
45
45
 
46
46
  .direction-rtl {
@@ -61,7 +61,7 @@ $share-button-height: 32px;
61
61
  }
62
62
  }
63
63
 
64
- $column-width: 150px;
64
+ $column-width: 9.5em;
65
65
 
66
66
  .gem-c-share-links--columns {
67
67
  .gem-c-share-links__list {
@@ -0,0 +1,61 @@
1
+ .gem-c-show-password__input-wrapper {
2
+ display: table; // IE fallback
3
+ display: flex;
4
+ width: 100%;
5
+ flex-direction: column;
6
+
7
+ @include govuk-media-query($from: mobile) {
8
+ flex-direction: row;
9
+ }
10
+
11
+ .gem-c-input--with-password {
12
+ display: table-cell;
13
+
14
+ &:focus {
15
+ z-index: 1;
16
+ }
17
+ }
18
+ }
19
+
20
+ .gem-c-show-password__toggle {
21
+ @include govuk-font(19);
22
+ z-index: 0;
23
+ display: table-cell; // IE fallback
24
+ padding: govuk-spacing(1) govuk-spacing(3);
25
+ min-width: 5em; // stops the button width jumping when the text changes
26
+ color: $govuk-link-colour;
27
+ text-decoration: underline;
28
+ background: govuk-colour("white");
29
+ border: solid 2px $govuk-input-border-colour;
30
+ white-space: nowrap;
31
+ cursor: pointer;
32
+
33
+ @include govuk-media-query($until: mobile) {
34
+ padding: govuk-spacing(1);
35
+ width: 100%;
36
+ margin-top: -2px;
37
+ white-space: normal;
38
+ }
39
+
40
+ @include govuk-media-query($from: mobile) {
41
+ margin-left: -2px;
42
+ }
43
+
44
+ &:hover {
45
+ color: $govuk-link-hover-colour;
46
+ }
47
+
48
+ &:focus {
49
+ z-index: 1;
50
+ background: $govuk-focus-colour;
51
+ color: $govuk-focus-text-colour;
52
+ outline: 0;
53
+ }
54
+
55
+ &:active {
56
+ z-index: 1;
57
+ background: govuk-colour("white");
58
+ border-color: $govuk-focus-colour;
59
+ color: $govuk-link-active-colour;
60
+ }
61
+ }
@@ -12,10 +12,10 @@
12
12
 
13
13
  @for $i from 1 through 30 {
14
14
  &:nth-child(#{$i}) {
15
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Ccircle cx='125' cy='125' r='100' fill='black' /%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' alignment-baseline='middle' font-family='sans-serif' font-size='100px' fill='white'%3E#{$i}%3C/text%3E%3C/svg%3E");
15
+ background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
16
16
  background-repeat: no-repeat;
17
- background-position: left 10px;
18
- background-size: 35px 35px;
17
+ background-position: .2em .7em;
18
+ background-size: 1.4em 1.4em;
19
19
  }
20
20
  }
21
21
  }
@@ -0,0 +1,40 @@
1
+ <%
2
+ disable_form_submit_check ||= false
3
+ label ||= nil
4
+ value ||= nil
5
+ id ||= nil
6
+ name ||= nil
7
+ autocomplete = "off" unless ['new-password', 'current-password'].include?(autocomplete)
8
+ describedby ||= nil
9
+ hint ||= nil
10
+ error_message ||= nil
11
+ error_items ||= nil
12
+
13
+ if !label
14
+ raise ArgumentError, "This component requires a label"
15
+ end
16
+ %>
17
+ <% if label %>
18
+ <%= tag.div class: "gem-c-show-password",
19
+ data: {
20
+ module: "show-password",
21
+ disable_form_submit_check: disable_form_submit_check,
22
+ show: t('components.input.show'),
23
+ hide: t('components.input.hide'),
24
+ announce_show: t('components.input.announce_show'),
25
+ announce_hide: t('components.input.announce_hide')
26
+ } do %>
27
+ <%= render "govuk_publishing_components/components/input", {
28
+ label: label,
29
+ value: value,
30
+ id: id,
31
+ name: name,
32
+ describedby: describedby,
33
+ hint: hint,
34
+ error_message: error_message,
35
+ error_items: error_items,
36
+ type: "password",
37
+ autocomplete: autocomplete,
38
+ } %>
39
+ <% end %>
40
+ <% end %>
@@ -0,0 +1,79 @@
1
+ name: Show password input
2
+ description: A password input field that allows the password to be shown.
3
+ body: |
4
+ Adds a password reveal button to an input that toggles its type from password to text, revealing the password. Does not appear if JavaScript is disabled.
5
+
6
+ Uses a visually hidden bit of text to inform screen reader users of the state of the input rather than announcing the content of the password input when toggled.
7
+ accessibility_criteria: |
8
+ The component must:
9
+
10
+ * indicate to the user that the password has been shown or hidden
11
+
12
+ Inputs in the component must:
13
+
14
+ * accept focus
15
+ * be focusable with a keyboard
16
+ * be usable with a keyboard
17
+ * be usable with touch
18
+ * indicate when they have focus
19
+ * be recognisable as form input elements
20
+ * have correctly associated labels
21
+ * be of the appropriate type for their use, e.g. password inputs should be of type 'password'
22
+
23
+ Buttons in the component must:
24
+
25
+ - accept focus
26
+ - be focusable with a keyboard
27
+ - indicate when it has focus
28
+ - activate when focused and space is pressed
29
+ - activate when focused and enter is pressed
30
+ govuk_frontend_components:
31
+ - text-input
32
+ examples:
33
+ default:
34
+ data:
35
+ label:
36
+ text: Please enter your password
37
+ value: this is my password
38
+ disable_form_submit_check:
39
+ description: The component sets the `autocomplete` attribute on the input to "off" so that browsers don't remember the password. This isn't reliable, so the component reverts the input type back to a password when its parent form is submitted. If this is causing conflicts with other JavaScript on your form, you can set `disable-form-submit-check` to `true` to disable this functionality and implement it yourself.
40
+ data:
41
+ label:
42
+ text: Please enter your password
43
+ value: this is my password
44
+ disable_form_submit_check: true
45
+ set_autocomplete_attribute:
46
+ description: By default, autocomplete is set to `off`. This can be set to `new-password` or `current-password` to help browsers differentiate between new and current passwords.
47
+ data:
48
+ label:
49
+ text: Please enter your password
50
+ autocomplete: "current-password"
51
+ value: this is my password
52
+ with_attributes:
53
+ description: The component accepts many but not all of the options that can be passed to a regular input, including `id`, `name` and `describedby` (not shown).
54
+ data:
55
+ label:
56
+ text: Please enter your password
57
+ value: this is my password
58
+ id: custom_id
59
+ name: custom_name
60
+ with_hint:
61
+ data:
62
+ label:
63
+ text: Please enter your password
64
+ value: this is my password
65
+ hint: Your password must be at least twelve thousand characters
66
+ with_error:
67
+ data:
68
+ label:
69
+ text: Please enter your password
70
+ value: this is my password
71
+ error_message: No it isn't
72
+ with_error_items:
73
+ data:
74
+ label:
75
+ text: Please enter your password
76
+ value: this is my password
77
+ error_items:
78
+ - text: Look I keep telling you
79
+ - text: This isn't your password
@@ -1,5 +1,5 @@
1
1
  name: Subscription links
2
- description: Links to ‘Get email alerts’ and ‘Subscribe to feed’
2
+ description: Links to ‘Get emails’ and ‘Subscribe to feed’
3
3
  body: |
4
4
  <strong>NOTE: This component includes a h2 heading by default but can be suppressed by using `hide_heading` option (see below)<strong>
5
5
  accessibility_criteria: |
@@ -54,6 +54,11 @@ en:
54
54
  what_wrong: "What went wrong?"
55
55
  send_me_survey: "Send me the survey"
56
56
  send: "Send"
57
+ input:
58
+ show: Show
59
+ hide: Hide
60
+ announce_show: Your password is shown
61
+ announce_hide: Your password is hidden
57
62
  organisation_schema:
58
63
  all_content_search_description: "Find all content from %{organisation}"
59
64
  radio:
@@ -92,7 +97,7 @@ en:
92
97
  step_by_step_nav_related:
93
98
  part_of: "Part of"
94
99
  subscription_links:
95
- email_signup_link_text: "Get email alerts"
100
+ email_signup_link_text: "Get emails"
96
101
  feed_link_text: "Subscribe to feed"
97
102
  subscriptions: "Subscriptions"
98
103
  summary_list:
@@ -14,13 +14,13 @@ module GovukPublishingComponents
14
14
  def email_signup_link_text
15
15
  return @local_assigns[:email_signup_link_text] if @local_assigns[:email_signup_link_text]
16
16
 
17
- I18n.t("govuk_component.subscription_links.email_signup_link_text", default: "Get email alerts")
17
+ I18n.t("components.subscription_links.email_signup_link_text")
18
18
  end
19
19
 
20
20
  def feed_link_text
21
21
  return @local_assigns[:feed_link_text] if @local_assigns[:feed_link_text]
22
22
 
23
- I18n.t("govuk_component.subscription_links.feed_link_text", default: "Subscribe to feed")
23
+ I18n.t("components.subscription_links.feed_link_text")
24
24
  end
25
25
 
26
26
  def component_data_is_valid?
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "23.7.3".freeze
2
+ VERSION = "23.8.0".freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 23.7.3
4
+ version: 23.8.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-11-27 00:00:00.000000000 Z
11
+ date: 2020-12-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -428,6 +428,7 @@ files:
428
428
  - app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js
429
429
  - app/assets/javascripts/govuk_publishing_components/components/print-link.js
430
430
  - app/assets/javascripts/govuk_publishing_components/components/radio.js
431
+ - app/assets/javascripts/govuk_publishing_components/components/show-password.js
431
432
  - app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
432
433
  - app/assets/javascripts/govuk_publishing_components/components/tabs.js
433
434
  - app/assets/javascripts/govuk_publishing_components/dependencies.js
@@ -510,6 +511,7 @@ files:
510
511
  - app/assets/stylesheets/govuk_publishing_components/components/_search.scss
511
512
  - app/assets/stylesheets/govuk_publishing_components/components/_select.scss
512
513
  - app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
514
+ - app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss
513
515
  - app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss
514
516
  - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
515
517
  - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss
@@ -662,6 +664,7 @@ files:
662
664
  - app/views/govuk_publishing_components/components/_search.html.erb
663
665
  - app/views/govuk_publishing_components/components/_select.html.erb
664
666
  - app/views/govuk_publishing_components/components/_share_links.html.erb
667
+ - app/views/govuk_publishing_components/components/_show_password.html.erb
665
668
  - app/views/govuk_publishing_components/components/_skip_link.html.erb
666
669
  - app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
667
670
  - app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
@@ -741,6 +744,7 @@ files:
741
744
  - app/views/govuk_publishing_components/components/docs/search.yml
742
745
  - app/views/govuk_publishing_components/components/docs/select.yml
743
746
  - app/views/govuk_publishing_components/components/docs/share_links.yml
747
+ - app/views/govuk_publishing_components/components/docs/show_password.yml
744
748
  - app/views/govuk_publishing_components/components/docs/skip_link.yml
745
749
  - app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml
746
750
  - app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml