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/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

@@ -36,6 +36,7 @@ export interface GoabAccordionProps extends Margins {
   maxWidth?: string;
   testId?: string;
   iconPosition?: GoabAccordionIconPosition;
+  [key: `data-grid${string}`]: string | boolean | undefined;
   onChange?: (open: boolean) => void;
   children?: ReactNode;
 }
@@ -55,9 +56,14 @@ export function GoabAccordion({
   mr,
   mb,
   ml,
+  ...rest
 }: GoabAccordionProps): JSX.Element {
   const ref = useRef<HTMLElement>(null);
 
+  const dataGridProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-grid'))
+  );
+
   useEffect(() => {
     const element = ref.current;
     if (element && onChange) {
@@ -85,6 +91,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

@@ -13,6 +13,7 @@ export interface GoabAppHeaderMenuProps {
   leadingIcon?: GoabIconType;
   testId?: string;
   children?: ReactNode;
+  [key: `data-grid${string}`]: string | boolean | undefined;
 }
 
 declare module "react" {
@@ -25,13 +26,18 @@ declare module "react" {
 }
 
 export function GoabAppHeaderMenu(props: GoabAppHeaderMenuProps) {
+  const { heading, leadingIcon, testId, children, ...rest } = props;
+  const dataGridProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-grid'))
+  );
   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

@@ -27,6 +27,7 @@ export interface GoabAppHeaderProps {
   children?: React.ReactNode;
   onMenuClick?: () => void;
   testId?: string;
+  [key: `data-grid${string}`]: string | boolean | undefined;
 }
 
 export function GoabAppHeader({
@@ -37,9 +38,14 @@ export function GoabAppHeader({
   testId,
   children,
   onMenuClick,
+  ...rest
 }: GoabAppHeaderProps): JSX.Element {
   const el = useRef<HTMLElement>(null);
 
+  const dataGridProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-grid'))
+  );
+
   useEffect(() => {
     if (!el.current) {
       return;
@@ -66,6 +72,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

@@ -24,6 +24,7 @@ export interface GoabBadgeProps extends Margins {
   content?: string;
   testId?: string;
   ariaLabel?: string;
+  [key: `data-grid${string}`]: string | boolean | undefined;
 }
 
 export function GoabBadge({
@@ -36,7 +37,12 @@ export function GoabBadge({
   mb,
   ml,
   ariaLabel,
+  ...rest
 }: GoabBadgeProps): JSX.Element {
+  const dataGridProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-grid'))
+  );
+
   return (
     <goa-badge
       type={type}
@@ -48,6 +54,7 @@ export function GoabBadge({
       mr={mr}
       mb={mb}
       ml={ml}
+      {...dataGridProps}
     />
   );
 }

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

@@ -29,21 +29,29 @@ export interface GoabBlockProps extends Margins {
   alignment?: GoabBlockAlignment;
   testId?: string;
   children?: ReactNode;
+  [key: `data-grid${string}`]: string | boolean | undefined;
 }
 
 export function GoabBlock(props: GoabBlockProps) {
+  const { gap, direction, alignment, mt, mr, mb, ml, testId, children, ...rest } = props;
+
+  const dataGridProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-grid'))
+  );
+
   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

@@ -26,6 +26,7 @@ export interface GoabButtonGroupProps extends Margins {
   gap?: GoabButtonGroupGap;
   testId?: string;
   children?: React.ReactNode;
+  [key: `data-grid${string}`]: string | boolean | undefined;
 }
 
 export function GoabButtonGroup({
@@ -37,7 +38,12 @@ export function GoabButtonGroup({
   mr,
   mb,
   ml,
+  ...rest
 }: GoabButtonGroupProps): JSX.Element {
+  const dataGridProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-grid'))
+  );
+
   return (
     <goa-button-group
       alignment={alignment}
@@ -47,6 +53,7 @@ export function GoabButtonGroup({
       mb={mb}
       ml={ml}
       testid={testId}
+      {...dataGridProps}
     >
       {children}
     </goa-button-group>

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

@@ -45,28 +45,35 @@ export interface GoabButtonProps extends Margins {
   actionArgs?: Record<string, unknown>;
   actionArg?: string;
   children?: ReactNode;
+  [key: `data-grid${string}`]: string | boolean | undefined;
 }
 
-export function GoabButton({
-  disabled,
-  type,
-  size,
-  variant,
-  leadingIcon,
-  trailingIcon,
-  width,
-  testId,
-  children,
-  onClick,
-  mt,
-  mr,
-  mb,
-  ml,
-  action,
-  actionArgs,
-  actionArg,
-}: GoabButtonProps): JSX.Element {
+export function GoabButton(props: GoabButtonProps): JSX.Element {
+  const {
+    disabled,
+    type,
+    size,
+    variant,
+    leadingIcon,
+    trailingIcon,
+    width,
+    testId,
+    children,
+    onClick,
+    mt,
+    mr,
+    mb,
+    ml,
+    action,
+    actionArgs,
+    actionArg,
+    ...rest
+  } = props;
+
   const el = useRef<HTMLElement>(null);
+  const dataGridProps = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-grid'))
+  );
 
   useEffect(() => {
     if (!el.current) {
@@ -104,6 +111,7 @@ export function GoabButton({
       mr={mr}
       mb={mb}
       ml={ml}
+      {...dataGridProps}
     >
       {children}
     </goa-button>