From 451cd7f6eb09d33431600a875216851187627446 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard29 Date: Wed, 10 Jan 2024 11:24:29 +0100 Subject: [PATCH 1/7] feat(COR-1873): Added chevrons to links in metadata --- .../page-information-block/components/metadata.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/packages/app/src/components/page-information-block/components/metadata.tsx index ce5ff8b6bc..749e6b3eaa 100644 --- a/packages/app/src/components/page-information-block/components/metadata.tsx +++ b/packages/app/src/components/page-information-block/components/metadata.tsx @@ -1,7 +1,7 @@ import { colors } from '@corona-dashboard/common'; -import { ChevronRight, Clock, Database, MeerInformatie } from '@corona-dashboard/icons'; +import { ChevronRight, Clock, Database, External as ExternalLinkIcon, MeerInformatie } from '@corona-dashboard/icons'; import css from '@styled-system/css'; -import { Fragment } from 'react'; +import React, { Fragment } from 'react'; import styled from 'styled-components'; import { Box } from '~/components/base'; import { ExternalLink } from '~/components/external-link'; @@ -9,6 +9,7 @@ import { Anchor, InlineText, Text } from '~/components/typography'; import { useIntl } from '~/intl'; import { Link } from '~/utils/link'; import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; +import { space } from '~/style/theme'; interface Datasource { href: string; @@ -115,13 +116,15 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac const { commonTexts } = useIntl(); return ( - + {icon} {referenceLink && !items && ( - {commonTexts.informatie_header.meer_informatie_link} + + {commonTexts.informatie_header.meer_informatie_link} + )} {items && referenceLink && ( @@ -156,6 +159,7 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac } > {item.text} + )} {!item.href && item.text} From 6733152817574d140a2f99be51c6222ca84478eb Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard29 Date: Wed, 10 Jan 2024 11:49:21 +0100 Subject: [PATCH 2/7] feat(COR-1873): Remove unused code --- .../page-information-block/components/metadata.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/packages/app/src/components/page-information-block/components/metadata.tsx index 749e6b3eaa..b223fe832e 100644 --- a/packages/app/src/components/page-information-block/components/metadata.tsx +++ b/packages/app/src/components/page-information-block/components/metadata.tsx @@ -113,20 +113,11 @@ interface MetadataItemProps { } function MetadataItem({ icon, label, items, referenceLink, accessibilityText, accessibilitySubject }: MetadataItemProps) { - const { commonTexts } = useIntl(); - return ( {icon} - {referenceLink && !items && ( - - - {commonTexts.informatie_header.meer_informatie_link} - - - )} {items && referenceLink && ( <> {`${label}: `} From 50f7edddaa6e0aa1f738ce479bd0f990e5d4fdba Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard29 Date: Wed, 10 Jan 2024 13:31:18 +0100 Subject: [PATCH 3/7] feat(COR-1873): Add chevron to behaviour table entries --- .../domain/behavior/components/behavior-icon-with-label.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx b/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx index 2d9b3947c5..0a4e1d0420 100644 --- a/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx +++ b/packages/app/src/domain/behavior/components/behavior-icon-with-label.tsx @@ -6,6 +6,7 @@ import { Anchor } from '~/components/typography'; import { fontWeights, mediaQueries, space } from '~/style/theme'; import { BehaviorIdentifier } from '../logic/behavior-types'; import { BehaviorIcon } from './behavior-icon'; +import { ChevronRight } from '@corona-dashboard/icons'; type ScrollRef = { current: HTMLDivElement | null }; @@ -33,8 +34,9 @@ export const BehaviorIconWithLabel = ({ id, description, onClickConfig }: Behavi anchorButtonClickHandler(id, onClickConfig.scrollRef)}> - + {description} + From 628c1db09122cb13bc24c508dd7813de99aeea1b Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard29 Date: Wed, 10 Jan 2024 13:32:25 +0100 Subject: [PATCH 4/7] feat(COR-1873): Made table columns minwidth adjustable --- .../tables/components/wide-percentage-data.tsx | 10 +++++----- packages/app/src/components/tables/types.ts | 7 +++++++ packages/app/src/components/tables/wide-table.tsx | 14 +++++++------- .../src/domain/behavior/behavior-table-tile.tsx | 5 +++++ 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/app/src/components/tables/components/wide-percentage-data.tsx b/packages/app/src/components/tables/components/wide-percentage-data.tsx index 42b0d98dbe..925ce62e5f 100644 --- a/packages/app/src/components/tables/components/wide-percentage-data.tsx +++ b/packages/app/src/components/tables/components/wide-percentage-data.tsx @@ -2,21 +2,21 @@ import { Box } from '~/components/base'; import { BehaviorTrend } from '~/domain/behavior/components/behavior-trend'; import { WidePercentage } from '~/components/tables/components/wide-percentage'; import { space } from '~/style/theme'; -import { PercentageDataPoint } from '../types'; -import { tableColumnWidths } from '../wide-table'; +import { PercentageDataPoint, TableColumnWidths } from '../types'; import { PercentageBarWithoutNumber } from './percentage-bar-without-number'; import { Cell } from './shared-styled-components'; interface PercentageDataProps { percentageDataPoints: PercentageDataPoint[]; + columnWidths: TableColumnWidths; } // Component used to show percentages on wide screens. -export const PercentageData = ({ percentageDataPoints }: PercentageDataProps) => { +export const PercentageData = ({ percentageDataPoints, columnWidths }: PercentageDataProps) => { return ( <> {percentageDataPoints.map((percentageDataPoint, index) => ( - + ))} - + {percentageDataPoints.map((percentageDataPoint, index) => ( // In some cases, the percentage value is a string so it needs to be parsed for the progress bar to be filled properly. diff --git a/packages/app/src/components/tables/types.ts b/packages/app/src/components/tables/types.ts index 5a6539b56f..0611c47cfe 100644 --- a/packages/app/src/components/tables/types.ts +++ b/packages/app/src/components/tables/types.ts @@ -3,6 +3,12 @@ import { BehaviorTrendType } from '~/domain/behavior/logic/behavior-types'; type TrendDirection = BehaviorTrendType | null; +export type TableColumnWidths = { + labelColumn: string; + percentageColumn: string; + percentageBarColumn: string; +}; + export type PercentageDataPoint = { title: string; trendDirection?: TrendDirection; @@ -34,6 +40,7 @@ export interface TableData extends BaseTableData { export type BaseCoverageTable = BaseTableData; export interface CommonTableProps { + tableColumnWidths?: TableColumnWidths; tableData: SingleCoverageTableData[] | TableData[]; percentageData: PercentageDataPoint[][]; } diff --git a/packages/app/src/components/tables/wide-table.tsx b/packages/app/src/components/tables/wide-table.tsx index 24a9c09ea6..b9cde8553d 100644 --- a/packages/app/src/components/tables/wide-table.tsx +++ b/packages/app/src/components/tables/wide-table.tsx @@ -5,18 +5,18 @@ import { PercentageData } from './components/wide-percentage-data'; import { Cell, HeaderCell, Table, TableHead } from './components/shared-styled-components'; import { CommonTableProps } from './types'; -export const tableColumnWidths = { +interface WideTableProps extends CommonTableProps { + headerText: { [key: string]: string }; +} + +const defaultColumnWidths = { labelColumn: '30%', percentageColumn: '20%', percentageBarColumn: '30%', }; -interface WideTableProps extends CommonTableProps { - headerText: { [key: string]: string }; -} - // Component shown for tables on wide screens. -export const WideTable = ({ tableData, headerText, percentageData }: WideTableProps) => { +export const WideTable = ({ tableData, headerText, tableColumnWidths = defaultColumnWidths, percentageData }: WideTableProps) => { return ( @@ -47,7 +47,7 @@ export const WideTable = ({ tableData, headerText, percentageData }: WideTablePr {item.firstColumnLabel} - + ))} diff --git a/packages/app/src/domain/behavior/behavior-table-tile.tsx b/packages/app/src/domain/behavior/behavior-table-tile.tsx index ec75ccd3b6..8812e73d66 100644 --- a/packages/app/src/domain/behavior/behavior-table-tile.tsx +++ b/packages/app/src/domain/behavior/behavior-table-tile.tsx @@ -47,6 +47,11 @@ export const BehaviorTableTile = ({ title, description, value, annotation, setCu }} tableData={behaviorsTableData} percentageData={percentageData} + tableColumnWidths={{ + labelColumn: '35%', + percentageColumn: '20%', + percentageBarColumn: '30%', + }} /> ) : ( From bbac8a203e41ab251f9efd4b89e1aa2f88fb53eb Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard29 Date: Wed, 10 Jan 2024 13:47:37 +0100 Subject: [PATCH 5/7] feat(COR-1873): Re-align column width on vaccine page tables --- .../autumn-2022-shot-coverage-per-age-group.tsx | 5 +++++ .../primary-series-coverage-per-age-group.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx b/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx index 906a2dce01..0204f0fff7 100644 --- a/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx +++ b/packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx @@ -51,6 +51,11 @@ export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata }} tableData={sortedData} percentageData={percentageData} + tableColumnWidths={{ + labelColumn: '10%', + percentageColumn: '20%', + percentageBarColumn: '30%', + }} /> ) : ( diff --git a/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx b/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx index 493e434eba..447c403be3 100644 --- a/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx +++ b/packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx @@ -51,6 +51,11 @@ export const PrimarySeriesShotCoveragePerAgeGroup = ({ title, description, metad }} tableData={sortedData} percentageData={percentageData} + tableColumnWidths={{ + labelColumn: '10%', + percentageColumn: '20%', + percentageBarColumn: '30%', + }} /> ) : ( From 4cb35698cf58890b0217b927f53cf7d891c5fed0 Mon Sep 17 00:00:00 2001 From: VWSCoronaDashboard29 Date: Mon, 15 Jan 2024 14:08:34 +0100 Subject: [PATCH 6/7] feat(COR-1873): Added underline on hover --- .../components/page-information-block/components/metadata.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/app/src/components/page-information-block/components/metadata.tsx b/packages/app/src/components/page-information-block/components/metadata.tsx index b223fe832e..1ef36000e7 100644 --- a/packages/app/src/components/page-information-block/components/metadata.tsx +++ b/packages/app/src/components/page-information-block/components/metadata.tsx @@ -140,6 +140,7 @@ function MetadataItem({ icon, label, items, referenceLink, accessibilityText, ac {item.href && ( Date: Mon, 15 Jan 2024 14:19:13 +0100 Subject: [PATCH 7/7] feat(COR-1873): Add external icon to general metadata component --- packages/app/src/components/metadata.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/app/src/components/metadata.tsx b/packages/app/src/components/metadata.tsx index 0df2b1ecee..c6bbf2df07 100644 --- a/packages/app/src/components/metadata.tsx +++ b/packages/app/src/components/metadata.tsx @@ -6,6 +6,8 @@ import { replaceVariablesInText } from '~/utils/replace-variables-in-text'; import { Box } from './base'; import { InlineText, Text } from './typography'; import { Markdown } from '~/components/markdown'; +import { External as ExternalLinkIcon } from '@corona-dashboard/icons'; +import React from 'react'; type source = { text: string; @@ -59,6 +61,7 @@ export function Metadata({ date, source, obtainedAt, isTileFooter, datumsText, m {`${dateString} - ${commonTexts.common.metadata.source}: `} {source.text} + )}