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

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

@@ -10,7 +10,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

@@ -44,7 +44,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/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",
@@ -36,6 +37,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

@@ -76,6 +76,11 @@
     line-height: 1rem;
   }
 
+  table :global(.goa-table-number-column) {
+    font: var(--goa-typography-number-m);
+    text-align: right;
+  }
+
   table.relaxed td{
     padding: 1.25rem 1rem 1rem;
   }