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

Author: amar-ABgov

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-lock.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/package.json

@@ -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/rollup.config.js

@@ -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>
@@ -118,6 +118,11 @@
     line-height: 1rem;
   }
 
+  table :global(.goa-table-number-column) {
+    font: var(--goa-typography-number-m);
+    text-align: right;
+  }
+
   table.relaxed td {
     padding: 1rem;
   }
@@ -146,5 +151,5 @@
   tfoot tr:last-child td {
     border-bottom: none;
   }
-  
+
 </style>