Skip to content

Commit e0a20bb

Browse files
cooper-joecooper-joe
authored
Merge pull request #1829 from dhis2/about-ao-adjustments
fix(about-ao): spacing, padding, visual design adjustments
2 parents 3598c51 + c96611f commit e0a20bb

3 files changed

Lines changed: 183 additions & 20 deletions

File tree

‎src/__demo__/AboutAOUnit.stories.js‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import { CustomDataProvider } from '@dhis2/app-runtime'
2+
import React from 'react'
3+
import AboutAOUnit from '../components/AboutAOUnit/AboutAOUnit.js'
4+
5+
const verboseData = {
6+
visualizations: {
7+
id: 'abc123verbose',
8+
displayDescription:
9+
'This is a comprehensive **visualization** showing district-level aggregate data across all 47 counties for the Expanded Programme on Immunization (EPI) including BCG, OPV, Pentavalent, and Measles-Rubella coverage rates disaggregated by age, sex, and facility ownership for the fiscal year 2024/2025.',
10+
created: '2023-01-15T08:30:00.000',
11+
createdBy: {
12+
displayName:
13+
'Dr. Alexandria Konstantinopolous-Whittington III, MD, PhD',
14+
},
15+
lastUpdated: '2024-11-02T14:22:00.000',
16+
subscribed: true,
17+
sharing: {
18+
public: 'r',
19+
users: {
20+
u1: {
21+
displayName:
22+
'Maria-Fernanda de los Ángeles Gutiérrez-Montoya',
23+
access: 'rw',
24+
},
25+
u2: {
26+
displayName: 'Jean-Pierre Barthélémy Christophersen',
27+
access: 'r',
28+
},
29+
},
30+
userGroups: {
31+
g1: {
32+
displayName:
33+
'National Immunization Programme Monitoring & Evaluation Team',
34+
access: 'rw',
35+
},
36+
g2: {
37+
displayName:
38+
'District Health Information System Administrators Group',
39+
access: 'r',
40+
},
41+
},
42+
},
43+
},
44+
'dataStatistics/favorites': {
45+
views: 14873,
46+
},
47+
}
48+
49+
const shortData = {
50+
visualizations: {
51+
id: 'xyz789short',
52+
displayDescription: 'ANC coverage Q3',
53+
created: '2025-12-01T10:00:00.000',
54+
createdBy: { displayName: 'Li Wei' },
55+
lastUpdated: '2026-04-10T09:00:00.000',
56+
subscribed: false,
57+
sharing: {
58+
public: 'rw',
59+
users: {},
60+
userGroups: {
61+
g1: { displayName: 'HMIS', access: 'r' },
62+
},
63+
},
64+
},
65+
'dataStatistics/favorites': {
66+
views: 3,
67+
},
68+
}
69+
70+
const missingFieldsData = {
71+
visualizations: {
72+
id: 'missing456',
73+
displayDescription: null,
74+
created: '2026-03-20T12:00:00.000',
75+
createdBy: null,
76+
lastUpdated: '2026-04-13T06:45:00.000',
77+
subscribed: false,
78+
sharing: {
79+
public: '',
80+
users: {},
81+
userGroups: {},
82+
},
83+
},
84+
'dataStatistics/favorites': {
85+
views: 0,
86+
},
87+
}
88+
89+
export default {
90+
title: 'AboutAOUnit',
91+
}
92+
93+
export const VerboseData = () => (
94+
<CustomDataProvider data={verboseData}>
95+
<div
96+
style={{
97+
width: 372,
98+
padding: '16px',
99+
backgroundColor: 'lightgray',
100+
}}
101+
>
102+
<AboutAOUnit type="visualization" id="abc123verbose" />
103+
</div>
104+
</CustomDataProvider>
105+
)
106+
107+
VerboseData.story = {
108+
name: 'Verbose data with long labels',
109+
}
110+
111+
export const ShortLabels = () => (
112+
<CustomDataProvider data={shortData}>
113+
<div
114+
style={{
115+
width: 372,
116+
padding: '16px',
117+
backgroundColor: 'lightgray',
118+
}}
119+
>
120+
<AboutAOUnit type="visualization" id="xyz789short" />
121+
</div>
122+
</CustomDataProvider>
123+
)
124+
125+
ShortLabels.story = {
126+
name: 'Short labels',
127+
}
128+
129+
export const MissingFields = () => (
130+
<CustomDataProvider data={missingFieldsData}>
131+
<div
132+
style={{
133+
width: 372,
134+
padding: '16px',
135+
backgroundColor: 'lightgray',
136+
}}
137+
>
138+
<AboutAOUnit type="visualization" id="missing456" />
139+
</div>
140+
</CustomDataProvider>
141+
)
142+
143+
MissingFields.story = {
144+
name: 'Missing fields (no description, no author, no sharing)',
145+
}

‎src/components/AboutAOUnit/AboutAOUnit.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import {
1111
IconChevronUp24,
1212
IconClock16,
1313
IconShare16,
14-
IconSubscribe24,
15-
IconSubscribeOff24,
14+
IconSubscribe16,
15+
IconSubscribeOff16,
1616
IconUser16,
1717
IconView16,
1818
colors,
@@ -192,8 +192,7 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
192192
{data && (
193193
<div className="content">
194194
<div
195-
className={cx('detailLine', {
196-
description: true,
195+
className={cx('description', {
197196
noDescription: !data.ao.displayDescription,
198197
})}
199198
>
@@ -207,19 +206,25 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
207206
</div>
208207
<div>
209208
<p className="detailLine">
210-
<IconShare16 color={colors.grey700} />
209+
<span className="icon">
210+
<IconShare16 color={colors.grey700} />
211+
</span>
211212
{getSharingSummary(data.ao)}
212213
</p>
213214
<p className="detailLine">
214-
<IconClock16 color={colors.grey700} />
215+
<span className="icon">
216+
<IconClock16 color={colors.grey700} />
217+
</span>
215218
{i18n.t('Last updated {{time}}', {
216219
time: moment(
217220
fromServerDate(data.ao.lastUpdated)
218221
).fromNow(),
219222
})}
220223
</p>
221224
<p className="detailLine">
222-
<IconUser16 color={colors.grey700} />
225+
<span className="icon">
226+
<IconUser16 color={colors.grey700} />
227+
</span>
223228
{data.ao.createdBy?.displayName
224229
? i18n.t(
225230
'Created {{time}} by {{author}}',
@@ -242,7 +247,9 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
242247
})}
243248
</p>
244249
<p className="detailLine">
245-
<IconView16 color={colors.grey700} />
250+
<span className="icon">
251+
<IconView16 color={colors.grey700} />
252+
</span>
246253
{i18n.t('Viewed {{count}} times', {
247254
count: data.dataStatistics.views,
248255
defaultValue: 'Viewed 1 time',
@@ -264,7 +271,7 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
264271
</p>
265272
<Button
266273
icon={
267-
<IconSubscribeOff24
274+
<IconSubscribeOff16
268275
color={colors.grey700}
269276
/>
270277
}
@@ -285,7 +292,7 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
285292
</p>
286293
<Button
287294
icon={
288-
<IconSubscribe24
295+
<IconSubscribe16
289296
color={colors.grey700}
290297
/>
291298
}

‎src/components/AboutAOUnit/styles/AboutAOUnit.style.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,19 @@ export default css`
1010
}
1111
1212
.expanded {
13-
padding-bottom: ${spacers.dp32};
13+
padding-bottom: ${spacers.dp16};
1414
}
1515
1616
.loader {
1717
display: flex;
1818
justify-content: center;
19+
padding-top: ${spacers.dp16};
1920
}
2021
2122
.header {
2223
display: flex;
2324
justify-content: space-between;
25+
align-items: center;
2426
cursor: pointer;
2527
}
2628
@@ -33,43 +35,52 @@ export default css`
3335
3436
.content {
3537
font-size: 14px;
36-
line-height: 18px;
38+
line-height: 20px;
3739
color: ${colors.grey900};
3840
}
3941
4042
.detailLine {
4143
display: flex;
44+
align-items: flex-start;
4245
margin: 0;
4346
padding: ${spacers.dp12} 0 0 0;
4447
gap: ${spacers.dp8};
4548
}
4649
47-
.detailLine svg {
50+
.detailLine .icon {
4851
flex-shrink: 0;
52+
display: flex;
53+
align-items: center;
54+
height: 20px;
4955
}
5056
5157
.description {
58+
padding: 0;
59+
}
60+
61+
.description :global(p) {
62+
margin: ${spacers.dp8} 0 ${spacers.dp4} 0;
5263
white-space: pre-line;
5364
}
5465
5566
.noDescription {
56-
color: ${colors.grey600};
67+
color: ${colors.grey500};
5768
}
5869
5970
.subsection {
6071
margin-top: ${spacers.dp24};
6172
}
6273
6374
.subsectionTitle {
64-
color: ${colors.grey700};
75+
color: ${colors.grey800};
6576
font-weight: 500;
77+
margin: 0;
6678
}
6779
6880
.subscriptionLabel {
69-
margin: ${spacers.dp12} 0 ${spacers.dp8} 0;
70-
}
71-
72-
.subsection button {
73-
margin-top: ${spacers.dp8};
81+
font-size: 13px;
82+
line-height: 18px;
83+
margin: ${spacers.dp4} 0 ${spacers.dp8} 0;
84+
color: ${colors.grey600};
7485
}
7586
`

0 commit comments

Comments
 (0)