Add text only list

Should a link not be provided to the "extra_links" property then it will fallback to a text list that uses the secondary grey text colour.
alphagov · Aug 26, 2021 · 9b93cc8 · 9b93cc8
1 parent 47decd6
commit 9b93cc8
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add text list to image card ([PR #2286](https://github.com/alphagov/govuk_publishing_components/pull/2286))
+
 ## 25.6.0
 
 * Add element tracking to track click ([PR #2283](https://github.com/alphagov/govuk_publishing_components/pull/2283))

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss b/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss
@@ -127,6 +127,10 @@
     margin-bottom: govuk-spacing(1);
   }
 
+  .gem-c-image-card__list-item--text {
+    color: govuk-colour("dark-grey", $legacy: "grey-1");
+  }
+
   .gem-c-image-card__list-item-link {
     line-height: 1.35em;
   }

diff --git a/app/views/govuk_publishing_components/components/_image_card.html.erb b/app/views/govuk_publishing_components/components/_image_card.html.erb
@@ -47,12 +47,16 @@
       <% if card_helper.extra_links.any? %>
         <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_links_no_indent %>">
           <% card_helper.extra_links.each do |link| %>
-            <li class="gem-c-image-card__list-item">
-              <%= link_to link[:text], link[:href],
-                class: extra_link_classes,
-                data: link[:data_attributes]
-              %>
-            </li>
+            <li class="gem-c-image-card__list-item <%= "gem-c-image-card__list-item--text" if not link[:href].present? %>">
+              <% if link[:href].present? %>
+                <%= link_to link[:text], link[:href],
+                  class: extra_link_classes,
+                  data: link[:data_attributes]
+                %>
+              <% else %>
+                <%= link[:text] %>
+              <% end %>  
+            </li>    
           <% end %>
         </ul>
       <% end %>

diff --git a/app/views/govuk_publishing_components/components/docs/image_card.yml b/app/views/govuk_publishing_components/components/docs/image_card.yml
@@ -103,6 +103,22 @@ examples:
         }
       ]
       extra_links_no_indent: true
+  extra_links_with_no_links:
+    description: If `extra_links` are passed to the component without `href` attributes, they are displayed as a simple text list.
+    data:
+      href: "/government/people/"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/62756/s300_courts-of-justice.JPG"
+      image_alt: "some meaningful alt text please"
+      heading_text: "John Whiskers MP"
+      extra_links: [
+        {
+          text: "Conservative 2010 to 2016",
+        },
+        {
+          text: "Labour 2007 to 2010",
+        }
+      ]
+      extra_links_no_indent: true
   extra_links_with_no_main_link:
     description: If extra links are included, the main link is not needed. Note that in this configuration the image is not a link as no link has been supplied.
     data:

diff --git a/spec/components/image_card_spec.rb b/spec/components/image_card_spec.rb
@@ -80,6 +80,12 @@ def component_name
     assert_select ".gem-c-image-card__list.gem-c-image-card__list--indented", false
   end
 
+  it "renders extra links without links and just as a text list" do
+    render_component(href: "#", extra_links: [{ text: "text1" }], extra_links_no_indent: true)
+    assert_select ".gem-c-image-card__list"
+    assert_select ".gem-c-image-card__list-item.gem-c-image-card__list-item--text"
+  end
+
   it "renders extra links without a main link" do
     render_component(extra_links: [{ href: "/1", text: "link1" }])
     assert_select ".gem-c-image-card__title a", false