Skip to content

Commit 4c46af6

Browse files
frozenheliumfrozenhelium
committed
Add printable link component
- Reuse the link in all dref exports
1 parent dfab186 commit 4c46af6

File tree

8 files changed

+63
-58
lines changed

8 files changed

+63
-58
lines changed

‎src/components/Link/index.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,8 @@ export function useLink(props: {
9494
};
9595
}
9696

97-
export type Props<OMISSION extends string = never> = Omit<RouterLinkProps, 'to' | OMISSION> & Omit<{
97+
export type CommonLinkProps<OMISSION extends string = never> = Omit<RouterLinkProps, 'to' | OMISSION> &
98+
Omit<{
9899
actions?: React.ReactNode;
99100
actionsContainerClassName?: string;
100101
disabled?: boolean;
@@ -107,21 +108,28 @@ export type Props<OMISSION extends string = never> = Omit<RouterLinkProps, 'to'
107108
withUnderline?: boolean;
108109
ellipsize?: boolean;
109110
spacing?: ButtonFeatureProps['spacing'];
110-
}, OMISSION> & ({
111+
}, OMISSION>
112+
113+
export type InternalLinkProps = {
111114
external?: never;
112115
to: keyof WrappedRoutes | undefined | null;
113116
urlParams?: UrlParams;
114117
urlSearch?: string;
115118
urlHash?: string;
116119
href?: never;
117-
} | {
120+
}
121+
122+
export type ExternalLinkProps = {
118123
external: true;
119124
href: string | undefined | null;
120125
urlParams?: never;
121126
urlSearch?: never;
122127
urlHash?: never;
123128
to?: never;
124-
})
129+
}
130+
131+
export type Props<OMISSION extends string = never> = CommonLinkProps<OMISSION>
132+
& (InternalLinkProps | ExternalLinkProps)
125133

126134
function Link(props: Props) {
127135
const {

‎src/components/printable/Image/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import styles from './styles.module.css';
1010

1111
interface Props {
12-
src?: string;
12+
src: string | null | undefined;
1313
alt?: string;
1414
caption?: React.ReactNode;
1515
imgElementClassName?: string;

‎src/components/printable/Link/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { _cs } from '@togglecorp/fujs';
2+
3+
import GoLink, {
4+
type CommonLinkProps,
5+
type ExternalLinkProps,
6+
} from '#components/Link';
7+
8+
import styles from './styles.module.css';
9+
10+
type Props = CommonLinkProps<'withUnderline'> & Omit<ExternalLinkProps, 'external'>;
11+
12+
function Link(props: Props) {
13+
const {
14+
className,
15+
...otherProps
16+
} = props;
17+
18+
return (
19+
<GoLink
20+
// eslint-disable-next-line react/jsx-props-no-spreading
21+
{...otherProps}
22+
external
23+
withUnderline
24+
className={_cs(styles.link, className)}
25+
/>
26+
);
27+
}
28+
29+
export default Link;

‎src/components/printable/Link/styles.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.link {
2+
color: var(--go-ui-color-blue);
3+
font-size: var(--go-ui-font-size-md);
4+
}

‎src/views/DrefApplicationExport/index.tsx‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import TextOutput, { type Props as TextOutputProps } from '#components/printable
1313
import Image from '#components/printable/Image';
1414
import Heading from '#components/printable/Heading';
1515
import DescriptionText from '#components/printable/DescriptionText';
16-
import Link from '#components/Link';
16+
import Link from '#components/printable/Link';
1717
import DateOutput from '#components/DateOutput';
1818
import useTranslation from '#hooks/useTranslation';
1919
import { useRequest } from '#utils/restRequest';
@@ -383,6 +383,8 @@ export function Component() {
383383
valueClassName={_cs(
384384
isDefined(drefResponse)
385385
&& isDefined(drefResponse.disaster_category)
386+
// FIXME: empty string in enum
387+
&& drefResponse.disaster_category !== ''
386388
&& colorMap[drefResponse.disaster_category],
387389
)}
388390
strongValue
@@ -468,11 +470,7 @@ export function Component() {
468470
</Heading>
469471
{drefResponse?.disaster_category_analysis_details?.file && (
470472
<Container>
471-
<Link
472-
href={drefResponse?.disaster_category_analysis_details?.file}
473-
external
474-
withUnderline
475-
>
473+
<Link href={drefResponse?.disaster_category_analysis_details?.file}>
476474
{strings.crisisCategorySupportingDocumentLabel}
477475
</Link>
478476
</Container>
@@ -551,11 +549,7 @@ export function Component() {
551549
)}
552550
{drefResponse?.supporting_document_details?.file && (
553551
<Container>
554-
<Link
555-
href={drefResponse?.supporting_document_details?.file}
556-
external
557-
withUnderline
558-
>
552+
<Link href={drefResponse?.supporting_document_details?.file}>
559553
{strings.drefApplicationSupportingDocumentation}
560554
</Link>
561555
</Container>
@@ -581,11 +575,7 @@ export function Component() {
581575
</div>
582576
</DescriptionText>
583577
<DescriptionText className={styles.link}>
584-
<Link
585-
href={source.source_link}
586-
external
587-
withUnderline
588-
>
578+
<Link href={source.source_link}>
589579
{source?.source_link}
590580
</Link>
591581
</DescriptionText>
@@ -793,11 +783,7 @@ export function Component() {
793783
)}
794784
{assessmentReportDefined && (
795785
<Container>
796-
<Link
797-
href={drefResponse?.assessment_report_details?.file}
798-
external
799-
withUnderline
800-
>
786+
<Link href={drefResponse?.assessment_report_details?.file}>
801787
{strings.drefAssessmentReportLink}
802788
</Link>
803789
</Container>
@@ -837,10 +823,7 @@ export function Component() {
837823
{targetingStrategySupportingDocumentDefined && (
838824
<Container>
839825
<Link
840-
className={styles.targetingStrategyLink}
841826
href={drefResponse?.targeting_strategy_support_file_details?.file}
842-
external
843-
withUnderline
844827
>
845828
{strings.targetingStrategySupportingDocument}
846829
</Link>
@@ -1121,11 +1104,7 @@ export function Component() {
11211104
/>
11221105
</Container>
11231106
<Container>
1124-
<Link
1125-
href={drefResponse?.budget_file_details?.file}
1126-
external
1127-
withUnderline
1128-
>
1107+
<Link href={drefResponse?.budget_file_details?.file}>
11291108
{strings.drefExportDownloadBudget}
11301109
</Link>
11311110
</Container>
@@ -1182,11 +1161,7 @@ export function Component() {
11821161
/>
11831162
)}
11841163
</Container>
1185-
<Link
1186-
href="/emergencies"
1187-
withUnderline
1188-
external
1189-
>
1164+
<Link href="/emergencies">
11901165
{strings.drefExportReference}
11911166
</Link>
11921167
</>

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -228,10 +228,4 @@
228228
color: var(--go-ui-color-primary-red);
229229
}
230230
}
231-
232-
.targeting-strategy-link {
233-
color: var(--go-ui-color-blue);
234-
font-size: var(--go-ui-font-size-md);
235-
}
236-
237231
}

‎src/views/DrefFinalReportExport/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import Container from '#components/printable/Container';
1212
import TextOutput, { type Props as TextOutputProps } from '#components/printable/TextOutput';
1313
import Image from '#components/printable/Image';
1414
import Heading from '#components/printable/Heading';
15+
import Link from '#components/printable/Link';
1516

1617
import DescriptionText from '#components/printable/DescriptionText';
1718
import NumberOutput from '#components/NumberOutput';
1819
import useTranslation from '#hooks/useTranslation';
19-
import Link from '#components/Link';
2020
import { useRequest } from '#utils/restRequest';
2121
import {
2222
DISASTER_CATEGORY_ORANGE,
@@ -302,6 +302,8 @@ export function Component() {
302302
valueClassName={_cs(
303303
isDefined(drefResponse)
304304
&& isDefined(drefResponse.disaster_category)
305+
// FIXME: empty string in enum
306+
&& drefResponse.disaster_category !== ''
305307
&& colorMap[drefResponse.disaster_category],
306308
)}
307309
strongValue
@@ -850,7 +852,6 @@ export function Component() {
850852
<Container>
851853
<Link
852854
href={drefResponse?.financial_report_details?.file}
853-
external
854855
>
855856
{strings.downloadFinancialReport}
856857
</Link>
@@ -918,8 +919,6 @@ export function Component() {
918919
</Container>
919920
<Link
920921
href="/emergencies"
921-
withUnderline
922-
external
923922
>
924923
{strings.drefExportReference}
925924
</Link>

‎src/views/DrefOperationalUpdateExport/index.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import TextOutput, { type Props as TextOutputProps } from '#components/printable
1313
import Image from '#components/printable/Image';
1414
import Heading from '#components/printable/Heading';
1515
import DescriptionText from '#components/printable/DescriptionText';
16-
import DateOutput from '#components/DateOutput';
16+
import Link from '#components/printable/Link';
1717

18-
import Link from '#components/Link';
18+
import DateOutput from '#components/DateOutput';
1919
import NumberOutput from '#components/NumberOutput';
2020
import useTranslation from '#hooks/useTranslation';
2121
import { useRequest } from '#utils/restRequest';
@@ -352,6 +352,8 @@ export function Component() {
352352
valueClassName={_cs(
353353
isDefined(drefResponse)
354354
&& isDefined(drefResponse.disaster_category)
355+
// FIXME: empty string in enum
356+
&& drefResponse.disaster_category !== ''
355357
&& colorMap[drefResponse.disaster_category],
356358
)}
357359
strongValue
@@ -1051,8 +1053,6 @@ export function Component() {
10511053
<Container>
10521054
<Link
10531055
href={drefResponse?.budget_file_details?.file}
1054-
external
1055-
withUnderline
10561056
>
10571057
{strings.drefExportDownloadBudget}
10581058
</Link>
@@ -1110,11 +1110,7 @@ export function Component() {
11101110
/>
11111111
)}
11121112
</Container>
1113-
<Link
1114-
href="/emergencies"
1115-
withUnderline
1116-
external
1117-
>
1113+
<Link href="/emergencies">
11181114
{strings.drefExportReference}
11191115
</Link>
11201116
</>

0 commit comments

Comments
 (0)