@abgov/react-components 4.0.0-alpha.19 → 4.0.0-alpha.21

package/lib/app-header/app-header.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 interface WCProps {
-    title: string;
+    title?: string;
     url?: string;
 }
 declare global {
@@ -11,7 +11,7 @@ declare global {
     }
 }
 interface Props {
-    title: string;
+    title?: string;
     url?: string;
 }
 export declare const GoAAppHeader: FC<Props>;

package/package.json

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

package/react-components.esm.js

@@ -3812,7 +3812,7 @@ function create_fragment$q(ctx) {
       attr(div1, "class", "actions");
       attr(header, "class", header_class_value = "heading--" +
       /*headingsize*/
-      ctx[2]);
+      ctx[1]);
       attr(div2, "class", "content");
       attr(div3, "class", div3_class_value = `
     goa-container 
@@ -3821,11 +3821,11 @@ function create_fragment$q(ctx) {
       ctx[0]}
     padding--${
       /*padding*/
-      ctx[3]}
+      ctx[2]}
   `);
       toggle_class(div3, "colored",
-      /*colored*/
-      ctx[1]);
+      /*_colored*/
+      ctx[3]);
     },
 
     m(target, anchor) {
@@ -3841,32 +3841,32 @@ function create_fragment$q(ctx) {
     p(ctx, [dirty]) {
       if (dirty &
       /*headingsize*/
-      4 && header_class_value !== (header_class_value = "heading--" +
+      2 && header_class_value !== (header_class_value = "heading--" +
       /*headingsize*/
-      ctx[2])) {
+      ctx[1])) {
         attr(header, "class", header_class_value);
       }
 
       if (dirty &
       /*variant, padding*/
-      9 && div3_class_value !== (div3_class_value = `
+      5 && div3_class_value !== (div3_class_value = `
     goa-container 
     goa-container--${
       /*variant*/
       ctx[0]}
     padding--${
       /*padding*/
-      ctx[3]}
+      ctx[2]}
   `)) {
         attr(div3, "class", div3_class_value);
       }
 
       if (dirty &
-      /*variant, padding, colored*/
-      11) {
+      /*variant, padding, _colored*/
+      13) {
         toggle_class(div3, "colored",
-        /*colored*/
-        ctx[1]);
+        /*_colored*/
+        ctx[3]);
       }
     },
 
@@ -3881,11 +3881,13 @@ function create_fragment$q(ctx) {
 }
 
 function instance$o($$self, $$props, $$invalidate) {
+  let _colored;
+
   let {
     variant = 'default'
   } = $$props;
   let {
-    colored = false
+    colored = "false"
   } = $$props;
   let {
     headingsize = 'large'
@@ -3896,12 +3898,20 @@ function instance$o($$self, $$props, $$invalidate) {
 
   $$self.$$set = $$props => {
     if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
-    if ('colored' in $$props) $$invalidate(1, colored = $$props.colored);
-    if ('headingsize' in $$props) $$invalidate(2, headingsize = $$props.headingsize);
-    if ('padding' in $$props) $$invalidate(3, padding = $$props.padding);
+    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);
+  };
+
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty &
+    /*colored*/
+    16) {
+      $$invalidate(3, _colored = toBoolean(colored));
+    }
   };
 
-  return [variant, colored, headingsize, padding];
+  return [variant, headingsize, padding, _colored, colored];
 }
 
 class Container extends SvelteElement {
@@ -3914,9 +3924,9 @@ class Container extends SvelteElement {
       customElement: true
     }, instance$o, create_fragment$q, safe_not_equal, {
       variant: 0,
-      colored: 1,
-      headingsize: 2,
-      padding: 3
+      colored: 4,
+      headingsize: 1,
+      padding: 2
     }, null);
 
     if (options) {
@@ -3947,7 +3957,7 @@ class Container extends SvelteElement {
   }
 
   get colored() {
-    return this.$$.ctx[1];
+    return this.$$.ctx[4];
   }
 
   set colored(colored) {
@@ -3958,7 +3968,7 @@ class Container extends SvelteElement {
   }
 
   get headingsize() {
-    return this.$$.ctx[2];
+    return this.$$.ctx[1];
   }
 
   set headingsize(headingsize) {
@@ -3969,7 +3979,7 @@ class Container extends SvelteElement {
   }
 
   get padding() {
-    return this.$$.ctx[3];
+    return this.$$.ctx[2];
   }
 
   set padding(padding) {
@@ -5544,6 +5554,7 @@ function create_fragment$l(ctx) {
       attr(div0, "class", "goa-hero-banner-content");
       attr(div0, "role", "note");
       attr(slot1, "name", "actions");
+      set_custom_element_data(goa_page_block, "width", "full");
       attr(div1, "class", "goa-hero");
       attr(div1, "data-testid", "background");
       set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +

package/react-components.umd.js

@@ -3868,7 +3868,7 @@
 	      attr(div1, "class", "actions");
 	      attr(header, "class", header_class_value = "heading--" +
 	      /*headingsize*/
-	      ctx[2]);
+	      ctx[1]);
 	      attr(div2, "class", "content");
 	      attr(div3, "class", div3_class_value = `
     goa-container 
@@ -3877,11 +3877,11 @@
       ctx[0]}
     padding--${
       /*padding*/
-      ctx[3]}
+      ctx[2]}
   `);
 	      toggle_class(div3, "colored",
-	      /*colored*/
-	      ctx[1]);
+	      /*_colored*/
+	      ctx[3]);
 	    },
 
 	    m(target, anchor) {
@@ -3897,32 +3897,32 @@
 	    p(ctx, [dirty]) {
 	      if (dirty &
 	      /*headingsize*/
-	      4 && header_class_value !== (header_class_value = "heading--" +
+	      2 && header_class_value !== (header_class_value = "heading--" +
 	      /*headingsize*/
-	      ctx[2])) {
+	      ctx[1])) {
 	        attr(header, "class", header_class_value);
 	      }
 
 	      if (dirty &
 	      /*variant, padding*/
-	      9 && div3_class_value !== (div3_class_value = `
+	      5 && div3_class_value !== (div3_class_value = `
     goa-container 
     goa-container--${
       /*variant*/
       ctx[0]}
     padding--${
       /*padding*/
-      ctx[3]}
+      ctx[2]}
   `)) {
 	        attr(div3, "class", div3_class_value);
 	      }
 
 	      if (dirty &
-	      /*variant, padding, colored*/
-	      11) {
+	      /*variant, padding, _colored*/
+	      13) {
 	        toggle_class(div3, "colored",
-	        /*colored*/
-	        ctx[1]);
+	        /*_colored*/
+	        ctx[3]);
 	      }
 	    },
 
@@ -3937,11 +3937,13 @@
 	}
 
 	function instance$o($$self, $$props, $$invalidate) {
+	  let _colored;
+
 	  let {
 	    variant = 'default'
 	  } = $$props;
 	  let {
-	    colored = false
+	    colored = "false"
 	  } = $$props;
 	  let {
 	    headingsize = 'large'
@@ -3952,12 +3954,20 @@
 
 	  $$self.$$set = $$props => {
 	    if ('variant' in $$props) $$invalidate(0, variant = $$props.variant);
-	    if ('colored' in $$props) $$invalidate(1, colored = $$props.colored);
-	    if ('headingsize' in $$props) $$invalidate(2, headingsize = $$props.headingsize);
-	    if ('padding' in $$props) $$invalidate(3, padding = $$props.padding);
+	    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);
+	  };
+
+	  $$self.$$.update = () => {
+	    if ($$self.$$.dirty &
+	    /*colored*/
+	    16) {
+	      $$invalidate(3, _colored = toBoolean(colored));
+	    }
 	  };
 
-	  return [variant, colored, headingsize, padding];
+	  return [variant, headingsize, padding, _colored, colored];
 	}
 
 	class Container extends SvelteElement {
@@ -3970,9 +3980,9 @@
 	      customElement: true
 	    }, instance$o, create_fragment$q, safe_not_equal, {
 	      variant: 0,
-	      colored: 1,
-	      headingsize: 2,
-	      padding: 3
+	      colored: 4,
+	      headingsize: 1,
+	      padding: 2
 	    }, null);
 
 	    if (options) {
@@ -4003,7 +4013,7 @@
 	  }
 
 	  get colored() {
-	    return this.$$.ctx[1];
+	    return this.$$.ctx[4];
 	  }
 
 	  set colored(colored) {
@@ -4014,7 +4024,7 @@
 	  }
 
 	  get headingsize() {
-	    return this.$$.ctx[2];
+	    return this.$$.ctx[1];
 	  }
 
 	  set headingsize(headingsize) {
@@ -4025,7 +4035,7 @@
 	  }
 
 	  get padding() {
-	    return this.$$.ctx[3];
+	    return this.$$.ctx[2];
 	  }
 
 	  set padding(padding) {
@@ -5587,6 +5597,7 @@
 	      attr(div0, "class", "goa-hero-banner-content");
 	      attr(div0, "role", "note");
 	      attr(slot1, "name", "actions");
+	      set_custom_element_data(goa_page_block, "width", "full");
 	      attr(div1, "class", "goa-hero");
 	      attr(div1, "data-testid", "background");
 	      set_style(div1, "background-image", "linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 40%, rgba(0, 0, 0, 0.6) 100%), url(" +