@abgov/web-components 1.0.0-alpha.107 → 1.0.0-alpha.108

package/package.json

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

package/web-components.es.js

@@ -3782,16 +3782,15 @@ function create_fragment$s(ctx) {
 			this.c = noop;
 			attr(div0, "class", "title");
 			attr(div1, "class", "actions");
-			attr(header, "class", header_class_value = "heading--" + /*headingsize*/ ctx[1]);
+			attr(header, "class", header_class_value = "heading--" + /*accent*/ ctx[1]);
 			attr(div2, "class", "content");
 
 			attr(div3, "class", div3_class_value = `
     goa-container
     goa-container--${/*type*/ ctx[0]}
     padding--${/*padding*/ ctx[2]}
+    accent--${/*accent*/ ctx[1]}
   `);
-
-			toggle_class(div3, "colored", /*_colored*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -3803,21 +3802,18 @@ function create_fragment$s(ctx) {
 			append(div3, div2);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*headingsize*/ 2 && header_class_value !== (header_class_value = "heading--" + /*headingsize*/ ctx[1])) {
+			if (dirty & /*accent*/ 2 && header_class_value !== (header_class_value = "heading--" + /*accent*/ ctx[1])) {
 				attr(header, "class", header_class_value);
 			}
 
-			if (dirty & /*type, padding*/ 5 && div3_class_value !== (div3_class_value = `
+			if (dirty & /*type, padding, accent*/ 7 && div3_class_value !== (div3_class_value = `
     goa-container
     goa-container--${/*type*/ ctx[0]}
     padding--${/*padding*/ ctx[2]}
+    accent--${/*accent*/ ctx[1]}
   `)) {
 				attr(div3, "class", div3_class_value);
 			}
-
-			if (dirty & /*type, padding, _colored*/ 13) {
-				toggle_class(div3, "colored", /*_colored*/ ctx[3]);
-			}
 		},
 		i: noop,
 		o: noop,
@@ -3828,32 +3824,23 @@ function create_fragment$s(ctx) {
 }
 
 function instance$q($$self, $$props, $$invalidate) {
-	let _colored;
-	let { type = 'non-interactive' } = $$props;
-	let { colored = "false" } = $$props;
-	let { headingsize = 'large' } = $$props;
+	let { type = 'interactive' } = $$props;
+	let { accent = 'filled' } = $$props;
 	let { padding = "relaxed" } = $$props;
 
 	$$self.$$set = $$props => {
 		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 ('accent' in $$props) $$invalidate(1, accent = $$props.accent);
 		if ('padding' in $$props) $$invalidate(2, padding = $$props.padding);
 	};
 
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*colored*/ 16) {
-			$$invalidate(3, _colored = toBoolean(colored));
-		}
-	};
-
-	return [type, headingsize, padding, _colored, colored];
+	return [type, accent, padding];
 }
 
 class Container extends SvelteElement {
 	constructor(options) {
 		super();
-		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
+		this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.accent--filled .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.accent--filled .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.accent--filled .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.accent--filled .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.accent--filled .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--thick{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--thick .title{line-height:2rem}.heading--thin{height:0.5rem}.heading--filled{display:none}.heading--filled~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--thin .title,.heading--thin .actions{display:none}.actions{display:flex;align-items:center}</style>`;
 
 		init(
 			this,
@@ -3865,12 +3852,7 @@ class Container extends SvelteElement {
 			instance$q,
 			create_fragment$s,
 			safe_not_equal,
-			{
-				type: 0,
-				colored: 4,
-				headingsize: 1,
-				padding: 2
-			},
+			{ type: 0, accent: 1, padding: 2 },
 			null
 		);
 
@@ -3887,7 +3869,7 @@ class Container extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["type", "colored", "headingsize", "padding"];
+		return ["type", "accent", "padding"];
 	}
 
 	get type() {
@@ -3899,21 +3881,12 @@ class Container extends SvelteElement {
 		flush();
 	}
 
-	get colored() {
-		return this.$$.ctx[4];
-	}
-
-	set colored(colored) {
-		this.$$set({ colored });
-		flush();
-	}
-
-	get headingsize() {
+	get accent() {
 		return this.$$.ctx[1];
 	}
 
-	set headingsize(headingsize) {
-		this.$$set({ headingsize });
+	set accent(accent) {
+		this.$$set({ accent });
 		flush();
 	}
 
@@ -4334,7 +4307,7 @@ function create_fragment$r(ctx) {
 	};
 }
 
-const MAX_HEIGHT = "300px";
+const MAX_HEIGHT = "276px";
 
 function instance$p($$self, $$props, $$invalidate) {
 	let _disabled;
@@ -11226,10 +11199,69 @@ 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;
 	let section;
@@ -11312,7 +11344,7 @@ class TwoColumnLayout extends SvelteElement {
 				customElement: true
 			},
 			instance$2,
-			create_fragment$4,
+			create_fragment$3,
 			safe_not_equal,
 			{ navcolumnwidth: 0, maxcontentwidth: 1 },
 			null
@@ -11357,7 +11389,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 {
@@ -11406,7 +11438,7 @@ class FullScreenNavbarLayout extends SvelteElement {
 				customElement: true
 			},
 			null,
-			create_fragment$3,
+			create_fragment$2,
 			safe_not_equal,
 			{},
 			null
@@ -11470,7 +11502,7 @@ function create_if_block(ctx) {
 	};
 }
 
-function create_fragment$2(ctx) {
+function create_fragment$1(ctx) {
 	let goa_container;
 	let t0;
 	let t1;
@@ -11490,7 +11522,7 @@ function create_fragment$2(ctx) {
 			attr(div, "class", "content");
 			attr(div, "slot", "");
 			set_custom_element_data(goa_container, "type", /*type*/ ctx[3]);
-			set_custom_element_data(goa_container, "headingsize", /*headingsize*/ ctx[4]);
+			set_custom_element_data(goa_container, "accent", /*accent*/ ctx[4]);
 		},
 		m(target, anchor) {
 			insert(target, goa_container, anchor);
@@ -11533,8 +11565,8 @@ function create_fragment$2(ctx) {
 				set_custom_element_data(goa_container, "type", /*type*/ ctx[3]);
 			}
 
-			if (dirty & /*headingsize*/ 16) {
-				set_custom_element_data(goa_container, "headingsize", /*headingsize*/ ctx[4]);
+			if (dirty & /*accent*/ 16) {
+				set_custom_element_data(goa_container, "accent", /*accent*/ ctx[4]);
 			}
 		},
 		i: noop,
@@ -11552,17 +11584,17 @@ function instance$1($$self, $$props, $$invalidate) {
 	let { actions = "" } = $$props;
 	let { content } = $$props;
 	let { type = "default" } = $$props;
-	let { headingsize = "large" } = $$props;
+	let { accent = "thick" } = $$props;
 
 	$$self.$$set = $$props => {
 		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 ('type' in $$props) $$invalidate(3, type = $$props.type);
-		if ('headingsize' in $$props) $$invalidate(4, headingsize = $$props.headingsize);
+		if ('accent' in $$props) $$invalidate(4, accent = $$props.accent);
 	};
 
-	return [title, actions, content, type, headingsize];
+	return [title, actions, content, type, accent];
 }
 
 class ContainerWrapper_test extends SvelteElement {
@@ -11577,14 +11609,14 @@ class ContainerWrapper_test extends SvelteElement {
 				customElement: true
 			},
 			instance$1,
-			create_fragment$2,
+			create_fragment$1,
 			safe_not_equal,
 			{
 				title: 0,
 				actions: 1,
 				content: 2,
 				type: 3,
-				headingsize: 4
+				accent: 4
 			},
 			null
 		);
@@ -11602,7 +11634,7 @@ class ContainerWrapper_test extends SvelteElement {
 	}
 
 	static get observedAttributes() {
-		return ["title", "actions", "content", "type", "headingsize"];
+		return ["title", "actions", "content", "type", "accent"];
 	}
 
 	get title() {
@@ -11641,12 +11673,12 @@ class ContainerWrapper_test extends SvelteElement {
 		flush();
 	}
 
-	get headingsize() {
+	get accent() {
 		return this.$$.ctx[4];
 	}
 
-	set headingsize(headingsize) {
-		this.$$set({ headingsize });
+	set accent(accent) {
+		this.$$set({ accent });
 		flush();
 	}
 }
@@ -11655,7 +11687,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 {
@@ -11725,7 +11757,7 @@ class Divider extends SvelteElement {
 				customElement: true
 			},
 			instance,
-			create_fragment$1,
+			create_fragment,
 			safe_not_equal,
 			{ spacing: 1 },
 			null
@@ -11758,62 +11790,3 @@ 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);