feature/COR-1913-extract-widetableprops

packages/app/src/components/tables/logic/column-widths.ts

@@ -0,0 +1,31 @@
+import { TableColumnWidths, TableType } from '~/components/tables/types';
+
+type ColumnWidths = Record<TableType, Record<string, TableColumnWidths>>;
+
+const layout_302030: TableColumnWidths = {
+  labelColumn: '30%',
+  percentageColumn: '20%',
+  percentageBarColumn: '30%',
+};
+
+const layout_352030: TableColumnWidths = {
+  labelColumn: '35%',
+  percentageColumn: '20%',
+  percentageBarColumn: '30%',
+};
+
+const layout_102030: TableColumnWidths = {
+  labelColumn: '10%',
+  percentageColumn: '20%',
+  percentageBarColumn: '30%',
+};
+
+export const columnWidths: ColumnWidths = {
+  wide: {
+    defaultWidth: layout_302030,
+    behaviourTableTileWidth: layout_352030,
+    autumn2022ShotCoverageAgeGroupWidth: layout_102030,
+    primarySeriesCoveragePerAgeGroupWidth: layout_102030,
+  },
+  narrow: {},
+};

packages/app/src/components/tables/narrow-table.tsx

@@ -8,7 +8,22 @@ interface NarrowTableProps extends CommonTableProps {
   headerText: string;
 }
 
-// Component shown for tables on narrow screens.
+/**
+ * `NarrowTable` is a functional component that renders a table specifically for use on mobile screens.
+ * It takes a `NarrowTableProps` object as its properties.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `NarrowTable` component.
+ * @param {Array} props.tableData - An array of objects where each object represents a row in the table. Each object should include an `id` and a `firstColumnLabel`.
+ * @param {string} props.headerText - The text to be displayed as the table's header.
+ * @param {Array} props.percentageData - An array of objects where each object represents a percentage data point to be displayed in the table.
+ *
+ * @example
+ * <NarrowTable tableData={tableData} headerText="Sample Table" percentageData={percentageData} />
+ *
+ * @extends {CommonTableProps}
+ * @returns {React.Element} The rendered `NarrowTable` component.
+ */
 export const NarrowTable = ({ tableData, headerText, percentageData }: NarrowTableProps) => {
   return (
     <Box overflow="auto">

packages/app/src/components/tables/types.ts

@@ -3,6 +3,8 @@ import { BehaviorTrendType } from '~/domain/behavior/logic/behavior-types';
 
 type TrendDirection = BehaviorTrendType | null;
 
+export type TableType = 'wide' | 'narrow';
+
 export type TableColumnWidths = {
   labelColumn: string;
   percentageColumn: string;

packages/app/src/components/tables/wide-table.tsx

@@ -4,19 +4,28 @@ import { Box } from '~/components/base';
 import { PercentageData } from './components/wide-percentage-data';
 import { Cell, HeaderCell, Table, TableHead } from './components/shared-styled-components';
 import { CommonTableProps } from './types';
+import { columnWidths } from '~/components/tables/logic/column-widths';
 
 interface WideTableProps extends CommonTableProps {
   headerText: { [key: string]: string };
 }
 
-const defaultColumnWidths = {
-  labelColumn: '30%',
-  percentageColumn: '20%',
-  percentageBarColumn: '30%',
-};
-
-// Component shown for tables on wide screens.
-export const WideTable = ({ tableData, headerText, tableColumnWidths = defaultColumnWidths, percentageData }: WideTableProps) => {
+/**
+ * WideTable is a React component that displays data in a desktop-width sized table.
+ * It features customizable column widths and header texts, and supports the display
+ * of percentage data for each row.
+ *
+ * @function WideTable
+ *
+ * @param {Object} props - The properties that define the WideTable component.
+ * @param {Array} props.tableData - The data to be displayed in the table. Each element of the array represents a row and should contain an 'id' and a 'firstColumnLabel' property.
+ * @param {Object} props.headerText - An object that defines the text for each column header. It should have properties 'firstColumn', 'secondColumn', 'thirdColumn', and 'fourthColumn'.
+ * @param {Object} props.tableColumnWidths - An object that specifies the widths of the columns. Defaults to 'columnWidths.wide.default'. It should have properties 'labelColumn', 'percentageColumn', and 'percentageBarColumn'.
+ * @param {Array} props.percentageData - The percentage data to be displayed in the table. Each element of the array corresponds to a row of table data.
+ *
+ * @returns {JSX.Element} - A JSX element representing a table with columns.
+ */
+export const WideTable = ({ tableData, headerText, tableColumnWidths = columnWidths.wide.defaultWidth, percentageData }: WideTableProps) => {
   return (
     <Box overflow="auto">
       <Table>

packages/app/src/domain/behavior/behavior-table-tile.tsx

@@ -16,6 +16,7 @@ import { BehaviorIconWithLabel, OnClickConfig } from './components/behavior-icon
 import { BehaviorTrend } from './components/behavior-trend';
 import { BehaviorIdentifier } from './logic/behavior-types';
 import { useBehaviorLookupKeys } from './logic/use-behavior-lookup-keys';
+import { columnWidths } from '~/components/tables/logic/column-widths';
 
 interface BehaviorTableTileProps {
   title: string;
@@ -47,11 +48,7 @@ export const BehaviorTableTile = ({ title, description, value, annotation, setCu
           }}
           tableData={behaviorsTableData}
           percentageData={percentageData}
-          tableColumnWidths={{
-            labelColumn: '35%',
-            percentageColumn: '20%',
-            percentageBarColumn: '30%',
-          }}
+          tableColumnWidths={columnWidths.wide.behaviourTableTileWidth}
         />
       ) : (
         <NarrowTable tableData={behaviorsTableData} percentageData={percentageData} headerText={text.basisregels.header_basisregel} />

packages/app/src/domain/vaccine/autumn-2022-shot-coverage-per-age-group/autumn-2022-shot-coverage-per-age-group.tsx

@@ -10,6 +10,7 @@ import { SiteText } from '~/locale';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { getSortingOrder } from '../logic/get-sorting-order';
 import { useGetSingleCoveragePercentageData } from '~/components/tables/logic/use-get-single-coverage-percentage-data';
+import { columnWidths } from '~/components/tables/logic/column-widths';
 
 interface Autumn2022ShotCoveragePerAgeGroupProps {
   title: string;
@@ -51,11 +52,7 @@ export const Autumn2022ShotCoveragePerAgeGroup = ({ title, description, metadata
           }}
           tableData={sortedData}
           percentageData={percentageData}
-          tableColumnWidths={{
-            labelColumn: '10%',
-            percentageColumn: '20%',
-            percentageBarColumn: '30%',
-          }}
+          tableColumnWidths={columnWidths.wide.autumn2022ShotCoverageAgeGroupWidth}
         />
       ) : (
         <NarrowTable headerText={text.headers.agegroup} tableData={sortedData} percentageData={percentageData} />

packages/app/src/domain/vaccine/primary-series-coverage-per-age-group/primary-series-coverage-per-age-group.tsx

@@ -10,6 +10,7 @@ import { COLOR_FULLY_VACCINATED } from '~/domain/vaccine/common';
 import { SiteText } from '~/locale';
 import { useBreakpoints } from '~/utils/use-breakpoints';
 import { getSortingOrder } from '../logic/get-sorting-order';
+import { columnWidths } from '~/components/tables/logic/column-widths';
 
 interface PrimarySeriesShotCoveragePerAgeGroupProps {
   title: string;
@@ -51,11 +52,7 @@ export const PrimarySeriesShotCoveragePerAgeGroup = ({ title, description, metad
           }}
           tableData={sortedData}
           percentageData={percentageData}
-          tableColumnWidths={{
-            labelColumn: '10%',
-            percentageColumn: '20%',
-            percentageBarColumn: '30%',
-          }}
+          tableColumnWidths={columnWidths.wide.primarySeriesCoveragePerAgeGroupWidth}
         />
       ) : (
         <NarrowTable headerText={text.headers.agegroup} tableData={sortedData} percentageData={percentageData} />