diff --git a/libs/react-components/src/index.ts b/libs/react-components/src/index.ts
index 4fcbf4c61..91486aaf6 100644
--- a/libs/react-components/src/index.ts
+++ b/libs/react-components/src/index.ts
@@ -59,5 +59,3 @@ export * from "./lib/three-column-layout/three-column-layout";
export * from "./lib/tooltip/tooltip";
export * from "./lib/two-column-layout/two-column-layout";
export * from "./lib/filter-chip/filter-chip";
-
-export * from "./common/styling";
diff --git a/libs/react-components/src/lib/accordion/accordion.spec.tsx b/libs/react-components/src/lib/accordion/accordion.spec.tsx
index a9f3a61c7..a0ec1f752 100644
--- a/libs/react-components/src/lib/accordion/accordion.spec.tsx
+++ b/libs/react-components/src/lib/accordion/accordion.spec.tsx
@@ -1,31 +1,29 @@
import { render } from "@testing-library/react";
-import { GoABadge } from "../badge/badge";
+import { GoabBadge } from "../badge/badge";
-import { GoAAccordion } from "./accordion";
+import { GoabAccordion } from "./accordion";
describe("Accordion", () => {
it("should render successfully", () => {
const { baseElement } = render(
-
Accordion Content
+
Accordion Content,
);
const el = baseElement.querySelector("goa-accordion");
- expect(el.getAttribute("heading")).toBe("The heading");
+ expect(el?.getAttribute("heading")).toBe("The heading");
expect(baseElement.innerHTML).toContain("Accordion Content");
});
it("should set the props correctly", () => {
const { baseElement } = render(
-
- }
+ headingContent={}
maxWidth="480px"
>
Accordion Content
-
+ ,
);
const el = baseElement.querySelector("goa-accordion");
const headingContent = el?.querySelector("[slot='headingcontent']");
diff --git a/libs/react-components/src/lib/accordion/accordion.tsx b/libs/react-components/src/lib/accordion/accordion.tsx
index 7783dab61..6ace50d35 100644
--- a/libs/react-components/src/lib/accordion/accordion.tsx
+++ b/libs/react-components/src/lib/accordion/accordion.tsx
@@ -1,13 +1,13 @@
-import React, { ReactNode, useEffect, useRef } from "react";
-import { Margins } from "../../common/styling";
+import { ReactNode , useEffect, useRef} from "react";
-export type GoAHeadingSize = "small" | "medium";
+import type { GoabAccordionHeadingSize, Margins } from "@abgov/ui-components-common";
+// TODO: move to ts
export type GoAIconPosition = "left" | "right";
interface WCProps extends Margins {
ref: React.RefObject
;
open?: boolean;
- headingSize?: GoAHeadingSize;
+ headingSize?: GoabAccordionHeadingSize;
heading: string;
secondaryText?: string;
headingContent?: ReactNode;
@@ -25,9 +25,9 @@ declare global {
}
}
-export interface GoAAccordionProps extends Margins {
+export interface GoabAccordionProps extends Margins {
open?: boolean;
- headingSize?: GoAHeadingSize;
+ headingSize?: GoabAccordionHeadingSize;
secondaryText?: string;
heading: string;
headingContent?: ReactNode;
@@ -38,7 +38,7 @@ export interface GoAAccordionProps extends Margins {
children: ReactNode;
}
-export function GoAAccordion({
+export function GoabAccordion({
open,
heading,
headingSize,
@@ -53,7 +53,7 @@ export function GoAAccordion({
mr,
mb,
ml,
-}: GoAAccordionProps): JSX.Element {
+}: GoabAccordionProps): JSX.Element {
const ref = useRef(null);
useEffect(() => {
@@ -69,7 +69,6 @@ export function GoAAccordion({
};
}
}, [onChange]);
-
return (
{
it("should render with no children", () => {
- const { baseElement } = render();
+ const { baseElement } = render();
const el = baseElement.querySelector("goa-app-header-menu");
expect(el).toBeTruthy();
- expect(el.getAttribute("heading")).toBe("Some label");
+ expect(el?.getAttribute("heading")).toBe("Some label");
});
it("should render children", () => {
const { baseElement } = render(
-
+
Foo
Bar
-
+ ,
);
const el = baseElement.querySelector("goa-app-header-menu");
expect(el).toBeTruthy();
@@ -28,11 +27,8 @@ describe("AppHeaderMenu", () => {
it("should set the props correctly", () => {
const { baseElement } = render(
- );
+ ,
+ );
const el = baseElement.querySelector("goa-app-header-menu");
expect(el).toBeTruthy();
expect(el?.getAttribute("heading")).toBe("Some label");
diff --git a/libs/react-components/src/lib/app-header-menu/app-header-menu.tsx b/libs/react-components/src/lib/app-header-menu/app-header-menu.tsx
index ff20d965d..d62cb7444 100644
--- a/libs/react-components/src/lib/app-header-menu/app-header-menu.tsx
+++ b/libs/react-components/src/lib/app-header-menu/app-header-menu.tsx
@@ -1,5 +1,5 @@
import { ReactNode } from "react";
-import { GoAIconType } from "../icon/icon";
+import { GoabIconType } from "@abgov/ui-components-common";
interface WCProps {
heading: string;
@@ -8,9 +8,9 @@ interface WCProps {
}
/* eslint-disable-next-line */
-export interface GoAAppHeaderMenuProps {
+export interface GoabAppHeaderMenuProps {
heading: string;
- leadingIcon?: GoAIconType;
+ leadingIcon?: GoabIconType;
testId?: string;
children?: ReactNode;
}
@@ -25,7 +25,7 @@ declare global {
}
}
-export function GoAAppHeaderMenu(props: GoAAppHeaderMenuProps) {
+export function GoabAppHeaderMenu(props: GoabAppHeaderMenuProps) {
return (
{
+describe("GoABAppHeader", () => {
it("should render", () => {
- const { baseElement } = render(
-
- );
+ const { baseElement } = render();
const header = baseElement.querySelector("goa-app-header");
expect(header).toBeTruthy();
diff --git a/libs/react-components/src/lib/app-header/app-header.tsx b/libs/react-components/src/lib/app-header/app-header.tsx
index 05d3ef889..5e72ea8da 100644
--- a/libs/react-components/src/lib/app-header/app-header.tsx
+++ b/libs/react-components/src/lib/app-header/app-header.tsx
@@ -19,7 +19,7 @@ declare global {
}
}
-export interface GoAAppHeaderProps {
+export interface GoabAppHeaderProps {
heading?: string;
url?: string;
maxContentWidth?: string;
@@ -29,7 +29,7 @@ export interface GoAAppHeaderProps {
testId?: string;
}
-export function GoAAppHeader({
+export function GoabAppHeader({
heading,
url,
maxContentWidth,
@@ -37,7 +37,7 @@ export function GoAAppHeader({
testId,
children,
onMenuClick,
-}: GoAAppHeaderProps): JSX.Element {
+}: GoabAppHeaderProps): JSX.Element {
const el = useRef(null);
useEffect(() => {
@@ -72,4 +72,4 @@ export function GoAAppHeader({
);
}
-export default GoAAppHeader;
+export default GoabAppHeader;
diff --git a/libs/react-components/src/lib/badge/badge.spec.tsx b/libs/react-components/src/lib/badge/badge.spec.tsx
index d080fa25f..b2b5daf56 100644
--- a/libs/react-components/src/lib/badge/badge.spec.tsx
+++ b/libs/react-components/src/lib/badge/badge.spec.tsx
@@ -1,12 +1,10 @@
import { render } from "@testing-library/react";
-import { GoABadge } from "./badge";
+import { GoabBadge } from "./badge";
import { screen } from "@testing-library/dom";
-describe("GoA Badge", () => {
+describe("GoAB Badge", () => {
it("should render", () => {
- render(
-
- );
+ render();
const badge = screen.findByTestId("badge-test");
expect(badge).toBeTruthy();
@@ -14,7 +12,7 @@ describe("GoA Badge", () => {
it("should render the properties", () => {
const { container } = render(
- {
mb="l"
ml="xl"
ariaLabel="text"
- />
+ />,
);
const el = container.querySelector("goa-badge");
diff --git a/libs/react-components/src/lib/badge/badge.tsx b/libs/react-components/src/lib/badge/badge.tsx
index aaf885ad4..41302b3e6 100644
--- a/libs/react-components/src/lib/badge/badge.tsx
+++ b/libs/react-components/src/lib/badge/badge.tsx
@@ -1,16 +1,7 @@
-import { Margins } from "../../common/styling";
-
-export type GoABadgeType =
- | "information"
- | "success"
- | "important"
- | "emergency"
- | "dark"
- | "midtone"
- | "light";
+import { GoabBadgeType, Margins } from "@abgov/ui-components-common";
interface WCProps extends Margins {
- type: GoABadgeType;
+ type: GoabBadgeType;
icon?: boolean;
content?: string;
arialabel?: string;
@@ -27,15 +18,15 @@ declare global {
}
}
-export interface GoABadgeProps extends Margins {
- type: GoABadgeType;
+export interface GoabBadgeProps extends Margins {
+ type: GoabBadgeType;
icon?: boolean;
content?: string;
testId?: string;
ariaLabel?: string;
}
-export function GoABadge({
+export function GoabBadge({
type,
content,
icon,
@@ -45,7 +36,7 @@ export function GoABadge({
mb,
ml,
ariaLabel,
-}: GoABadgeProps): JSX.Element {
+}: GoabBadgeProps): JSX.Element {
return (
{
it("should render successfully", () => {
- const { baseElement } = render();
+ const { baseElement } = render();
expect(baseElement).toBeTruthy();
});
it("should render the properties", () => {
const { container } = render(
- {
mr="m"
mb="l"
ml="xl"
- />
+ />,
);
const el = container.querySelector("goa-block");
diff --git a/libs/react-components/src/lib/block/block.tsx b/libs/react-components/src/lib/block/block.tsx
index d2897e746..502c039b3 100644
--- a/libs/react-components/src/lib/block/block.tsx
+++ b/libs/react-components/src/lib/block/block.tsx
@@ -1,10 +1,15 @@
+import {
+ GoabBlockAlignment,
+ GoabBlockDirection,
+ Margins,
+ Spacing,
+} from "@abgov/ui-components-common";
import { ReactNode } from "react";
-import { Alignment, Direction, Margins, Spacing } from "../../common/styling";
export interface WCProps extends Margins {
gap?: Spacing;
- direction?: Direction;
- alignment?: Alignment;
+ direction?: GoabBlockDirection;
+ alignment?: GoabBlockAlignment;
testid?: string;
}
@@ -19,18 +24,15 @@ declare global {
}
/* eslint-disable-next-line */
-export interface GoABlockProps extends Margins {
+export interface GoabBlockProps extends Margins {
gap?: Spacing;
- direction?: Direction;
- alignment?: Alignment;
+ direction?: GoabBlockDirection;
+ alignment?: GoabBlockAlignment;
testId?: string;
children?: ReactNode;
}
-// legacy
-export type BlockProps = GoABlockProps;
-
-export function GoABlock(props: GoABlockProps) {
+export function GoabBlock(props: GoabBlockProps) {
return (
{
+describe("GoAB Button", () => {
const buttonText = "Test Title";
- const noop = () => { /* do nothing */ };
+ const noop = () => {
+ /* do nothing */
+ };
it("should render the properties", () => {
const { container } = render(
- {
mr="m"
mb="l"
ml="xl"
- />
+ />,
);
const el = container.querySelector("goa-button");
@@ -40,7 +43,13 @@ describe("GoA Button", () => {
it("should render content", () => {
const { baseElement } = render(
- { /* do nothing */ }}>{buttonText}
+ {
+ /* do nothing */
+ }}
+ >
+ {buttonText}
+ ,
);
expect(baseElement).toBeTruthy();
@@ -48,12 +57,12 @@ describe("GoA Button", () => {
});
describe("size", () => {
- (["compact", "normal"] as const).forEach((size: ButtonSize) => {
+ (["compact", "normal"] as const).forEach((size: GoabButtonSize) => {
it(`should render ${size} size`, async () => {
const { container } = render(
-
+
Button
-
+ ,
);
const button = container.querySelector("goa-button");
@@ -65,27 +74,25 @@ describe("GoA Button", () => {
describe("type", () => {
(["primary", "submit", "secondary", "tertiary"] as const).forEach(
- (type: ButtonType) => {
+ (type: GoabButtonType) => {
it(`should render ${type} type`, async () => {
const { container } = render(
-
+
Button
-
+ ,
);
const button = container.querySelector("goa-button");
expect(button).toBeTruthy();
expect(button?.getAttribute("type")).toEqual(type);
});
- }
+ },
);
});
it("responds to events", async () => {
const onClick = vi.fn();
- const { container } = render(
- Button
- );
+ const { container } = render(Button);
const button = container.querySelector("goa-button");
expect(button).toBeTruthy();
button && fireEvent(button, new CustomEvent("_click"));
diff --git a/libs/react-components/src/lib/button/button.tsx b/libs/react-components/src/lib/button/button.tsx
index 44b201357..6f69c8a5d 100644
--- a/libs/react-components/src/lib/button/button.tsx
+++ b/libs/react-components/src/lib/button/button.tsx
@@ -1,26 +1,16 @@
import { ReactNode, useEffect, useRef } from "react";
-import { Margins } from "../../common/styling";
-import { GoAIconType } from "../icon/icon";
-
-export type GoAButtonType =
- | "primary"
- | "submit"
- | "secondary"
- | "tertiary"
- | "start";
-
-export type GoAButtonSize = "compact" | "normal";
-export type GoAButtonVariant = "normal" | "destructive";
-
-// legacy type names
-export type ButtonType = GoAButtonType;
-export type ButtonSize = GoAButtonSize;
-export type ButtonVariant = GoAButtonVariant;
+import {
+ GoabButtonSize,
+ GoabButtonType,
+ GoabButtonVariant,
+ GoabIconType,
+ Margins,
+} from "@abgov/ui-components-common";
interface WCProps extends Margins {
- type?: GoAButtonType;
- size?: GoAButtonSize;
- variant?: GoAButtonVariant;
+ type?: GoabButtonType;
+ size?: GoabButtonSize;
+ variant?: GoabButtonVariant;
disabled?: boolean;
leadingicon?: string;
trailingicon?: string;
@@ -39,20 +29,20 @@ declare global {
}
}
-export interface GoAButtonProps extends Margins {
- type?: GoAButtonType;
- size?: GoAButtonSize;
- variant?: GoAButtonVariant;
+export interface GoabButtonProps extends Margins {
+ type?: GoabButtonType;
+ size?: GoabButtonSize;
+ variant?: GoabButtonVariant;
disabled?: boolean;
- leadingIcon?: GoAIconType;
- trailingIcon?: GoAIconType;
+ leadingIcon?: GoabIconType;
+ trailingIcon?: GoabIconType;
width?: string;
onClick?: () => void;
testId?: string;
children?: ReactNode;
}
-export function GoAButton({
+export function GoabButton({
disabled = false,
type = "primary",
size,
@@ -67,7 +57,7 @@ export function GoAButton({
mr,
mb,
ml,
-}: GoAButtonProps): JSX.Element {
+}: GoabButtonProps): JSX.Element {
const el = useRef(null);
useEffect(() => {
if (!el.current) {
@@ -108,4 +98,4 @@ export function GoAButton({
);
}
-export default GoAButton;
+export default GoabButton;
diff --git a/libs/react-components/src/lib/calendar/calendar.tsx b/libs/react-components/src/lib/calendar/calendar.tsx
index a1bf896fe..d04bd4dcf 100644
--- a/libs/react-components/src/lib/calendar/calendar.tsx
+++ b/libs/react-components/src/lib/calendar/calendar.tsx
@@ -1,5 +1,5 @@
import { useEffect, useRef } from "react";
-import { Margins } from "../../common/styling";
+import { GoabCalendarOnChangeDetail, Margins } from "@abgov/ui-components-common";
interface WCProps extends Margins {
ref: React.RefObject;
@@ -19,17 +19,16 @@ declare global {
}
}
}
-
-export interface GoACalendarProps extends Margins {
+export interface GoabCalendarProps extends Margins {
name?: string;
value?: Date;
min?: Date;
max?: Date;
testId?: string;
- onChange: (name: string, value: Date) => void;
+ onChange: (details: GoabCalendarOnChangeDetail) => void;
}
-export function GoACalendar({
+export function GoabCalendar({
name,
value,
min,
@@ -40,7 +39,7 @@ export function GoACalendar({
mb,
ml,
onChange,
-}: GoACalendarProps): JSX.Element {
+}: GoabCalendarProps): JSX.Element {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) {
@@ -48,7 +47,10 @@ export function GoACalendar({
}
const current = ref.current;
current.addEventListener("_change", (e: Event) => {
- onChange(name || "", (e as CustomEvent).detail.value);
+ onChange({
+ name: name || "",
+ value: (e as CustomEvent).detail.value,
+ });
});
});
@@ -68,4 +70,4 @@ export function GoACalendar({
);
}
-export default GoACalendar;
+export default GoabCalendar;
diff --git a/libs/react-components/src/lib/callout/callout.spec.tsx b/libs/react-components/src/lib/callout/callout.spec.tsx
index f87ae96ad..fe83ffa22 100644
--- a/libs/react-components/src/lib/callout/callout.spec.tsx
+++ b/libs/react-components/src/lib/callout/callout.spec.tsx
@@ -1,11 +1,11 @@
import React from "react";
import { render } from "@testing-library/react";
-import GoACallout from "./callout";
+import GoabCallout from "./callout";
describe("Callout", () => {
test("Callout shall render", async () => {
const result = render(
- {
>
Information to the user goes in the content. Information can include markup as
desired.
- ,
+ ,
);
const el = result.container.querySelector("goa-callout");
@@ -47,13 +47,13 @@ describe("Callout", () => {
testCases.forEach(({ ariaLive, expected }) => {
const result = render(
-
Test content
- ,
+ ,
);
const el = result.container.querySelector("goa-callout");
diff --git a/libs/react-components/src/lib/callout/callout.tsx b/libs/react-components/src/lib/callout/callout.tsx
index ee0fff5e3..381488376 100644
--- a/libs/react-components/src/lib/callout/callout.tsx
+++ b/libs/react-components/src/lib/callout/callout.tsx
@@ -1,22 +1,14 @@
-import { Margins } from "../../common/styling";
+import { GoabCalloutAriaLive, GoabCalloutSize, GoabCalloutType, Margins } from "@abgov/ui-components-common";
-export type GoACalloutType =
- | "important"
- | "information"
- | "event"
- | "success"
- | "emergency";
-
-export type GoACalloutSize = "medium" | "large";
-export type GoACalloutAriaLive = "off" | "polite" | "assertive";
+// TODO: move to ts
export type GoACalloutIconTheme = "outline" | "filled";
interface WCProps extends Margins {
heading?: string;
- type?: GoACalloutType;
- size?: GoACalloutSize;
+ type?: GoabCalloutType;
+ size?: GoabCalloutSize;
+ arialive?: GoabCalloutAriaLive;
maxwidth?: string;
- arialive?: GoACalloutAriaLive;
icontheme?: GoACalloutIconTheme;
testid?: string;
}
@@ -30,20 +22,18 @@ declare global {
}
}
-export interface GoACalloutProps extends Margins {
+export interface GoabCalloutProps extends Margins {
heading?: string;
- type?: GoACalloutType;
- size?: GoACalloutSize;
+ type?: GoabCalloutType;
+ size?: GoabCalloutSize;
iconTheme?: GoACalloutIconTheme;
maxWidth?: string;
testId?: string;
- ariaLive?: GoACalloutAriaLive;
+ ariaLive?: GoabCalloutAriaLive;
children?: React.ReactNode;
}
-export type CalloutProps = GoACalloutProps;
-
-export const GoACallout = ({
+export const GoabCallout = ({
heading,
type = "information",
iconTheme = "outline",
@@ -56,7 +46,7 @@ export const GoACallout = ({
mr,
mb,
ml,
-}: GoACalloutProps) => {
+}: GoabCalloutProps) => {
return (
{children};
}
-export default GoACardActions;
+export default GoabCardActions;
diff --git a/libs/react-components/src/lib/card/card-content.tsx b/libs/react-components/src/lib/card/card-content.tsx
index 1dbdbd9a9..fb3958bf9 100644
--- a/libs/react-components/src/lib/card/card-content.tsx
+++ b/libs/react-components/src/lib/card/card-content.tsx
@@ -7,12 +7,12 @@ declare global {
}
}
-export interface GoACardContentProps {
+export interface GoabCardContentProps {
children?: React.ReactNode;
}
-export function GoACardContent({ children }: GoACardContentProps): JSX.Element {
+export function GoabCardContent({ children }: GoabCardContentProps): JSX.Element {
return {children};
}
-export default GoACardContent;
+export default GoabCardContent;
diff --git a/libs/react-components/src/lib/card/card-group.tsx b/libs/react-components/src/lib/card/card-group.tsx
index e323e4efc..866eee0b0 100644
--- a/libs/react-components/src/lib/card/card-group.tsx
+++ b/libs/react-components/src/lib/card/card-group.tsx
@@ -7,12 +7,12 @@ declare global {
}
}
-export interface GoACardGroupProps {
+export interface GoabCardGroupProps {
children?: React.ReactNode;
}
-export function GoACardGroup({ children }: GoACardGroupProps): JSX.Element {
+export function GoabCardGroup({ children }: GoabCardGroupProps): JSX.Element {
return {children};
}
-export default GoACardGroup;
+export default GoabCardGroup;
diff --git a/libs/react-components/src/lib/card/card-image.tsx b/libs/react-components/src/lib/card/card-image.tsx
index 51776b602..8499d9733 100644
--- a/libs/react-components/src/lib/card/card-image.tsx
+++ b/libs/react-components/src/lib/card/card-image.tsx
@@ -12,13 +12,13 @@ declare global {
}
}
-export interface GoACardImageProps {
+export interface GoabCardImageProps {
src: string;
height: string;
}
-export function GoACardImage({ src, height }: GoACardImageProps): JSX.Element {
+export function GoabCardImage({ src, height }: GoabCardImageProps): JSX.Element {
return ;
}
-export default GoACardImage;
+export default GoabCardImage;
diff --git a/libs/react-components/src/lib/card/card.spec.tsx b/libs/react-components/src/lib/card/card.spec.tsx
index 5edd11cb9..7014a5195 100644
--- a/libs/react-components/src/lib/card/card.spec.tsx
+++ b/libs/react-components/src/lib/card/card.spec.tsx
@@ -1,10 +1,10 @@
import { render } from "@testing-library/react";
-import GoACard from "./card";
+import GoabCard from "./card";
-describe("GoA Card", () => {
+describe("GoAB Card", () => {
it("should render properties", () => {
const { container } = render(
-
+ ,
);
const el = container.querySelector("goa-card");
diff --git a/libs/react-components/src/lib/card/card.tsx b/libs/react-components/src/lib/card/card.tsx
index 3285f207b..b8edeb310 100644
--- a/libs/react-components/src/lib/card/card.tsx
+++ b/libs/react-components/src/lib/card/card.tsx
@@ -1,4 +1,4 @@
-import { Margins } from "../../common/styling";
+import { Margins } from "@abgov/ui-components-common";
interface WCProps extends Margins {
elevation?: number;
@@ -15,14 +15,14 @@ declare global {
}
}
-export interface GoACardProps extends Margins {
+export interface GoabCardProps extends Margins {
elevation?: number;
width?: string;
testId?: string;
children?: React.ReactNode;
}
-export function GoACard({
+export function GoabCard({
elevation,
width,
mt,
@@ -31,7 +31,7 @@ export function GoACard({
ml,
testId,
children,
-}: GoACardProps): JSX.Element {
+}: GoabCardProps): JSX.Element {
return (
{
+describe("GoAB Checkbox", () => {
it("should render", () => {
const props: CheckboxProps = {
id: "abc",
@@ -23,7 +24,7 @@ describe("GoA Checkbox", () => {
ml: "xl",
};
- render();
+ render();
const checkbox = document.querySelector("goa-checkbox");
expect(checkbox).toBeTruthy();
@@ -43,7 +44,9 @@ describe("GoA Checkbox", () => {
});
it("should render with text description", () => {
- render();
+ render(
+ ,
+ );
const checkbox = document.querySelector("goa-checkbox");
expect(checkbox?.getAttribute("description")).toBe("description text");
@@ -51,18 +54,24 @@ describe("GoA Checkbox", () => {
it("should render with slot description", () => {
const result = render(
- description slot }/>);
+