feat(DDIDS-1152, DDIDS-1213): Table component number column styling

apps/angular-demo/src/app/table/table.html

@@ -16,7 +16,7 @@
     <tr *ngFor="let user of users; index as i">
       <td>{{ user.firstName }}</td>
       <td>{{ user.lastName }}</td>
-      <td>{{ user.age }}</td>
+      <td class="goa-table-number-column">{{ user.age }}</td>
     </tr>
   </tbody>
 </goa-table>

apps/react-demo/src/routes/table.tsx

@@ -52,7 +52,7 @@ export default function Table() {
             <tr key={user.id}>
               <td>{user.firstName}</td>
               <td>{user.lastName}</td>
-              <td>{user.age}</td>
+              <td className="goa-table-number-column">{user.age}</td>
             </tr>
           ))}
         </tbody>

libs/docs/src/components/common/Table.stories.mdx

@@ -8,7 +8,7 @@ import {
   SupportInfo,
   Markdown,
 } from "@abgov/shared/storybook-common";
-import { GoATable } from "@abgov/react-components";
+import { GoATable, GoACallout } from "@abgov/react-components";
 import { useState, useEffect } from "react";
 import { faker } from "@faker-js/faker";
 
@@ -153,7 +153,7 @@ export const SortableTableTemplate = (args) => {
           <tr key={user.id}>
             <td>{user.firstName}</td>
             <td>{user.lastName}</td>
-            <td>{user.age}</td>
+            <td className="goa-table-number-column">{user.age}</td>
           </tr>
         ))}
       </tbody>
@@ -356,6 +356,12 @@ export const SortableTableTemplate = (args) => {
 
 #### Sortable columns
 
+<GoACallout>
+  Columns with numerical data can be styled by adding a css class{" "}
+  <i>goa-table-column-number</i>. This sets the appropriate font and alignment
+  on these table cells
+</GoACallout>
+
 <Story name="Sortable">{SortableTableTemplate.bind()}</Story>
 
 <Tabs>
@@ -388,7 +394,7 @@ export const SortableTableTemplate = (args) => {
               return (a[sortBy] > b[sortBy] ? -1 : 1) * sortDir;
             })
           }
-        }    
+        }
       `}
     />
     <CodeSnippet
@@ -406,7 +412,7 @@ export const SortableTableTemplate = (args) => {
             <tr *ngFor="let user of users; index as i">
               <td>{{ user.firstName }}</td>
               <td>{{ user.lastName }}</td>
-              <td>{{ user.age }}</td>
+              <td class="goa-table-number-column">{{ user.age }}</td>
             </tr>
           </tbody>
         </goa-table>
@@ -449,11 +455,11 @@ export const SortableTableTemplate = (args) => {
               </tr>
             </thead>
             <tbody>
-              {users.map(user => 
+              {users.map(user =>
                 <tr key={user.id}>
                   <td>{user.firstName}</td>
                   <td>{user.lastName}</td>
-                  <td>{user.age}</td>
+                  <td className="goa-table-number-column">{user.age}</td>
                 </tr>
               )}
             </tbody>

libs/react-components/src/lib/notification/notification.spec.tsx

@@ -25,11 +25,12 @@ describe("Notification Banner", () => {
   it("Event triggered on notification banner dismiss", async () => {
     const onDismiss = jest.fn();
     const { container } = render(
-      <GoANotification type="information" onDismiss={onDismiss}>Information to the user goes in the content</GoANotification>
+      <GoANotification type="information" onDismiss={onDismiss}>
+        Information to the user goes in the content
+      </GoANotification>
     );
     const notificationBanner = container.querySelector("goa-notification");
     fireEvent(notificationBanner, new CustomEvent("_dismiss"));
     expect(onDismiss).toBeCalled();
   });
-
 });

libs/web-components/package.json

@@ -43,6 +43,7 @@
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",
     "tslib": "^2.0.0",
-    "typescript": "^4.0.0"
+    "typescript": "^4.0.0",
+    "vite-plugin-replace": "^0.1.1"
   }
 }

libs/web-components/rollup.config.js

@@ -6,6 +6,7 @@ import preprocess from "svelte-preprocess";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import css from 'rollup-plugin-css-only';
+import {replaceCodePlugin} from 'vite-plugin-replace';
 
 export default {
   input: "src/index.ts",
@@ -34,6 +35,14 @@ export default {
     resolve(),
     terser(),
     summary(),
+    replaceCodePlugin({
+      replacements: [
+          {
+              from: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g,
+              to: "$1",
+          }
+      ]
+    }),
   ],
   watch: {
     clearScreen: true,

libs/web-components/src/components/table/Table.svelte

@@ -35,7 +35,7 @@
     const slot = _rootEl.querySelector("slot") as HTMLSlotElement;
     if (!slot || slot.assignedElements().length === 0) {
       return;
-    } 
+    }
     // React needs to nest data in a <template><table>...</table></template>
     const content = slot.assignedElements()[0].querySelectorAll("template table > *");
     _rootEl.append(...(content.length > 0 ? content : slot.assignedElements()));
@@ -57,7 +57,7 @@
             const newDirection = direction === "desc" ? "asc" : "desc";
 
             sortDir = newDirection === "asc" ? 1 : -1
-            child.setAttribute("direction", newDirection)    
+            child.setAttribute("direction", newDirection)
           } else {
             child.setAttribute("direction", "none")
           }
@@ -87,8 +87,8 @@
 >
   <slot />
 
-  <!-- 
-    prevents console errors being seen in react 
+  <!--
+    prevents console errors being seen in react
     and prevents the internal styles from being removed
   -->
   <template>
@@ -113,9 +113,14 @@
     top: 0;
   }
   td {
+    font: var(--goa-typography-body-m);
     padding: 0.75rem 1rem;
     border-bottom: 1px solid var(--goa-color-greyscale-200);
-    line-height: 1rem;
+  }
+
+  table :global(.goa-table-number-column) {
+    font: var(--goa-typography-number-m);
+    text-align: right;
   }
 
   table.relaxed td {
@@ -146,5 +151,5 @@
   tfoot tr:last-child td {
     border-bottom: none;
   }
-  
+
 </style>

libs/web-components/svelte.build.config.js

@@ -0,0 +1,14 @@
+import { replaceCodePlugin } from 'vite-plugin-replace';
+
+module.exports = {
+  plugins: [
+    replaceCodePlugin({
+      replacements: [
+        {
+          from: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g,
+          to: '$1',
+        }
+      ]
+    }),
+  ],
+};

package.json

@@ -205,6 +205,7 @@
     "tslib": "^2.2.0",
     "typescript": "^4.3.5",
     "url-loader": "^3.0.0",
+    "vite-plugin-replace": "^0.1.1",
     "webpack": "^5.67.0",
     "yargs": "^15.4.1",
     "zone.js": "~0.11.4"

workspace.json

@@ -649,6 +649,7 @@
             "frameworkConfigFile": "@nxext/svelte/plugins/vite",
             "outputPath": "dist/libs/web-components",
             "svelteConfig": "libs/web-components/svelte.config.js",
+            "configFile": "libs/web-components/svelte.build.config.js",
             "assets": [
               {
                 "glob": "/*",