@abgov/react-components 4.0.0-alpha.108 → 4.0.0-alpha.109

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

@@ -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/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/skeleton/skeleton.d.ts

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

@@ -16,6 +16,7 @@ declare global {
 export interface TableProps extends Margins {
     width?: string;
     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.0.0-alpha.108",
+  "version": "4.0.0-alpha.109",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -13119,8 +13119,12 @@ function instance$a($$self, $$props, $$invalidate) {
     validateType(type);
   });
 
-  function close() {
+  function close(e) {
     $$invalidate(1, show = false);
+    e.target.dispatchEvent(new CustomEvent("_dismiss", {
+      composed: true
+    }));
+    e.stopPropagation();
   }
 
   $$self.$$set = $$props => {
@@ -16188,7 +16192,7 @@ function instance$2($$self, $$props, $$invalidate) {
 class TextArea extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
+    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
   }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
     init(this, {
       target: this.shadowRoot,
@@ -17190,12 +17194,14 @@ const GoAAppHeader = ({
   heading,
   url,
   maxContentWidth,
+  testId,
   children
 }) => {
   return jsx("goa-app-header", Object.assign({
     heading: heading,
     url: url,
-    maxcontentwidth: maxContentWidth
+    maxcontentwidth: maxContentWidth,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17215,7 +17221,7 @@ const GoABadge = ({
     type: type,
     content: content,
     icon: icon,
-    testid: testId,
+    "data-testid": testId,
     mt: mt,
     mr: mr,
     mb: mb,
@@ -17327,7 +17333,8 @@ function GoABlock(props) {
     mt: props.mt,
     mr: props.mr,
     mb: props.mb,
-    ml: props.ml
+    ml: props.ml,
+    "data-testid": props.testId
   }, {
     children: props.children
   }), void 0);
@@ -17336,6 +17343,7 @@ function GoABlock(props) {
 const GoAButtonGroup = ({
   alignment,
   gap,
+  testId,
   children,
   mt,
   mr,
@@ -17348,7 +17356,8 @@ const GoAButtonGroup = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17361,6 +17370,7 @@ const GoAButton = ({
   variant,
   leadingIcon,
   trailingIcon,
+  testId,
   children,
   onClick,
   mt,
@@ -17397,6 +17407,7 @@ const GoAButton = ({
     disabled: _disabled,
     leadingicon: leadingIcon,
     trailingicon: trailingIcon,
+    "data-testid": testId,
     mt: mt,
     mr: mr,
     mb: mb,
@@ -17409,6 +17420,7 @@ const GoAButton = ({
 const GoACallout = ({
   heading,
   type: _type = "information",
+  testId,
   children,
   mt,
   mr,
@@ -17421,7 +17433,8 @@ const GoACallout = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17492,7 +17505,8 @@ const GoAChip = ({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) => {
   const el = useRef(null);
   useEffect(() => {
@@ -17519,7 +17533,8 @@ const GoAChip = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, void 0);
 };
 
@@ -17528,14 +17543,16 @@ const GoACircularProgress = ({
   message,
   progress,
   variant,
-  size
+  size,
+  testId
 }) => {
   return jsx("goa-circular-progress", {
     visible: visible ? "true" : "false",
     message: message,
     progress: progress,
     variant: variant,
-    size: size
+    size: size,
+    "data-testid": testId
   }, void 0);
 };
 
@@ -17549,7 +17566,8 @@ const GoAContainer = ({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) => {
   return jsxs("goa-container", Object.assign({
     type: type,
@@ -17558,7 +17576,8 @@ const GoAContainer = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: [title && jsx("div", Object.assign({
       slot: "title"
@@ -17577,7 +17596,8 @@ function GoADivider(props) {
     mt: props.mt,
     mr: props.mr,
     mb: props.mb,
-    ml: props.ml
+    ml: props.ml,
+    "data-testid": props.testId
   }, void 0);
 }
 
@@ -17633,7 +17653,7 @@ const GoADropdown = props => {
     multiselect: props.multiselect,
     native: props.native,
     placeholder: props.placeholder,
-    testid: props.testId,
+    "data-testid": props.testId,
     width: props.width
   }, {
     children: props.children
@@ -17673,12 +17693,14 @@ function GoAAppFooterMetaSection({
 function GoAAppFooterNavSection({
   heading,
   maxColumnCount = 1,
+  testId,
   children
 }) {
   return jsx("goa-app-footer-nav-section", Object.assign({
     slot: "nav",
     heading: heading,
-    maxcolumncount: maxColumnCount
+    maxcolumncount: maxColumnCount,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17686,10 +17708,12 @@ function GoAAppFooterNavSection({
 
 function GoAAppFooter({
   maxContentWidth,
-  children
+  children,
+  testId
 }) {
   return jsx("goa-app-footer", Object.assign({
-    maxcontentwidth: maxContentWidth
+    maxcontentwidth: maxContentWidth,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17704,7 +17728,8 @@ const GoAFormItem = ({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) => {
   return jsx("goa-form-item", Object.assign({
     label: label,
@@ -17714,7 +17739,8 @@ const GoAFormItem = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17727,6 +17753,7 @@ const GoAGrid = ({
   mr,
   mb,
   ml,
+  testId,
   children
 }) => {
   return jsx("goa-grid", Object.assign({
@@ -17735,7 +17762,8 @@ const GoAGrid = ({
     minchildwidth: minChildWidth,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17745,12 +17773,14 @@ const GoAHeroBanner = ({
   heading,
   backgroundUrl,
   minHeight,
-  children
+  children,
+  testId
 }) => {
   return jsx("goa-hero-banner", Object.assign({
     heading: heading,
     backgroundurl: backgroundUrl,
-    minheight: minHeight
+    minheight: minHeight,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17773,6 +17803,7 @@ const GoAIconButton = ({
   onClick,
   size: _size = "medium",
   title,
+  testId,
   children,
   mt,
   mr,
@@ -17810,7 +17841,8 @@ const GoAIconButton = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17823,7 +17855,8 @@ function GoAIcon({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) {
   return jsx("goa-icon", {
     type: type,
@@ -17832,7 +17865,8 @@ function GoAIcon({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, void 0);
 }
 
@@ -18122,12 +18156,14 @@ const GoAInputRange = props => {
 const GoAMicrositeHeader = ({
   type,
   version,
-  feedbackUrl
+  feedbackUrl,
+  testId
 }) => {
   return jsx("goa-microsite-header", {
     type: type,
     version: version,
-    feedbackurl: feedbackUrl
+    feedbackurl: feedbackUrl,
+    "data-testid": testId
   }, void 0);
 };
 
@@ -18140,7 +18176,8 @@ const GoAModal = ({
   transition,
   type,
   calloutVariant,
-  onClose
+  onClose,
+  testId
 }) => {
   const el = useRef(null);
   useEffect(() => {
@@ -18172,7 +18209,8 @@ const GoAModal = ({
     scrollable: true,
     width: width,
     transition: transition,
-    calloutVariant: calloutVariant
+    calloutVariant: calloutVariant,
+    "data-testid": testId
   }, {
     children: [actions && jsx("div", Object.assign({
       slot: "actions"
@@ -18184,10 +18222,31 @@ const GoAModal = ({
 
 const GoANotification = ({
   type: _type = "information",
-  children
+  children,
+  testId,
+  onDismiss
 }) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+
+    const current = el.current;
+
+    const listener = () => {
+      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+
+    current.addEventListener("_dismiss", listener);
+    return () => {
+      current.removeEventListener("_dismiss", listener);
+    };
+  }, [el, onDismiss]);
   return jsx("goa-notification", Object.assign({
-    type: _type
+    ref: el,
+    type: _type,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -18201,7 +18260,8 @@ function GoAOneColumnLayout(props) {
 
 const GoAPageBlock = props => {
   return jsx("goa-page-block", Object.assign({
-    width: props.width
+    width: props.width,
+    "data-testid": props.testId
   }, {
     children: props.children
   }), void 0);
@@ -18314,7 +18374,8 @@ function GoAPagination(props) {
     mt: props.mt,
     mb: props.mb,
     ml: props.ml,
-    mr: props.mr
+    mr: props.mr,
+    "data-testid": props.testId
   }, void 0);
 }
 
@@ -18323,6 +18384,7 @@ const GoASkeleton = ({
   size,
   lineCount,
   type,
+  testId,
   mt,
   mr,
   mb,
@@ -18336,14 +18398,16 @@ const GoASkeleton = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, void 0);
 };
 
 function GoASpacer(props) {
   return jsx("goa-spacer", {
     hspacing: props.hSpacing,
-    vspacing: props.vSpacing
+    vspacing: props.vSpacing,
+    "data-testid": props.testId
   }, void 0);
 }
 
@@ -18359,7 +18423,7 @@ const GoASpinner = ({
     size: size,
     progress: progress,
     invert: invert,
-    testid: testId
+    "data-testid": testId
   }, void 0);
 };
 
@@ -18367,6 +18431,7 @@ function GoATable(props) {
   return jsx("goa-table", Object.assign({
     width: props.width,
     stickyheader: false,
+    "data-testid": props.testId,
     mt: props.mt,
     mb: props.mb,
     ml: props.ml,

package/react-components.umd.js

@@ -13165,8 +13165,12 @@
 	    validateType(type);
 	  });
 
-	  function close() {
+	  function close(e) {
 	    $$invalidate(1, show = false);
+	    e.target.dispatchEvent(new CustomEvent("_dismiss", {
+	      composed: true
+	    }));
+	    e.stopPropagation();
 	  }
 
 	  $$self.$$set = $$props => {
@@ -16235,7 +16239,7 @@
 	class TextArea extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
+	    this.shadowRoot.innerHTML = `<style>:host{--textarea-padding-vertical:0.625rem;--textarea-padding-horizontal:0.75rem;box-sizing:border-box;font-family:var(--goa-font-family-sans)}.container{position:relative;width:100%}@media(min-width: 640px){.container{max-width:var(--width)}}.goa-textarea{display:block;width:100%;box-sizing:border-box;outline:none;transition:box-shadow 0.1s ease-in;border:1px solid var(--goa-color-greyscale-700);border-radius:3px;color:var(--goa-color-greyscale-black, #ccc);padding:var(--textarea-padding-vertical) var(--textarea-padding-horizontal);font-size:var(--goa-font-size-4);font-family:var(--goa-font-family-sans);min-width:100%;resize:vertical}@media(min-width: 640px){.goa-textarea{min-width:0;width:var(--width)}}.goa-textarea[readonly]{cursor:pointer}.goa-textarea:hover{border-color:var(--goa-color-interactive-hover)}.goa-textarea:active,.goa-textarea:focus,.goa-textarea:focus-within{box-shadow:0 0 0 3px var(--goa-color-interactive-focus)}.goa-textarea:disabled,.goa-textarea:disabled:hover,.goa-textarea:disabled:active,.goa-textarea:disabled:focus{background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);cursor:default;box-shadow:none}.counter{position:absolute;right:0;padding-top:0.25rem;font-size:var(--goa-font-size-2)}.counter-error{color:var(--goa-color-interactive-error)
   }.error:hover,.error:focus,.error{border:2px solid var(--goa-color-interactive-error)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
@@ -17275,11 +17279,13 @@
 	  var heading = _a.heading,
 	      url = _a.url,
 	      maxContentWidth = _a.maxContentWidth,
+	      testId = _a.testId,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-app-header", __assign({
 	    heading: heading,
 	    url: url,
-	    maxcontentwidth: maxContentWidth
+	    maxcontentwidth: maxContentWidth,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17298,7 +17304,7 @@
 	    type: type,
 	    content: content,
 	    icon: icon,
-	    testid: testId,
+	    "data-testid": testId,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
@@ -17406,7 +17412,8 @@
 	    mt: props.mt,
 	    mr: props.mr,
 	    mb: props.mb,
-	    ml: props.ml
+	    ml: props.ml,
+	    "data-testid": props.testId
 	  }, {
 	    children: props.children
 	  }), void 0);
@@ -17415,6 +17422,7 @@
 	var GoAButtonGroup = function GoAButtonGroup(_a) {
 	  var alignment = _a.alignment,
 	      gap = _a.gap,
+	      testId = _a.testId,
 	      children = _a.children,
 	      mt = _a.mt,
 	      mr = _a.mr,
@@ -17426,7 +17434,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17441,6 +17450,7 @@
 	      variant = _a.variant,
 	      leadingIcon = _a.leadingIcon,
 	      trailingIcon = _a.trailingIcon,
+	      testId = _a.testId,
 	      children = _a.children,
 	      onClick = _a.onClick,
 	      mt = _a.mt,
@@ -17476,6 +17486,7 @@
 	    disabled: disabled,
 	    leadingicon: leadingIcon,
 	    trailingicon: trailingIcon,
+	    "data-testid": testId,
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
@@ -17489,6 +17500,7 @@
 	  var heading = _a.heading,
 	      _b = _a.type,
 	      type = _b === void 0 ? "information" : _b,
+	      testId = _a.testId,
 	      children = _a.children,
 	      mt = _a.mt,
 	      mr = _a.mr,
@@ -17500,7 +17512,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17573,7 +17586,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  var el = react.useRef(null);
 	  react.useEffect(function () {
 	    if (!el.current) return;
@@ -17599,7 +17613,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -17608,13 +17623,15 @@
 	      message = _a.message,
 	      progress = _a.progress,
 	      variant = _a.variant,
-	      size = _a.size;
+	      size = _a.size,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-circular-progress", {
 	    visible: visible ? "true" : "false",
 	    message: message,
 	    progress: progress,
 	    variant: variant,
-	    size: size
+	    size: size,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -17628,7 +17645,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  return jsxRuntime.jsxs("goa-container", __assign({
 	    type: type,
 	    padding: padding,
@@ -17636,7 +17654,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: [title && jsxRuntime.jsx("div", __assign({
 	      slot: "title"
@@ -17655,7 +17674,8 @@
 	    mt: props.mt,
 	    mr: props.mr,
 	    mb: props.mb,
-	    ml: props.ml
+	    ml: props.ml,
+	    "data-testid": props.testId
 	  }, void 0);
 	}
 
@@ -17710,7 +17730,7 @@
 	    multiselect: props.multiselect,
 	    native: props.native,
 	    placeholder: props.placeholder,
-	    testid: props.testId,
+	    "data-testid": props.testId,
 	    width: props.width
 	  }, {
 	    children: props.children
@@ -17749,11 +17769,13 @@
 	  var heading = _a.heading,
 	      _b = _a.maxColumnCount,
 	      maxColumnCount = _b === void 0 ? 1 : _b,
+	      testId = _a.testId,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-app-footer-nav-section", __assign({
 	    slot: "nav",
 	    heading: heading,
-	    maxcolumncount: maxColumnCount
+	    maxcolumncount: maxColumnCount,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17761,9 +17783,11 @@
 
 	function GoAAppFooter(_a) {
 	  var maxContentWidth = _a.maxContentWidth,
-	      children = _a.children;
+	      children = _a.children,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-app-footer", __assign({
-	    maxcontentwidth: maxContentWidth
+	    maxcontentwidth: maxContentWidth,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17778,7 +17802,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-form-item", __assign({
 	    label: label,
 	    error: error,
@@ -17787,7 +17812,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17800,6 +17826,7 @@
 	      mr = _a.mr,
 	      mb = _a.mb,
 	      ml = _a.ml,
+	      testId = _a.testId,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-grid", __assign({
 	    gap: gap,
@@ -17807,7 +17834,8 @@
 	    minchildwidth: minChildWidth,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17817,11 +17845,13 @@
 	  var heading = _a.heading,
 	      backgroundUrl = _a.backgroundUrl,
 	      minHeight = _a.minHeight,
-	      children = _a.children;
+	      children = _a.children,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-hero-banner", __assign({
 	    heading: heading,
 	    backgroundurl: backgroundUrl,
-	    minheight: minHeight
+	    minheight: minHeight,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17845,6 +17875,7 @@
 	      _c = _a.size,
 	      size = _c === void 0 ? "medium" : _c,
 	      title = _a.title,
+	      testId = _a.testId,
 	      children = _a.children,
 	      mt = _a.mt,
 	      mr = _a.mr,
@@ -17881,7 +17912,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -17894,7 +17926,8 @@
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
-	      ml = _a.ml;
+	      ml = _a.ml,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-icon", {
 	    type: type,
 	    theme: theme,
@@ -17902,7 +17935,8 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, void 0);
 	}
 
@@ -18166,11 +18200,13 @@
 	var GoAMicrositeHeader = function GoAMicrositeHeader(_a) {
 	  var type = _a.type,
 	      version = _a.version,
-	      feedbackUrl = _a.feedbackUrl;
+	      feedbackUrl = _a.feedbackUrl,
+	      testId = _a.testId;
 	  return jsxRuntime.jsx("goa-microsite-header", {
 	    type: type,
 	    version: version,
-	    feedbackurl: feedbackUrl
+	    feedbackurl: feedbackUrl,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -18183,7 +18219,8 @@
 	      transition = _a.transition,
 	      type = _a.type,
 	      calloutVariant = _a.calloutVariant,
-	      onClose = _a.onClose;
+	      onClose = _a.onClose,
+	      testId = _a.testId;
 	  var el = react.useRef(null);
 	  react.useEffect(function () {
 	    if (type) {
@@ -18214,7 +18251,8 @@
 	    scrollable: true,
 	    width: width,
 	    transition: transition,
-	    calloutVariant: calloutVariant
+	    calloutVariant: calloutVariant,
+	    "data-testid": testId
 	  }, {
 	    children: [actions && jsxRuntime.jsx("div", __assign({
 	      slot: "actions"
@@ -18227,9 +18265,30 @@
 	var GoANotification = function GoANotification(_a) {
 	  var _b = _a.type,
 	      type = _b === void 0 ? "information" : _b,
-	      children = _a.children;
+	      children = _a.children,
+	      testId = _a.testId,
+	      onDismiss = _a.onDismiss;
+	  var el = react.useRef(null);
+	  react.useEffect(function () {
+	    if (!el.current) {
+	      return;
+	    }
+
+	    var current = el.current;
+
+	    var listener = function listener() {
+	      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+	    };
+
+	    current.addEventListener("_dismiss", listener);
+	    return function () {
+	      current.removeEventListener("_dismiss", listener);
+	    };
+	  }, [el, onDismiss]);
 	  return jsxRuntime.jsx("goa-notification", __assign({
-	    type: type
+	    ref: el,
+	    type: type,
+	    "data-testid": testId
 	  }, {
 	    children: children
 	  }), void 0);
@@ -18243,7 +18302,8 @@
 
 	var GoAPageBlock = function GoAPageBlock(props) {
 	  return jsxRuntime.jsx("goa-page-block", __assign({
-	    width: props.width
+	    width: props.width,
+	    "data-testid": props.testId
 	  }, {
 	    children: props.children
 	  }), void 0);
@@ -18355,7 +18415,8 @@
 	    mt: props.mt,
 	    mb: props.mb,
 	    ml: props.ml,
-	    mr: props.mr
+	    mr: props.mr,
+	    "data-testid": props.testId
 	  }, void 0);
 	}
 
@@ -18364,6 +18425,7 @@
 	      size = _a.size,
 	      lineCount = _a.lineCount,
 	      type = _a.type,
+	      testId = _a.testId,
 	      mt = _a.mt,
 	      mr = _a.mr,
 	      mb = _a.mb,
@@ -18376,14 +18438,16 @@
 	    mt: mt,
 	    mr: mr,
 	    mb: mb,
-	    ml: ml
+	    ml: ml,
+	    "data-testid": testId
 	  }, void 0);
 	};
 
 	function GoASpacer(props) {
 	  return jsxRuntime.jsx("goa-spacer", {
 	    hspacing: props.hSpacing,
-	    vspacing: props.vSpacing
+	    vspacing: props.vSpacing,
+	    "data-testid": props.testId
 	  }, void 0);
 	}
 
@@ -18398,7 +18462,7 @@
 	    size: size,
 	    progress: progress,
 	    invert: invert,
-	    testid: testId
+	    "data-testid": testId
 	  }, void 0);
 	};
 
@@ -18406,6 +18470,7 @@
 	  return jsxRuntime.jsx("goa-table", __assign({
 	    width: props.width,
 	    stickyheader: false,
+	    "data-testid": props.testId,
 	    mt: props.mt,
 	    mb: props.mb,
 	    ml: props.ml,