@abgov/react-components 4.5.0 → 4.7.0

package/README.md

@@ -1,8 +1,8 @@
 # React UI Components
 
-This library contains react components from the Government of Alberta.
+![npm (scoped)](https://img.shields.io/npm/v/@abgov/react-components?color=%230081a2&label=react-components&style=flat-square)
 
-Add Dependencies
+This library contains react components from the Government of Alberta.
 
 ```bash
 npm i @abgov/react-components
@@ -23,8 +23,12 @@ Add the following to the head element
 ></script>
 ```
 
-Import the styles in the `src/index.css` file
+Import the web-component styles in the `src/index.css` file
 
 ```css
 @import "@abgov/web-components/index.css";
 ```
+
+---
+
+[Visit Design System](https://ui-components.alberta.ca)

package/index.d.ts

@@ -1,6 +1,10 @@
 import "@abgov/web-components";
+export * from "./lib/pages/pages";
 export type { GoAIconType } from "./lib/icon/icon";
 export type { GoABadgeType } from "./lib/badge/badge";
+export * from "./lib/accordion/accordion";
+export * from "./lib/form-step/form-step";
+export * from "./lib/form-stepper/form-stepper";
 export * from "./lib/app-header/app-header";
 export * from "./lib/badge/badge";
 export * from "./lib/block/block";
@@ -11,6 +15,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/details/details";
 export * from "./lib/divider/divider";
 export * from "./lib/dropdown/dropdown";
 export * from "./lib/dropdown/dropdown-item";
@@ -31,6 +36,7 @@ export * from "./lib/one-column-layout/one-column-layout";
 export * from "./lib/page-block/page-block";
 export * from "./lib/radio-group/radio-group";
 export * from "./lib/pagination/pagination";
+export * from "./lib/popover/popover";
 export * from "./lib/skeleton/skeleton";
 export * from "./lib/spacer/spacer";
 export * from "./lib/spinner/spinner";

package/lib/accordion/accordion.d.ts

@@ -0,0 +1,27 @@
+import React, { FC, ReactNode } from "react";
+import { Margins } from "../../common/styling";
+declare type HeadingSize = "small" | "medium";
+interface WCProps extends Margins {
+    open?: boolean;
+    headingSize?: HeadingSize;
+    heading: string;
+    secondaryText?: string;
+    headingContent?: ReactNode;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-accordion": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props extends Margins {
+    open?: boolean;
+    headingSize?: HeadingSize;
+    secondaryText?: string;
+    heading: string;
+    headingContent?: ReactNode;
+    testid?: string;
+}
+export declare const GoAAccordion: FC<Props>;
+export default GoAAccordion;

package/lib/app-header/app-header.d.ts

@@ -16,6 +16,7 @@ interface Props {
     url?: string;
     maxContentWidth?: string;
     children?: React.ReactNode;
+    testId?: string;
 }
 export declare const GoAAppHeader: FC<Props>;
 export default GoAAppHeader;

package/lib/badge/badge.d.ts

@@ -11,7 +11,6 @@ interface WCProps extends Margins {
     type: GoABadgeType;
     icon?: boolean;
     content?: string;
-    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/block/block.d.ts

@@ -16,6 +16,7 @@ export interface BlockProps extends Margins {
     gap?: Spacing;
     direction?: Direction;
     alignment?: Alignment;
+    testId?: string;
     children?: ReactNode;
 }
 export declare function GoABlock(props: BlockProps): JSX.Element;

package/lib/button/button.d.ts

@@ -28,6 +28,7 @@ interface ButtonProps extends Margins {
     leadingIcon?: GoAIconType;
     trailingIcon?: GoAIconType;
     onClick?: () => void;
+    testId?: string;
     children?: ReactNode;
 }
 export declare const GoAButton: FC<ButtonProps>;

package/lib/button-group/button-group.d.ts

@@ -16,6 +16,7 @@ declare global {
 interface ButtonGroupProps extends Margins {
     alignment: Alignment;
     gap?: Gap;
+    testId?: string;
     children?: React.ReactNode;
 }
 export declare const GoAButtonGroup: FC<ButtonGroupProps>;

package/lib/callout/callout.d.ts

@@ -15,7 +15,8 @@ declare global {
 export interface CalloutProps extends Margins {
     heading?: string;
     type?: CalloutType;
+    testId?: string;
     children?: React.ReactNode;
 }
-export declare const GoACallout: ({ heading, type, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
+export declare const GoACallout: ({ heading, type, testId, children, mt, mr, mb, ml, }: CalloutProps) => JSX.Element;
 export default GoACallout;

package/lib/card/card.d.ts

@@ -15,6 +15,7 @@ declare global {
 interface Props extends Margins {
     elevation?: number;
     width?: string;
+    testId?: string;
     children?: React.ReactNode;
 }
 export declare const GoACard: FC<Props>;

package/lib/chip/chip.d.ts

@@ -23,6 +23,7 @@ interface Props extends Margins {
     error?: boolean;
     content: string;
     variant?: ChipVariant;
+    testId?: string;
 }
-export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick, mt, mr, mb, ml, }: Props) => JSX.Element;
+export declare const GoAChip: ({ leadingIcon, deletable, error, variant, content, onClick, mt, mr, mb, ml, testId, }: Props) => JSX.Element;
 export default GoAChip;

package/lib/circular-progress/circular-progress.d.ts

@@ -21,6 +21,7 @@ export interface CircularProgressProps {
     message?: string;
     visible?: boolean;
     progress?: number;
+    testId?: string;
 }
-export declare const GoACircularProgress: ({ visible, message, progress, variant, size, }: CircularProgressProps) => JSX.Element;
+export declare const GoACircularProgress: ({ visible, message, progress, variant, size, testId, }: CircularProgressProps) => JSX.Element;
 export default GoACircularProgress;

package/lib/container/container.d.ts

@@ -22,6 +22,7 @@ interface Props extends Margins {
     padding?: ContainerPadding;
     actions?: ReactNode;
     children?: ReactNode;
+    testId?: string;
 }
 export declare const GoAContainer: FC<Props>;
 export default GoAContainer;

package/lib/details/details.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    heading: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-details": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface DetailsProps extends Margins {
+    heading: string;
+    children: ReactNode;
+}
+export declare function GoADetails(props: DetailsProps): JSX.Element;
+export default GoADetails;

package/lib/divider/divider.d.ts

@@ -7,5 +7,7 @@ declare global {
         }
     }
 }
-export declare function GoADivider(props: Margins): JSX.Element;
+export declare function GoADivider(props: Margins & {
+    testId?: string;
+}): JSX.Element;
 export default GoADivider;

package/lib/dropdown/dropdown.d.ts

@@ -13,7 +13,6 @@ interface WCProps extends Margins {
     name?: string;
     native?: boolean;
     placeholder?: string;
-    testid?: string;
     value?: string;
     width?: string;
 }

package/lib/footer/footer.d.ts

@@ -12,6 +12,7 @@ declare global {
 export interface FooterProps {
     maxContentWidth?: string;
     children?: ReactNode;
+    testId?: string;
 }
-export declare function GoAAppFooter({ maxContentWidth, children }: FooterProps): JSX.Element;
+export declare function GoAAppFooter({ maxContentWidth, children, testId, }: FooterProps): JSX.Element;
 export default GoAAppFooter;

package/lib/footer-nav-section/footer-nav-section.d.ts

@@ -13,7 +13,8 @@ declare global {
 interface FooterNavSectionProps {
     maxColumnCount?: number;
     heading?: string;
+    testId?: string;
     children?: ReactNode;
 }
-export declare function GoAAppFooterNavSection({ heading, maxColumnCount, children, }: FooterNavSectionProps): JSX.Element;
+export declare function GoAAppFooterNavSection({ heading, maxColumnCount, testId, children, }: FooterNavSectionProps): JSX.Element;
 export default GoAAppFooterNavSection;

package/lib/form/form-item.d.ts

@@ -20,6 +20,7 @@ interface GoAFormItemProps extends Margins {
     error?: string;
     helpText?: string;
     children?: React.ReactNode;
+    testId?: string;
 }
 export declare const GoAFormItem: FC<GoAFormItemProps>;
 export default GoAFormItem;

package/lib/form-step/form-step.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+declare type Status = "complete" | "incomplete";
+interface WCProps {
+    text: string;
+    status?: Status;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-form-step": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface FormStepProps {
+    text: string;
+    status?: Status;
+}
+export declare function GoAFormStep(props: FormStepProps): JSX.Element;
+export default GoAFormStep;

package/lib/form-stepper/form-stepper.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    ref?: React.MutableRefObject<HTMLElement | null>;
+    step?: number;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-form-stepper": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface FormStepperProps extends Margins {
+    step?: number;
+    testId: string;
+    children?: ReactNode;
+    onChange?: (step: number) => void;
+}
+export declare function GoAFormStepper({ testId, step, mt, mb, ml, mr, onChange, children, }: FormStepperProps): JSX.Element;
+export default GoAFormStepper;

package/lib/grid/grid.d.ts

@@ -14,6 +14,7 @@ declare global {
 interface Props extends Margins {
     gap?: Spacing;
     minChildWidth: string;
+    testId?: string;
     children?: React.ReactNode;
 }
 export declare const GoAGrid: FC<Props>;

package/lib/hero-banner/hero-banner.d.ts

@@ -15,6 +15,7 @@ interface Props {
     heading: string;
     backgroundUrl: string;
     minHeight?: string;
+    testId?: string;
     children?: React.ReactNode;
 }
 export declare const GoAHeroBanner: FC<Props>;

package/lib/icon/icon.d.ts

@@ -28,11 +28,12 @@ interface Props extends Margins {
     type: GoAIconType;
     size?: IconSize;
     theme?: IconTheme;
+    testId?: string;
 }
 interface WCProps extends Margins {
     type: GoAIconType;
     theme?: IconTheme;
     size?: IconSize;
 }
-export declare function GoAIcon({ type, theme, size, mt, mr, mb, ml, }: Props): JSX.Element;
+export declare function GoAIcon({ type, theme, size, mt, mr, mb, ml, testId, }: Props): JSX.Element;
 export {};

package/lib/icon-button/icon-button.d.ts

@@ -25,6 +25,7 @@ interface Props extends Margins {
     disabled?: boolean;
     children?: React.ReactNode;
     onClick?: () => void;
+    testId?: string;
 }
 export declare const GoAIconButton: FC<Props>;
 export {};

package/lib/input/input.d.ts

@@ -24,7 +24,6 @@ interface WCProps extends Margins {
     width?: string;
     prefix?: string;
     suffix?: string;
-    testid?: string;
     arialabel?: string;
     min?: string | number;
     max?: string | number;

package/lib/microsite-header/microsite-header.d.ts

@@ -16,6 +16,7 @@ export interface HeaderProps {
     type: ServiceLevel;
     version?: string;
     feedbackUrl?: string;
+    testId?: string;
 }
 export declare const GoAMicrositeHeader: FC<HeaderProps>;
 export default GoAMicrositeHeader;

package/lib/modal/modal.d.ts

@@ -3,7 +3,7 @@ export declare type ModalTransition = "fast" | "slow" | "none";
 export declare type CalloutVariant = "information" | "important" | "emergency" | "success" | "event";
 interface WCProps {
     ref: React.RefObject<HTMLElement>;
-    heading?: string;
+    heading?: React.ReactNode;
     open?: boolean;
     width?: string;
     closable?: boolean;
@@ -19,7 +19,7 @@ declare global {
     }
 }
 interface Props {
-    heading?: string;
+    heading?: React.ReactNode;
     width?: string;
     actions?: React.ReactElement;
     onClose?: () => void;
@@ -28,6 +28,7 @@ interface Props {
     open?: boolean;
     type?: string;
     calloutVariant?: CalloutVariant;
+    testId?: string;
 }
 export declare const GoAModal: FC<Props>;
 export default GoAModal;

package/lib/notification/notification.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export declare type NotificationType = "important" | "information" | "event" | "emergency";
 interface WCProps {
+    ref: React.RefObject<HTMLElement>;
     type: NotificationType;
 }
 declare global {
@@ -13,6 +14,8 @@ declare global {
 interface Props {
     type?: NotificationType;
     children?: React.ReactNode;
+    onDismiss?: () => void;
+    testId?: string;
 }
-export declare const GoANotification: ({ type, children }: Props) => JSX.Element;
+export declare const GoANotification: ({ type, children, testId, onDismiss, }: Props) => JSX.Element;
 export default GoANotification;

package/lib/page-block/page-block.d.ts

@@ -11,6 +11,7 @@ declare global {
 }
 export interface PageBlockProps {
     width: "full" | string;
+    testId?: string;
     children?: ReactNode;
 }
 export declare const GoAPageBlock: FC<PageBlockProps>;

package/lib/pages/pages.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from "react";
+import { Margins } from "../../common/styling";
+interface WCProps extends Margins {
+    current?: number;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-pages": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface PagesProps extends Margins {
+    current?: number;
+    children?: ReactNode;
+}
+export declare function GoAPages(props: PagesProps): JSX.Element;
+export default GoAPages;

package/lib/pagination/pagination.d.ts

@@ -20,6 +20,7 @@ export interface PaginationProps extends Margins {
     pageNumber: number;
     variant?: "all" | "links-only";
     onChange: (page: number) => void;
+    testId?: string;
 }
 export declare function GoAPagination(props: PaginationProps): JSX.Element;
 export default GoAPagination;

package/lib/popover/popover.d.ts

@@ -0,0 +1,20 @@
+import React, { FC, ReactNode } from "react";
+interface WCProps {
+    maxwidth?: string;
+    padded?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-popover": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    target?: ReactNode;
+    testId?: string;
+    maxWidth?: string;
+    padded?: boolean;
+}
+export declare const GoAPopover: FC<Props>;
+export default GoAPopover;

package/lib/skeleton/skeleton.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Margins } from "../../common/styling";
-export declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile";
+export declare type SkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile" | "article";
 declare type SkeletonSize = 1 | 2 | 3 | 4;
 interface WCProps extends Margins {
     maxwidth?: string;
@@ -20,6 +20,7 @@ export interface SkeletonProps extends Margins {
     size?: SkeletonSize;
     lineCount?: number;
     type: SkeletonType;
+    testId?: string;
 }
-export declare const GoASkeleton: ({ maxWidth, size, lineCount, type, mt, mr, mb, ml, }: SkeletonProps) => JSX.Element;
+export declare const GoASkeleton: ({ maxWidth, size, lineCount, type, testId, mt, mr, mb, ml, }: SkeletonProps) => JSX.Element;
 export default GoASkeleton;

package/lib/spacer/spacer.d.ts

@@ -14,6 +14,7 @@ declare global {
 export interface SpacerProps {
     hSpacing?: Spacing | "fill";
     vSpacing?: Spacing;
+    testId?: string;
 }
 export declare function GoASpacer(props: SpacerProps): JSX.Element;
 export default GoASpacer;

package/lib/spinner/spinner.d.ts

@@ -6,7 +6,6 @@ interface WCProps {
     type: SpinnerType;
     invert?: boolean;
     progress?: number;
-    testid?: string;
 }
 declare global {
     namespace JSX {

package/lib/table/table.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 import { Margins } from "../../common/styling";
 export declare type TableVariant = "normal" | "relaxed";
 interface WCProps extends Margins {
+    ref?: React.MutableRefObject<HTMLElement | null>;
     width?: string;
     stickyheader?: boolean;
     variant?: TableVariant;
@@ -15,7 +16,9 @@ declare global {
 }
 export interface TableProps extends Margins {
     width?: string;
+    onSort?: (sortBy: string, sortDir: number) => void;
     variant?: TableVariant;
+    testId?: string;
     children: ReactNode;
 }
 export declare function GoATable(props: TableProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.5.0",
+  "version": "4.7.0",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"