@abgov/react-components 4.0.0-alpha.60 → 4.0.0-alpha.62

package/index.d.ts

@@ -26,8 +26,7 @@ export * from './lib/microsite-header/microsite-header';
 export * from './lib/modal/modal';
 export * from './lib/notification/notification';
 export * from './lib/page-block/page-block';
-export * from './lib/page/page';
-export * from './lib/page/page';
+export * from './lib/one-column-layout/one-column-layout';
 export * from './lib/radio-group/radio-group';
 export * from './lib/skeleton/skeleton';
 export * from './lib/spinner/spinner';

package/lib/button/button.d.ts

@@ -27,7 +27,7 @@ declare type ButtonProps = {
     disabled?: boolean;
     leadingIcon?: GoAIconType;
     trailingIcon?: GoAIconType;
-    onClick: (e: any) => void;
+    onClick?: (e: any) => void;
     children?: ReactNode;
 };
 export declare const GoAButton: FC<ButtonProps>;

package/lib/one-column-layout/one-column-layout.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-one-column-layout': React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface PageProps {
+    children?: ReactNode;
+}
+export declare function GoAOneColumnLayout(props: PageProps): JSX.Element;
+export default GoAOneColumnLayout;

package/package.json

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

package/react-components.esm.js

@@ -1328,6 +1328,10 @@ function toBoolean(value) {
 
   return !!value;
 }
+
+function fromBoolean(value) {
+  return value ? "true" : "false";
+}
 /* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.49.0 */
 
 
@@ -2985,7 +2989,7 @@ function create_if_block_1$9(ctx) {
     }
 
   };
-} // (49:4) {#if isIndeterminate}
+} // (51:4) {#if isIndeterminate}
 
 
 function create_if_block$f(ctx) {
@@ -3256,8 +3260,10 @@ function instance$t($$self, $$props, $$invalidate) {
     // out of sync with the events.
     const newCheckStatus = !isChecked;
 
-    const _value = newCheckStatus ? `${value || "checked"}` : "";
+    const _value = newCheckStatus ? `${value || "checked"}` : ""; // set the local state
 
+
+    $$invalidate(9, checked = fromBoolean(newCheckStatus));
     e.target.dispatchEvent(new CustomEvent("_change", {
       composed: true,
       detail: {
@@ -5310,7 +5316,7 @@ function create_fragment$r(ctx) {
   };
 }
 
-const MAX_HEIGHT = "300px";
+const MAX_HEIGHT = "276px";
 
 function instance$p($$self, $$props, $$invalidate) {
   let _disabled;
@@ -13545,9 +13551,60 @@ class TextArea extends SvelteElement {
 }
 
 customElements.define("goa-textarea", TextArea);
-/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.49.0 */
 
 function create_fragment$4(ctx) {
+  let div;
+  return {
+    c() {
+      div = element("div");
+      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
+
+  <main><slot></slot></main> 
+
+  <section class="footer"><slot name="footer"></slot></section>`;
+      this.c = noop;
+      attr(div, "class", "page");
+    },
+
+    m(target, anchor) {
+      insert(target, div, anchor);
+    },
+
+    p: noop,
+    i: noop,
+    o: noop,
+
+    d(detaching) {
+      if (detaching) detach(div);
+    }
+
+  };
+}
+
+class OneColumnLayout extends SvelteElement {
+  constructor(options) {
+    super();
+    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
+    init(this, {
+      target: this.shadowRoot,
+      props: attribute_to_object(this.attributes),
+      customElement: true
+    }, null, create_fragment$4, safe_not_equal, {}, null);
+
+    if (options) {
+      if (options.target) {
+        insert(options.target, this, options.anchor);
+      }
+    }
+  }
+
+}
+
+customElements.define("goa-one-column-layout", OneColumnLayout);
+/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+
+function create_fragment$3(ctx) {
   let div;
   let header;
   let t0;
@@ -13641,7 +13698,7 @@ class TwoColumnLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$2, create_fragment$4, safe_not_equal, {
+    }, instance$2, create_fragment$3, safe_not_equal, {
       navcolumnwidth: 0,
       maxcontentwidth: 1
     }, null);
@@ -13689,7 +13746,7 @@ class TwoColumnLayout extends SvelteElement {
 customElements.define("goa-two-column-layout", TwoColumnLayout);
 /* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$3(ctx) {
+function create_fragment$2(ctx) {
   let div;
   return {
     c() {
@@ -13733,7 +13790,7 @@ class FullScreenNavbarLayout extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, null, create_fragment$3, safe_not_equal, {}, null);
+    }, null, create_fragment$2, safe_not_equal, {}, null);
 
     if (options) {
       if (options.target) {
@@ -13812,7 +13869,7 @@ function create_if_block(ctx) {
   };
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$1(ctx) {
   let goa_container;
   let t0;
   let t1;
@@ -13955,7 +14012,7 @@ class ContainerWrapper_test extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance$1, create_fragment$2, safe_not_equal, {
+    }, instance$1, create_fragment$1, safe_not_equal, {
       title: 0,
       actions: 1,
       content: 2,
@@ -14039,7 +14096,7 @@ class ContainerWrapper_test extends SvelteElement {
 customElements.define("test-container", ContainerWrapper_test);
 /* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.49.0 */
 
-function create_fragment$1(ctx) {
+function create_fragment(ctx) {
   let hr;
   return {
     c() {
@@ -14119,7 +14176,7 @@ class Divider extends SvelteElement {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
-    }, instance, create_fragment$1, safe_not_equal, {
+    }, instance, create_fragment, safe_not_equal, {
       spacing: 1
     }, null);
 
@@ -14153,57 +14210,6 @@ class Divider extends SvelteElement {
 }
 
 customElements.define("goa-divider", Divider);
-/* libs/web-components/src/components/page/Page.svelte generated by Svelte v3.49.0 */
-
-function create_fragment(ctx) {
-  let div;
-  return {
-    c() {
-      div = element("div");
-      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
-
-  <main><slot></slot></main> 
-
-  <section class="footer"><slot name="footer"></slot></section>`;
-      this.c = noop;
-      attr(div, "class", "page");
-    },
-
-    m(target, anchor) {
-      insert(target, div, anchor);
-    },
-
-    p: noop,
-    i: noop,
-    o: noop,
-
-    d(detaching) {
-      if (detaching) detach(div);
-    }
-
-  };
-}
-
-class Page extends SvelteElement {
-  constructor(options) {
-    super();
-    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
-    init(this, {
-      target: this.shadowRoot,
-      props: attribute_to_object(this.attributes),
-      customElement: true
-    }, null, create_fragment, safe_not_equal, {}, null);
-
-    if (options) {
-      if (options.target) {
-        insert(options.target, this, options.anchor);
-      }
-    }
-  }
-
-}
-
-customElements.define("goa-page", Page);
 
 const GoAAppHeader = ({
   heading,
@@ -14342,6 +14348,10 @@ const GoAButton = ({
       return;
     }
 
+    if (!onClick) {
+      return;
+    }
+
     const current = el.current;
 
     const listener = e => {
@@ -15003,8 +15013,8 @@ const GoAPageBlock = props => {
   }), void 0);
 };
 
-function GoAPage(props) {
-  return jsx("goa-page", {
+function GoAOneColumnLayout(props) {
+  return jsx("goa-one-column-layout", {
     children: props.children
   }, void 0);
 }
@@ -15172,4 +15182,4 @@ function GoATwoColumnLayout(props) {
   }), void 0);
 }
 
-export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAImportantBadge, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPage, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoATwoColumnLayout };
+export { GoAAppFooter, GoAAppFooterMetaSection, GoAAppFooterNavSection, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADivider, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexCol, GoAFlexRow, GoAFormItem, 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, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoATwoColumnLayout };

package/react-components.umd.js

@@ -1369,6 +1369,10 @@
 
 	  return !!value;
 	}
+
+	function fromBoolean(value) {
+	  return value ? "true" : "false";
+	}
 	/* libs/web-components/src/components/badge/Badge.svelte generated by Svelte v3.49.0 */
 
 
@@ -3026,7 +3030,7 @@
 	    }
 
 	  };
-	} // (49:4) {#if isIndeterminate}
+	} // (51:4) {#if isIndeterminate}
 
 
 	function create_if_block$f(ctx) {
@@ -3297,8 +3301,10 @@
 	    // out of sync with the events.
 	    const newCheckStatus = !isChecked;
 
-	    const _value = newCheckStatus ? `${value || "checked"}` : "";
+	    const _value = newCheckStatus ? `${value || "checked"}` : ""; // set the local state
 
+
+	    $$invalidate(9, checked = fromBoolean(newCheckStatus));
 	    e.target.dispatchEvent(new CustomEvent("_change", {
 	      composed: true,
 	      detail: {
@@ -5352,7 +5358,7 @@
 	  };
 	}
 
-	const MAX_HEIGHT = "300px";
+	const MAX_HEIGHT = "276px";
 
 	function instance$p($$self, $$props, $$invalidate) {
 	  const showMenu = _async(function () {
@@ -13594,9 +13600,60 @@
 	}
 
 	customElements.define("goa-textarea", TextArea);
-	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+	/* libs/web-components/src/layouts/one-column-layout/OneColumnLayout.svelte generated by Svelte v3.49.0 */
 
 	function create_fragment$4(ctx) {
+	  let div;
+	  return {
+	    c() {
+	      div = element("div");
+	      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
+
+  <main><slot></slot></main> 
+
+  <section class="footer"><slot name="footer"></slot></section>`;
+	      this.c = noop;
+	      attr(div, "class", "page");
+	    },
+
+	    m(target, anchor) {
+	      insert(target, div, anchor);
+	    },
+
+	    p: noop,
+	    i: noop,
+	    o: noop,
+
+	    d(detaching) {
+	      if (detaching) detach(div);
+	    }
+
+	  };
+	}
+
+	class OneColumnLayout extends SvelteElement {
+	  constructor(options) {
+	    super();
+	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
+	    init(this, {
+	      target: this.shadowRoot,
+	      props: attribute_to_object(this.attributes),
+	      customElement: true
+	    }, null, create_fragment$4, safe_not_equal, {}, null);
+
+	    if (options) {
+	      if (options.target) {
+	        insert(options.target, this, options.anchor);
+	      }
+	    }
+	  }
+
+	}
+
+	customElements.define("goa-one-column-layout", OneColumnLayout);
+	/* libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte generated by Svelte v3.49.0 */
+
+	function create_fragment$3(ctx) {
 	  let div;
 	  let header;
 	  let t0;
@@ -13690,7 +13747,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$2, create_fragment$4, safe_not_equal, {
+	    }, instance$2, create_fragment$3, safe_not_equal, {
 	      navcolumnwidth: 0,
 	      maxcontentwidth: 1
 	    }, null);
@@ -13738,7 +13795,7 @@
 	customElements.define("goa-two-column-layout", TwoColumnLayout);
 	/* libs/web-components/src/layouts/FullScreenNavbarLayout.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$3(ctx) {
+	function create_fragment$2(ctx) {
 	  let div;
 	  return {
 	    c() {
@@ -13782,7 +13839,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, null, create_fragment$3, safe_not_equal, {}, null);
+	    }, null, create_fragment$2, safe_not_equal, {}, null);
 
 	    if (options) {
 	      if (options.target) {
@@ -13861,7 +13918,7 @@
 	  };
 	}
 
-	function create_fragment$2(ctx) {
+	function create_fragment$1(ctx) {
 	  let goa_container;
 	  let t0;
 	  let t1;
@@ -14004,7 +14061,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance$1, create_fragment$2, safe_not_equal, {
+	    }, instance$1, create_fragment$1, safe_not_equal, {
 	      title: 0,
 	      actions: 1,
 	      content: 2,
@@ -14088,7 +14145,7 @@
 	customElements.define("test-container", ContainerWrapper_test);
 	/* libs/web-components/src/components/divider/Divider.svelte generated by Svelte v3.49.0 */
 
-	function create_fragment$1(ctx) {
+	function create_fragment(ctx) {
 	  let hr;
 	  return {
 	    c() {
@@ -14168,7 +14225,7 @@
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
-	    }, instance, create_fragment$1, safe_not_equal, {
+	    }, instance, create_fragment, safe_not_equal, {
 	      spacing: 1
 	    }, null);
 
@@ -14202,57 +14259,6 @@
 	}
 
 	customElements.define("goa-divider", Divider);
-	/* libs/web-components/src/components/page/Page.svelte generated by Svelte v3.49.0 */
-
-	function create_fragment(ctx) {
-	  let div;
-	  return {
-	    c() {
-	      div = element("div");
-	      div.innerHTML = `<section class="header"><slot name="header"></slot></section> 
-
-  <main><slot></slot></main> 
-
-  <section class="footer"><slot name="footer"></slot></section>`;
-	      this.c = noop;
-	      attr(div, "class", "page");
-	    },
-
-	    m(target, anchor) {
-	      insert(target, div, anchor);
-	    },
-
-	    p: noop,
-	    i: noop,
-	    o: noop,
-
-	    d(detaching) {
-	      if (detaching) detach(div);
-	    }
-
-	  };
-	}
-
-	class Page extends SvelteElement {
-	  constructor(options) {
-	    super();
-	    this.shadowRoot.innerHTML = `<style>.page{height:100vh;display:flex;flex-direction:column}.header,.footer{flex:0 0 auto}main{flex:1 1 auto}</style>`;
-	    init(this, {
-	      target: this.shadowRoot,
-	      props: attribute_to_object(this.attributes),
-	      customElement: true
-	    }, null, create_fragment, safe_not_equal, {}, null);
-
-	    if (options) {
-	      if (options.target) {
-	        insert(options.target, this, options.anchor);
-	      }
-	    }
-	  }
-
-	}
-
-	customElements.define("goa-page", Page);
 
 	/*! *****************************************************************************
 	Copyright (c) Microsoft Corporation.
@@ -14423,6 +14429,10 @@
 	      return;
 	    }
 
+	    if (!onClick) {
+	      return;
+	    }
+
 	    var current = el.current;
 
 	    var listener = function listener(e) {
@@ -15042,8 +15052,8 @@
 	  }), void 0);
 	};
 
-	function GoAPage(props) {
-	  return jsxRuntime.jsx("goa-page", {
+	function GoAOneColumnLayout(props) {
+	  return jsxRuntime.jsx("goa-one-column-layout", {
 	    children: props.children
 	  }, void 0);
 	}
@@ -15251,7 +15261,7 @@
 	exports.GoAMicrositeHeader = GoAMicrositeHeader;
 	exports.GoAModal = GoAModal;
 	exports.GoANotification = GoANotification;
-	exports.GoAPage = GoAPage;
+	exports.GoAOneColumnLayout = GoAOneColumnLayout;
 	exports.GoAPageBlock = GoAPageBlock;
 	exports.GoARadioGroup = GoARadioGroup;
 	exports.GoARadioItem = GoARadioItem;

package/lib/page/page.d.ts

@@ -1,13 +0,0 @@
-import React, { ReactNode } from "react";
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'goa-page': React.HTMLAttributes<HTMLElement>;
-        }
-    }
-}
-export interface PageProps {
-    children?: ReactNode;
-}
-export declare function GoAPage(props: PageProps): JSX.Element;
-export default GoAPage;