Skip to content

Commit 4d448f8

Browse files
MatMooreMatMoore
authored
Merge pull request #835 from NHSDigital/DTOSS-11577-medical-history-summary-lists
breast cancer history card (inner content)
2 parents 2badf89 + 8064044 commit 4d448f8

File tree

10 files changed

+355
-158
lines changed

10 files changed

+355
-158
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 %}

‎manage_breast_screening/mammograms/jinja2/mammograms/medical_information/medical_history/cards/breast_cancer_history_card.jinja‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
{% from "components/nested-info-card/macro.jinja" import nestedInfoCard %}
2+
{% from "mammograms/medical_information/medical_history/cards/macros.jinja" import listWithDefault, itemWithDetails, paragraph %}
3+
4+
{% macro breast_cancer_history_card(breast_cancer_history) %}
5+
{% if breast_cancer_history %}
6+
<section>
7+
<h3 class="nhsuk-u-margin-bottom-2">Breast cancer</h3>
8+
{% endif %}
9+
{% for presented_item in breast_cancer_history %}
10+
{% set keyHeadingLevel = 5 if presented_item.counter else 4 %}
11+
12+
<!-- This will be replaced with the card's actions param, once the card updates are released. -->
13+
<a class="nhsuk-link nhsuk-link--no-visited-state" href="{{ presented_item.change_link.href }}">
14+
{{ presented_item.change_link.text }}<span class="nhsuk-u-visually-hidden">{{ presented_item.change_link.visually_hidden_text }}</span>
15+
</a>
16+
17+
{{
18+
nestedInfoCard({
19+
"card": {
20+
"heading": "Item " ~ presented_item.counter,
21+
"headingLevel": 4
22+
} if presented_item.counter else {},
23+
"headingLevel": keyHeadingLevel,
24+
"rows": [
25+
{
26+
"key": "Cancer location",
27+
"value": {
28+
"html": paragraph(presented_item.cancer_location)
29+
}
30+
},
31+
{
32+
"key": "Procedures",
33+
"value": {
34+
"rows": [
35+
{
36+
"columns": [
37+
{
38+
"heading": "Right breast",
39+
"html": paragraph(presented_item.right_breast_procedure)
40+
},
41+
{
42+
"heading": "Left breast",
43+
"html": paragraph(presented_item.left_breast_procedure)
44+
},
45+
]
46+
}
47+
]
48+
}
49+
},
50+
{
51+
"key": "Other surgery",
52+
"value": {
53+
"rows": [
54+
{
55+
"columns": [
56+
{
57+
"heading": "Right breast",
58+
"html": listWithDefault(presented_item.right_breast_other_surgery)
59+
},
60+
{
61+
"heading": "Left breast",
62+
"html": listWithDefault(presented_item.left_breast_other_surgery)
63+
},
64+
]
65+
}
66+
]
67+
}
68+
},
69+
{
70+
"key": "Treatment",
71+
"value": {
72+
"rows": [
73+
{
74+
"columns": [
75+
{
76+
"heading": "Right breast",
77+
"html": listWithDefault(presented_item.right_breast_treatments)
78+
},
79+
{
80+
"heading": "Left breast",
81+
"html": listWithDefault(presented_item.left_breast_treatments)
82+
},
83+
]
84+
},
85+
{
86+
"columns": [
87+
{
88+
"heading": "Systemic treatments",
89+
"html": listWithDefault(presented_item.systemic_treatments)
90+
}
91+
]
92+
}
93+
]
94+
}
95+
},
96+
{
97+
"key": "Treatment location",
98+
"value": {
99+
"html": itemWithDetails(presented_item.intervention_location)
100+
}
101+
},
102+
{
103+
"key": "Additional details",
104+
"value": {
105+
"html": paragraph(presented_item.additional_details)
106+
}
107+
} if presented_item.additional_details
108+
]
109+
})
110+
}}
111+
{% endfor %}
112+
{% if breast_cancer_history %}
113+
</section>
114+
{% endif %}
115+
{% endmacro %}

‎manage_breast_screening/mammograms/jinja2/mammograms/medical_information/medical_history/cards/macros.jinja‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{# Present a plain list, or a default value if there are no items #}
2+
{% macro listWithDefault(items, default="None") %}
3+
{% if items %}
4+
<ul class="nhsuk-list">
5+
{% for item in items %}
6+
<li>{{ item }}</li>
7+
{% endfor %}
8+
</ul>
9+
{% else %}
10+
{{ default }}
11+
{% endif %}
12+
{% endmacro %}
13+
14+
{# Present an answer to a radio + details question #}
15+
{% macro itemWithDetails(item, default='Details not provided') %}
16+
{{ item.type }}
17+
{% if item.details %}
18+
<br>
19+
Details: {{ item.details }}
20+
{% elif default %}
21+
<br>
22+
{{ default }}
23+
{% endif %}
24+
{% endmacro %}
25+
26+
{% macro paragraph(item) %}
27+
<p>{{ item | nl2br }}</p>
28+
{% endmacro %}

‎manage_breast_screening/mammograms/jinja2/mammograms/record_medical_information.jinja‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
{% from "nhsuk/components/inset-text/macro.jinja" import insetText %}
55
{% from "nhsuk/components/summary-list/macro.jinja" import summaryList %}
66
{% from "components/participant-details/summary_list_rows.jinja" import last_mammogram_html %}
7+
{% from "mammograms/medical_information/medical_history/cards/breast_cancer_history_card.jinja" import breast_cancer_history_card %}
78

89
{% block step_content %}
910

@@ -64,15 +65,6 @@
6465
{% endcall %}
6566

6667
{% set medical_history_card_html %}
67-
{% set breast_cancer_history_html %}
68-
{% for presented_item in presenter.breast_cancer_history %}
69-
<a style="float: right" class="nhsuk-link nhsuk-link--no-visited-state" href="{{ presented_item.change_link.href}}">
70-
{{ presented_item.change_link.text }}<span class="nhsuk-u-visually-hidden">{{ presented_item.change_link.visually_hidden_text }}</span>
71-
</a><br>
72-
{{ summaryList(presented_item.summary_list_params) }}
73-
{% endfor %}
74-
{% endset %}
75-
7668
{% set mastectomy_or_lumpectomy_history_html %}
7769
{% for presented_item in presenter.mastectomy_or_lumpectomy_history %}
7870
<a style="float: right" class="nhsuk-link nhsuk-link--no-visited-state" href="{{ presented_item.change_link.href}}">
@@ -125,19 +117,10 @@
125117
{% endfor %}
126118
{% endset %}
127119

120+
{{ breast_cancer_history_card(presenter.breast_cancer_history) }}
121+
128122
{{ summaryList({
129123
"rows": [
130-
{
131-
"key": {
132-
"text": "Breast cancer history"
133-
},
134-
"value": {
135-
"html": breast_cancer_history_html
136-
},
137-
"actions": {
138-
"items": []
139-
}
140-
},
141124
{
142125
"key": {
143126
"text": "Implanted medical device history"
@@ -216,8 +199,8 @@
216199
}) }}
217200
{% endfor %}
218201
</div>
219-
220202
{% endset %}
203+
221204
{{ card({
222205
"heading": "Medical history",
223206
"descriptionHtml": medical_history_card_html

0 commit comments

Comments
 (0)