diff --git a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss index 3a35bd9dc..ccc2adf5d 100644 --- a/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss +++ b/app/assets/stylesheets/govuk-component/_taxonomy-sidebar.scss @@ -1,29 +1,50 @@ .govuk-taxonomy-sidebar { - border-top: 10px solid $mainstream-brand; - padding-top: 5px; @include core-16; + border-top: 2px solid $govuk-blue; + padding-top: $gutter-half; +} + +.govuk-taxonomy-sidebar__heading { + @include bold-19; + margin-bottom: $gutter-one-third; + margin-top: 0; +} + +.govuk-taxonomy-sidebar__taxon-description { + margin-bottom: $gutter-one-third; + margin-top: 0; +} + +.govuk-taxonomy-sidebar__navigation { + margin-bottom: $gutter; +} + +.govuk-taxonomy-sidebar__list { + list-style: none; + margin: 0; + margin-bottom: 1.25em; + padding: 0; +} + +.govuk-taxonomy-sidebar__item { + list-style-type: none; + margin-bottom: $gutter-one-third; + padding: 0; +} + +.govuk-taxonomy-sidebar__link { + text-decoration: none; +} + + +.govuk-taxonomy-sidebar__collections-heading { + border-top: 1px solid $border-colour; + margin-bottom: $gutter-half; + margin-top: $gutter; + padding-top: $gutter-half; +} - h2 { - @include bold-24; - margin-top: 0.3em; - margin-bottom: 0.5em; - } - - .taxon-description { - margin-bottom: 0.75em; - } - - ul { - // reset the default browser styles - padding: 0; - margin: 0; - list-style: none; - margin-bottom: 1.25em; - - li { - // reset the default browser styles - padding: 0; - margin-bottom: 0.75em; - } - } +.govuk-taxonomy-sidebar__collections-link { + @include bold-19; + text-decoration: none; } diff --git a/app/views/govuk_component/docs/taxonomy_sidebar.yml b/app/views/govuk_component/docs/taxonomy_sidebar.yml index bed2bcca7..dadcace1e 100644 --- a/app/views/govuk_component/docs/taxonomy_sidebar.yml +++ b/app/views/govuk_component/docs/taxonomy_sidebar.yml @@ -48,7 +48,7 @@ examples: link: /government/collections/key-stage-1-teacher-assessment - title: "Primary assessments: information and resources for 2017" link: /government/publications/primary-assessments-information-and-resources-for-2017 - - title: "Slide pack from Phil Beach at the Skills & Employability Summit" + - title: "Slide pack from Phil Beach at the Skills & Employability Summit" link: /government/publications/primary-assessments-information-and-resources-for-2017 - title: "Transport to education and training for people aged 16 to 18" link: /government/publications/primary-assessments-information-and-resources-for-2017 @@ -64,6 +64,9 @@ examples: link: /government/collections/key-stage-1-teacher-assessment - title: "Primary assessments: information and resources for 2017" link: /government/publications/primary-assessments-information-and-resources-for-2017 + collections: + - text: "Statistics: outcome based success measures" + - path: "/government/collections/statistics-outcome-based-success-measures" no_children: description: | The child links are usually pulled from rummager. If rummager doesn’t respond we fallback to a sidebar with a taxon link but without any child content links. diff --git a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb index 47f117a49..d6ace9b7f 100644 --- a/app/views/govuk_component/taxonomy_sidebar.raw.html.erb +++ b/app/views/govuk_component/taxonomy_sidebar.raw.html.erb @@ -1,15 +1,16 @@ <% if local_assigns[:items] && !items.blank? %> <% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 962d54a48..4d3e705aa 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -34,3 +34,5 @@ en: in: "in" task_list_related: part_of: "Part of" + taxonomy_sidebar: + related_content: "Related content" diff --git a/test/govuk_component/taxonomy_sidebar_test.rb b/test/govuk_component/taxonomy_sidebar_test.rb index 9d16bc8ca..a5ecc6492 100644 --- a/test/govuk_component/taxonomy_sidebar_test.rb +++ b/test/govuk_component/taxonomy_sidebar_test.rb @@ -27,8 +27,8 @@ def component_name ] ) - taxon_titles = css_select(".sidebar-taxon h2").map { |taxon_title| taxon_title.text.strip } - assert_equal ["Item 1 title", "Item 2 title"], taxon_titles + taxon_titles = css_select(".govuk-taxonomy-sidebar__heading").map { |taxon_title| taxon_title.text.strip } + assert_equal ["Related content", "Item 1 title", "Item 2 title"], taxon_titles end test "renders all data attributes for tracking" do @@ -70,7 +70,7 @@ def component_name total_sections = 2 total_links_in_section_1 = 3 - assert_select 'h2 a', "Item title" + assert_select 'h3 a', "Item title" assert_select '.govuk-taxonomy-sidebar[data-module="track-click"]', 1 assert_tracking_link("category", "relatedLinkClicked", 6) @@ -94,7 +94,7 @@ def component_name end - test "renders without url on the h2 heading" do + test "renders without url on the h3 heading" do render_component( items: [ { @@ -114,7 +114,33 @@ def component_name ] ) - assert_select 'h2', "Without an url" - assert_select 'h2 a', false + assert_select 'h3', "Without an url" + assert_select 'h3 a', false + end + + test "renders collections links" do + render_component( + items: [ + { + title: "Without an url", + description: "An item", + related_content: [ + { + title: "Related link 1", + link: "/related-link-1", + } + ], + }, + ], + collections: [ + { + text: "Collection 1", + path: "/some-collection" + } + ] + ) + + assert_select "h3.govuk-taxonomy-sidebar__collections-heading", "Collections" + assert_select "a.govuk-taxonomy-sidebar__collections-link", "Collection 1" end end