diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index f26d72d79..93996091e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -19,9 +19,14 @@ @import "helpers/content-bottom-margin"; @import "helpers/publisher-metadata-with-logo"; -// components +// Components from this application @import 'components/*'; + +// Components from govuk_publishing_components gem @import 'components/back-link'; +@import 'components/fieldset'; +@import 'components/label'; +@import 'components/radio'; @import 'components/task-list'; @import 'components/task-list-header'; @import 'components/task-list-related'; diff --git a/app/assets/stylesheets/components/_fieldset.scss b/app/assets/stylesheets/components/_fieldset.scss deleted file mode 100644 index 363b78ac4..000000000 --- a/app/assets/stylesheets/components/_fieldset.scss +++ /dev/null @@ -1,30 +0,0 @@ -@import "helpers/variables"; -@import "helpers/clearfix"; - -.app-c-fieldset { - margin: 0 0 $app-spacing-scale-4; - - @include media(tablet) { - margin-bottom: $app-spacing-scale-5; - } - - padding: 0; - border: 0; - @include govuk-h-clearfix; -} - -.app-c-fieldset__legend { - // Fix legend text wrapping in Edge and IE - // 1. IE9-11 & Edge 12-13 - // 2. IE8-11 - box-sizing: border-box; // 1 - display: table; // 2 - max-width: 100%; // 1 - padding: 0; - // Hack to let legends or elements within legends have margins in webkit browsers - overflow: hidden; - - color: $app-text-colour; - white-space: normal; // 1 - @include core-19; -} diff --git a/app/assets/stylesheets/components/_label.scss b/app/assets/stylesheets/components/_label.scss deleted file mode 100644 index 2a31c43e0..000000000 --- a/app/assets/stylesheets/components/_label.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "helpers/variables"; - -.app-c-label { - display: block; - color: $app-text-colour; - @include core-19; -} - -.app-c-label--bold { - font-weight: 700; -} - -// Hint text sits inside a label, to be read by AT -.app-c-label__hint { - display: block; - color: $app-secondary-text-colour; - font-weight: 400; -} diff --git a/app/assets/stylesheets/components/_radio.scss b/app/assets/stylesheets/components/_radio.scss deleted file mode 100644 index 96e13fe32..000000000 --- a/app/assets/stylesheets/components/_radio.scss +++ /dev/null @@ -1,130 +0,0 @@ -@import "helpers/variables"; -@import "helpers/px-to-em"; - -.app-c-radio { - display: block; - - position: relative; - - margin-bottom: $app-spacing-scale-2; - padding: 0 0 0 em(40px, 19px); - - clear: left; - - @include core-19; -} - -.app-c-radio:last-child, -.app-c-radio:last-of-type { - margin-bottom: 0; -} - -.app-c-radio--inline { - margin-right: $app-spacing-scale-4; - float: left; - clear: none; -} - -.app-c-radio__input { - position: absolute; - - z-index: 1; - top: 0; - left: 0; - - width: em(40px, 19px); - height: em(40px, 19px); - - cursor: pointer; - - // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8. - @if ($is-ie == false) or ($ie-version == 9) { - margin: 0; - opacity: 0; - } -} - -.app-c-radio__label { - display: block; - border: 2px solid transparent; -} - -.app-c-radio__label__text { - cursor: pointer; - // remove 300ms pause on mobile - -ms-touch-action: manipulation; - touch-action: manipulation; - - display: block; - padding-top: em(8px, 19px); - padding-bottom: em($app-spacing-scale-1, 19px); -} - -.app-c-radio__label__text, -.app-c-radio__label__hint { - padding-left: em($app-spacing-scale-3, 19px); - padding-right: em($app-spacing-scale-3, 19px); -} - -.app-c-radio__input + .app-c-radio__label::before { - content: ""; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - - width: em(40px, 19px); - height: em(40px, 19px); - - border: $app-border-width-form-element solid; - border-radius: 50%; - background: transparent; -} - -.app-c-radio__input + .app-c-radio__label::after { - content: ""; - - position: absolute; - top: em($app-spacing-scale-2, 19px); - left: em($app-spacing-scale-2, 19px); - - width: 0; - height: 0; - - border: em($app-spacing-scale-2, 19px) solid; - border-radius: 50%; - background: currentColor; - opacity: 0; -} - -// Focused state -.app-c-radio__input:focus + .app-c-radio__label::before { - box-shadow: 0 0 0 4px $app-focus-colour; -} - -// Selected state -.app-c-radio__input:checked + .app-c-radio__label::after { - opacity: 1; -} - -// Disabled state -.app-c-radio__input:disabled, -.app-c-radio__input:disabled + .app-c-radio__label__text { - cursor: default; -} - -.app-c-radio__input:disabled + .app-c-radio__label { - opacity: .5; -} - -// TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend -.app-c-radio--margin-bottom-0 { - margin-bottom: $app-spacing-scale-0 !important; -} - -// TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend -.app-c-radio__block-text { - display: block; - @include core-19; - margin-bottom: $app-spacing-scale-3; -} diff --git a/app/assets/stylesheets/components/helpers/_clearfix.scss b/app/assets/stylesheets/components/helpers/_clearfix.scss deleted file mode 100644 index ed1caa29c..000000000 --- a/app/assets/stylesheets/components/helpers/_clearfix.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Mixin to clear floats -@mixin govuk-h-clearfix { - &:after { - content: ""; - display: block; - clear: both; - } - - @include ie-lte(7) { - zoom: 1; - } -} diff --git a/app/views/components/_fieldset.html.erb b/app/views/components/_fieldset.html.erb deleted file mode 100644 index 9f3671795..000000000 --- a/app/views/components/_fieldset.html.erb +++ /dev/null @@ -1,7 +0,0 @@ -<% text = text || yield %> -
- - <%= legend_text %> - - <%= text %> -
diff --git a/app/views/components/_label.html.erb b/app/views/components/_label.html.erb deleted file mode 100644 index 6a19249f4..000000000 --- a/app/views/components/_label.html.erb +++ /dev/null @@ -1,40 +0,0 @@ -<% - classes ||= '' - text_classes ||= '' - hint_text_classes ||= '' - html_for ||= '' - hint_text ||= '' - bold ||= false -%> - - -
- <%= classes if classes %> - " -> - - <% if hint_text.present? %> - - <%= hint_text %> - - <% end %> -
diff --git a/app/views/components/_radio.html.erb b/app/views/components/_radio.html.erb deleted file mode 100644 index 271e8026e..000000000 --- a/app/views/components/_radio.html.erb +++ /dev/null @@ -1,45 +0,0 @@ -<% - id_prefix ||= "radio-#{SecureRandom.hex(4)}" - items ||= [] -%> -<% items.each_with_index do |item, index| %> - <% if item === :or %> - - <%= t('components.radio.or') %> - - <% else %> - <% - item_next = items[index + 1] unless index === items.size - 1 - label_id = item[:id] ? item[:id] : "#{id_prefix}-#{index}" - label_hint_id = "label-hint-#{SecureRandom.hex(4)}" if item[:hint_text].present? - %> -
- - <% if label_hint_id %> - aria-describedby="<%= label_hint_id %>" - <% end %> - > - <%= render "components/label", { - hint_id: label_hint_id, - html_for: label_id, - classes: 'app-c-radio__label', - text_classes: 'app-c-radio__label__text', - hint_text_classes: 'app-c-radio__label__hint', - hint_text: item[:hint_text], - text: item[:text], - bold: item[:bold] - } %> -
- <% end %> -<% end %> diff --git a/app/views/components/docs/fieldset.yml b/app/views/components/docs/fieldset.yml deleted file mode 100644 index 296b85357..000000000 --- a/app/views/components/docs/fieldset.yml +++ /dev/null @@ -1,34 +0,0 @@ -name: Form fieldset -description: The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset. -body: | - [Using the fieldset and legend elements](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/) - - You can use the 'text' property or pass 'text' as a block. -accessibility_criteria: | - - must give inputs within the fieldset context with legend text -examples: - default: - data: - legend_text: 'Do you have a passport?' - text: | - - - - - - - with_html_legend: - description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://govuk-static.herokuapp.com/component-guide/title)' - data: - legend_text: | - -

- Do you have a passport? -

- text: | - - - - - - diff --git a/app/views/components/docs/label.yml b/app/views/components/docs/label.yml deleted file mode 100644 index 573943416..000000000 --- a/app/views/components/docs/label.yml +++ /dev/null @@ -1,25 +0,0 @@ -name: Form label -description: Use labels for all form fields. -body: | - For use with other form inputs e.g. [Radio buttons](/component-guide/radio) - - Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files. -accessibility_criteria: | - - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast) - - have visible text - - `hint_id` is matched with an `aria-describedby` property on the input your label is associated with. -examples: - default: - data: - text: "National Insurance number" - with_hint: - data: - text: "National Insurance number" - hint_id: "should-match-aria-describedby-input" - hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’." - bold_with_hint: - data: - bold: true - text: "National Insurance number" - hint_id: "should-match-aria-describedby-input-bold" - hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’." diff --git a/app/views/components/docs/radio.yml b/app/views/components/docs/radio.yml deleted file mode 100644 index 2afa983d5..000000000 --- a/app/views/components/docs/radio.yml +++ /dev/null @@ -1,119 +0,0 @@ -name: Radio button -description: A radio button is a GOV.UK element that allows users to answer a question by selecting an option. If you have a question with more than one option you should stack radio buttons. -body: | - Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files. - - You can also use 'or' as an item to [break up radios](https://www.gov.uk/service-manual/design/writing-for-user-interfaces#ask-questions-that-users-can-understand) -accessibility_criteria: | - Radio buttons should - - - accept focus - - be focusable with a keyboard - - be usable with a keyboard - - indicate when they have focus - - change in appearance when touched (in the touch-down state) - - be usable with touch - - have label with a touch area similar to the input - - be usable with [voice commands](https://www.w3.org/WAI/perspectives/voice.html) - - have visible text - - have a meaningful accessible name - - be usable when interacting with the label - - additional information in hint text should be read out found when focusing inputs - - should always be used nested in a fieldset so that it has proper context, useful for users of assistive technologies. - - [Keyboard interaction](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton) - - - when a radio group receives focus: - - if a radio button is checked, focus is set on the checked button. - - if none of the radio buttons are checked, focus is set on the first radio button in the group. - - Space: checks the focused radio button if it is not already checked. - - Right Arrow and Down Arrow: move focus to the next radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the last button, focus moves to the first button. - - Left Arrow and Up Arrow: move focus to the previous radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the first button, focus moves to the last button. - -accessibility_excluded_rules: -- radiogroup # Since this is in isolation we don't want to wrap a fieldset here. -examples: - default: - data: - name: "radio-group" - items: - - value: "government-gateway" - text: "Use Government Gateway" - - value: "govuk-verify" - text: "Use GOV.UK Verify" - with_bold: - description: 'Used to provide better contrast between long labels and hint text, Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)' - data: - name: "radio-group-bold" - items: - - value: "government-gateway" - text: "Use Government Gateway" - hint_text: "You'll have a user ID if you've signed up to do things like sign up Self Assessment tax return online." - bold: true - - value: "govuk-verify" - text: "Use GOV.UK Verify" - hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office." - bold: true - with_hint_text: - data: - name: "radio-group-hint-text" - items: - - value: "government-gateway" - hint_text: "You'll have a user ID if you've signed up to do things like sign up Self Assessment tax return online." - text: "Use Government Gateway" - - value: "govuk-verify" - hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office." - text: "Use GOV.UK Verify" - with_checked_option: - data: - name: "radio-group-checked" - items: - - value: "government-gateway" - text: "Use Government Gateway" - - value: "govuk-verify" - text: "Use GOV.UK Verify" - checked: true - with_custom_id_prefix: - data: - id_prefix: 'custom' - name: "radio-custom-id-prefix" - items: - - value: "government-gateway" - text: "Use Government Gateway" - - value: "govuk-verify" - text: "Use GOV.UK Verify" - with_or_divider: - description: "See [related service manual gudiance for this pattern](https://www.gov.uk/service-manual/design/writing-for-user-interfaces#ask-questions-that-users-can-understand)" - data: - name: "radio-group-or-divider" - items: - - value: "government-gateway" - text: "Use Government Gateway" - - value: "govuk-verify" - text: "Use GOV.UK Verify" - - :or - - value: "create-an-account" - text: "Create an account" - extreme: - description: 'Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)' - data: - id_prefix: 'extreme' - name: "radio-custom-extreme" - items: - - value: "extreme-value-1" - hint_text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien justo, lobortis elementum tortor in, luctus interdum turpis. Nam sit amet nulla nec arcu condimentum dapibus quis varius metus. Suspendisse cursus tristique diam et vestibulum. Proin nec lacinia tortor. Morbi at nisi id lorem aliquam ullamcorper. Pellentesque laoreet sit amet leo sodales ultricies. Suspendisse maximus efficitur odio in tristique." - text: "Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies." - bold: true - - value: "extreme-value-2" - hint_text: "Cras mi neque, porttitor mattis ultricies id, fringilla non ipsum. Etiam non elit ac magna tincidunt ultrices. Morbi eu quam sed justo scelerisque efficitur sed ut risus. Integer commodo, lectus et venenatis maximus, augue erat egestas nulla, eget fermentum augue lacus tempor nulla. Aenean ultricies suscipit erat, vitae hendrerit neque varius nec. Etiam ac euismod massa. Ut at erat id sapien mollis posuere." - text: "Aliquam rutrum lobortis blandit. Praesent sit amet lacinia libero. Morbi nulla tellus, euismod et ipsum id, porta volutpat enim. Ut mauris libero" - bold: true - - :or - - value: "extreme-value-3" - hint_text: "Nullam congue neque et tempor tincidunt. In ornare lacus ac arcu maximus ultricies. Quisque et ultrices nulla. Suspendisse potenti. Nunc imperdiet ornare leo ut ultrices. Praesent in quam in tellus dictum lacinia vitae vitae lacus. Nulla hendrerit feugiat urna eu gravida. Nam a molestie nisi, at semper neque. Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies." - text: "Duis tempus est metus, in varius enim lobortis non. Nunc laoreet nisi vel lectus consequat, sed venenatis tellus dictum. Nunc ut nibh blandit ipsum bibendum dictum." - bold: true - - value: "extreme-value-4" - hint_text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien justo, lobortis elementum tortor in, luctus interdum turpis. Nam sit amet nulla nec arcu condimentum dapibus quis varius metus. Suspendisse cursus tristique diam et vestibulum. Proin nec lacinia tortor. Morbi at nisi id lorem aliquam ullamcorper. Pellentesque laoreet sit amet leo sodales ultricies. Suspendisse maximus efficitur odio in tristique." - text: "Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies." - bold: true diff --git a/config/locales/cy.yml b/config/locales/cy.yml index 47b933b00..3dd78a96e 100644 --- a/config/locales/cy.yml +++ b/config/locales/cy.yml @@ -4,7 +4,7 @@ cy: common: last_updated: "Diweddarwyd diwethaf" components: - radio: + radio: # TODO: Push this upstream to the govuk_publishing_gem and remove from here or: 'neu' content_item: schema_name: diff --git a/config/locales/en.yml b/config/locales/en.yml index ba51d8e0b..f952a8579 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -42,6 +42,8 @@ en: last_updated: "Last updated %{date}" published: "Published %{date}" see_all_updates: "see all updates" + back_link: + back: 'Back' radio: or: 'or' language_names: diff --git a/test/components/fieldset_test.rb b/test/components/fieldset_test.rb deleted file mode 100644 index 915142529..000000000 --- a/test/components/fieldset_test.rb +++ /dev/null @@ -1,23 +0,0 @@ -require 'component_test_helper' - -class FieldsetTest < ComponentTestCase - def component_name - "fieldset" - end - - test "fails to render when no data is given" do - assert_raise do - render_component({}) - end - end - - test "renders a fieldset correctly" do - render_component( - legend_text: 'Do you have a passport?', - text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ad neque, maxime est ea laudantium totam fuga!' - ) - - assert_select ".app-c-fieldset__legend", text: 'Do you have a passport?' - assert_select ".app-c-fieldset", text: /Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ad neque, maxime est ea laudantium totam fuga!/ - end -end diff --git a/test/components/label_test.rb b/test/components/label_test.rb deleted file mode 100644 index db123c8e8..000000000 --- a/test/components/label_test.rb +++ /dev/null @@ -1,38 +0,0 @@ -require 'component_test_helper' - -class LabelTest < ComponentTestCase - def component_name - "label" - end - - test "does not render label when no data is given" do - assert_raise do - render_component({}) - end - end - - test "renders label with text" do - render_component(text: "National Insurance number") - - assert_select ".app-c-label__text", text: "National Insurance number" - end - - test "renders label with text and hint text" do - render_component( - text: "National Insurance number", - hint_id: "should-match-aria-describedby-input", - hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’." - ) - - assert_select ".app-c-label__text", text: "National Insurance number" - assert_select ".app-c-label__hint", text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’." - assert_select ".app-c-label__hint[id=should-match-aria-describedby-input]" - end - - test "renders label with bold text" do - render_component(text: "National Insurance number", bold: true) - - assert_select ".app-c-label__text", text: "National Insurance number" - assert_select ".app-c-label--bold" - end -end diff --git a/test/components/radio_test.rb b/test/components/radio_test.rb deleted file mode 100644 index b9f3b6729..000000000 --- a/test/components/radio_test.rb +++ /dev/null @@ -1,230 +0,0 @@ -require 'component_test_helper' - -class RadioTest < ComponentTestCase - def component_name - "radio" - end - - test "does not render anything if no data is passed" do - assert_empty render_component({}) - end - - test "throws an error if items are passed but no name is passed" do - assert_raise do - render_component(items: [ - { - value: "government-gateway", - text: "Use Government Gateway" - } - ]) - end - end - - test "renders radio-group with one item" do - render_component( - name: "radio-group-one-item", - items: [ - { - value: "government-gateway", - text: "Use Government Gateway" - } - ] - ) - - assert_select ".app-c-radio__input[name=radio-group-one-item]" - assert_select ".app-c-radio:first-child .app-c-radio__label__text", text: "Use Government Gateway" - end - - test "renders radio-group with multiple items" do - render_component( - name: "radio-group-multiple-items", - items: [ - { - value: "government-gateway", - text: "Use Government Gateway" - }, - { - value: "govuk-verify", - text: "Use GOV.UK Verify" - } - ] - ) - - assert_select ".app-c-radio__input[name=radio-group-multiple-items]" - assert_select ".app-c-radio:first-child .app-c-radio__label__text", text: "Use Government Gateway" - assert_select ".app-c-radio:last-child .app-c-radio__label__text", text: "Use GOV.UK Verify" - end - - test "renders radio-group with bold labels" do - render_component( - name: "radio-group-bold-labels", - items: [ - { - value: "government-gateway", - text: "Use Government Gateway", - bold: true - }, - { - value: "govuk-verify", - text: "Use GOV.UK Verify", - bold: true - } - ] - ) - - assert_select ".app-c-radio__input[name=radio-group-bold-labels]" - assert_select ".app-c-radio .app-c-label--bold" - end - - test "renders radio-group with hint text" do - render_component( - name: "radio-group-hint-text", - items: [ - { - value: "government-gateway", - hint_text: "You'll have a user ID if you've signed up to do things like sign up Self Assessment tax return online.", - text: "Use Government Gateway" - }, - { - value: "govuk-verify", - hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office.", - text: "Use GOV.UK Verify" - } - ] - ) - - assert_select ".app-c-radio__input[name=radio-group-hint-text]" - assert_select ".app-c-radio:first-child .app-c-radio__label__text", text: "Use Government Gateway" - assert_select ".app-c-radio:first-child .app-c-label__hint", text: "You'll have a user ID if you've signed up to do things like sign up Self Assessment tax return online." - assert_select ".app-c-radio:last-child .app-c-radio__label__text", text: "Use GOV.UK Verify" - assert_select ".app-c-radio:last-child .app-c-label__hint", text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office." - end - - test "renders radio-group with checked option" do - render_component( - name: "radio-group-checked-option", - items: [ - { - value: "government-gateway", - text: "Use Government Gateway" - }, - { - value: "govuk-verify", - text: "Use GOV.UK Verify", - checked: true - } - ] - ) - - assert_select ".app-c-radio__input[name=radio-group-checked-option]" - assert_select ".app-c-radio__input[checked]", value: "govuk-verify" - end - - test "renders radio-group with custom id prefix" do - render_component( - id_prefix: 'custom', - name: "radio-group-custom-id-prefix", - items: [ - { - value: "government-gateway", - text: "Use Government Gateway" - }, - { - value: "govuk-verify", - text: "Use GOV.UK Verify" - } - ] - ) - - assert_select ".app-c-radio__input[name=radio-group-custom-id-prefix]" - assert_select ".app-c-radio__input[id=custom-0]", value: "government-gateway" - assert_select ".app-c-radio__label__text[for=custom-0]", text: "Use Government Gateway" - assert_select ".app-c-radio__input[id=custom-1]", value: "govuk-verify" - assert_select ".app-c-radio__label__text[for=custom-1]", text: "Use GOV.UK Verify" - end - - test "renders radio-group with or divider" do - render_component( - name: "radio-group-or-divider", - items: [ - { - value: "government-gateway", - text: "Use Government Gateway" - }, - :or, - { - value: "govuk-verify", - text: "Use GOV.UK Verify" - } - ] - ) - - assert_select ".app-c-radio__input[name=radio-group-or-divider]" - assert_select ".app-c-radio:first-child .app-c-radio__label__text", text: "Use Government Gateway" - assert_select ".app-c-radio__block-text", text: "or" - assert_select ".app-c-radio:last-child .app-c-radio__label__text", text: "Use GOV.UK Verify" - end - - # This component can be interacted with, so use integration tests for these cases. - class RadioIntegrationTest < ActionDispatch::IntegrationTest - def input_visible - false # our inputs are hidden with CSS, and rely on the label. - end - - test "radio can choose an option" do - visit '/component-guide/radio/default/preview' - - within '.component-guide-preview' do - assert page.has_text?('Use GOV.UK Verify') - assert page.has_text?('Use Government Gateway') - - refute page.has_selector?('.app-c-radio__input:checked', visible: input_visible) - - page.choose(option: 'govuk-verify', allow_label_click: true) - - refute page.has_selector?('.app-c-radio__input[value=government-gateway]:checked', visible: input_visible) - assert page.has_selector?('.app-c-radio__input[value=govuk-verify]:checked', visible: input_visible) - end - end - - test "radio keyboard interaction" do - visit '/component-guide/radio/default/preview' - - within '.component-guide-preview' do - radio_input = find('.app-c-radio__input[value=government-gateway]', visible: input_visible) - radio_input.trigger(:focus) - radio_input.send_keys(:space) - - assert page.has_selector?('.app-c-radio__input[value=government-gateway]:checked', visible: input_visible) - refute page.has_selector?('.app-c-radio__input[value=govuk-verify]:checked', visible: input_visible) - - radio_input.send_keys(:down) - - refute page.has_selector?('.app-c-radio__input[value=government-gateway]:checked', visible: input_visible) - assert page.has_selector?('.app-c-radio__input[value=govuk-verify]:checked', visible: input_visible) - - radio_input.send_keys(:up) - - assert page.has_selector?('.app-c-radio__input[value=government-gateway]:checked', visible: input_visible) - refute page.has_selector?('.app-c-radio__input[value=govuk-verify]:checked', visible: input_visible) - end - end - - test "radio can choose an option when already has one checked" do - visit '/component-guide/radio/with_checked_option/preview' - - within '.component-guide-preview' do - assert page.has_text?('Use Government Gateway') - assert page.has_text?('Use GOV.UK Verify') - - assert page.has_selector?('.app-c-radio__input[value=govuk-verify]:checked', visible: input_visible) - refute page.has_selector?('.app-c-radio__input[value=government-gateway]:checked', visible: input_visible) - - page.choose(option: 'government-gateway', allow_label_click: true) - - assert page.has_selector?('.app-c-radio__input[value=government-gateway]:checked', visible: input_visible) - refute page.has_selector?('.app-c-radio__input[value=govuk-verify]:checked', visible: input_visible) - end - end - end -end diff --git a/test/integration/service_sign_in/choose_sign_in_test.rb b/test/integration/service_sign_in/choose_sign_in_test.rb index 51f648b3f..7e9bc3d55 100644 --- a/test/integration/service_sign_in/choose_sign_in_test.rb +++ b/test/integration/service_sign_in/choose_sign_in_test.rb @@ -27,8 +27,8 @@ class ChooseSignInTest < ActionDispatch::IntegrationTest assert page.has_css?('form[data-module="track-radio-group"]') within "form" do - within ".app-c-fieldset" do - within ".app-c-fieldset__legend" do + within ".gem-c-fieldset" do + within ".gem-c-fieldset__legend" do within shared_component_selector('title') do assert page.has_text?("Prove your identity to continue") end @@ -38,20 +38,20 @@ class ChooseSignInTest < ActionDispatch::IntegrationTest assert page.has_text?("You can't file online until you've activated Government Gateway account using your Unique Taxpayer Reference(UTR).") end - within ".app-c-radio:first-of-type" do - assert page.has_css?(".app-c-radio__label__text", text: "Use Government Gateway") - assert page.has_css?(".app-c-radio__label__hint", text: "You’ll have a user ID if you’ve signed up to do things like file your Self Assessment tax return online.") + within ".gem-c-radio:first-of-type" do + assert page.has_css?(".gem-c-radio__label__text", text: "Use Government Gateway") + assert page.has_css?(".gem-c-radio__label__hint", text: "You’ll have a user ID if you’ve signed up to do things like file your Self Assessment tax return online.") end - within ".app-c-radio:nth-of-type(2)" do - assert page.has_css?(".app-c-radio__label__text", text: "Use GOV.UK Verify") - assert page.has_css?(".app-c-radio__label__hint", text: "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.") + within ".gem-c-radio:nth-of-type(2)" do + assert page.has_css?(".gem-c-radio__label__text", text: "Use GOV.UK Verify") + assert page.has_css?(".gem-c-radio__label__hint", text: "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.") end - assert page.has_css?(".app-c-radio__block-text", text: "or") + assert page.has_css?(".gem-c-radio__block-text", text: "or") - within ".app-c-radio:last-of-type" do - assert page.has_css?(".app-c-radio__label__text", text: "Create an account") + within ".gem-c-radio:last-of-type" do + assert page.has_css?(".gem-c-radio__label__text", text: "Create an account") end end assert page.has_css?(shared_component_selector('button'), text: "Continue") @@ -68,7 +68,7 @@ class ChooseSignInTest < ActionDispatch::IntegrationTest assert page.has_css?(".app-c-error-summary__link[href='#option-0']", text: 'Please select an option') # Make sure the id is the same as the link href so that they'll link together properly. - assert page.has_css?(".app-c-radio__input[id='option-0'][value='use-government-gateway']", visible: false) + assert page.has_css?(".gem-c-radio__input[id='option-0'][value='use-government-gateway']", visible: false) assert page.has_css?(".app-c-error-message", text: 'Please select an option') end @@ -76,17 +76,17 @@ class ChooseSignInTest < ActionDispatch::IntegrationTest test "page less options without an or divider" do setup_and_visit_choose_sign_in_page("view_driving_licence", "/choose-sign-in") - within ".app-c-radio:first-of-type" do - assert page.has_css?(".app-c-radio__label__text", text: "Use your driving licence and National Insurance number") - assert page.has_css?(".app-c-radio__label__hint", text: "Your driving licence must have been issued in England, Scotland or Wales.") + within ".gem-c-radio:first-of-type" do + assert page.has_css?(".gem-c-radio__label__text", text: "Use your driving licence and National Insurance number") + assert page.has_css?(".gem-c-radio__label__hint", text: "Your driving licence must have been issued in England, Scotland or Wales.") end - within ".app-c-radio:last-of-type" do - assert page.has_css?(".app-c-radio__label__text", text: "Use GOV.UK Verify") - assert page.has_css?(".app-c-radio__label__hint", text: "You can use an existing identity account or create a new one. It usually takes about 5 minutes to create an account.") + within ".gem-c-radio:last-of-type" do + assert page.has_css?(".gem-c-radio__label__text", text: "Use GOV.UK Verify") + assert page.has_css?(".gem-c-radio__label__hint", text: "You can use an existing identity account or create a new one. It usually takes about 5 minutes to create an account.") end - refute page.has_css?(".app-c-radio__block-text", text: "or") + refute page.has_css?(".gem-c-radio__block-text", text: "or") end test "page renders welsh correctly" do @@ -96,8 +96,8 @@ class ChooseSignInTest < ActionDispatch::IntegrationTest assert page.has_css?('.gem-c-back-link', text: 'Yn ôl') within "form" do - within ".app-c-fieldset" do - within ".app-c-fieldset__legend" do + within ".gem-c-fieldset" do + within ".gem-c-fieldset__legend" do within shared_component_selector('title') do assert page.has_text?("Profwch pwy ydych chi i fwrw ymlaen") end @@ -107,20 +107,20 @@ class ChooseSignInTest < ActionDispatch::IntegrationTest assert page.has_text?("Os ydych chi’n ffeilio ar-lein am y tro cyntaf, bydd angen i chi gofrestru ar gyfer Hunanasesiad yn gyntaf.") end - within ".app-c-radio:first-of-type" do - assert page.has_css?(".app-c-radio__label__text", text: "Defnyddio Porth y Llywodraeth") - assert page.has_css?(".app-c-radio__label__hint", text: "Bydd gennych chi ID defnyddiwr os ydych chi wedi cofrestru ar gyfer Hunanasesiad neu wedi ffeilio ffurflen dreth ar-lein yn y gorffennol.") + within ".gem-c-radio:first-of-type" do + assert page.has_css?(".gem-c-radio__label__text", text: "Defnyddio Porth y Llywodraeth") + assert page.has_css?(".gem-c-radio__label__hint", text: "Bydd gennych chi ID defnyddiwr os ydych chi wedi cofrestru ar gyfer Hunanasesiad neu wedi ffeilio ffurflen dreth ar-lein yn y gorffennol.") end - within ".app-c-radio:nth-of-type(2)" do - assert page.has_css?(".app-c-radio__label__text", text: "Defnyddio GOV.UK Verify") - assert page.has_css?(".app-c-radio__label__hint", text: "Bydd gennych chi gyfrif os ydych chi wedi profi'n barod pwy ydych chi naill ai gyda Barclays, CitizenSafe, Digidentity, Experian, Swyddfa'r Post, y Post Brenhinol neu SecureIdentity.") + within ".gem-c-radio:nth-of-type(2)" do + assert page.has_css?(".gem-c-radio__label__text", text: "Defnyddio GOV.UK Verify") + assert page.has_css?(".gem-c-radio__label__hint", text: "Bydd gennych chi gyfrif os ydych chi wedi profi'n barod pwy ydych chi naill ai gyda Barclays, CitizenSafe, Digidentity, Experian, Swyddfa'r Post, y Post Brenhinol neu SecureIdentity.") end - assert page.has_css?(".app-c-radio__block-text", text: "neu") + assert page.has_css?(".gem-c-radio__block-text", text: "neu") - within ".app-c-radio:last-of-type" do - assert page.has_css?(".app-c-radio__label__text", text: "Cofrestru ar gyfer Hunanasesiad") + within ".gem-c-radio:last-of-type" do + assert page.has_css?(".gem-c-radio__label__text", text: "Cofrestru ar gyfer Hunanasesiad") end end