feat(#2609): add data-grid component

Author: vanessatran-ddi

libs/angular-components/src/lib/components/data-grid/data-grid.ts

@@ -0,0 +1,13 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "goab-data-grid",
+  template: `
+    <goa-data-grid>
+      <ng-content></ng-content>
+    </goa-data-grid>
+  `,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class GoabDataGrid {}

libs/angular-components/src/lib/components/index.ts

@@ -13,6 +13,7 @@ export * from "./chip/chip";
 export * from "./circular-progress/circular-progress";
 export * from "./column-layout/column-layout";
 export * from "./container/container";
+export * from "./data-grid/data-grid";
 export * from "./date-picker/date-picker";
 export * from "./details/details";
 export * from "./divider/divider";

libs/react-components/specs/dropdown.browser.spec.tsx

@@ -434,8 +434,11 @@ describe("Dropdown Component", () => {
         await option2.click();
       });
 
-      // Result
-      expect(onChange).toHaveBeenCalledTimes(1);
+      // Result - Wait for onChange to be called
+      await vi.waitFor(() => {
+        expect(onChange).toHaveBeenCalledTimes(1);
+      });
+      
       expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
         name: "options",
         value: 2

libs/react-components/src/index.ts

@@ -12,6 +12,7 @@ export * from "./lib/checkbox/checkbox";
 export * from "./lib/chip/chip";
 export * from "./lib/circular-progress/circular-progress";
 export * from "./lib/container/container";
+export * from "./lib/data-grid/data-grid";
 export * from "./lib/date-picker/date-picker";
 export * from "./lib/details/details";
 export * from "./lib/divider/divider";

libs/react-components/src/lib/accordion/accordion.tsx

@@ -5,6 +5,7 @@ import type {
   GoabAccordionIconPosition,
   Margins,
 } from "@abgov/ui-components-common";
+import { DataGridProps, useDataGridProps } from "../common/data-props";
 
 interface WCProps extends Margins {
   ref: React.RefObject<HTMLElement | null>;
@@ -27,7 +28,7 @@ declare module "react" {
   }
 }
 
-export interface GoabAccordionProps extends Margins {
+export interface GoabAccordionProps extends Margins, DataGridProps {
   open?: boolean;
   headingSize?: GoabAccordionHeadingSize;
   secondaryText?: string;
@@ -40,23 +41,23 @@ export interface GoabAccordionProps extends Margins {
   children?: ReactNode;
 }
 
-export function GoabAccordion({
-  open,
-  heading,
-  headingSize,
-  secondaryText,
-  headingContent,
-  iconPosition,
-  maxWidth,
-  testId,
-  onChange,
-  children,
-  mt,
-  mr,
-  mb,
-  ml,
-}: GoabAccordionProps): JSX.Element {
+export function GoabAccordion(props: GoabAccordionProps): JSX.Element {
   const ref = useRef<HTMLElement>(null);
+  const [dataGridProps, {
+    open,
+    heading,
+    headingSize,
+    secondaryText,
+    headingContent,
+    iconPosition,
+    maxWidth,
+    testId,
+    onChange,
+    children,
+    mt,
+    mr,
+    mb,
+    ml}] = useDataGridProps(props);
 
   useEffect(() => {
     const element = ref.current;
@@ -85,6 +86,7 @@ export function GoabAccordion({
       mr={mr}
       mb={mb}
       ml={ml}
+      {...dataGridProps}
     >
       {headingContent && <div slot="headingcontent">{headingContent}</div>}
       {children}

libs/react-components/src/lib/app-header-menu/app-header-menu.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { GoabIconType } from "@abgov/ui-components-common";
+import { DataGridProps, useDataGridProps } from "../common/data-props";
 
 interface WCProps {
   heading: string;
@@ -8,7 +9,7 @@ interface WCProps {
 }
 
 /* eslint-disable-next-line */
-export interface GoabAppHeaderMenuProps {
+export interface GoabAppHeaderMenuProps extends DataGridProps {
   heading: string;
   leadingIcon?: GoabIconType;
   testId?: string;
@@ -25,13 +26,15 @@ declare module "react" {
 }
 
 export function GoabAppHeaderMenu(props: GoabAppHeaderMenuProps) {
+  const [dataGridProps, { heading, leadingIcon, testId, children }] = useDataGridProps(props);
   return (
     <goa-app-header-menu
-      heading={props.heading}
-      leadingicon={props.leadingIcon}
-      testid={props.testId}
+      heading={heading}
+      leadingicon={leadingIcon}
+      testid={testId}
+      {...dataGridProps}
     >
-      {props.children}
+      {children}
     </goa-app-header-menu>
   );
 }

libs/react-components/src/lib/app-header/app-header.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, type JSX } from "react";
+import { DataGridProps, useDataGridProps } from "../common/data-props";
 
 interface WCProps {
   heading?: string;
@@ -19,7 +20,7 @@ declare module "react" {
   }
 }
 
-export interface GoabAppHeaderProps {
+export interface GoabAppHeaderProps extends DataGridProps {
   heading?: string;
   url?: string;
   maxContentWidth?: string;
@@ -29,16 +30,17 @@ export interface GoabAppHeaderProps {
   testId?: string;
 }
 
-export function GoabAppHeader({
-  heading,
-  url,
-  maxContentWidth,
-  fullMenuBreakpoint,
-  testId,
-  children,
-  onMenuClick,
-}: GoabAppHeaderProps): JSX.Element {
+export function GoabAppHeader(props: GoabAppHeaderProps): JSX.Element {
   const el = useRef<HTMLElement>(null);
+  const [dataGridProps, {
+    heading,
+    url,
+    maxContentWidth,
+    fullMenuBreakpoint,
+    testId,
+    children,
+    onMenuClick
+  }] = useDataGridProps(props);
 
   useEffect(() => {
     if (!el.current) {
@@ -66,6 +68,7 @@ export function GoabAppHeader({
       maxcontentwidth={maxContentWidth}
       testid={testId}
       hasmenuclickhandler={onMenuClick ? "true" : "false"}
+      {...dataGridProps}
     >
       {children}
     </goa-app-header>

libs/react-components/src/lib/badge/badge.tsx

@@ -1,5 +1,6 @@
 import { GoabBadgeType, Margins } from "@abgov/ui-components-common";
 import type { JSX } from "react";
+import { DataGridProps, useDataGridProps } from "../common/data-props";
 
 interface WCProps extends Margins {
   type: GoabBadgeType;
@@ -18,25 +19,27 @@ declare module "react" {
   }
 }
 
-export interface GoabBadgeProps extends Margins {
+export interface GoabBadgeProps extends Margins, DataGridProps {
   type: GoabBadgeType;
   icon?: boolean;
   content?: string;
   testId?: string;
   ariaLabel?: string;
 }
 
-export function GoabBadge({
-  type,
-  content,
-  icon,
-  testId,
-  mt,
-  mr,
-  mb,
-  ml,
-  ariaLabel,
-}: GoabBadgeProps): JSX.Element {
+export function GoabBadge(props: GoabBadgeProps): JSX.Element {
+  const [dataGridProps, {
+    type,
+    content,
+    icon,
+    testId,
+    mt,
+    mr,
+    mb,
+    ml,
+    ariaLabel,
+  }] = useDataGridProps(props);
+
   return (
     <goa-badge
       type={type}
@@ -48,6 +51,7 @@ export function GoabBadge({
       mr={mr}
       mb={mb}
       ml={ml}
+      {...dataGridProps}
     />
   );
 }

libs/react-components/src/lib/block/block.tsx

@@ -5,6 +5,7 @@ import {
   Spacing,
 } from "@abgov/ui-components-common";
 import { ReactNode } from "react";
+import { DataGridProps, useDataGridProps } from "../common/data-props";
 
 export interface WCProps extends Margins {
   gap?: Spacing;
@@ -23,7 +24,7 @@ declare module "react" {
 }
 
 /* eslint-disable-next-line */
-export interface GoabBlockProps extends Margins {
+export interface GoabBlockProps extends Margins, DataGridProps {
   gap?: Spacing;
   direction?: GoabBlockDirection;
   alignment?: GoabBlockAlignment;
@@ -32,18 +33,21 @@ export interface GoabBlockProps extends Margins {
 }
 
 export function GoabBlock(props: GoabBlockProps) {
+  const [dataGridProps, { gap, direction, alignment, mt, mr, mb, ml, testId, children}] = useDataGridProps(props);
+
   return (
     <goa-block
-      gap={props.gap}
-      direction={props.direction}
-      alignment={props.alignment}
-      mt={props.mt}
-      mr={props.mr}
-      mb={props.mb}
-      ml={props.ml}
-      testid={props.testId}
+      gap={gap}
+      direction={direction}
+      alignment={alignment}
+      mt={mt}
+      mr={mr}
+      mb={mb}
+      ml={ml}
+      testid={testId}
+      {...dataGridProps}
     >
-      {props.children}
+      {children}
     </goa-block>
   );
 }

libs/react-components/src/lib/button-group/button-group.tsx

@@ -5,6 +5,7 @@ import {
 } from "@abgov/ui-components-common";
 
 import type { JSX } from "react";
+import { DataGridProps, useDataGridProps } from "../common/data-props";
 
 interface WCProps extends Margins {
   alignment: GoabButtonGroupAlignment;
@@ -21,23 +22,26 @@ declare module "react" {
   }
 }
 
-export interface GoabButtonGroupProps extends Margins {
+export interface GoabButtonGroupProps extends Margins, DataGridProps {
   alignment: GoabButtonGroupAlignment;
   gap?: GoabButtonGroupGap;
   testId?: string;
   children?: React.ReactNode;
+  [key: `data-grid${string}`]: string | boolean | undefined;
 }
 
-export function GoabButtonGroup({
-  alignment,
-  gap,
-  testId,
-  children,
-  mt,
-  mr,
-  mb,
-  ml,
-}: GoabButtonGroupProps): JSX.Element {
+export function GoabButtonGroup(props: GoabButtonGroupProps): JSX.Element {
+  const [dataGridProps, {
+    alignment,
+    gap,
+    testId,
+    children,
+    mt,
+    mr,
+    mb,
+    ml
+  }] = useDataGridProps(props);
+
   return (
     <goa-button-group
       alignment={alignment}
@@ -47,6 +51,7 @@ export function GoabButtonGroup({
       mb={mb}
       ml={ml}
       testid={testId}
+      {...dataGridProps}
     >
       {children}
     </goa-button-group>