@abgov/react-components 4.0.0-alpha.97 → 4.0.0-alpha.98

package/lib/hero-banner/hero-banner.d.ts

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 interface WCProps {
     heading: string;
     backgroundurl: string;
+    minheight?: string;
 }
 declare global {
     namespace JSX {
@@ -13,6 +14,7 @@ declare global {
 interface Props {
     heading: string;
     backgroundUrl: string;
+    minHeight?: string;
     children?: React.ReactNode;
 }
 export declare const GoAHeroBanner: FC<Props>;

package/package.json

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

package/react-components.esm.js

@@ -9299,6 +9299,9 @@ function create_fragment$h(ctx) {
       set_style(div1, "background-size", "cover");
       set_style(div1, "background-position", "center");
       set_style(div1, "background-repeat", "no-repeat");
+      set_style(div1, "min-height",
+      /*minheight*/
+      ctx[2]);
     },
 
     m(target, anchor) {
@@ -9326,6 +9329,14 @@ function create_fragment$h(ctx) {
         /*backgroundurl*/
         ctx[1] + ")");
       }
+
+      if (dirty &
+      /*minheight*/
+      4) {
+        set_style(div1, "min-height",
+        /*minheight*/
+        ctx[2]);
+      }
     },
 
     i: noop,
@@ -9345,26 +9356,31 @@ function instance$f($$self, $$props, $$invalidate) {
   let {
     backgroundurl
   } = $$props;
+  let {
+    minheight = "600px"
+  } = $$props;
 
   $$self.$$set = $$props => {
     if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
     if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
+    if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
   };
 
-  return [heading, backgroundurl];
+  return [heading, backgroundurl, minheight];
 }
 
 class HeroBanner extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;min-height:600px;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
       customElement: true
     }, instance$f, create_fragment$h, safe_not_equal, {
       heading: 0,
-      backgroundurl: 1
+      backgroundurl: 1,
+      minheight: 2
     }, null);
 
     if (options) {
@@ -9380,7 +9396,7 @@ class HeroBanner extends SvelteElement {
   }
 
   static get observedAttributes() {
-    return ["heading", "backgroundurl"];
+    return ["heading", "backgroundurl", "minheight"];
   }
 
   get heading() {
@@ -9405,6 +9421,17 @@ class HeroBanner extends SvelteElement {
     flush();
   }
 
+  get minheight() {
+    return this.$$.ctx[2];
+  }
+
+  set minheight(minheight) {
+    this.$$set({
+      minheight
+    });
+    flush();
+  }
+
 }
 
 customElements.define("goa-hero-banner", HeroBanner);
@@ -16489,11 +16516,13 @@ const GoAGrid = ({
 const GoAHeroBanner = ({
   heading,
   backgroundUrl,
+  minHeight,
   children
 }) => {
   return jsx("goa-hero-banner", Object.assign({
     heading: heading,
-    backgroundurl: backgroundUrl
+    backgroundurl: backgroundUrl,
+    minheight: minHeight
   }, {
     children: children
   }), void 0);

package/react-components.umd.js

@@ -9344,6 +9344,9 @@
 	      set_style(div1, "background-size", "cover");
 	      set_style(div1, "background-position", "center");
 	      set_style(div1, "background-repeat", "no-repeat");
+	      set_style(div1, "min-height",
+	      /*minheight*/
+	      ctx[2]);
 	    },
 
 	    m(target, anchor) {
@@ -9371,6 +9374,14 @@
 	        /*backgroundurl*/
 	        ctx[1] + ")");
 	      }
+
+	      if (dirty &
+	      /*minheight*/
+	      4) {
+	        set_style(div1, "min-height",
+	        /*minheight*/
+	        ctx[2]);
+	      }
 	    },
 
 	    i: noop,
@@ -9390,26 +9401,31 @@
 	  let {
 	    backgroundurl
 	  } = $$props;
+	  let {
+	    minheight = "600px"
+	  } = $$props;
 
 	  $$self.$$set = $$props => {
 	    if ('heading' in $$props) $$invalidate(0, heading = $$props.heading);
 	    if ('backgroundurl' in $$props) $$invalidate(1, backgroundurl = $$props.backgroundurl);
+	    if ('minheight' in $$props) $$invalidate(2, minheight = $$props.minheight);
 	  };
 
-	  return [heading, backgroundurl];
+	  return [heading, backgroundurl, minheight];
 	}
 
 	class HeroBanner extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;min-height:600px;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}.goa-hero{box-sizing:border-box;display:flex;justify-content:flex-end;flex-direction:column;border-bottom:8px solid var(--goa-color-brand);color:var(--color-white);background-position:center center;width:100%;padding:3.5rem 0}h1{margin:0 0 1.75rem;padding:0;color:var(--color-white);font-size:var(--fs-3xl);line-height:var(--lh-2xl);font-weight:var(--fw-bold)}.goa-hero-banner-content{font-size:1.5rem;line-height:2rem;margin-bottom:1.75rem;color:#fff}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
 	      customElement: true
 	    }, instance$f, create_fragment$h, safe_not_equal, {
 	      heading: 0,
-	      backgroundurl: 1
+	      backgroundurl: 1,
+	      minheight: 2
 	    }, null);
 
 	    if (options) {
@@ -9425,7 +9441,7 @@
 	  }
 
 	  static get observedAttributes() {
-	    return ["heading", "backgroundurl"];
+	    return ["heading", "backgroundurl", "minheight"];
 	  }
 
 	  get heading() {
@@ -9450,6 +9466,17 @@
 	    flush();
 	  }
 
+	  get minheight() {
+	    return this.$$.ctx[2];
+	  }
+
+	  set minheight(minheight) {
+	    this.$$set({
+	      minheight
+	    });
+	    flush();
+	  }
+
 	}
 
 	customElements.define("goa-hero-banner", HeroBanner);
@@ -16560,10 +16587,12 @@
 	var GoAHeroBanner = function GoAHeroBanner(_a) {
 	  var heading = _a.heading,
 	      backgroundUrl = _a.backgroundUrl,
+	      minHeight = _a.minHeight,
 	      children = _a.children;
 	  return jsxRuntime.jsx("goa-hero-banner", __assign({
 	    heading: heading,
-	    backgroundurl: backgroundUrl
+	    backgroundurl: backgroundUrl,
+	    minheight: minHeight
 	  }, {
 	    children: children
 	  }), void 0);