Skip to content

Commit 615049b

Browse files
frozenheliumsamshara
frozenhelium
authored and
samshara
committed
Fix wrapping of HighlightedOperation key figures
1 parent 98818a6 commit 615049b

File tree

8 files changed

+131
-126
lines changed

8 files changed

+131
-126
lines changed

‎src/components/Header/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ function Header(props: Props) {
106106
iconsContainerClassName,
107107
withoutWrap: !wrapHeadingContent,
108108
spacing,
109+
variant: 'sm',
109110
});
110111

111112
const gapSpacing = useSpacingTokens({

‎src/components/Link/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ export type Props<OMISSION extends string = never> = Omit<RouterLinkProps, 'to'
106106
withLinkIcon?: boolean;
107107
withUnderline?: boolean;
108108
ellipsize?: boolean;
109+
spacing?: ButtonFeatureProps['spacing'];
109110
}, OMISSION> & ({
110111
external?: never;
111112
to: keyof WrappedRoutes | undefined | null;
@@ -136,6 +137,7 @@ function Link(props: Props) {
136137
withLinkIcon,
137138
variant = 'tertiary',
138139
ellipsize,
140+
spacing,
139141

140142
// eslint-disable-next-line @typescript-eslint/no-unused-vars
141143
external,
@@ -178,6 +180,7 @@ function Link(props: Props) {
178180
variant,
179181
ellipsize,
180182
disabled,
183+
spacing,
181184
actions: (isDefined(actions) || withLinkIcon) ? (
182185
<>
183186
{actions}

‎src/components/Page/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@ function Page(props: Props) {
100100
)}
101101
</div>
102102
)}
103-
{beforeHeaderContent}
103+
<PageContainer>
104+
{beforeHeaderContent}
105+
</PageContainer>
104106
{isNotDefined(blockingContent) && showPageContainer && (
105107
<PageHeader
106108
className={_cs(

‎src/components/domain/HighlightedOperations/OperationCard/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,6 @@ function OperationCard(props: Props) {
178178
<Link
179179
to="emergenciesLayout"
180180
urlParams={{ emergencyId: id }}
181-
ellipsize
182181
>
183182
{strings.operationCardTargetedPopulation}
184183
</Link>
@@ -194,7 +193,6 @@ function OperationCard(props: Props) {
194193
<Link
195194
to="emergencyReportsAndDocuments"
196195
urlParams={{ emergencyId: id }}
197-
ellipsize
198196
>
199197
{strings.operationCardFunding}
200198
</Link>

‎src/components/domain/OperationListItem/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ function OperationInfoCard(props: Props) {
5252
// FIXME: Let's add a link
5353
heading={name}
5454
headingLevel={5}
55-
ellipsizeHeading
5655
spacing="none"
5756
actions={(
5857
<Button

‎src/hooks/useBasicLayout/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ function useBasicLayout(props: Props) {
4141
variant,
4242
mode: 'gap',
4343
});
44+
4445
const innerGapSpacing = useSpacingTokens({
4546
spacing,
4647
variant,

‎src/views/Home/index.tsx‎

Lines changed: 97 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import useAuth from '#hooks/domain/useAuth';
4141
import useTranslation from '#hooks/useTranslation';
4242
import { getUserName } from '#utils/domain/user';
4343
import { numericIdSelector } from '#utils/selectors';
44-
import { getPercentage } from '#utils/common';
44+
import { getPercentage, joinList } from '#utils/common';
4545
import useFilterState from '#hooks/useFilterState';
4646
import { resolveToString } from '#utils/translation';
4747
import { useRequest, type GoApiResponse } from '#utils/restRequest';
@@ -125,7 +125,7 @@ export function Component() {
125125
});
126126
}, [handleFullScreenChange]);
127127

128-
const infoBarElements = !pending && aggregatedAppealResponse && (
128+
const keyFigures = !pending && aggregatedAppealResponse && (
129129
<>
130130
<KeyFigure
131131
icon={<DrefIcon />}
@@ -202,22 +202,30 @@ export function Component() {
202202
);
203203

204204
return (
205-
<>
206-
{isAuthenticated && (
207-
<div>
205+
<Page
206+
title={strings.homeTitle}
207+
className={styles.home}
208+
heading={strings.homeHeading}
209+
description={strings.homeDescription}
210+
mainSectionClassName={styles.content}
211+
infoContainerClassName={styles.keyFigureList}
212+
info={(
213+
<>
214+
{pending && <BlockLoading />}
215+
{!pending && keyFigures}
216+
</>
217+
)}
218+
beforeHeaderContent={isAuthenticated && (
219+
<>
208220
<PageHeader
209221
heading={resolveToString(
210222
strings.homeUserNameHeading,
211-
{
212-
userName: getUserName(userResponse),
213-
},
223+
{ userName: getUserName(userResponse) },
214224
)}
215225
/>
216-
<PageContainer
217-
contentClassName={styles.greetingCard}
218-
>
226+
<PageContainer contentClassName={styles.userDashContent}>
219227
<Container
220-
className={styles.operationsCard}
228+
className={styles.operationsFollowing}
221229
heading={strings.homeOperationFollowingHeading}
222230
withHeaderBorder
223231
footerActions={(
@@ -228,6 +236,8 @@ export function Component() {
228236
onActivePageChange={setPage}
229237
/>
230238
)}
239+
withInternalPadding
240+
contentViewType="vertical"
231241
>
232242
<List
233243
className={styles.operationsList}
@@ -241,25 +251,31 @@ export function Component() {
241251
/>
242252
</Container>
243253
<Container
244-
className={styles.operationsCard}
254+
className={styles.quickLinks}
245255
heading={strings.homeQuickLinksTitle}
246-
childrenContainerClassName={styles.quickCard}
256+
withInternalPadding
257+
withHeaderBorder
258+
contentViewType="vertical"
247259
>
248260
<TextOutput
249261
label={strings.homeYourCountryLabel}
250-
valueClassName={styles.regionCountryLinkContainer}
251-
value={userCountries?.map((country) => (
252-
<Link
253-
to="countriesLayout"
254-
urlParams={{
255-
countryId: country.country,
256-
}}
257-
key={country.country}
258-
withLinkIcon
259-
>
260-
{country.country_name}
261-
</Link>
262-
))}
262+
value={userCountries && (
263+
joinList(
264+
userCountries.map((country) => (
265+
<Link
266+
to="countriesLayout"
267+
urlParams={{
268+
countryId: country.country,
269+
}}
270+
key={country.country}
271+
withUnderline
272+
>
273+
{country.country_name}
274+
</Link>
275+
)),
276+
', ',
277+
)
278+
)}
263279
strongValue
264280
/>
265281
<TextOutput
@@ -276,19 +292,21 @@ export function Component() {
276292
/>
277293
<TextOutput
278294
label={strings.homeYourRegionLabel}
279-
valueClassName={styles.regionCountryLinkContainer}
280-
value={userRegions?.map((region) => (
281-
<Link
282-
key={region.region}
283-
to="regionsLayout"
284-
withLinkIcon
285-
urlParams={{
286-
regionId: region.region,
287-
}}
288-
>
289-
{region.region_details.name}
290-
</Link>
291-
))}
295+
value={userRegions && (
296+
joinList(
297+
userRegions.map((region) => (
298+
<Link
299+
key={region.region}
300+
to="regionsLayout"
301+
urlParams={{ regionId: region.region }}
302+
withUnderline
303+
>
304+
{region.region_details.name}
305+
</Link>
306+
)),
307+
', ',
308+
)
309+
)}
292310
strongValue
293311
/>
294312
<TextOutput
@@ -305,61 +323,47 @@ export function Component() {
305323
/>
306324
</Container>
307325
</PageContainer>
308-
</div>
326+
</>
309327
)}
310-
<Page
311-
title={strings.homeTitle}
312-
className={styles.home}
313-
heading={strings.homeHeading}
314-
description={strings.homeDescription}
315-
mainSectionClassName={styles.content}
316-
infoContainerClassName={styles.keyFigureList}
317-
info={(
318-
<>
319-
{pending && <BlockLoading />}
320-
{infoBarElements}
321-
</>
322-
)}
328+
>
329+
<HighlightedOperations variant="global" />
330+
<ActiveOperationMap
331+
variant="global"
332+
onPresentationModeButtonClick={handleFullScreenToggleClick}
333+
bbox={undefined}
334+
/>
335+
<AppealsTable variant="global" />
336+
<AppealsOverYearsChart />
337+
<div
338+
className={_cs(presentationMode && styles.presentationMode)}
339+
ref={containerRef}
323340
>
324-
<HighlightedOperations variant="global" />
325-
<ActiveOperationMap
326-
variant="global"
327-
onPresentationModeButtonClick={handleFullScreenToggleClick}
328-
bbox={undefined}
329-
/>
330-
<AppealsTable variant="global" />
331-
<AppealsOverYearsChart />
332-
<div
333-
className={_cs(presentationMode && styles.presentationMode)}
334-
ref={containerRef}
335-
>
336-
{presentationMode && (
337-
<Container
338-
heading={strings.fullScreenHeading}
339-
actions={(
340-
<IconButton
341-
name={undefined}
342-
onClick={handleFullScreenToggleClick}
343-
title={strings.homeIconButtonLabel}
344-
variant="secondary"
345-
ariaLabel={strings.homeIconButtonLabel}
346-
>
347-
<CloseLineIcon />
348-
</IconButton>
349-
)}
350-
headerDescriptionContainerClassName={styles.keyFigureList}
351-
headerDescription={infoBarElements}
352-
>
353-
<ActiveOperationMap
354-
variant="global"
355-
bbox={undefined}
356-
presentationMode
357-
/>
358-
</Container>
359-
)}
360-
</div>
361-
</Page>
362-
</>
341+
{presentationMode && (
342+
<Container
343+
heading={strings.fullScreenHeading}
344+
actions={(
345+
<IconButton
346+
name={undefined}
347+
onClick={handleFullScreenToggleClick}
348+
title={strings.homeIconButtonLabel}
349+
variant="secondary"
350+
ariaLabel={strings.homeIconButtonLabel}
351+
>
352+
<CloseLineIcon />
353+
</IconButton>
354+
)}
355+
headerDescriptionContainerClassName={styles.keyFigureList}
356+
headerDescription={keyFigures}
357+
>
358+
<ActiveOperationMap
359+
variant="global"
360+
bbox={undefined}
361+
presentationMode
362+
/>
363+
</Container>
364+
)}
365+
</div>
366+
</Page>
363367
);
364368
}
365369

‎src/views/Home/styles.module.css‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,30 @@
11
.home {
2+
.user-dash-content {
3+
display: flex;
4+
flex-wrap: wrap;
5+
gap: var(--go-ui-spacing-lg);
6+
7+
.operations-following {
8+
flex-basis: 40rem;
9+
flex-grow: 1;
10+
border-radius: var(--go-ui-border-radius-lg);
11+
box-shadow: var(--go-ui-box-shadow-md);
12+
background-color: var(--go-ui-color-foreground);
13+
14+
.operations-list {
15+
display: contents;
16+
}
17+
}
18+
19+
.quick-links {
20+
flex-basis: 20rem;
21+
flex-grow: 1;
22+
border-radius: var(--go-ui-border-radius-lg);
23+
box-shadow: var(--go-ui-box-shadow-md);
24+
background-color: var(--go-ui-color-foreground);
25+
}
26+
}
27+
228
.key-figure-list {
329
display: grid;
430
grid-gap: var(--go-ui-spacing-md);
@@ -35,32 +61,3 @@
3561
}
3662
}
3763
}
38-
39-
.greeting-card {
40-
display: flex;
41-
flex-direction: column;
42-
gap: var(--go-ui-spacing-lg);
43-
44-
.operations-card {
45-
background-color: var(--go-ui-color-white);
46-
padding: var(--go-ui-spacing-lg);
47-
48-
.operations-list {
49-
display: flex;
50-
flex-direction: column;
51-
gap: var(--go-ui-spacing-md);
52-
}
53-
54-
.quick-card {
55-
display: grid;
56-
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
57-
gap: var(--go-ui-spacing-md);
58-
justify-content: space-between;
59-
60-
.region-country-link-container {
61-
display: inline-flex;
62-
gap: var(--go-ui-spacing-sm);
63-
}
64-
}
65-
}
66-
}

0 commit comments

Comments
 (0)