@abgov/react-components 4.0.0-alpha.51 → 4.0.0-alpha.53

package/lib/container/container.d.ts

@@ -1,9 +1,9 @@
 import React, { FC, ReactNode } from 'react';
-declare type ContainerVariant = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
+declare type ContainerType = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
 declare type HeadingSize = 'large' | 'small' | 'none';
 declare type ContainerPadding = "relaxed" | "compact";
 interface WCProps {
-    variant?: ContainerVariant;
+    type?: ContainerType;
     headingsize?: HeadingSize;
     colored?: boolean;
     padding?: ContainerPadding;
@@ -17,7 +17,7 @@ declare global {
 }
 interface Props {
     headingSize?: HeadingSize;
-    variant?: ContainerVariant;
+    type?: ContainerType;
     title?: ReactNode;
     colored?: boolean;
     padding?: ContainerPadding;

package/package.json

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

package/react-components.esm.js

@@ -4483,7 +4483,7 @@ function create_fragment$r(ctx) {
       attr(div3, "class", div3_class_value = `
     goa-container
     goa-container--${
-      /*variant*/
+      /*type*/
       ctx[0]}
     padding--${
       /*padding*/
@@ -4514,11 +4514,11 @@ function create_fragment$r(ctx) {
       }
 
       if (dirty &
-      /*variant, padding*/
+      /*type, padding*/
       5 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${
-      /*variant*/
+      /*type*/
       ctx[0]}
     padding--${
       /*padding*/
@@ -4528,7 +4528,7 @@ function create_fragment$r(ctx) {
       }
 
       if (dirty &
-      /*variant, padding, _colored*/
+      /*type, padding, _colored*/
       13) {
         toggle_class(div3, "colored",
         /*_colored*/
@@ -4550,7 +4550,7 @@ function instance$p($$self, $$props, $$invalidate) {
   let _colored;
 
   let {
-    variant = 'non-interactive'
+    type = 'non-interactive'
   } = $$props;
   let {
     colored = "false"
@@ -4563,7 +4563,7 @@ function instance$p($$self, $$props, $$invalidate) {
   } = $$props;
 
   $$self.$$set = $$props => {
-    if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
+    if ('type' in $$props) $$invalidate(0, type = $$props.type);
     if ('colored' in $$props) $$invalidate(4, colored = $$props.colored);
     if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
     if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
@@ -4577,7 +4577,7 @@ function instance$p($$self, $$props, $$invalidate) {
     }
   };
 
-  return [variant, headingsize, padding, _colored, colored];
+  return [type, headingsize, padding, _colored, colored];
 }
 
 class Container extends SvelteElement {
@@ -4589,7 +4589,7 @@ class Container extends SvelteElement {
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$p, create_fragment$r, safe_not_equal, {
-      variant: 0,
+      type: 0,
       colored: 4,
       headingsize: 1,
       padding: 2
@@ -4608,16 +4608,16 @@ class Container extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["variant", "colored", "headingsize", "padding"];
+    return ["type", "colored", "headingsize", "padding"];
   }
 
-  get variant() {
+  get type() {
     return this.$$.ctx[0];
   }
 
-  set variant(variant) {
+  set type(type) {
     this.$$set({
-      variant
+      type
     });
     flush();
   }
@@ -4811,18 +4811,18 @@ function create_if_block$c(ctx) {
     }
 
   };
-} // (234:4) {#each options as option, index}
+} // (239:4) {#each options as option, index}
 
 
 function create_each_block$4(ctx) {
   let li;
-  let t0_value = (
+  let t_value = (
   /*option*/
   ctx[39].label ||
   /*option*/
   ctx[39].value) + "";
-  let t0;
-  let t1;
+  let t;
+  let li_id_value;
   let li_aria_label_value;
   let li_data_testid_value;
   let li_data_index_value;
@@ -4842,13 +4842,16 @@ function create_each_block$4(ctx) {
   return {
     c() {
       li = element("li");
-      t0 = text(t0_value);
-      t1 = space();
+      t = text(t_value);
+      attr(li, "id", li_id_value =
+      /*option*/
+      ctx[39].label);
       attr(li, "aria-label", li_aria_label_value =
       /*option*/
       ctx[39].label ||
       /*option*/
       ctx[39].value);
+      attr(li, "role", "option");
       attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
       ctx[39].value}-dropdown-item`);
@@ -4872,8 +4875,7 @@ function create_each_block$4(ctx) {
 
     m(target, anchor) {
       insert(target, li, anchor);
-      append(li, t0);
-      append(li, t1);
+      append(li, t);
 
       if (!mounted) {
         dispose = listen(li, "click", click_handler);
@@ -4885,11 +4887,19 @@ function create_each_block$4(ctx) {
       ctx = new_ctx;
       if (dirty[0] &
       /*options*/
-      1024 && t0_value !== (t0_value = (
+      1024 && t_value !== (t_value = (
       /*option*/
       ctx[39].label ||
       /*option*/
-      ctx[39].value) + "")) set_data(t0, t0_value);
+      ctx[39].value) + "")) set_data(t, t_value);
+
+      if (dirty[0] &
+      /*options*/
+      1024 && li_id_value !== (li_id_value =
+      /*option*/
+      ctx[39].label)) {
+        attr(li, "id", li_id_value);
+      }
 
       if (dirty[0] &
       /*options*/
@@ -4949,8 +4959,8 @@ function create_fragment$q(ctx) {
   let div0_data_testid_value;
   let t1;
   let ul;
-  let slot;
   let t2;
+  let slot;
   let ul_style_value;
   let div1_style_value;
   let mounted;
@@ -4976,13 +4986,13 @@ function create_fragment$q(ctx) {
       goa_input = element("goa-input");
       t1 = space();
       ul = element("ul");
-      slot = element("slot");
-      t2 = space();
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
 
+      t2 = space();
+      slot = element("slot");
       this.c = noop;
       set_custom_element_data(goa_input, "error",
       /*error*/
@@ -5000,11 +5010,16 @@ function create_fragment$q(ctx) {
       set_custom_element_data(goa_input, "id", goa_input_id_value = `${
       /*name*/
       ctx[0]}-dropdown-input`);
+      set_custom_element_data(goa_input, "role", "combobox");
       set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
       /*arialabel*/
       ctx[1] ||
       /*name*/
       ctx[0]);
+      set_custom_element_data(goa_input, "aria-expanded",
+      /*isMenuVisible*/
+      ctx[12]);
+      set_custom_element_data(goa_input, "aria-controls", "menu");
       set_custom_element_data(goa_input, "readonly", "");
       set_custom_element_data(goa_input, "trailingicon", "chevron-down");
       set_custom_element_data(goa_input, "type", "text");
@@ -5014,6 +5029,11 @@ function create_fragment$q(ctx) {
       attr(div0, "data-testid", div0_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown`);
+      attr(ul, "id", "menu");
+      attr(ul, "role", "listbox");
+      attr(ul, "aria-activedescendant",
+      /*selectedLabel*/
+      ctx[11]);
       attr(ul, "data-testid", "dropdown-menu");
       attr(ul, "tabindex", "0");
       attr(ul, "class", "goa-dropdown-list");
@@ -5042,14 +5062,14 @@ function create_fragment$q(ctx) {
       append(div0, goa_input);
       append(div1, t1);
       append(div1, ul);
-      append(ul, slot);
-      append(ul, t2);
 
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(ul, null);
       }
-      /*ul_binding*/
 
+      append(ul, t2);
+      append(ul, slot);
+      /*ul_binding*/
 
       ctx[23](ul);
       /*div1_binding*/
@@ -5130,6 +5150,14 @@ function create_fragment$q(ctx) {
         set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
       }
 
+      if (dirty[0] &
+      /*isMenuVisible*/
+      4096) {
+        set_custom_element_data(goa_input, "aria-expanded",
+        /*isMenuVisible*/
+        ctx[12]);
+      }
+
       if (dirty[0] &
       /*selectedLabel*/
       2048) {
@@ -5162,7 +5190,7 @@ function create_fragment$q(ctx) {
           } else {
             each_blocks[i] = create_each_block$4(child_ctx);
             each_blocks[i].c();
-            each_blocks[i].m(ul, null);
+            each_blocks[i].m(ul, t2);
           }
         }
 
@@ -5173,6 +5201,14 @@ function create_fragment$q(ctx) {
         each_blocks.length = each_value.length;
       }
 
+      if (dirty[0] &
+      /*selectedLabel*/
+      2048) {
+        attr(ul, "aria-activedescendant",
+        /*selectedLabel*/
+        ctx[11]);
+      }
+
       if (dirty[0] &
       /*maxheight*/
       8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
@@ -13533,8 +13569,8 @@ function create_fragment$2(ctx) {
       this.c = noop;
       attr(div, "class", "content");
       attr(div, "slot", "");
-      set_custom_element_data(goa_container, "variant",
-      /*variant*/
+      set_custom_element_data(goa_container, "type",
+      /*type*/
       ctx[3]);
       set_custom_element_data(goa_container, "headingsize",
       /*headingsize*/
@@ -13591,10 +13627,10 @@ function create_fragment$2(ctx) {
       ctx[2];
 
       if (dirty &
-      /*variant*/
+      /*type*/
       8) {
-        set_custom_element_data(goa_container, "variant",
-        /*variant*/
+        set_custom_element_data(goa_container, "type",
+        /*type*/
         ctx[3]);
       }
 
@@ -13630,7 +13666,7 @@ function instance$1($$self, $$props, $$invalidate) {
     content
   } = $$props;
   let {
-    variant = "default"
+    type = "default"
   } = $$props;
   let {
     headingsize = "large"
@@ -13640,11 +13676,11 @@ function instance$1($$self, $$props, $$invalidate) {
     if ('title' in $$props) $$invalidate(0, title = $$props.title);
     if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
     if ('content' in $$props) $$invalidate(2, content = $$props.content);
-    if ('variant' in $$props) $$invalidate(3, variant = $$props.variant);
+    if ('type' in $$props) $$invalidate(3, type = $$props.type);
     if ('headingsize' in $$props) $$invalidate(4, headingsize = $$props.headingsize);
   };
 
-  return [title, actions, content, variant, headingsize];
+  return [title, actions, content, type, headingsize];
 }
 
 class ContainerWrapper_test extends SvelteElement {
@@ -13658,7 +13694,7 @@ class ContainerWrapper_test extends SvelteElement {
       title: 0,
       actions: 1,
       content: 2,
-      variant: 3,
+      type: 3,
       headingsize: 4
     }, null);
 
@@ -13675,7 +13711,7 @@ class ContainerWrapper_test extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["title", "actions", "content", "variant", "headingsize"];
+    return ["title", "actions", "content", "type", "headingsize"];
   }
 
   get title() {
@@ -13711,13 +13747,13 @@ class ContainerWrapper_test extends SvelteElement {
     flush();
   }
 
-  get variant() {
+  get type() {
     return this.$$.ctx[3];
   }
 
-  set variant(variant) {
+  set type(type) {
     this.$$set({
-      variant
+      type
     });
     flush();
   }
@@ -14174,10 +14210,10 @@ const GoAContainer = ({
   padding,
   children,
   actions,
-  variant
+  type
 }) => {
   return jsxs("goa-container", Object.assign({
-    variant: variant,
+    type: type,
     padding: padding,
     headingsize: headingSize,
     colored: _colored

package/react-components.umd.js

@@ -4525,7 +4525,7 @@
 	      attr(div3, "class", div3_class_value = `
     goa-container
     goa-container--${
-      /*variant*/
+      /*type*/
       ctx[0]}
     padding--${
       /*padding*/
@@ -4556,11 +4556,11 @@
 	      }
 
 	      if (dirty &
-	      /*variant, padding*/
+	      /*type, padding*/
 	      5 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${
-      /*variant*/
+      /*type*/
       ctx[0]}
     padding--${
       /*padding*/
@@ -4570,7 +4570,7 @@
 	      }
 
 	      if (dirty &
-	      /*variant, padding, _colored*/
+	      /*type, padding, _colored*/
 	      13) {
 	        toggle_class(div3, "colored",
 	        /*_colored*/
@@ -4592,7 +4592,7 @@
 	  let _colored;
 
 	  let {
-	    variant = 'non-interactive'
+	    type = 'non-interactive'
 	  } = $$props;
 	  let {
 	    colored = "false"
@@ -4605,7 +4605,7 @@
 	  } = $$props;
 
 	  $$self.$$set = $$props => {
-	    if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
+	    if ('type' in $$props) $$invalidate(0, type = $$props.type);
 	    if ('colored' in $$props) $$invalidate(4, colored = $$props.colored);
 	    if ('headingsize' in $$props) $$invalidate(1, headingsize = $$props.headingsize);
 	    if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
@@ -4619,7 +4619,7 @@
 	    }
 	  };
 
-	  return [variant, headingsize, padding, _colored, colored];
+	  return [type, headingsize, padding, _colored, colored];
 	}
 
 	class Container extends SvelteElement {
@@ -4631,7 +4631,7 @@
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$p, create_fragment$r, safe_not_equal, {
-	      variant: 0,
+	      type: 0,
 	      colored: 4,
 	      headingsize: 1,
 	      padding: 2
@@ -4650,16 +4650,16 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["variant", "colored", "headingsize", "padding"];
+	    return ["type", "colored", "headingsize", "padding"];
 	  }
 
-	  get variant() {
+	  get type() {
 	    return this.$$.ctx[0];
 	  }
 
-	  set variant(variant) {
+	  set type(type) {
 	    this.$$set({
-	      variant
+	      type
 	    });
 	    flush();
 	  }
@@ -4853,18 +4853,18 @@
 	    }
 
 	  };
-	} // (234:4) {#each options as option, index}
+	} // (239:4) {#each options as option, index}
 
 
 	function create_each_block$4(ctx) {
 	  let li;
-	  let t0_value = (
+	  let t_value = (
 	  /*option*/
 	  ctx[39].label ||
 	  /*option*/
 	  ctx[39].value) + "";
-	  let t0;
-	  let t1;
+	  let t;
+	  let li_id_value;
 	  let li_aria_label_value;
 	  let li_data_testid_value;
 	  let li_data_index_value;
@@ -4884,13 +4884,16 @@
 	  return {
 	    c() {
 	      li = element("li");
-	      t0 = text(t0_value);
-	      t1 = space();
+	      t = text(t_value);
+	      attr(li, "id", li_id_value =
+	      /*option*/
+	      ctx[39].label);
 	      attr(li, "aria-label", li_aria_label_value =
 	      /*option*/
 	      ctx[39].label ||
 	      /*option*/
 	      ctx[39].value);
+	      attr(li, "role", "option");
 	      attr(li, "data-testid", li_data_testid_value = `${
       /*option*/
       ctx[39].value}-dropdown-item`);
@@ -4914,8 +4917,7 @@
 
 	    m(target, anchor) {
 	      insert(target, li, anchor);
-	      append(li, t0);
-	      append(li, t1);
+	      append(li, t);
 
 	      if (!mounted) {
 	        dispose = listen(li, "click", click_handler);
@@ -4927,11 +4929,19 @@
 	      ctx = new_ctx;
 	      if (dirty[0] &
 	      /*options*/
-	      1024 && t0_value !== (t0_value = (
+	      1024 && t_value !== (t_value = (
 	      /*option*/
 	      ctx[39].label ||
 	      /*option*/
-	      ctx[39].value) + "")) set_data(t0, t0_value);
+	      ctx[39].value) + "")) set_data(t, t_value);
+
+	      if (dirty[0] &
+	      /*options*/
+	      1024 && li_id_value !== (li_id_value =
+	      /*option*/
+	      ctx[39].label)) {
+	        attr(li, "id", li_id_value);
+	      }
 
 	      if (dirty[0] &
 	      /*options*/
@@ -4991,8 +5001,8 @@
 	  let div0_data_testid_value;
 	  let t1;
 	  let ul;
-	  let slot;
 	  let t2;
+	  let slot;
 	  let ul_style_value;
 	  let div1_style_value;
 	  let mounted;
@@ -5018,13 +5028,13 @@
 	      goa_input = element("goa-input");
 	      t1 = space();
 	      ul = element("ul");
-	      slot = element("slot");
-	      t2 = space();
 
 	      for (let i = 0; i < each_blocks.length; i += 1) {
 	        each_blocks[i].c();
 	      }
 
+	      t2 = space();
+	      slot = element("slot");
 	      this.c = noop;
 	      set_custom_element_data(goa_input, "error",
 	      /*error*/
@@ -5042,11 +5052,16 @@
 	      set_custom_element_data(goa_input, "id", goa_input_id_value = `${
       /*name*/
       ctx[0]}-dropdown-input`);
+	      set_custom_element_data(goa_input, "role", "combobox");
 	      set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value =
 	      /*arialabel*/
 	      ctx[1] ||
 	      /*name*/
 	      ctx[0]);
+	      set_custom_element_data(goa_input, "aria-expanded",
+	      /*isMenuVisible*/
+	      ctx[12]);
+	      set_custom_element_data(goa_input, "aria-controls", "menu");
 	      set_custom_element_data(goa_input, "readonly", "");
 	      set_custom_element_data(goa_input, "trailingicon", "chevron-down");
 	      set_custom_element_data(goa_input, "type", "text");
@@ -5056,6 +5071,11 @@
 	      attr(div0, "data-testid", div0_data_testid_value = `${
       /*name*/
       ctx[0]}-dropdown`);
+	      attr(ul, "id", "menu");
+	      attr(ul, "role", "listbox");
+	      attr(ul, "aria-activedescendant",
+	      /*selectedLabel*/
+	      ctx[11]);
 	      attr(ul, "data-testid", "dropdown-menu");
 	      attr(ul, "tabindex", "0");
 	      attr(ul, "class", "goa-dropdown-list");
@@ -5084,14 +5104,14 @@
 	      append(div0, goa_input);
 	      append(div1, t1);
 	      append(div1, ul);
-	      append(ul, slot);
-	      append(ul, t2);
 
 	      for (let i = 0; i < each_blocks.length; i += 1) {
 	        each_blocks[i].m(ul, null);
 	      }
-	      /*ul_binding*/
 
+	      append(ul, t2);
+	      append(ul, slot);
+	      /*ul_binding*/
 
 	      ctx[23](ul);
 	      /*div1_binding*/
@@ -5172,6 +5192,14 @@
 	        set_custom_element_data(goa_input, "aria-label", goa_input_aria_label_value);
 	      }
 
+	      if (dirty[0] &
+	      /*isMenuVisible*/
+	      4096) {
+	        set_custom_element_data(goa_input, "aria-expanded",
+	        /*isMenuVisible*/
+	        ctx[12]);
+	      }
+
 	      if (dirty[0] &
 	      /*selectedLabel*/
 	      2048) {
@@ -5204,7 +5232,7 @@
 	          } else {
 	            each_blocks[i] = create_each_block$4(child_ctx);
 	            each_blocks[i].c();
-	            each_blocks[i].m(ul, null);
+	            each_blocks[i].m(ul, t2);
 	          }
 	        }
 
@@ -5215,6 +5243,14 @@
 	        each_blocks.length = each_value.length;
 	      }
 
+	      if (dirty[0] &
+	      /*selectedLabel*/
+	      2048) {
+	        attr(ul, "aria-activedescendant",
+	        /*selectedLabel*/
+	        ctx[11]);
+	      }
+
 	      if (dirty[0] &
 	      /*maxheight*/
 	      8 && ul_style_value !== (ul_style_value = `overflow-y: auto; max-height: ${
@@ -13582,8 +13618,8 @@
 	      this.c = noop;
 	      attr(div, "class", "content");
 	      attr(div, "slot", "");
-	      set_custom_element_data(goa_container, "variant",
-	      /*variant*/
+	      set_custom_element_data(goa_container, "type",
+	      /*type*/
 	      ctx[3]);
 	      set_custom_element_data(goa_container, "headingsize",
 	      /*headingsize*/
@@ -13640,10 +13676,10 @@
 	      ctx[2];
 
 	      if (dirty &
-	      /*variant*/
+	      /*type*/
 	      8) {
-	        set_custom_element_data(goa_container, "variant",
-	        /*variant*/
+	        set_custom_element_data(goa_container, "type",
+	        /*type*/
 	        ctx[3]);
 	      }
 
@@ -13679,7 +13715,7 @@
 	    content
 	  } = $$props;
 	  let {
-	    variant = "default"
+	    type = "default"
 	  } = $$props;
 	  let {
 	    headingsize = "large"
@@ -13689,11 +13725,11 @@
 	    if ('title' in $$props) $$invalidate(0, title = $$props.title);
 	    if ('actions' in $$props) $$invalidate(1, actions = $$props.actions);
 	    if ('content' in $$props) $$invalidate(2, content = $$props.content);
-	    if ('variant' in $$props) $$invalidate(3, variant = $$props.variant);
+	    if ('type' in $$props) $$invalidate(3, type = $$props.type);
 	    if ('headingsize' in $$props) $$invalidate(4, headingsize = $$props.headingsize);
 	  };
 
-	  return [title, actions, content, variant, headingsize];
+	  return [title, actions, content, type, headingsize];
 	}
 
 	class ContainerWrapper_test extends SvelteElement {
@@ -13707,7 +13743,7 @@
 	      title: 0,
 	      actions: 1,
 	      content: 2,
-	      variant: 3,
+	      type: 3,
 	      headingsize: 4
 	    }, null);
 
@@ -13724,7 +13760,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["title", "actions", "content", "variant", "headingsize"];
+	    return ["title", "actions", "content", "type", "headingsize"];
 	  }
 
 	  get title() {
@@ -13760,13 +13796,13 @@
 	    flush();
 	  }
 
-	  get variant() {
+	  get type() {
 	    return this.$$.ctx[3];
 	  }
 
-	  set variant(variant) {
+	  set type(type) {
 	    this.$$set({
-	      variant
+	      type
 	    });
 	    flush();
 	  }
@@ -14256,9 +14292,9 @@
 	      padding = _a.padding,
 	      children = _a.children,
 	      actions = _a.actions,
-	      variant = _a.variant;
+	      type = _a.type;
 	  return jsxRuntime.jsxs("goa-container", __assign({
-	    variant: variant,
+	    type: type,
 	    padding: padding,
 	    headingsize: headingSize,
 	    colored: colored