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

package/index.d.ts

@@ -1,6 +1,7 @@
 import "@abgov/web-components";
 export type { GoAIconType } from "./lib/icon/icon";
 export type { GoABadgeType } from "./lib/badge/badge";
+export * from "./lib/accordion/accordion";
 export * from "./lib/app-header/app-header";
 export * from "./lib/badge/badge";
 export * from "./lib/block/block";

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/package.json

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

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 {
@@ -16741,6 +17154,38 @@ 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,
@@ -18015,4 +18460,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 };

package/react-components.umd.js

@@ -1065,6 +1065,476 @@
 
 	  };
 	}
+
+	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) {
@@ -1377,65 +1847,8 @@
 	}
 
 	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 {
@@ -16827,6 +17240,37 @@
 	    return t;
 	}
 
+	var GoAAccordion = function GoAAccordion(_a) {
+	  var open = _a.open,
+	      heading = _a.heading,
+	      headingSize = _a.headingSize,
+	      secondaryText = _a.secondaryText,
+	      headingContent = _a.headingContent,
+	      testid = _a.testid,
+	      children = _a.children,
+	      mt = _a.mt,
+	      mr = _a.mr,
+	      mb = _a.mb,
+	      ml = _a.ml;
+	  return jsxRuntime.jsxs("goa-accordion", __assign({
+	    open: open,
+	    headingSize: headingSize,
+	    heading: heading,
+	    secondaryText: secondaryText,
+	    "data-testid": testid,
+	    mt: mt,
+	    mr: mr,
+	    mb: mb,
+	    ml: ml
+	  }, {
+	    children: [children, headingContent && jsxRuntime.jsx("div", __assign({
+	      slot: "headingcontent"
+	    }, {
+	      children: headingContent
+	    }), void 0)]
+	  }), void 0);
+	};
+
 	var GoAAppHeader = function GoAAppHeader(_a) {
 	  var heading = _a.heading,
 	      url = _a.url,
@@ -18053,6 +18497,7 @@
 	  }), void 0);
 	}
 
+	exports.GoAAccordion = GoAAccordion;
 	exports.GoAAppFooter = GoAAppFooter;
 	exports.GoAAppFooterMetaSection = GoAAppFooterMetaSection;
 	exports.GoAAppFooterNavSection = GoAAppFooterNavSection;