From b7590c04ff8372667aec27c5980ef2eace8a904f Mon Sep 17 00:00:00 2001 From: Tatiana Soukiassian Date: Mon, 11 Jan 2016 11:08:06 +0000 Subject: [PATCH 1/9] Fix typo in component generator --- lib/generators/govuk_component/templates/component.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/generators/govuk_component/templates/component.yml b/lib/generators/govuk_component/templates/component.yml index 84d21fbfd..e285e1fef 100644 --- a/lib/generators/govuk_component/templates/component.yml +++ b/lib/generators/govuk_component/templates/component.yml @@ -4,7 +4,7 @@ body: | A long form description of the <%= human_name %> component, which may include markdown formatting. - It should try and descrive the intent of the component, and document + It should try and describe the intent of the component, and document any parameters passed to the component. fixtures: default: {} From fd27ea30140f8c6ffc3893b5f45a8b491c67c7df Mon Sep 17 00:00:00 2001 From: Tatiana Soukiassian Date: Mon, 11 Jan 2016 11:11:32 +0000 Subject: [PATCH 2/9] Generated related items component bundle exec rails generate govuk_component related_items --- .../stylesheets/govuk-component/_component.scss | 1 + .../govuk-component/_related-items.scss | 3 +++ app/views/govuk_component/docs/related_items.yml | 10 ++++++++++ .../govuk_component/related_items.raw.html.erb | 3 +++ test/govuk_component/related_items_test.rb | 14 ++++++++++++++ 5 files changed, 31 insertions(+) create mode 100644 app/assets/stylesheets/govuk-component/_related-items.scss create mode 100644 app/views/govuk_component/docs/related_items.yml create mode 100644 app/views/govuk_component/related_items.raw.html.erb create mode 100644 test/govuk_component/related_items_test.rb diff --git a/app/assets/stylesheets/govuk-component/_component.scss b/app/assets/stylesheets/govuk-component/_component.scss index 237927a96..a1dc7a713 100644 --- a/app/assets/stylesheets/govuk-component/_component.scss +++ b/app/assets/stylesheets/govuk-component/_component.scss @@ -13,3 +13,4 @@ @import "option-select"; @import "previous-and-next-navigation"; @import "breadcrumbs"; +@import "related-items"; diff --git a/app/assets/stylesheets/govuk-component/_related-items.scss b/app/assets/stylesheets/govuk-component/_related-items.scss new file mode 100644 index 000000000..71618fb14 --- /dev/null +++ b/app/assets/stylesheets/govuk-component/_related-items.scss @@ -0,0 +1,3 @@ +.govuk-related-items { + +} diff --git a/app/views/govuk_component/docs/related_items.yml b/app/views/govuk_component/docs/related_items.yml new file mode 100644 index 000000000..ec145730b --- /dev/null +++ b/app/views/govuk_component/docs/related_items.yml @@ -0,0 +1,10 @@ +name: "Related items" +description: "A short description of the Related items component" +body: | + A long form description of the Related items component, which may + include markdown formatting. + + It should try and describe the intent of the component, and document + any parameters passed to the component. +fixtures: + default: {} diff --git a/app/views/govuk_component/related_items.raw.html.erb b/app/views/govuk_component/related_items.raw.html.erb new file mode 100644 index 000000000..242d5b061 --- /dev/null +++ b/app/views/govuk_component/related_items.raw.html.erb @@ -0,0 +1,3 @@ +
+ Related items +
diff --git a/test/govuk_component/related_items_test.rb b/test/govuk_component/related_items_test.rb new file mode 100644 index 000000000..13c881af6 --- /dev/null +++ b/test/govuk_component/related_items_test.rb @@ -0,0 +1,14 @@ +require 'govuk_component_test_helper' + +class RelatedItemsTestCase < ComponentTestCase + def component_name + "related_items" + end + + test "no error if no parameters passed in" do + assert_nothing_raised do + render_component({}) + assert_select ".govuk-related-items" + end + end +end From 9d7fccd5cd5f70633bda033e38c1553395d43f38 Mon Sep 17 00:00:00 2001 From: Tatiana Soukiassian Date: Mon, 11 Jan 2016 12:10:17 +0000 Subject: [PATCH 3/9] Add related items markup, styles and docs * Based styles on 188e526 and core stylesheets https://github.com/alphagov/static/blob/master/app/assets/stylesheets/helpers/_core.scss#L56-L147 --- .../govuk-component/_related-items.scss | 29 +++++++ .../govuk_component/docs/related_items.yml | 35 ++++++-- .../related_items.raw.html.erb | 21 ++++- test/govuk_component/related_items_test.rb | 79 +++++++++++++++++++ 4 files changed, 155 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/govuk-component/_related-items.scss b/app/assets/stylesheets/govuk-component/_related-items.scss index 71618fb14..27e883ef9 100644 --- a/app/assets/stylesheets/govuk-component/_related-items.scss +++ b/app/assets/stylesheets/govuk-component/_related-items.scss @@ -1,3 +1,32 @@ .govuk-related-items { + border-top: 10px solid $mainstream-brand; + padding-top: 5px; + h2 { + @include core-24; + font-weight: 600; + color: $text-colour; + margin-top: 0.3em; + margin-bottom: 0.5em; + } + + ul { + @include core-16; + list-style: none; + margin: 0 0 1.25em 0; + padding: 0; + overflow: hidden; + + li { + margin-bottom: 0.75em; + + &.section { + font-weight: bold; + } + + a { + orphans: 2; + } + } + } } diff --git a/app/views/govuk_component/docs/related_items.yml b/app/views/govuk_component/docs/related_items.yml index ec145730b..1f77016fa 100644 --- a/app/views/govuk_component/docs/related_items.yml +++ b/app/views/govuk_component/docs/related_items.yml @@ -1,10 +1,33 @@ name: "Related items" -description: "A short description of the Related items component" +description: "Headed sections of related items." body: | - A long form description of the Related items component, which may - include markdown formatting. + Accepts an array of sections. Each section can have a title, url, id and a list of related items. - It should try and describe the intent of the component, and document - any parameters passed to the component. + Each item is a hash with a title and url. If the url is external, a rel value can also be provided. fixtures: - default: {} + default: + sections: + - title: 'Travel Abroad' + url: '/' + items: + - title: 'Link A' + url: / + - title: 'Link B' + url: / + - title: 'Travel' + items: + - title: 'Link 1' + url: / + - title: 'Link 2' + url: / + real_example: + # from https://www.gov.uk/register-birth + sections: + - title: Pregnancy and birth + url: /browse/childcare-parenting/pregnancy-birth + items: + - title: 'Register a birth' + url: /register-birth + - items: + - title: Check if you're a British citizen + url: /check-british-citizen diff --git a/app/views/govuk_component/related_items.raw.html.erb b/app/views/govuk_component/related_items.raw.html.erb index 242d5b061..699a922f9 100644 --- a/app/views/govuk_component/related_items.raw.html.erb +++ b/app/views/govuk_component/related_items.raw.html.erb @@ -1,3 +1,18 @@ -
- Related items -
+<% + sections ||= [] +%> + diff --git a/test/govuk_component/related_items_test.rb b/test/govuk_component/related_items_test.rb index 13c881af6..47d19a58c 100644 --- a/test/govuk_component/related_items_test.rb +++ b/test/govuk_component/related_items_test.rb @@ -11,4 +11,83 @@ def component_name assert_select ".govuk-related-items" end end + + test "renders a related items block" do + render_component({ + sections: [ + { + title: "Section title", + url: "/more-link", + items: [ + { + title: "Item title", + url: "/item" + }, + { + title: "Other item title", + url: "/other-item" + } + ] + } + ], + }) + + assert_select "h2", text: "Section title" + assert_link_with_text_in("ul li:last-child", "/more-link", "More") + assert_link_with_text_in("ul li:first-child", "/item", "Item title") + assert_link_with_text_in("ul li:first-child + li", "/other-item", "Other item title") + end + + test "renders a multiple related items block" do + render_component({ + sections: [ + { + title: "Section title", + url: "/more-link", + items: [ + { + title: "Item title", + url: "/item" + } + ] + }, + { + title: "Other section title", + url: "/other-more-link", + items: [ + { + title: "Other item title", + url: "/other-item" + } + ] + } + ], + }) + + assert_select "h2", text: "Section title" + assert_link_with_text_in("ul li:last-child", "/more-link", "More") + assert_link_with_text_in("ul li:first-child", "/item", "Item title") + + assert_select "h2", text: "Other section title" + assert_link_with_text_in("ul li:last-child", "/other-more-link", "More") + assert_link_with_text_in("ul li:first-child", "/other-item", "Other item title") + end + + test "has a default section title" do + render_component({ + sections: [ + { + url: "/more-link", + items: [ + { + title: "Item title", + url: "/item" + } + ] + }, + ], + }) + + assert_select "h2", text: "Elsewhere on GOV.UK" + end end From 339207a60ccd415ac23b3e4546f8f0edde77f9a1 Mon Sep 17 00:00:00 2001 From: Tatiana Soukiassian Date: Mon, 11 Jan 2016 14:55:13 +0000 Subject: [PATCH 4/9] Add section title to more link Put back visually hidden part of more link, based on related.raw.html.erb This distinguishes each more link for accessibility. --- app/assets/stylesheets/govuk-component/_related-items.scss | 2 +- app/views/govuk_component/related_items.raw.html.erb | 6 +++++- test/govuk_component/related_items_test.rb | 6 +++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/govuk-component/_related-items.scss b/app/assets/stylesheets/govuk-component/_related-items.scss index 27e883ef9..8fc2fa798 100644 --- a/app/assets/stylesheets/govuk-component/_related-items.scss +++ b/app/assets/stylesheets/govuk-component/_related-items.scss @@ -20,7 +20,7 @@ li { margin-bottom: 0.75em; - &.section { + &.related-items-more { font-weight: bold; } diff --git a/app/views/govuk_component/related_items.raw.html.erb b/app/views/govuk_component/related_items.raw.html.erb index 699a922f9..3d48a6ecb 100644 --- a/app/views/govuk_component/related_items.raw.html.erb +++ b/app/views/govuk_component/related_items.raw.html.erb @@ -11,7 +11,11 @@
  • <%= item[:title] %>
    • <% end %> <% if section[:url] %> -
  • More
    • +
  • + + More<% if section[:title] %> in <%= section[:title] %><% end %> + +
    • <% end %> <% end %> diff --git a/test/govuk_component/related_items_test.rb b/test/govuk_component/related_items_test.rb index 47d19a58c..3023b2eef 100644 --- a/test/govuk_component/related_items_test.rb +++ b/test/govuk_component/related_items_test.rb @@ -33,7 +33,7 @@ def component_name }) assert_select "h2", text: "Section title" - assert_link_with_text_in("ul li:last-child", "/more-link", "More") + assert_link_with_text_in("ul li:last-child", "/more-link", "More in Section title") assert_link_with_text_in("ul li:first-child", "/item", "Item title") assert_link_with_text_in("ul li:first-child + li", "/other-item", "Other item title") end @@ -65,11 +65,11 @@ def component_name }) assert_select "h2", text: "Section title" - assert_link_with_text_in("ul li:last-child", "/more-link", "More") + assert_link_with_text_in("ul li:last-child", "/more-link", "More in Section title") assert_link_with_text_in("ul li:first-child", "/item", "Item title") assert_select "h2", text: "Other section title" - assert_link_with_text_in("ul li:last-child", "/other-more-link", "More") + assert_link_with_text_in("ul li:last-child", "/other-more-link", "More in Other section title") assert_link_with_text_in("ul li:first-child", "/other-item", "Other item title") end From 22934d6e2f68379519ec35b68533bc4629f17516 Mon Sep 17 00:00:00 2001 From: Tatiana Soukiassian Date: Mon, 11 Jan 2016 15:12:54 +0000 Subject: [PATCH 5/9] Render external links with a rel attribute --- .../govuk_component/docs/related_items.yml | 27 ++++++++++++------- .../related_items.raw.html.erb | 9 ++++++- test/govuk_component/related_items_test.rb | 19 +++++++++++++ 3 files changed, 44 insertions(+), 11 deletions(-) diff --git a/app/views/govuk_component/docs/related_items.yml b/app/views/govuk_component/docs/related_items.yml index 1f77016fa..107332e5d 100644 --- a/app/views/govuk_component/docs/related_items.yml +++ b/app/views/govuk_component/docs/related_items.yml @@ -7,27 +7,34 @@ body: | fixtures: default: sections: - - title: 'Travel Abroad' - url: '/' + - title: "Travel Abroad" + url: "/" items: - - title: 'Link A' + - title: "Link A" url: / - - title: 'Link B' + - title: "Link B" url: / - - title: 'Travel' + - title: "Travel" items: - - title: 'Link 1' + - title: "Link 1" url: / - - title: 'Link 2' + - title: "Link 2" url: / + external_links: + sections: + - title: "Elsewhere on the web" + items: + - title: "Wikivorce" + url: "http://www.wikivorce.com" + rel: external real_example: # from https://www.gov.uk/register-birth sections: - - title: Pregnancy and birth + - title: "Pregnancy and birth" url: /browse/childcare-parenting/pregnancy-birth items: - - title: 'Register a birth' + - title: "Register a birth" url: /register-birth - items: - - title: Check if you're a British citizen + - title: "Check if you're a British citizen" url: /check-british-citizen diff --git a/app/views/govuk_component/related_items.raw.html.erb b/app/views/govuk_component/related_items.raw.html.erb index 3d48a6ecb..49dc464ea 100644 --- a/app/views/govuk_component/related_items.raw.html.erb +++ b/app/views/govuk_component/related_items.raw.html.erb @@ -8,7 +8,14 @@
      <% section[:items].each do |item| %> -
    • <%= item[:title] %>
      • +
    • + rel="<%= item[:rel] %>"<% end %> + > + <%= item[:title] %> + +
      • <% end %> <% if section[:url] %>
    • diff --git a/test/govuk_component/related_items_test.rb b/test/govuk_component/related_items_test.rb index 3023b2eef..dbcb23ba3 100644 --- a/test/govuk_component/related_items_test.rb +++ b/test/govuk_component/related_items_test.rb @@ -90,4 +90,23 @@ def component_name assert_select "h2", text: "Elsewhere on GOV.UK" end + + test "renders external links with a rel attribute" do + render_component({ + sections: [ + { + title: "Elsewhere on the web", + url: "/more-link", + items: [ + { + title: "Wikivorce", + url: "http://www.wikivorce.com", + rel: "external" + } + ] + }, + ], + }) + assert_select "a[rel=external]", text: "Wikivorce" + end end From 96ed296c642917b592abeebf742e6ee279054dc9 Mon Sep 17 00:00:00 2001 From: Tatiana Soukiassian Date: Mon, 11 Jan 2016 16:00:10 +0000 Subject: [PATCH 6/9] Add aria roles and labelledby to related items When passing in a section id, use this to add an id attribute and a labelledby attribute. This is in favour of generating an id, eg. by parameterising the title so that the component isn't using rails specific features. Care must be taken when using the component so that navigation is always correctly labelled. Pattern based on http://tink.uk/screen-readers-aria-roles-html5-support/ --- .../govuk_component/docs/related_items.yml | 7 ++- .../related_items.raw.html.erb | 49 ++++++++++--------- test/govuk_component/related_items_test.rb | 21 ++++++++ 3 files changed, 54 insertions(+), 23 deletions(-) diff --git a/app/views/govuk_component/docs/related_items.yml b/app/views/govuk_component/docs/related_items.yml index 107332e5d..db1f5ada0 100644 --- a/app/views/govuk_component/docs/related_items.yml +++ b/app/views/govuk_component/docs/related_items.yml @@ -9,12 +9,14 @@ fixtures: sections: - title: "Travel Abroad" url: "/" + id: "related-travel-abroad" items: - title: "Link A" url: / - title: "Link B" url: / - title: "Travel" + id: "related-travel" items: - title: "Link 1" url: / @@ -23,6 +25,7 @@ fixtures: external_links: sections: - title: "Elsewhere on the web" + id: "related-elsewhere-on-the-web" items: - title: "Wikivorce" url: "http://www.wikivorce.com" @@ -32,9 +35,11 @@ fixtures: sections: - title: "Pregnancy and birth" url: /browse/childcare-parenting/pregnancy-birth + id: "related-pregnancy-and-birth" items: - title: "Register a birth" url: /register-birth - - items: + - id: "related-elsewhere-on-govuk" + items: - title: "Check if you're a British citizen" url: /check-british-citizen diff --git a/app/views/govuk_component/related_items.raw.html.erb b/app/views/govuk_component/related_items.raw.html.erb index 49dc464ea..07c72e1ad 100644 --- a/app/views/govuk_component/related_items.raw.html.erb +++ b/app/views/govuk_component/related_items.raw.html.erb @@ -1,29 +1,34 @@ <% sections ||= [] %> -