Skip to content

Commit 2aa6f52

Browse files
MatMooreMatMoore
committed
create summaryList variant for complex information
This uses the styles from the summary list but abandons the <dl> markup so we can display more complex information with a nested structure. Instead of using a definition list, organise the information under regular headings. If we don't include the heading structure, then the nested structure isn't easily perceivable to screenreader users. If we include headings within the `dd`, but keep the dl / dh / dt structure, then the headings don't make sense when navigating by heading using assistive tech. Screenreaders don't always announce when leaving dls, so I've decided not to try nesting them. Another option is to use the reponsive table component, and get rid of the nested grid layout. However, this would require altering the overall positioning of the blocks of information, and in our case this is quite deliberate: right is always displayed on the left, and left on the right, with systemic information always displayed below. I've tested this component in Safari / VoiceOver and Edge / NVDA.
1 parent 8710e0e commit 2aa6f52

File tree

4 files changed

+161
-0
lines changed

4 files changed

+161
-0
lines changed

‎manage_breast_screening/assets/sass/components/_nested-info.scss‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/**
2+
This component renders a block of complex information using headings and subheadings.
3+
It looks the same as the summaryList component in the design system, but doesn't use a dl.
4+
5+
Use it to display data that:
6+
7+
- is differently shaped depending on the key
8+
- has up to 2 dimensions
9+
10+
Example with a 2 column grid:
11+
12+
*Key* *Subkey 1* *Subkey 2*
13+
Data item Data item
14+
15+
*Subkey 3*
16+
Data item
17+
---------------------------------
18+
19+
On a narrow screen / high zoom, this collapses to a vertical layout just like
20+
the summaryList component does.
21+
**/
22+
23+
@use "../vendor/nhsuk-frontend/base" as *;
24+
25+
.app-nested-info {
26+
margin: 0; // Reset default user agent styles
27+
28+
@include nhsuk-font($size: 19);
29+
@include nhsuk-responsive-margin(6, "bottom");
30+
31+
@include nhsuk-media-query($from: tablet) {
32+
display: table;
33+
width: 100%;
34+
table-layout: fixed; // Required to allow us to wrap words that overflow.
35+
border-collapse: collapse;
36+
}
37+
}
38+
39+
.app-nested-info__row {
40+
border-bottom: 1px solid $nhsuk-border-colour;
41+
42+
@include nhsuk-media-query($until: tablet) {
43+
margin-bottom: nhsuk-spacing(3);
44+
}
45+
@include nhsuk-media-query($from: tablet) {
46+
display: table-row;
47+
}
48+
}
49+
50+
.app-nested-info__key,
51+
.app-nested-info__value {
52+
box-sizing: border-box;
53+
margin: 0; // Reset default user agent styles
54+
vertical-align: top;
55+
56+
@include nhsuk-media-query($from: tablet) {
57+
display: table-cell;
58+
padding-top: nhsuk-spacing(2);
59+
padding-right: nhsuk-spacing(4);
60+
padding-bottom: nhsuk-spacing(2);
61+
}
62+
}
63+
64+
.app-nested-info__key,
65+
.app-nested-info__value {
66+
// Automatic wrapping for unbreakable text (e.g. URLs)
67+
@include nhsuk-text-break-word;
68+
}
69+
70+
.app-nested-info__key {
71+
margin-bottom: nhsuk-spacing(1);
72+
73+
@include nhsuk-typography-weight-bold;
74+
75+
@include nhsuk-media-query($from: tablet) {
76+
width: 30%;
77+
}
78+
79+
h1,
80+
h2,
81+
h3,
82+
h4,
83+
h5,
84+
h6 {
85+
margin-bottom: 0;
86+
}
87+
}
88+
89+
.app-nested-info__value {
90+
@include nhsuk-media-query($until: tablet) {
91+
margin-bottom: nhsuk-spacing(3);
92+
}
93+
}
94+
95+
.app-nested-info__value > :last-child {
96+
margin-bottom: 0;
97+
}
98+
99+
// Remove the usual margin from paragraphs and lists, where it touches the border of the grid
100+
// leaving only the spacing from the .app-nested-info__value
101+
.app-nested-info__subvalue_row:last-child > .app-nested-info__subvalue > ul:last-child,
102+
.app-nested-info__subvalue_row:last-child > .app-nested-info__subvalue > p:last-child {
103+
@include nhsuk-media-query($from: tablet) {
104+
margin-bottom: 0;
105+
}
106+
}
107+
108+
// No border on specific rows
109+
.app-nested-info__row--no-border {
110+
border: 0;
111+
112+
// Increase padding by 1px to compensate for 'missing' border
113+
@include nhsuk-media-query($from: tablet) {
114+
.app-nested-info__key,
115+
.app-nested-info__value {
116+
padding-bottom: nhsuk-spacing(2) + 1px;
117+
}
118+
}
119+
}
120+
121+
.nhsuk-card__content {
122+
.app-nested-info:last-child .app-nested-info__row:last-of-type {
123+
margin-bottom: 0;
124+
}
125+
}

‎manage_breast_screening/assets/sass/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@forward "components/appointment-status";
99
@forward "components/secondary-navigation";
1010
@forward "components/special-appointment-banner";
11+
@forward "components/nested-info";
1112

1213
$color_app-dark-blue: #00386e;
1314

‎manage_breast_screening/core/jinja2/components/nested-info-card/macro.jinja‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{% macro nestedInfoCard(params) %}
2+
{%- include 'components/nested-info-card/template.jinja' -%}
3+
{% endmacro %}

‎manage_breast_screening/core/jinja2/components/nested-info-card/template.jinja‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{% from "nhsuk/components/card/macro.jinja" import card %}
2+
{% set headingLevel = params.headingLevel | default(2) %}
3+
{% call card(params.card) %}
4+
<div class="app-nested-info">
5+
{% for row in params.rows %}
6+
{% if row %}
7+
<div class="app-nested-info__row {% if loop.last %}app-nested-info__row--no-border{% endif %}">
8+
<div class="app-nested-info__key">
9+
<h{{headingLevel}} class="nhsuk-heading-xs">{{ row.key }}</h{{ headingLevel }}>
10+
</div>
11+
<div class="app-nested-info__value">
12+
{% if row.value.rows %}
13+
{% for inner_row in row.value.rows %}
14+
<div class="nhsuk-grid-row app-nested-info__subvalue_row">
15+
{% set column_width = "full" if inner_row.columns | length == 1 else "one-half" %}
16+
{% for column in inner_row.columns %}
17+
<div class="nhsuk-grid-column-{{ column_width }} app-nested-info__subvalue">
18+
{% if column.heading %}<h{{ headingLevel + 1 }} class="nhsuk-heading-xs nhsuk-u-margin-bottom-1">{{ column.heading }}</h{{ headingLevel + 1 }}>{% endif %}
19+
{{ column.html | safe }}
20+
</div>
21+
{% endfor %}
22+
</div>
23+
{% endfor %}
24+
{% else %}
25+
{{ row.value.html | safe }}
26+
{% endif %}
27+
</div>
28+
</div>
29+
{% endif %}
30+
{% endfor %}
31+
</div>
32+
{% endcall %}

0 commit comments

Comments
 (0)