Enhancement/2968/add summary card (#3009)

* Added card example, css and macro * Added summary card changes * test * Changes as per comments except test cases * deleting extra line * Added tests * Making changes as per the comments * Update src/components/summary/example-summary-card-grouped.njk Co-authored-by: rmccar <[email protected]> * Made changes as per tech session * Update src/components/summary/_macro.njk Co-authored-by: rmccar <[email protected]> * Update src/components/summary/example-summary-card-grouped.njk Co-authored-by: rmccar <[email protected]> * Update src/components/summary/_macro.njk Co-authored-by: rmccar <[email protected]> * changes as per the comments * Changes as per call * Fixing the tests * Changes as per commentns * Fixed Visual Tests * Changes as per comments * fixing errors * Fixing link focus issue * Update src/components/summary/_summary.scss Co-authored-by: rmccar <[email protected]> * Update src/components/summary/_macro.njk Co-authored-by: rmccar <[email protected]> * Update src/components/summary/_macro.njk Co-authored-by: rmccar <[email protected]> * Update src/components/summary/_macro.njk Co-authored-by: rmccar <[email protected]> * Removed variant card from no-rows --------- Co-authored-by: Alessio <[email protected]> Co-authored-by: rmccar <[email protected]> Co-authored-by: Alessio Venturini <[email protected]>
ONSdigital · Feb 22, 2024 · 355eb87 · 355eb87
1 parent dc154ab
commit 355eb87
Show file tree

Hide file tree

Showing 14 changed files with 449 additions and 31 deletions.
diff --git a/...-test__components_summary_example-summary-card-grouped_0_document_0_desktop.png b/...-test__components_summary_example-summary-card-grouped_0_document_0_desktop.png
diff --git a/...r-test__components_summary_example-summary-card-grouped_0_document_1_tablet.png b/...r-test__components_summary_example-summary-card-grouped_0_document_1_tablet.png
diff --git a/...r-test__components_summary_example-summary-card-grouped_0_document_2_mobile.png b/...r-test__components_summary_example-summary-card-grouped_0_document_2_mobile.png
diff --git a/src/components/document-list/document-list.scss b/src/components/document-list/document-list.scss
@@ -4,7 +4,7 @@
   margin-bottom: 0;
 
   &__item {
-    border-bottom: 1px solid var(--ons-color-borders-list);
+    border-bottom: 1px solid var(--ons-color-borders-light);
     margin: 0 0 1.5rem;
     padding: 0 0 1.5rem;
 

diff --git a/src/components/download-resources/_download-resources.scss b/src/components/download-resources/_download-resources.scss
@@ -1,6 +1,6 @@
 .ons-adv-filter {
   &__gallery {
-    border-top: 1px solid var(--ons-color-borders-list);
+    border-top: 1px solid var(--ons-color-borders-light);
     margin-left: 0;
     padding-left: 0;
     padding-top: 1.5rem;

diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md
@@ -1,8 +1,8 @@
-| Name      | Type               | Required | Description                               |
-| --------- | ------------------ | -------- | ----------------------------------------- |
-| summaries | Array`<Summaries>` | true     | An array of [summaries](#summaries)       |
-| classes   | string             | false    | Classes to add to the summary component   |
-| hub       | boolean            | false    | Set to “true” to use the summary as a hub |
+| Name      | Type               | Required | Description                                                    |
+| --------- | ------------------ | -------- | -------------------------------------------------------------- |
+| summaries | Array`<Summaries>` | true     | An array of [summaries](#summaries)                            |
+| classes   | string             | false    | Classes to add to the summary component                        |
+| variant   | string             | false    | Can be set to card or hub to use those variants of the summary |
 
 ## Summaries
 
@@ -13,13 +13,13 @@
 
 ## SummaryGroup
 
-| Name            | Type                 | Required                            | Description                                                                    |
-| --------------- | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------ |
-| rows            | Array`<SummaryRow>`  | true (unless `placeholderText` set) | An array of [rows](#summaryrow) within a group                                 |
-| placeholderText | string               | true (unless `rows` set)            | A message to be shown as a placeholder if there are no rows in the summary     |
-| groupTitle      | string               | false                               | The title heading for a summary within a group                                 |
-| id              | string               | false                               | The HTML `id` of the group                                                     |
-| summaryLink     | Array`<SummaryLink>` | false                               | Settings for the [summary link](#summarylink) used to a new row to the summary |
+| Name            | Type                 | Required                                    | Description                                                                    |
+| --------------- | -------------------- | ------------------------------------------- | ------------------------------------------------------------------------------ |
+| rows            | Array`<SummaryRow>`  | true (unless `placeholderText` set)         | An array of [rows](#summaryrow) within a group                                 |
+| placeholderText | string               | true (unless `rows` set)                    | A message to be shown as a placeholder if there are no rows in the summary     |
+| groupTitle      | string               | false (`true` if variant is set to `card` ) | The title heading for a summary within a group                                 |
+| id              | string               | false                                       | The HTML `id` of the group                                                     |
+| summaryLink     | Array`<SummaryLink>` | false                                       | Settings for the [summary link](#summarylink) used to a new row to the summary |
 
 ## SummaryRow
 

diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk
@@ -2,21 +2,25 @@
     {% set className = "ons-summary" %}
     {% set titleSize = "2" %}
 
-    {% if params.classes %}
-         {% set className = className + " " + params.classes %}
+    {% if params.variant == "hub" %}
+        {% set variantHub = true %}
+        {% set className = className + " ons-summary--hub" %}
+    {% elif params.variant %}
+        {% set variantClasses = " ons-summary__group--" + params.variant %}
     {% endif %}
 
-    {% if params.hub %}
-        {% set className = className + " ons-summary--hub" %}
+    {% if params.classes %}
+         {% set className = className + " " + params.classes %}
     {% endif %}
+
     <div class="{{ className }}">
         {% for summary in params.summaries %}
             {% if summary.summaryTitle %}
                 <h2 class="ons-summary__title ons-u-mb-m{{ " ons-u-mt-m" if loop.index > 1 else "" }}">{{ summary.summaryTitle }}</h2>
                 {% set titleSize = "3" %}
             {% endif %}
             {% for group in summary.groups %}
-                <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group">
+                <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group{{ variantClasses }}">
                     {% if group.groupTitle %}
                         <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
                     {% endif %}
@@ -27,7 +31,6 @@
                                 {% set itemClass = "" %}
                                 {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
                                 {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
-
                                 <div {% if row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
                                     {% if row.errorMessage %}
                                         <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
@@ -57,7 +60,7 @@
                                                 </div>
 
                                                 {# Render section status for mobile if is hub #}
-                                                {% if params.hub and rowItem.valueList %}
+                                                {% if variantHub and rowItem.valueList %}
                                                     <span class="ons-u-d-no@m ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
                                                 {% endif %}
                                             </dt>
@@ -111,8 +114,10 @@
                     {% endif %}
 
                     {% if group.summaryLink %}
-                        <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 %} ons-u-bt{% endif %}{% if not group.last %} ons-u-mb-xl{% endif %}">
-                            <a {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
+                        <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' %} ons-u-bt{% endif %}{% if not group.last %} ons-u-mb-xl{% endif %}">
+                            {% if params.variant == 'card' %}<div>{% endif %}
+                                <a {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
+                            {% if params.variant == 'card' %}</div>{% endif %}
                         </div>
                     {% endif %}
                 </div>

diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js
@@ -533,7 +533,7 @@ describe('macro: summary', () => {
       const $ = cheerio.load(
         renderComponent('summary', {
           ...EXAMPLE_SUMMARY_BASIC,
-          hub: true,
+          variant: 'hub',
         }),
       );
 
@@ -545,7 +545,7 @@ describe('macro: summary', () => {
       const $ = cheerio.load(
         renderComponent('summary', {
           ...EXAMPLE_SUMMARY_BASIC,
-          hub: true,
+          variant: 'hub',
         }),
       );
 
@@ -556,7 +556,7 @@ describe('macro: summary', () => {
       const $ = cheerio.load(
         renderComponent('summary', {
           ...EXAMPLE_SUMMARY_BASIC,
-          hub: true,
+          variant: 'hub',
         }),
       );
 
@@ -605,3 +605,23 @@ describe('macro: summary', () => {
     });
   });
 });
+
+describe('mode: card', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, variant: 'card' }));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the correct classes applied', () => {
+    const $ = cheerio.load(
+      renderComponent('summary', {
+        ...EXAMPLE_SUMMARY_MULTIPLE_GROUPS,
+        variant: 'card',
+      }),
+    );
+
+    expect($('.ons-summary__group').hasClass('ons-summary__group--card')).toBe(true);
+  });
+});
diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss
@@ -27,7 +27,7 @@ $hub-row-spacing: 1.3rem;
     line-height: 1.4;
 
     &:not(:last-child),
-    &:nth-of-type(1) {
+    &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) {
       border-bottom: 1px solid var(--ons-color-borders);
     }
 
@@ -208,4 +208,36 @@ $hub-row-spacing: 1.3rem;
       }
     }
   }
+
+  &__group {
+    &--card {
+      border: 1px solid var(--ons-color-borders-light);
+      .ons-summary__items {
+        padding: 0 1.25rem;
+        .ons-summary__item:not(:last-child) {
+          border-bottom: 1px solid var(--ons-color-borders-light);
+        }
+      }
+      .ons-summary__group-title {
+        background-color: var(--ons-color-grey-5);
+        padding: 1rem 1.25rem;
+      }
+      .ons-summary__link {
+        padding: 0 1.25rem;
+        div {
+          padding: 1rem 0;
+          border-top: 1px solid var(--ons-color-borders-light);
+        }
+      }
+      .ons-summary__placeholder {
+        display: block;
+        padding: 0.5rem 1.25rem 0;
+      }
+      .ons-summary__placeholder + .ons-summary__link {
+        div {
+          border-top: none;
+        }
+      }
+    }
+  }
 }