Some improvements to Tables and OverviewPage

frontend/app/component/form/data_entry/polling_station_choice/PollingStationsList.tsx

@@ -15,6 +15,7 @@ export function PollingStationsList({ pollingStations }: PollingStationsListProp
       <Table.Header>
         <Table.Column>{t("number")}</Table.Column>
         <Table.Column>{t("polling_station.title.singular")}</Table.Column>
+        <Table.Column />
       </Table.Header>
       <Table.Body>
         {pollingStations.map((pollingStation: PollingStation) => {
@@ -35,6 +36,7 @@ export function PollingStationsList({ pollingStations }: PollingStationsListProp
                 <span>{pollingStation.name}</span>
                 {status && <Badge type={status} showIcon />}
               </Table.Cell>
+              <Table.Cell />
             </Table.LinkRow>
           );
         })}

frontend/app/module/election/page/OverviewPage.tsx

@@ -57,6 +57,7 @@ export function OverviewPage() {
                 {!isAdminOrCoordinator ? t("election.location") : t("election.level_polling_station")}
               </Table.Column>
               <Table.Column>{t("election_status.label")}</Table.Column>
+              <Table.Column />
             </Table.Header>
             <Table.Body className="fs-md">
               {electionList.map((election) => (
@@ -69,6 +70,7 @@ export function OverviewPage() {
                       userRole={isAdminOrCoordinator ? "coordinator" : "typist"}
                     />
                   </Table.Cell>
+                  <Table.Cell />
                 </Table.LinkRow>
               ))}
             </Table.Body>

frontend/app/module/polling_stations/page/PollingStationListPage.test.tsx

@@ -22,11 +22,11 @@ describe("PollingStationListPage", () => {
     const table = await screen.findByRole("table");
     expect(table).toBeVisible();
     expect(table).toHaveTableContent([
-      ["Nummer", "Naam", "Soort"],
-      ["33", "Op Rolletjes", "Mobiel"],
-      ["34", "Testplek", "Bijzonder"],
-      ["35", "Testschool", "Vaste locatie"],
-      ["36", "Testbuurthuis", "Vaste locatie"],
+      ["Nummer", "Naam", "Soort", ""],
+      ["33", "Op Rolletjes", "Mobiel", ""],
+      ["34", "Testplek", "Bijzonder", ""],
+      ["35", "Testschool", "Vaste locatie", ""],
+      ["36", "Testbuurthuis", "Vaste locatie", ""],
     ]);
   });
 

frontend/app/module/polling_stations/page/PollingStationListPage.tsx

@@ -105,6 +105,7 @@ export function PollingStationListPage() {
                 <Table.Column>{t("number")}</Table.Column>
                 <Table.Column>{t("name")}</Table.Column>
                 <Table.Column>{t("type")}</Table.Column>
+                <Table.Column />
               </Table.Header>
               <Table.Body className="fs-md">
                 {data.polling_stations.map((station) => (
@@ -114,6 +115,7 @@ export function PollingStationListPage() {
                     <Table.Cell>
                       {station.polling_station_type && labelForPollingStationType[station.polling_station_type]}
                     </Table.Cell>
+                    <Table.Cell />
                   </Table.LinkRow>
                 ))}
               </Table.Body>

frontend/app/module/users/UserListPage.test.tsx

@@ -17,12 +17,12 @@ describe("PollingStationListPage", () => {
     const table = await screen.findByRole("table");
     expect(table).toBeVisible();
     expect(table).toHaveTableContent([
-      ["Gebruikersnaam", "Rol", "Volledige naam", "Laatste activiteit"],
-      ["Sanne", "Beheerder", "Sanne Molenaar", "vandaag 10:20"],
-      ["Jayden", "Coördinator", "Jayden Ahmen", "vandaag 13:37"],
-      ["Gebruiker01", "Invoerder", "Nog niet gebruikt", "–"],
-      ["Gebruiker02", "Invoerder", "Nog niet gebruikt", "–"],
-      ["Gebruiker03", "Invoerder", "Nog niet gebruikt", "–"],
+      ["Gebruikersnaam", "Rol", "Volledige naam", "Laatste activiteit", ""],
+      ["Sanne", "Beheerder", "Sanne Molenaar", "vandaag 10:20", ""],
+      ["Jayden", "Coördinator", "Jayden Ahmen", "vandaag 13:37", ""],
+      ["Gebruiker01", "Invoerder", "Nog niet gebruikt", "–", ""],
+      ["Gebruiker02", "Invoerder", "Nog niet gebruikt", "–", ""],
+      ["Gebruiker03", "Invoerder", "Nog niet gebruikt", "–", ""],
     ]);
   });
 });

frontend/lib/icon/generated.tsx

@@ -143,6 +143,7 @@ export const IconChevronRight = (props: React.SVGAttributes<SVGElement>) => (
     version="1.1"
     viewBox="0 0 20 20"
     role="img"
+    fill="#475467"
   >
     <path d="M7.5,15.8c-.2,0-.4,0-.6-.2-.3-.3-.3-.9,0-1.2l4.4-4.4-4.4-4.4c-.3-.3-.3-.9,0-1.2.3-.3.9-.3,1.2,0l5,5c.3.3.3.9,0,1.2l-5,5c-.2.2-.4.2-.6.2Z" />
   </svg>

frontend/lib/ui/Table/Table.module.css

@@ -52,7 +52,9 @@
       background: var(--color-hover);
     }
 
+    /* Chevron icon cell */
     td:last-of-type {
+      width: 5rem;
       padding-right: 2.75rem;
       background-image: url("../../icon/svg/chevronRight.svg");
       background-size: 1.25rem;

frontend/lib/ui/Table/Table.stories.tsx

@@ -65,14 +65,16 @@ export const LinkTable: Story = () => {
       <Table.Header>
         <Table.Column>Number</Table.Column>
         <Table.Column>Click me</Table.Column>
-        <Table.Column>Look a chevron</Table.Column>
+        <Table.Column>Look a chevron right of here</Table.Column>
+        <Table.Column />
       </Table.Header>
       <Table.Body className="fs-md">
         {data.map((row) => (
           <Table.LinkRow key={row[0]} to={`#row${row[0]}`}>
             <Table.NumberCell>{row[0]}</Table.NumberCell>
             <Table.Cell>{row[1]}</Table.Cell>
             <Table.Cell>{row[2]}</Table.Cell>
+            <Table.Cell />
           </Table.LinkRow>
         ))}
       </Table.Body>
@@ -86,6 +88,7 @@ export const IconBadgeTable: Story = () => (
       <Table.Column>Number</Table.Column>
       <Table.Column>With icon</Table.Column>
       <Table.Column>With badge</Table.Column>
+      <Table.Column />
     </Table.Header>
     <Table.Body>
       {data.map((row) => (
@@ -99,6 +102,7 @@ export const IconBadgeTable: Story = () => (
             <span>{row[2]}</span>
             <Badge type="first_entry_in_progress" showIcon />
           </Table.Cell>
+          <Table.Cell />
         </Table.LinkRow>
       ))}
     </Table.Body>

frontend/lib/ui/Table/Table.tsx

@@ -8,11 +8,12 @@ import cls from "./Table.module.css";
 export interface TableProps {
   id?: string;
   children?: React.ReactNode;
+  className?: string;
 }
 
-export function Table({ id, children }: TableProps) {
+export function Table({ id, children, className }: TableProps) {
   return (
-    <table id={id} className={cls.table}>
+    <table id={id} className={cn(cls.table, className)}>
       {children}
     </table>
   );
@@ -34,27 +35,39 @@ function Header({ children, className }: { children: React.ReactNode[]; classNam
   );
 }
 
-function Column({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <th className={className}>{children}</th>;
+function Column({
+  children,
+  scope,
+  className,
+}: {
+  children?: React.ReactNode;
+  scope?: "col" | "row";
+  className?: string;
+}) {
+  return (
+    <th scope={scope || "col"} className={className}>
+      {children}
+    </th>
+  );
 }
 
 function Body({ children, className }: { children: React.ReactNode[]; className?: string }) {
   return <tbody className={className}>{children}</tbody>;
 }
 
-function Row({ children }: { children: React.ReactNode[] }) {
-  return <tr>{children}</tr>;
+function Row({ children, className }: { children: React.ReactNode[]; className?: string }) {
+  return <tr className={className}>{children}</tr>;
 }
 
-function LinkRow({ children, to }: { children: React.ReactNode[]; to: To }) {
+function LinkRow({ children, to, className }: { children: React.ReactNode[]; to: To; className?: string }) {
   const navigate = useNavigate();
 
   function handleClick() {
     void navigate(to);
   }
 
   return (
-    <tr className={cls.rowLink} onClick={handleClick}>
+    <tr className={cn(cls.rowLink, className)} onClick={handleClick}>
       {children}
     </tr>
   );