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

package/react-components.esm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { parseISO, format } from 'date-fns';
 
@@ -1024,6 +1024,476 @@ if (typeof HTMLElement === 'function') {
 
   };
 }
+
+function calculateMargin(mt, mr, mb, ml) {
+  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
+}
+
+function injectCss(el, rootSelector, css, media) {
+  const style = document.createElement("style");
+
+  const _css = Object.entries(css).map(entry => `${entry[0]}: ${entry[1]};`).join(" ");
+
+  if (media) {
+    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
+  } else {
+    style.innerHTML = `${rootSelector} {${_css}}`;
+  }
+
+  el.appendChild(style);
+}
+
+function toBoolean(value) {
+  if (value === "false") {
+    return false;
+  }
+
+  if (value === "") {
+    return true;
+  }
+
+  return !!value;
+}
+
+function fromBoolean(value) {
+  return value ? "true" : "false";
+}
+
+function validateRequired(componentName, props) {
+  Object.entries(props).forEach(prop => {
+    if (!prop[1]) {
+      console.warn(`${componentName}: ${prop[0]} is required`);
+    }
+  });
+}
+
+function typeValidator(message, values, required = false) {
+  const validator = value => {
+    if (!required && !value) {
+      return;
+    }
+
+    if (!values.includes(value)) {
+      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
+    }
+  };
+
+  return [values, validator];
+}
+/* libs/web-components/src/components/accordion/Accordion.svelte generated by Svelte v3.51.0 */
+
+
+function create_fragment$H(ctx) {
+  let div3;
+  let details;
+  let summary;
+  let goa_icon;
+  let goa_icon_fillcolor_value;
+  let t0;
+  let div1;
+  let span0;
+  let t1;
+  let span0_class_value;
+  let span0_data_testid_value;
+  let t2;
+  let span1;
+  let t3;
+  let t4;
+  let div0;
+  let summary_class_value;
+  let t5;
+  let div2;
+  let div3_style_value;
+  let mounted;
+  let dispose;
+  return {
+    c() {
+      div3 = element("div");
+      details = element("details");
+      summary = element("summary");
+      goa_icon = element("goa-icon");
+      t0 = space();
+      div1 = element("div");
+      span0 = element("span");
+      t1 = text(
+      /*heading*/
+      ctx[0]);
+      t2 = space();
+      span1 = element("span");
+      t3 = text(
+      /*secondarytext*/
+      ctx[1]);
+      t4 = space();
+      div0 = element("div");
+      div0.innerHTML = `<slot name="headingcontent"></slot>`;
+      t5 = space();
+      div2 = element("div");
+      div2.innerHTML = `<slot></slot>`;
+      this.c = noop;
+      set_custom_element_data(goa_icon, "type", "chevron-forward");
+      set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value =
+      /*_hovering*/
+      ctx[8] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-interactive-default)");
+      attr(span0, "class", span0_class_value = "heading heading-" +
+      /*headingsize*/
+      ctx[2]);
+      attr(span0, "data-testid", span0_data_testid_value = `${
+      /*testid*/
+      ctx[3]}-heading`);
+      attr(span1, "class", "secondary-text");
+      attr(div0, "class", "heading-content");
+      attr(div1, "class", "title");
+      attr(summary, "class", summary_class_value = `container-${
+      /*headingsize*/
+      ctx[2]}`);
+      attr(div2, "class", "content");
+      details.open =
+      /*isOpen*/
+      ctx[9];
+      attr(div3, "style", div3_style_value = calculateMargin(
+      /*mt*/
+      ctx[4],
+      /*mr*/
+      ctx[5],
+      /*mb*/
+      ctx[6],
+      /*ml*/
+      ctx[7]));
+      attr(div3, "class", `
+    goa-accordion
+  `);
+      attr(div3, "data-testid",
+      /*testid*/
+      ctx[3]);
+    },
+
+    m(target, anchor) {
+      insert(target, div3, anchor);
+      append(div3, details);
+      append(details, summary);
+      append(summary, goa_icon);
+      append(summary, t0);
+      append(summary, div1);
+      append(div1, span0);
+      append(span0, t1);
+      append(div1, t2);
+      append(div1, span1);
+      append(span1, t3);
+      append(div1, t4);
+      append(div1, div0);
+      append(details, t5);
+      append(details, div2);
+
+      if (!mounted) {
+        dispose = [listen(summary, "mouseover",
+        /*mouseover_handler*/
+        ctx[11]), listen(summary, "mouseout",
+        /*mouseout_handler*/
+        ctx[12]), listen(summary, "focus",
+        /*focus_handler*/
+        ctx[13]), listen(summary, "blur",
+        /*blur_handler*/
+        ctx[14])];
+        mounted = true;
+      }
+    },
+
+    p(ctx, [dirty]) {
+      if (dirty &
+      /*_hovering*/
+      256 && goa_icon_fillcolor_value !== (goa_icon_fillcolor_value =
+      /*_hovering*/
+      ctx[8] ? "var(--goa-color-interactive-hover)" : "var(--goa-color-interactive-default)")) {
+        set_custom_element_data(goa_icon, "fillcolor", goa_icon_fillcolor_value);
+      }
+
+      if (dirty &
+      /*heading*/
+      1) set_data(t1,
+      /*heading*/
+      ctx[0]);
+
+      if (dirty &
+      /*headingsize*/
+      4 && span0_class_value !== (span0_class_value = "heading heading-" +
+      /*headingsize*/
+      ctx[2])) {
+        attr(span0, "class", span0_class_value);
+      }
+
+      if (dirty &
+      /*testid*/
+      8 && span0_data_testid_value !== (span0_data_testid_value = `${
+      /*testid*/
+      ctx[3]}-heading`)) {
+        attr(span0, "data-testid", span0_data_testid_value);
+      }
+
+      if (dirty &
+      /*secondarytext*/
+      2) set_data(t3,
+      /*secondarytext*/
+      ctx[1]);
+
+      if (dirty &
+      /*headingsize*/
+      4 && summary_class_value !== (summary_class_value = `container-${
+      /*headingsize*/
+      ctx[2]}`)) {
+        attr(summary, "class", summary_class_value);
+      }
+
+      if (dirty &
+      /*isOpen*/
+      512) {
+        details.open =
+        /*isOpen*/
+        ctx[9];
+      }
+
+      if (dirty &
+      /*mt, mr, mb, ml*/
+      240 && div3_style_value !== (div3_style_value = calculateMargin(
+      /*mt*/
+      ctx[4],
+      /*mr*/
+      ctx[5],
+      /*mb*/
+      ctx[6],
+      /*ml*/
+      ctx[7]))) {
+        attr(div3, "style", div3_style_value);
+      }
+
+      if (dirty &
+      /*testid*/
+      8) {
+        attr(div3, "data-testid",
+        /*testid*/
+        ctx[3]);
+      }
+    },
+
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (detaching) detach(div3);
+      mounted = false;
+      run_all(dispose);
+    }
+
+  };
+}
+
+function instance$B($$self, $$props, $$invalidate) {
+  let isOpen;
+  const [HeadingSizes, validateHeadingSize] = typeValidator("Accordion heading size", ["small", "medium"]);
+  let {
+    open = "false"
+  } = $$props;
+  let {
+    heading = ""
+  } = $$props;
+  let {
+    secondarytext = ""
+  } = $$props;
+  let {
+    headingsize = "small"
+  } = $$props;
+  let {
+    testid = ""
+  } = $$props;
+  let {
+    mt = null
+  } = $$props;
+  let {
+    mr = null
+  } = $$props;
+  let {
+    mb = "xs"
+  } = $$props;
+  let {
+    ml = null
+  } = $$props;
+  let _hovering = false;
+  onMount(() => {
+    validateRequired("GoAAccordion", {
+      heading
+    });
+    validateHeadingSize(headingsize);
+  });
+
+  const mouseover_handler = () => $$invalidate(8, _hovering = true);
+
+  const mouseout_handler = () => $$invalidate(8, _hovering = false);
+
+  const focus_handler = () => $$invalidate(8, _hovering = false);
+
+  const blur_handler = () => $$invalidate(8, _hovering = false);
+
+  $$self.$$set = $$props => {
+    if ('open' in $$props) $$invalidate(10, open = $$props.open);
+    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
+    if ('secondarytext' in $$props) $$invalidate(1, secondarytext = $$props.secondarytext);
+    if ('headingsize' in $$props) $$invalidate(2, headingsize = $$props.headingsize);
+    if ('testid' in $$props) $$invalidate(3, testid = $$props.testid);
+    if ('mt' in $$props) $$invalidate(4, mt = $$props.mt);
+    if ('mr' in $$props) $$invalidate(5, mr = $$props.mr);
+    if ('mb' in $$props) $$invalidate(6, mb = $$props.mb);
+    if ('ml' in $$props) $$invalidate(7, ml = $$props.ml);
+  };
+
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*open*/
+    1024) {
+      $$invalidate(9, isOpen = toBoolean(open));
+    }
+  };
+
+  return [heading, secondarytext, headingsize, testid, mt, mr, mb, ml, _hovering, isOpen, open, mouseover_handler, mouseout_handler, focus_handler, blur_handler];
+}
+
+class Accordion extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--goa-font-family-sans);font-size:var(--goa-font-size-4)}.goa-accordion,.goa-accordion *{box-sizing:border-box}summary{min-height:3.5rem;border-width:var(--goa-border-width-s);border-style:solid;border-radius:var(--goa-border-radius-m);background-color:var(--goa-color-greyscale-100);border-color:var(--goa-color-greyscale-200);color:var(--goa-color-text-default);;;padding:0.875rem 1rem 0 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;position:relative}summary.container-medium{min-height:4rem}summary::marker,summary::-webkit-details-marker{display:none}summary .title{display:flex;align-items:center;flex:1}.title span{padding-bottom:var(--goa-space-3xs, 0)}summary .heading{font:var(--goa-typography-heading-s);padding-right:1rem}summary .secondary-text{font:var(--goa-typography-body-s);line-height:1.5rem;padding-right:1rem}summary .heading-content{flex:1
+  }.content{border-bottom:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-left:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-right:var(--goa-border-width-s) solid var(--goa-color-greyscale-200);border-bottom-left-radius:var(--goa-border-radius-m);border-bottom-right-radius:var(--goa-border-radius-m);padding:1.5rem;padding-left:3.5rem;padding-right:2rem}summary goa-icon{padding:0.125rem 1rem}summary.container-medium goa-icon{padding:0.375rem 1rem}details[open] goa-icon{transform:rotate(90deg)}details[open] summary{border-bottom-left-radius:var(--goa-border-radius-none);border-bottom-right-radius:var(--goa-border-radius-none)}summary:hover{background-color:var(--goa-color-greyscale-200)}summary:focus,summary:active{background-color:var(--goa-color-greyscale-100);outline:none}summary:active::before,summary:focus::before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--goa-border-width-l) solid var(--goa-color-interactive-focus);border-radius:4px}summary .heading.heading-medium{line-height:2rem;font:var(--goa-typography-heading-m)}@media(max-width: 640px){summary{align-items:flex-start}summary .title{flex-direction:column;align-items:flex-start}}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, instance$B, create_fragment$H, safe_not_equal, {
+      open: 10,
+      heading: 0,
+      secondarytext: 1,
+      headingsize: 2,
+      testid: 3,
+      mt: 4,
+      mr: 5,
+      mb: 6,
+      ml: 7
+    }, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+
+      if (options.props) {
+        this.$set(options.props);
+        flush();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["open", "heading", "secondarytext", "headingsize", "testid", "mt", "mr", "mb", "ml"];
+  }
+
+  get open() {
+    return this.$$.ctx[10];
+  }
+
+  set open(open) {
+    this.$$set({
+      open
+    });
+    flush();
+  }
+
+  get heading() {
+    return this.$$.ctx[0];
+  }
+
+  set heading(heading) {
+    this.$$set({
+      heading
+    });
+    flush();
+  }
+
+  get secondarytext() {
+    return this.$$.ctx[1];
+  }
+
+  set secondarytext(secondarytext) {
+    this.$$set({
+      secondarytext
+    });
+    flush();
+  }
+
+  get headingsize() {
+    return this.$$.ctx[2];
+  }
+
+  set headingsize(headingsize) {
+    this.$$set({
+      headingsize
+    });
+    flush();
+  }
+
+  get testid() {
+    return this.$$.ctx[3];
+  }
+
+  set testid(testid) {
+    this.$$set({
+      testid
+    });
+    flush();
+  }
+
+  get mt() {
+    return this.$$.ctx[4];
+  }
+
+  set mt(mt) {
+    this.$$set({
+      mt
+    });
+    flush();
+  }
+
+  get mr() {
+    return this.$$.ctx[5];
+  }
+
+  set mr(mr) {
+    this.$$set({
+      mr
+    });
+    flush();
+  }
+
+  get mb() {
+    return this.$$.ctx[6];
+  }
+
+  set mb(mb) {
+    this.$$set({
+      mb
+    });
+    flush();
+  }
+
+  get ml() {
+    return this.$$.ctx[7];
+  }
+
+  set ml(ml) {
+    this.$$set({
+      ml
+    });
+    flush();
+  }
+
+}
+
+customElements.define("goa-accordion", Accordion);
 /* libs/web-components/src/components/app-header/AppHeader.svelte generated by Svelte v3.51.0 */
 
 function create_else_block$4(ctx) {
@@ -1336,65 +1806,8 @@ class AppHeader extends SvelteElement {
 }
 
 customElements.define("goa-app-header", AppHeader);
-
-function calculateMargin(mt, mr, mb, ml) {
-  return [mt && `margin-top:var(--goa-space-${mt});`, mr && `margin-right:var(--goa-space-${mr});`, mb && `margin-bottom:var(--goa-space-${mb});`, ml && `margin-left:var(--goa-space-${ml});`].join(" ");
-}
-
-function injectCss(el, rootSelector, css, media) {
-  const style = document.createElement("style");
-
-  const _css = Object.entries(css).map(entry => `${entry[0]}: ${entry[1]};`).join(" ");
-
-  if (media) {
-    style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`;
-  } else {
-    style.innerHTML = `${rootSelector} {${_css}}`;
-  }
-
-  el.appendChild(style);
-}
-
-function toBoolean(value) {
-  if (value === "false") {
-    return false;
-  }
-
-  if (value === "") {
-    return true;
-  }
-
-  return !!value;
-}
-
-function fromBoolean(value) {
-  return value ? "true" : "false";
-}
-
-function validateRequired(componentName, props) {
-  Object.entries(props).forEach(prop => {
-    if (!prop[1]) {
-      console.warn(`${componentName}: ${prop[0]} is required`);
-    }
-  });
-}
-
-function typeValidator(message, values, required = false) {
-  const validator = value => {
-    if (!required && !value) {
-      return;
-    }
-
-    if (!values.includes(value)) {
-      console.error(`[${value}] is an invalid ${message.toLowerCase()}`);
-    }
-  };
-
-  return [values, validator];
-}
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.51.0 */
 
-
 function create_else_block$3(ctx) {
   let div;
   return {
@@ -12706,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 => {
@@ -15775,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,
@@ -16741,16 +17158,50 @@ class Pagination extends SvelteElement {
 
 customElements.define("goa-pagination", Pagination);
 
+const GoAAccordion = ({
+  open,
+  heading,
+  headingSize,
+  secondaryText,
+  headingContent,
+  testid,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) => {
+  return jsxs("goa-accordion", Object.assign({
+    open: open,
+    headingSize: headingSize,
+    heading: heading,
+    secondaryText: secondaryText,
+    "data-testid": testid,
+    mt: mt,
+    mr: mr,
+    mb: mb,
+    ml: ml
+  }, {
+    children: [children, headingContent && jsx("div", Object.assign({
+      slot: "headingcontent"
+    }, {
+      children: headingContent
+    }), void 0)]
+  }), void 0);
+};
+
 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);
@@ -16770,7 +17221,7 @@ const GoABadge = ({
     type: type,
     content: content,
     icon: icon,
-    testid: testId,
+    "data-testid": testId,
     mt: mt,
     mr: mr,
     mb: mb,
@@ -16882,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);
@@ -16891,6 +17343,7 @@ function GoABlock(props) {
 const GoAButtonGroup = ({
   alignment,
   gap,
+  testId,
   children,
   mt,
   mr,
@@ -16903,7 +17356,8 @@ const GoAButtonGroup = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -16916,6 +17370,7 @@ const GoAButton = ({
   variant,
   leadingIcon,
   trailingIcon,
+  testId,
   children,
   onClick,
   mt,
@@ -16952,6 +17407,7 @@ const GoAButton = ({
     disabled: _disabled,
     leadingicon: leadingIcon,
     trailingicon: trailingIcon,
+    "data-testid": testId,
     mt: mt,
     mr: mr,
     mb: mb,
@@ -16964,6 +17420,7 @@ const GoAButton = ({
 const GoACallout = ({
   heading,
   type: _type = "information",
+  testId,
   children,
   mt,
   mr,
@@ -16976,7 +17433,8 @@ const GoACallout = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17047,7 +17505,8 @@ const GoAChip = ({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) => {
   const el = useRef(null);
   useEffect(() => {
@@ -17074,7 +17533,8 @@ const GoAChip = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, void 0);
 };
 
@@ -17083,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);
 };
 
@@ -17104,7 +17566,8 @@ const GoAContainer = ({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) => {
   return jsxs("goa-container", Object.assign({
     type: type,
@@ -17113,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"
@@ -17132,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);
 }
 
@@ -17188,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
@@ -17228,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);
@@ -17241,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);
@@ -17259,7 +17728,8 @@ const GoAFormItem = ({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) => {
   return jsx("goa-form-item", Object.assign({
     label: label,
@@ -17269,7 +17739,8 @@ const GoAFormItem = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17282,6 +17753,7 @@ const GoAGrid = ({
   mr,
   mb,
   ml,
+  testId,
   children
 }) => {
   return jsx("goa-grid", Object.assign({
@@ -17290,7 +17762,8 @@ const GoAGrid = ({
     minchildwidth: minChildWidth,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17300,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);
@@ -17328,6 +17803,7 @@ const GoAIconButton = ({
   onClick,
   size: _size = "medium",
   title,
+  testId,
   children,
   mt,
   mr,
@@ -17365,7 +17841,8 @@ const GoAIconButton = ({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, {
     children: children
   }), void 0);
@@ -17378,7 +17855,8 @@ function GoAIcon({
   mt,
   mr,
   mb,
-  ml
+  ml,
+  testId
 }) {
   return jsx("goa-icon", {
     type: type,
@@ -17387,7 +17865,8 @@ function GoAIcon({
     mt: mt,
     mr: mr,
     mb: mb,
-    ml: ml
+    ml: ml,
+    "data-testid": testId
   }, void 0);
 }
 
@@ -17677,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);
 };
 
@@ -17695,7 +18176,8 @@ const GoAModal = ({
   transition,
   type,
   calloutVariant,
-  onClose
+  onClose,
+  testId
 }) => {
   const el = useRef(null);
   useEffect(() => {
@@ -17727,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"
@@ -17739,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);
@@ -17756,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);
@@ -17869,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);
 }
 
@@ -17878,6 +18384,7 @@ const GoASkeleton = ({
   size,
   lineCount,
   type,
+  testId,
   mt,
   mr,
   mb,
@@ -17891,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);
 }
 
@@ -17914,7 +18423,7 @@ const GoASpinner = ({
     size: size,
     progress: progress,
     invert: invert,
-    testid: testId
+    "data-testid": testId
   }, void 0);
 };
 
@@ -17922,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,
@@ -18015,4 +18525,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };
+export { GoAAccordion, GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoABlock, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownItem, GoADropdownOption, GoAEmergencyBadge, GoAFormItem, GoAGrid, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAOneColumnLayout, GoAPageBlock, GoAPagination, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpacer, GoASpinner, GoASuccessBadge, GoATable, GoATextArea, GoATwoColumnLayout };