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

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.52",
   "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();
   }
@@ -13533,8 +13533,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 +13591,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 +13630,7 @@ function instance$1($$self, $$props, $$invalidate) {
     content
   } = $$props;
   let {
-    variant = "default"
+    type = "default"
   } = $$props;
   let {
     headingsize = "large"
@@ -13640,11 +13640,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 +13658,7 @@ class ContainerWrapper_test extends SvelteElement {
       title: 0,
       actions: 1,
       content: 2,
-      variant: 3,
+      type: 3,
       headingsize: 4
     }, null);
 
@@ -13675,7 +13675,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 +13711,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 +14174,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();
 	  }
@@ -13582,8 +13582,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 +13640,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 +13679,7 @@
 	    content
 	  } = $$props;
 	  let {
-	    variant = "default"
+	    type = "default"
 	  } = $$props;
 	  let {
 	    headingsize = "large"
@@ -13689,11 +13689,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 +13707,7 @@
 	      title: 0,
 	      actions: 1,
 	      content: 2,
-	      variant: 3,
+	      type: 3,
 	      headingsize: 4
 	    }, null);
 
@@ -13724,7 +13724,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["title", "actions", "content", "variant", "headingsize"];
+	    return ["title", "actions", "content", "type", "headingsize"];
 	  }
 
 	  get title() {
@@ -13760,13 +13760,13 @@
 	    flush();
 	  }
 
-	  get variant() {
+	  get type() {
 	    return this.$$.ctx[3];
 	  }
 
-	  set variant(variant) {
+	  set type(type) {
 	    this.$$set({
-	      variant
+	      type
 	    });
 	    flush();
 	  }
@@ -14256,9 +14256,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