Skip to content

Commit

Permalink
Merge branch 'main' into fix/3154/fix-focus-state-link-in-footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@SriHV
SriHV authored May 2, 2024
2 parents ac01544 + eb82eb7 commit c4ec647
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 10 deletions.
3 changes: 3 additions & 0 deletions ...r-test__components_summary_example-summary-hub-minimal_0_document_0_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...vr-test__components_summary_example-summary-hub-minimal_0_document_1_tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...vr-test__components_summary_example-summary-hub-minimal_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 10 additions & 9 deletions src/components/summary/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,16 @@

## SummaryRowItem

| Name | Type | Required | Description |
| ------------------ | ---------------------- | -------- | ------------------------------------------------------------------------------------------- |
| id | string | false | The HTML `id` of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the [icon type](/foundations/icons#icon-type) |
| rowTitle | string | false | The title for the row item |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| valueList | Array`<SummaryValue>` | false | An array of [value(s)](#summaryvalue) for the row item |
| actions | Array`<SummaryAction>` | false | Settings for the row [action links](#summaryaction) |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
| ---------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------- |
| id | string | false | The HTML `id` of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the [icon type](/foundations/icons#icon-type) |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| rowTitle | string | false | The title for the row item |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| valueList | Array`<SummaryValue>` | false | An array of [value(s)](#summaryvalue) for the row item |
| actions | Array`<SummaryAction>` | false | Settings for the row [action links](#summaryaction) |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |

## SummaryValue

Expand Down
5 changes: 4 additions & 1 deletion src/components/summary/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{% if params.classes %}
{% set className = className + " " + params.classes %}
{% endif %}

<div class="{{ className }}">
{% for summary in params.summaries %}
{% if summary.summaryTitle %}
Expand Down Expand Up @@ -51,6 +51,9 @@
"iconType": rowItem.iconType
})
-}}
{% if rowItem.iconVisuallyHiddenText %}
<span class="ons-u-vh">{{ rowItem.iconVisuallyHiddenText }}</span>
{% endif %}
</span>
{% endif %}

Expand Down
7 changes: 7 additions & 0 deletions src/components/summary/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const EXAMPLE_SUMMARY_ROWS = {
b: 'bbb',
},
iconType: 'check',
iconVisuallyHiddenText: 'Section completed',
id: 'item-id-1',
valueList: [
{
Expand Down Expand Up @@ -432,6 +433,12 @@ describe('macro: summary', () => {
expect($('.ons-summary__item-title-icon').hasClass('ons-summary__item-title-icon--check')).toBe(true);
});

it('has the visually hidden text <span> text when `iconType` is `check`', () => {
const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));

expect($('.ons-summary__item-title-icon').text().trim()).toBe('Section completed');
});

it('has the correct item text class when `iconType` is provided', () => {
const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));

Expand Down
75 changes: 75 additions & 0 deletions src/components/summary/example-summary-hub-minimal.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
{% from "components/summary/_macro.njk" import onsSummary %}

{{ onsSummary({
"variant": "hub",
"summaries": [
{
"groups": [
{
"rows": [
{
"rowTitle": "People who live here",
"rowItems": [
{
"iconType": "check",
"iconVisuallyHiddenText": "Section complete",
"actions": [
{
"text": "View answers",
"visuallyHiddenText": "View answers for People who live here",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Mary Smith (You)",
"rowItems": [
{
"iconType": "check",
"iconVisuallyHiddenText": "Section complete",
"actions": [
{
"text": "View answers",
"visuallyHiddenText": "View answers for Mary Smith",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "John Smith",
"rowItems": [
{
"actions": [
{
"text": "Continue with section",
"visuallyHiddenText": "Continue with John Smith's section",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Billy Smith",
"rowItems": [
{
"actions": [
{
"text": "Start section",
"visuallyHiddenText": "Start Billy Smith's section",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
}) }}

0 comments on commit c4ec647

Please sign in to comment.