Skip to content

Commit

Permalink
Merge pull request #2234 from GovAlta/alpha
Browse files Browse the repository at this point in the history
Production Release - October 30 / 2024
ArakTaiRoth authored Oct 30, 2024
2 parents eacdfc9 + f299bb9 commit e8ca5bb
Showing 43 changed files with 3,347 additions and 1,641 deletions.
3 changes: 3 additions & 0 deletions libs/react-components/package.exp.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"sideEffects": false
}
7 changes: 6 additions & 1 deletion libs/react-components/package.json
Original file line number Diff line number Diff line change
@@ -29,6 +29,11 @@
"import": "./index.mjs",
"require": "./index.js",
"types": "./index.d.ts"
},
"./experimental": {
"import": "./experimental.mjs",
"require": "./experimental.js",
"types": "./experimental/index.d.ts"
}
}
}
}
4 changes: 3 additions & 1 deletion libs/react-components/project.json
Original file line number Diff line number Diff line change
@@ -21,7 +21,9 @@
],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/libs/react-components"
"outputPath": "dist/libs/react-components",
"project": "libs/react-components/src/package.json",
"entryFile": "libs/react-components/src/index.ts"
},
"configurations": {
"development": {
2 changes: 1 addition & 1 deletion libs/react-components/src/experimental/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
// experimental imports
export * from "./resizable-panel/ResizablePanel";
export * from "../lib/drawer/drawer";
5 changes: 5 additions & 0 deletions libs/react-components/src/lib/accordion/accordion.tsx
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import { ReactNode } from "react";
import { Margins } from "../../common/styling";

export type GoAHeadingSize = "small" | "medium";
export type GoAIconPosition = "left" | "right";

interface WCProps extends Margins {
open?: boolean;
@@ -11,6 +12,7 @@ interface WCProps extends Margins {
headingContent?: ReactNode;
maxwidth?: string;
testid?: string;
iconposition?: GoAIconPosition;
}

declare global {
@@ -30,6 +32,7 @@ export interface GoAAccordionProps extends Margins {
headingContent?: ReactNode;
maxWidth?: string;
testid?: string;
iconPosition?: GoAIconPosition;
children: ReactNode;
}

@@ -39,6 +42,7 @@ export function GoAAccordion({
headingSize,
secondaryText,
headingContent,
iconPosition,
maxWidth,
testid,
children,
@@ -53,6 +57,7 @@ export function GoAAccordion({
headingSize={headingSize}
heading={heading}
secondaryText={secondaryText}
iconposition={iconPosition}
maxwidth={maxWidth}
testid={testid}
mt={mt}
11 changes: 11 additions & 0 deletions libs/react-components/src/lib/app-header/app-header.spec.tsx
Original file line number Diff line number Diff line change
@@ -10,4 +10,15 @@ describe("GoAAppHeader", () => {
const header = baseElement.querySelector("goa-app-header");
expect(header).toBeTruthy();
});
it("should dispatch onMobileMenuClick if provided", () => {
const onMobileMenuClick = vi.fn();
const { baseElement } = render(
<GoAAppHeader heading="Test heading" url="test" onMenuClick={onMobileMenuClick} />
);

const header = baseElement.querySelector("goa-app-header");
expect(header).toBeTruthy();
header?.dispatchEvent(new Event("_menuClick"));
expect(onMobileMenuClick).toHaveBeenCalled();
})
});
27 changes: 27 additions & 0 deletions libs/react-components/src/lib/app-header/app-header.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { useEffect, useRef } from "react";

interface WCProps {
heading?: string;
url?: string;
maxcontentwidth?: string;
fullmenubreakpoint?: number;
hasmenuclickhandler?: boolean;
ref: React.RefObject<HTMLElement>;
testid?: string;
}

@@ -21,6 +25,7 @@ export interface GoAAppHeaderProps {
maxContentWidth?: string;
fullMenuBreakpoint?: number;
children?: React.ReactNode;
onMenuClick?: () => void;
testId?: string;
}

@@ -31,14 +36,36 @@ export function GoAAppHeader({
fullMenuBreakpoint,
testId,
children,
onMenuClick,
}: GoAAppHeaderProps): JSX.Element {
const el = useRef<HTMLElement>(null);

useEffect(() => {
if (!el.current) {
return;
}
if (!onMenuClick) {
return;
}
const current = el.current;
const listener = () => {
onMenuClick();
}
current.addEventListener("_menuClick", listener);
return () => {
current.removeEventListener("_menuClick", listener);
}
}, [el, onMenuClick]);

return (
<goa-app-header
ref={el}
heading={heading}
url={url}
fullmenubreakpoint={fullMenuBreakpoint}
maxcontentwidth={maxContentWidth}
testid={testId}
hasmenuclickhandler={!!onMenuClick}
>
{children}
</goa-app-header>
5 changes: 5 additions & 0 deletions libs/react-components/src/lib/callout/callout.tsx
Original file line number Diff line number Diff line change
@@ -9,13 +9,15 @@ export type GoACalloutType =

export type GoACalloutSize = "medium" | "large";
export type GoACalloutAriaLive = "off" | "polite" | "assertive";
export type GoACalloutIconTheme = "outline" | "filled";

interface WCProps extends Margins {
heading?: string;
type?: GoACalloutType;
size?: GoACalloutSize;
maxwidth?: string;
arialive?: GoACalloutAriaLive;
icontheme?: GoACalloutIconTheme;
testid?: string;
}

@@ -32,6 +34,7 @@ export interface GoACalloutProps extends Margins {
heading?: string;
type?: GoACalloutType;
size?: GoACalloutSize;
iconTheme?: GoACalloutIconTheme;
maxWidth?: string;
testId?: string;
ariaLive?: GoACalloutAriaLive;
@@ -43,6 +46,7 @@ export type CalloutProps = GoACalloutProps;
export const GoACallout = ({
heading,
type = "information",
iconTheme = "outline",
size = "large",
maxWidth,
testId,
@@ -60,6 +64,7 @@ export const GoACallout = ({
size={size}
maxwidth={maxWidth}
arialive={ariaLive}
icontheme={iconTheme}
mt={mt}
mr={mr}
mb={mb}
32 changes: 32 additions & 0 deletions libs/react-components/src/lib/drawer/drawer.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { render, waitFor } from "@testing-library/react";
import { describe, it } from "vitest";
import GoADrawer from "./drawer";

const noop = () => {/* nothing */}

describe("Drawer", () => {
it("renders", async () => {
const content = render(
<GoADrawer
open={false}
position="bottom"
heading="The heading"
maxSize="50ch"
testId="the testid"
onClose={noop}
>
The content
</GoADrawer>
);

const el = content.container.querySelector("goa-drawer");
expect(el).toBeTruthy();
await waitFor(() => {
expect(el?.getAttribute("open")).toBeNull();
expect(el?.getAttribute("position")).toBe("bottom");
expect(el?.getAttribute("heading")).toBe("The heading");
expect(el?.getAttribute("maxsize")).toBe("50ch");
expect(el?.getAttribute("data-testid")).toBe("the testid");
})
});
});
71 changes: 71 additions & 0 deletions libs/react-components/src/lib/drawer/drawer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { ReactNode, useEffect, useRef } from "react";

type DrawerPosition = "bottom" | "left" | "right" | undefined;
type DrawerSizeUnit = "px" | "rem" | "ch" | "vh" | "vw";
type DrawerSize = `${number}${DrawerSizeUnit}` | undefined;

interface WCProps {
open: boolean | undefined;
position: DrawerPosition;
heading?: string;
maxsize?: DrawerSize;
testid?: string;
ref: React.RefObject<HTMLElement>;
}

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IntrinsicElements {
"goa-drawer": WCProps & React.HTMLAttributes<HTMLElement>;
}
}
}

export interface GoADrawerProps {
open: boolean;
position: DrawerPosition;
heading?: string;
maxSize?: DrawerSize;
testId?: string;
children: ReactNode;
onClose: () => void;
}

export function GoADrawer({
open,
position,
heading,
maxSize,
testId,
children,
onClose,
}: GoADrawerProps): JSX.Element {
const el = useRef<HTMLElement>(null);

useEffect(() => {
if (!el?.current || !onClose) {
return;
}
el.current?.addEventListener("_close", onClose)
return () => {
el.current?.removeEventListener("_close", onClose)
}
}, [el, onClose])

return (
<goa-drawer
ref={el}
open={open ? true : undefined}
position={position}
heading={heading}
maxsize={maxSize}
data-testid={testId}
>
{children}
</goa-drawer>
);
}

export default GoADrawer;
Original file line number Diff line number Diff line change
@@ -10,4 +10,12 @@ describe("SideMenuGroup", () => {
expect(el?.getAttribute("heading")).toBe("some header");
expect(el?.getAttribute("testid")).toBe("foo");
});
it("should render icon if provided", () => {
const { baseElement } = render(
<SideMenuGroup heading={"Some header"} testId={"foo"} icon={"accessibility"} />,
);

const el = baseElement.querySelector("goa-side-menu-group");
expect(el?.getAttribute("icon")).toBe("accessibility");
})
});
14 changes: 12 additions & 2 deletions libs/react-components/src/lib/side-menu-group/side-menu-group.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { ReactNode } from "react";
import { GoAIconType } from "../icon/icon";
import { Margins } from "../../common/styling";

interface WCProps {
interface WCProps extends Margins {
heading: string;
icon?: GoAIconType;
testid?: string;

}

declare global {
@@ -16,8 +20,9 @@ declare global {
}

/* eslint-disable-next-line */
export interface GoASideMenuGroupProps {
export interface GoASideMenuGroupProps extends Margins {
heading: string;
icon?: GoAIconType;
testId?: string;
children?: ReactNode;
}
@@ -26,7 +31,12 @@ export function GoASideMenuGroup(props: GoASideMenuGroupProps): JSX.Element {
return (
<goa-side-menu-group
heading={props.heading}
icon={props.icon}
testid={props.testId}
mt={props.mt}
mr={props.mr}
mb={props.mb}
ml={props.ml}
>
{props.children}
</goa-side-menu-group>
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ describe("ThreeColumnLayout", () => {
expect(baseElement.innerHTML).toContain(
"Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
);
expect(baseElement.innerHTML).toContain("<goa-app-header>");
expect(baseElement.querySelector("goa-app-header")).toBeTruthy();
expect(baseElement.innerHTML).toContain("<goa-app-footer>");
expect(baseElement.querySelectorAll("[slot=nav] a").length).toEqual(5);

Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ describe("TwoColumnLayout", () => {
expect(baseElement.innerHTML).toContain(
"Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat."
);
expect(baseElement.innerHTML).toContain("<goa-app-header>");
expect(baseElement.querySelector("goa-app-header")).toBeTruthy();
expect(baseElement.innerHTML).toContain("<goa-app-footer>");
expect(baseElement.querySelectorAll("[slot=nav] a").length).toEqual(5);
});
11 changes: 11 additions & 0 deletions libs/react-components/tsconfig.exp.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"extends": "./tsconfig.lib.json",
"include": [
"src/experimental/**/*.js",
"src/experimental/**/*.jsx",
"src/experimental/**/*.ts",
"src/experimental/**/*.tsx"
]
}


8 changes: 2 additions & 6 deletions libs/react-components/vite.config.ts
Original file line number Diff line number Diff line change
@@ -14,10 +14,7 @@ export default defineConfig({
nxViteTsPaths(),
dts({
entryRoot: "src",
tsConfigFilePath: path.join(__dirname, "tsconfig.lib.json"),
skipDiagnostics: false,
formats: ["es", "cjs"],
filename: "index.d.ts"
tsconfigPath: path.join(__dirname, "tsconfig.lib.json"),
}),
],

@@ -34,9 +31,8 @@ export default defineConfig({
emptyOutDir: true,
lib: {
// Could also be a dictionary or array of multiple entry points.
entry: "src/index.ts",
entry: { index: "src/index.ts", experimental: "src/experimental/index.ts" },
name: "react-components",
fileName: "index",
// Change this to the formats you want to support.
// Don't forget to update your package.json as well.
formats: ["es", "cjs"],
Loading

0 comments on commit e8ca5bb

Please sign in to comment.