-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4182 from alphagov/Add-Summary_card-component-to-gem
Add Summary Card component to Gem
- Loading branch information
Showing
6 changed files
with
330 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
app/assets/stylesheets/govuk_publishing_components/components/_summary-card.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| @import "govuk_publishing_components/individual_component_support"; | ||
| @import "govuk/components/summary-list/summary-list"; | ||
|
|
||
| .gem-c-summary-card { | ||
| .govuk-summary-list__key { | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .govuk-summary-list__actions { | ||
| width: auto; | ||
| } | ||
|
|
||
| img { | ||
| display: block; | ||
| } | ||
| } |
62 changes: 62 additions & 0 deletions
62
app/views/govuk_publishing_components/components/_summary_card.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| <% | ||
| add_gem_component_stylesheet("summary-card") | ||
|
|
||
| id ||= nil | ||
| title ||= nil | ||
| data_attributes ||= {} | ||
| summary_card_actions ||= [] | ||
| rows ||=[] | ||
| %> | ||
| <% if title || rows.any? %> | ||
| <%= tag.div class: "gem-c-summary-card", id: id, data: data_attributes do %> | ||
| <%= tag.div class: "govuk-summary-card" do %> | ||
| <%= tag.div class: "govuk-summary-card__title-wrapper" do %> | ||
| <%= tag.h2 class: "govuk-summary-card__title" do %> | ||
| <%= title %> | ||
| <% end %> | ||
| <%= tag.ul class: "govuk-summary-card__actions" do %> | ||
| <% summary_card_actions.each do |action| %> | ||
| <%= tag.li class: "govuk-summary-card__action" do %> | ||
| <%= link_to sanitize(action[:label] + tag.span(" #{title}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state #{"gem-link--destructive govuk-!-font-weight-bold" if action[:destructive]}".strip %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% if rows.present? %> | ||
| <%= tag.div class: "govuk-summary-card__content" do %> | ||
| <%= tag.dl class: "govuk-summary-list" do %> | ||
| <% rows.each do |row| %> | ||
| <%= tag.div class: "govuk-summary-list__row" do %> | ||
| <%= tag.dt class: "govuk-summary-list__key" do %> | ||
| <%= row[:key] %> | ||
| <% end %> | ||
| <%= tag.dt class: "govuk-summary-list__value" do %> | ||
| <%= row[:value] %> | ||
| <% end %> | ||
| <% if row[:actions].present? %> | ||
| <%= tag.dd class: "govuk-summary-list__actions" do %> | ||
| <%= tag.ul class: "govuk-summary-list__actions-list" do %> | ||
| <% row[:actions].each do |action| %> | ||
| <%= tag.li class: "govuk-summary-list__actions-list-item" do %> | ||
| <% if action[:opens_in_new_tab] %> | ||
| <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]} (opens in new tab)", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state", rel: "noreferrer noopener", target: "_blank" %> | ||
| <% else %> | ||
| <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state #{"gem-link--destructive" if action[:destructive]}".strip %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> |
93 changes: 93 additions & 0 deletions
93
app/views/govuk_publishing_components/components/docs/summary_card.yml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| name: Summary card | ||
| description: An extension of the Summary list component. It can be used where there are multiple groups of lists to be displayed in their own discrete sections. | ||
| accessibility_criteria: | | ||
| - accept focus | ||
| - be focusable with a keyboard | ||
| - be usable with a keyboard | ||
| - indicate when it has focus | ||
| examples: | ||
| default: | ||
| data: | ||
| title: Title | ||
| rows: | ||
| - key: key one | ||
| value: value1 | ||
| - key: key two | ||
| value: value2 | ||
| with_custom-id: | ||
| data: | ||
| id: custom_id | ||
| title: Title | ||
| rows: | ||
| - key: key one | ||
| value: value1 | ||
| - key: key two | ||
| value: value2 | ||
| with_actions: | ||
| data: | ||
| title: Title | ||
| rows: | ||
| - key: key one | ||
| value: value1 | ||
| - key: key two | ||
| value: value2 | ||
| summary_card_actions: | ||
| - label: View | ||
| href: "#1" | ||
| - label: Edit | ||
| href: "#2" | ||
| with_destructive_action: | ||
| data: | ||
| title: Title | ||
| rows: | ||
| - key: key one | ||
| value: value1 | ||
| - key: key two | ||
| value: value2 | ||
| summary_card_actions: | ||
| - label: Delete | ||
| href: "#1" | ||
| destructive: true | ||
|
|
||
| with_row_actions: | ||
| data: | ||
| title: Title | ||
| rows: | ||
| - key: key one | ||
| value: value1 | ||
| actions: | ||
| - label: View | ||
| href: "#1" | ||
| - label: Edit | ||
| href: "#2" | ||
| - key: key two | ||
| value: value2 | ||
| actions: | ||
| - label: View | ||
| href: "#1" | ||
| - label: Edit | ||
| href: "#2" | ||
| with_row_destructive_action: | ||
| data: | ||
| title: Title | ||
| rows: | ||
| - key: key | ||
| value: value | ||
| actions: | ||
| - label: View | ||
| href: "#1" | ||
| - label: Edit | ||
| href: "#2" | ||
| - label: Delete | ||
| href: "#3" | ||
| destructive: true | ||
| with_row_action_that_opens_in_new_tab: | ||
| data: | ||
| title: Title | ||
| rows: | ||
| - key: key | ||
| value: value | ||
| actions: | ||
| - label: View | ||
| href: "#1" | ||
| opens_in_new_tab: true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| require "rails_helper" | ||
|
|
||
| describe "Summary card", type: :view do | ||
| def component_name | ||
| "summary_card" | ||
| end | ||
|
|
||
| it "does not render anything if no data is passed" do | ||
| test_data = {} | ||
| assert_empty render_component(test_data) | ||
| end | ||
|
|
||
| it "renders component title" do | ||
| render_component(title: "Title") | ||
| assert_select ".gem-c-summary-card .govuk-summary-card__title", text: "Title" | ||
| end | ||
|
|
||
| it "renders items" do | ||
| render_component( | ||
| rows: [ | ||
| { | ||
| key: "Title", | ||
| value: "The title", | ||
| }, | ||
| { | ||
| key: "Summary", | ||
| value: "The summary", | ||
| }, | ||
| ], | ||
| ) | ||
| assert_select ".govuk-summary-list__row", 2 | ||
| assert_select ".govuk-summary-list__key", text: "Title" | ||
| assert_select ".govuk-summary-list__value", text: "The title" | ||
| assert_select ".govuk-summary-list__key", text: "Summary" | ||
| assert_select ".govuk-summary-list__value", text: "The summary" | ||
| end | ||
|
|
||
| it "renders component with a custom id" do | ||
| render_component( | ||
| id: "custom_id", | ||
| title: "Title", | ||
| ) | ||
| assert_select "#custom_id", count: 1 | ||
| end | ||
|
|
||
| it "renders component title with view and edit actions" do | ||
| render_component( | ||
| title: "Title", | ||
| summary_card_actions: [ | ||
| { | ||
| label: "View", | ||
| href: "#1", | ||
| }, | ||
| { | ||
| label: "Edit", | ||
| href: "#2", | ||
| }, | ||
| ], | ||
| ) | ||
| assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title" | ||
| assert_select '.govuk-summary-card__title-wrapper ul.govuk-summary-card__actions .govuk-link[href="#1"]', text: "View Title" | ||
| assert_select '.govuk-summary-card__title-wrapper ul.govuk-summary-card__actions .govuk-link[href="#2"]', text: "Edit Title" | ||
| end | ||
|
|
||
| it "renders component title with destructive action" do | ||
| render_component( | ||
| title: "Title", | ||
| summary_card_actions: [ | ||
| { | ||
| label: "Delete", | ||
| href: "#1", | ||
| destructive: true, | ||
| }, | ||
| ], | ||
| ) | ||
| assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title" | ||
| assert_select '.govuk-summary-card__title-wrapper ul.govuk-summary-card__actions .gem-link--destructive[href="#1"]', text: "Delete Title" | ||
| end | ||
|
|
||
| it "renders component with row actions" do | ||
| render_component( | ||
| title: "Title", | ||
| rows: [ | ||
| { | ||
| key: "One", | ||
| value: "Value 1", | ||
| actions: [ | ||
| { | ||
| label: "View", | ||
| href: "#1", | ||
| }, | ||
| { | ||
| label: "Edit", | ||
| href: "#2", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| ) | ||
| assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title" | ||
| assert_select '.govuk-summary-list__row .govuk-link[href="#1"]', text: "View One" | ||
| assert_select '.govuk-summary-list__row .govuk-link[href="#2"]', text: "Edit One" | ||
| end | ||
|
|
||
| it "renders component with row destructive action" do | ||
| render_component( | ||
| title: "Title", | ||
| rows: [ | ||
| { | ||
| key: "One", | ||
| value: "Value 1", | ||
| actions: [ | ||
| { | ||
| label: "View", | ||
| href: "#1", | ||
| }, | ||
| { | ||
| label: "Edit", | ||
| href: "#2", | ||
| }, | ||
| { | ||
| label: "Delete", | ||
| href: "#3", | ||
| destructive: true, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| ) | ||
| assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title" | ||
| assert_select '.govuk-summary-list__row .govuk-link[href="#1"]', text: "View One" | ||
| assert_select '.govuk-summary-list__row .govuk-link[href="#2"]', text: "Edit One" | ||
| assert_select '.govuk-summary-list__row .gem-link--destructive[href="#3"]', text: "Delete One" | ||
| end | ||
|
|
||
| it "renders component with row action that opens in a new tab" do | ||
| render_component( | ||
| title: "Title", | ||
| rows: [ | ||
| { | ||
| key: "One", | ||
| value: "Value 1", | ||
| actions: [ | ||
| { | ||
| label: "View", | ||
| href: "#1", | ||
| opens_in_new_tab: true, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| ) | ||
| assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title" | ||
| assert_select '.govuk-summary-list__row .govuk-link[href="#1"]', text: "View One (opens in new tab)" | ||
| assert_select '.govuk-summary-list__row .govuk-link[target="_blank"]', text: "View One (opens in new tab)" | ||
| end | ||
| end |