Skip to content

Commit 254ea8e

Browse files
edwardhorsfordedwardhorsford
authored
Workflow refactor and adopt side nav (#178)
1 parent 0d34ee8 commit 254ea8e

File tree

60 files changed

+1178
-2186
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+1178
-2186
lines changed

‎app/assets/sass/_workflow.scss‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
// app/assets/sass/components/_workflow.scss
2+
3+
@use "nhsuk-frontend/dist/nhsuk/core/settings" as *;
4+
@use "nhsuk-frontend/dist/nhsuk/core/styles/typography" as *;
5+
@use "nhsuk-frontend/dist/nhsuk/core/tools" as *;
6+
@use "nhsuk-frontend/dist/nhsuk/core/objects" as *;
7+
8+
// Wider container for workflow mode
9+
.nhsuk-width-container--wide {
10+
@include nhsuk-width-container(1200px);
11+
}
12+
13+
.app-workflow-mode .nhsuk-width-container {
14+
@include nhsuk-width-container(1200px);
15+
}
16+
17+
.app-workflow-container .nhsuk-grid-column-one-quarter {
18+
align-self: flex-start;
19+
}
20+
21+
// Side navigation
22+
.app-workflow-side-nav {
23+
position: sticky;
24+
top: nhsuk-spacing(4);
25+
align-self: flex-start; // Important for sticky in grid/flex
26+
padding-bottom: 15px;
27+
}
28+
29+
.app-workflow-side-nav__heading {
30+
margin-bottom: nhsuk-spacing(3);
31+
}
32+
33+
.app-workflow-side-nav__list {
34+
list-style: none;
35+
margin: 0;
36+
padding: 0;
37+
}
38+
39+
.app-workflow-side-nav__item {
40+
position: relative;
41+
border-left: 4px solid transparent;
42+
margin-left: -1px;
43+
}
44+
45+
.app-workflow-side-nav__link {
46+
@include nhsuk-font($size: 16);
47+
48+
display: flex;
49+
align-items: center;
50+
gap: nhsuk-spacing(2);
51+
padding: nhsuk-spacing(2) 0 nhsuk-spacing(2) nhsuk-spacing(2);
52+
text-decoration: none;
53+
position: relative;
54+
}
55+
56+
// Only apply link styles to actual links
57+
a.app-workflow-side-nav__link {
58+
@include nhsuk-link-style-default;
59+
@include nhsuk-link-style-no-visited-state;
60+
61+
&:hover {
62+
.app-workflow-side-nav__label {
63+
text-decoration: underline;
64+
text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
65+
}
66+
}
67+
68+
&:focus {
69+
@include nhsuk-focused-text;
70+
color: $nhsuk-focus-text-color;
71+
}
72+
}
73+
74+
.app-workflow-side-nav__link--disabled {
75+
color: $nhsuk-secondary-text-colour;
76+
cursor: not-allowed;
77+
pointer-events: none;
78+
}
79+
80+
// Clickable links (not current, not completed, not disabled) have blue circles
81+
.app-workflow-side-nav__link--clickable {
82+
.app-workflow-side-nav__number {
83+
background-color: $color_nhsuk-blue;
84+
color: $color_nhsuk-white;
85+
}
86+
}
87+
88+
.app-workflow-side-nav__number {
89+
display: flex;
90+
align-items: center;
91+
justify-content: center;
92+
flex: 0 0 24px;
93+
width: 24px;
94+
height: 24px;
95+
background-color: $color_nhsuk-grey-3;
96+
color: $color_nhsuk-grey-1;
97+
border-radius: 50%;
98+
font-weight: 600;
99+
font-size: 14px;
100+
text-align: center;
101+
line-height: 1;
102+
padding-left: 1px; // Nudge numbers slightly right
103+
104+
.app-icon--tick {
105+
width: 16px;
106+
height: 16px;
107+
108+
path {
109+
fill: none;
110+
stroke: $color_nhsuk-white;
111+
stroke-width: 4;
112+
}
113+
}
114+
}
115+
116+
.app-workflow-side-nav__label {
117+
flex: 1;
118+
}
119+
120+
// Item states
121+
.app-workflow-side-nav__item--current {
122+
border-left-color: $nhsuk-brand-colour;
123+
124+
.app-workflow-side-nav__link {
125+
color: $nhsuk-text-colour;
126+
}
127+
128+
.app-workflow-side-nav__label {
129+
font-weight: bold;
130+
}
131+
132+
.app-workflow-side-nav__number {
133+
background-color: $color_nhsuk-blue;
134+
color: $color_nhsuk-white;
135+
}
136+
}
137+
138+
// Clickable links (not current, not completed, not disabled) have blue circles
139+
.app-workflow-side-nav__link--clickable {
140+
.app-workflow-side-nav__number {
141+
background-color: $color_nhsuk-blue;
142+
color: $color_nhsuk-white;
143+
}
144+
}
145+
146+
.app-workflow-side-nav__item--completed {
147+
.app-workflow-side-nav__link--clickable .app-workflow-side-nav__number,
148+
.app-workflow-side-nav__number {
149+
background-color: $color_nhsuk-green;
150+
color: $color_nhsuk-white;
151+
152+
.app-icon--tick path {
153+
stroke: $color_nhsuk-white;
154+
}
155+
}
156+
}
157+
158+
.app-workflow-side-nav__item--disabled {
159+
.app-workflow-side-nav__link--clickable .app-workflow-side-nav__number,
160+
.app-workflow-side-nav__number {
161+
background-color: $color_nhsuk-grey-3;
162+
color: $color_nhsuk-grey-1;
163+
}
164+
}
165+
166+
// Responsive - use full width on mobile
167+
@media (max-width: 768px) {
168+
.app-workflow-side-nav {
169+
position: static;
170+
}
171+
}

‎app/assets/sass/main.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,22 +18,22 @@ $nhsuk-page-width: 1260px;
1818
@forward "components/forward-link";
1919
@forward "components/status";
2020
@forward "components/status-bar";
21-
@forward 'components/summary-card';
21+
@forward "components/summary-card";
2222
@forward "components/reading";
2323

2424
@forward "components/overrides";
2525
@forward "components/checkboxes";
2626
@forward "components/breast-features";
2727
@forward "components/sticky-appointment-bar";
28-
@forward 'components/small-button';
28+
@forward "components/small-button";
2929
@forward "components/annotation";
3030

3131
@forward "misc";
32+
@forward "workflow";
3233

3334
@forward "typography";
3435
@forward "utils";
3536

36-
3737
$nhsuk-page-width: 1260px;
3838

3939
///////////////////////////////////////////

‎app/lib/utils/summary-list.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const handleSummaryListMissingInformation = (
5151
row.key.text.toLowerCase()
5252
const href = row.actions?.items?.[0]?.href || '#'
5353

54-
const endText = keyText.endsWith('notes') ? '' : ' details'
54+
const endText = keyText.endsWith('note') ? '' : ' details'
5555

5656
return {
5757
...row,
@@ -76,10 +76,9 @@ const handleSummaryListMissingInformation = (
7676

7777
// Check if input is a summary list (has rows property)
7878
if (input.rows && Array.isArray(input.rows)) {
79-
8079
// Filter out empty rows before processing
81-
const validRows = input.rows.filter(row =>
82-
row && typeof row === 'object' && row.key
80+
const validRows = input.rows.filter(
81+
(row) => row && typeof row === 'object' && row.key
8382
)
8483

8584
const updatedRows = validRows.map(processRow)

‎app/locals.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ module.exports = (config) => (req, res, next) => {
77
flash: req.flash(),
88
query: req.query,
99
referrerChain: req.query.referrerChain,
10-
currentUser: req.session.data.currentUser
10+
currentUser: req.session.data.currentUser,
11+
isAppointmentWorkflow: false
1112
}
1213

1314
// Assign all local variables at once

0 commit comments

Comments
 (0)