WIP

alphagov · Aug 8, 2018 · 77be237 · 77be237
1 parent 2cd6de3
commit 77be237
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 6 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    govuk_publishing_components (9.9.1)
+    govuk_publishing_components (9.10.0)
       govspeak (>= 5.0.3)
       govuk_app_config
       govuk_frontend_toolkit

diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
@@ -40,5 +40,6 @@
 @import "components/subscription-links";
 @import "components/success-alert";
 @import "components/taxonomy-navigation";
+@import "components/taxonomy-list";
 @import "components/title";
 @import "components/translation-nav";
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss
@@ -64,3 +64,7 @@
 .gem-c-document-list--top-margin {
   margin-top: $gutter-two-thirds;
 }
+
+.gem-c-document-list__multi-list {
+  width: 100%;
+}
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss b/app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss
@@ -0,0 +1,21 @@
+.gem-c-taxonomy-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 15px;
+
+  @include media(tablet) {
+    margin-right: -25px;
+  }
+}
+
+.gem-c-taxonomy-list__item {
+  list-style: none;
+
+  @include media(tablet) {
+    width: 33%;
+    display: inline-block;
+    padding-right: $gutter-one-third;
+    vertical-align: top;
+    box-sizing: border-box;
+  }
+}
diff --git a/app/views/govuk_publishing_components/components/_document_list.html.erb b/app/views/govuk_publishing_components/components/_document_list.html.erb
@@ -1,5 +1,7 @@
 <%
   items ||= []
+  within_multitype_list ||= false
+  within_multitype_list_class = " gem-c-document-list__multi-list" if within_multitype_list
   margin_top_class = " gem-c-document-list--top-margin" if local_assigns[:margin_top]
   margin_bottom_class = " gem-c-document-list--bottom-margin" if local_assigns[:margin_bottom]
   title_with_context_class = " gem-c-document-list__item-title--context"
@@ -8,9 +10,11 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 %>
 <% if items.any? %>
-  <ol class="gem-c-document-list<%= margin_bottom_class %><%= margin_top_class %> <%= brand_helper.brand_class %>">
+  <% if !within_multitype_list %>
+    <ol class="gem-c-document-list<%= margin_bottom_class %><%= margin_top_class %> <%= brand_helper.brand_class %>">
+  <% end %>
     <% items.each do |item| %>
-      <li class="gem-c-document-list__item">
+      <li class="gem-c-document-list__item <%= within_multitype_list_class %>">
         <%=
           link_to(
             item[:link][:text],
@@ -45,5 +49,7 @@
         <% end %>
       </li>
     <% end %>
-  </ol>
+  <% if !within_multitype_list %>
+    </ol>
+  <% end %>
 <% end %>
diff --git a/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb b/app/views/govuk_publishing_components/components/_highlight_boxes.html.erb
@@ -1,11 +1,14 @@
 <%
   items ||= []
   inverse ||= false
+  within_multitype_list ||= false
   inverse_class = "gem-c-highlight-boxes--inverse" if inverse
   highlight_boxes_helper = GovukPublishingComponents::Presenters::HighlightBoxesHelper.new(local_assigns)
 %>
 <% if items.any? %>
-  <ol class="gem-c-highlight-boxes" <%= "data-module=track-click" if highlight_boxes_helper.data_tracking? %>>
+  <% if !within_multitype_list %>
+    <ol class="gem-c-highlight-boxes" <%= "data-module=track-click" if highlight_boxes_helper.data_tracking? %>>
+  <% end %>
     <% items.each do |content_item| %>
       <li class="gem-c-highlight-boxes__item-wrapper">
         <div class="gem-c-highlight-boxes__item <%= inverse_class %>">
@@ -35,5 +38,7 @@
         </div>
       </li>
     <% end %>
-  </ol>
+  <% if !within_multitype_list %>
+    </ol>
+  <% end %>
 <% end %>
diff --git a/app/views/govuk_publishing_components/components/_taxonomy_list.html.erb b/app/views/govuk_publishing_components/components/_taxonomy_list.html.erb
@@ -0,0 +1,39 @@
+<%
+  highlight_box ||= false
+  document_list ||= false
+  image_cards ||= false
+
+  highlight_box.merge!({within_multitype_list: true}) if highlight_box
+  document_list.merge!({within_multitype_list: true}) if document_list
+%>
+
+<% if highlight_box || document_list || image_cards %>
+  <ul class="gem-c-taxonomy-list" data-module="track-click">
+    <% if image_cards %>
+      <% image_cards[:items].in_groups_of(3, false) do |promo_group| %>
+        <% promo_group.each do |promo| %>
+          <li class="gem-c-taxonomy-list__item">
+            <%= render "govuk_publishing_components/components/image_card", {
+              context: promo[:image][:context],
+              href: promo[:link][:path],
+              heading_text: promo[:link][:text],
+              image_src: promo[:image][:url],
+              image_alt: promo[:image][:alt],
+              heading_level: 0,
+              href_data_attributes: promo[:link][:data_attributes]
+              } %>
+          </li>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% if highlight_box %>
+      <%= render "govuk_publishing_components/components/highlight_boxes", highlight_box %>
+    <% end %>
+
+    <% if document_list %>
+      <%= render "govuk_publishing_components/components/document_list", document_list %>
+    <% end %>
+  </ul>
+<% end %>
+
diff --git a/app/views/govuk_publishing_components/components/docs/taxonomy_list.yml b/app/views/govuk_publishing_components/components/docs/taxonomy_list.yml
@@ -0,0 +1,77 @@
+name: Taxonomy List
+description: Wraps the highlight box and document list component in one list. This is commonly used on topic pages for taxonomy-related navigation.
+body: |
+  The highlight box and document list components are standalone components.
+
+  However, there are some use cases where we want to use both components to render one list of links. This is not possible when using the two components separately.
+  This component wraps these two components in one list, and applies relevant styling to get them to display appropriately together.
+accessibility_criteria:
+  - All links should be wrapped by one list.
+  - This component should not be used to display links that shouldn't belong together in one list.
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      highlight_box:
+        inverse: true
+        items:
+        - link:
+            text: If your child is taken into care
+            path: /child-into-care
+          metadata:
+            document_type: Detailed guide
+        - link:
+            text: High needs funding
+            path: /high-needs-funding
+          metadata:
+            document_type: Guide
+      document_list:
+        items:
+        - link:
+            text: If your child is taken into care
+            path: /child-into-care
+          metadata:
+            document_type: Detailed guide
+        - link:
+            text: High needs funding
+            path: /high-needs-funding
+          metadata:
+            document_type: Guide
+  with_image_cards:
+    data:
+      image_cards:
+        items:
+        - link:
+            path: /not-a-page
+            text: News headline
+          image:
+            url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG
+            alt: some meaningful alt text please
+            context: The Rt Hon
+        - link:
+            path: /not-a-page
+            text: News headline
+          image:
+            url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG
+            alt: some meaningful alt text please
+            context: The Rt Hon
+        - link:
+            path: /not-a-page
+            text: News headline
+          image:
+            url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG
+            alt: some meaningful alt text please
+            context: The Rt Hon
+      document_list:
+        items:
+        - link:
+            text: If your child is taken into care
+            path: /child-into-care
+          metadata:
+            document_type: Detailed guide
+        - link:
+            text: High needs funding
+            path: /high-needs-funding
+          metadata:
+            document_type: Guide