@biggive/components 1.0.96 → 1.0.97

package/dist/collection/components/biggive-video-feature/biggive-video-feature.css

@@ -218,6 +218,26 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-white {
+  color: #2C089B;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #2C089B;
+}
+
+.button-black {
+  color: #FFFFFF;
+  background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+}
+
 .button-clear-primary {
   color: #2C089B;
   background-color: transparent;
@@ -497,29 +517,43 @@ a:hover {
   display: flex;
   justify-content: space-between;
 }
-.container .content-wrap {
+.container .sleeve .content-wrap {
   width: calc(40% - 15px);
   position: relative;
   z-index: 1;
 }
-.container .content-wrap .slug {
+.container .sleeve .content-wrap .slug {
   font-size: 20px;
   line-height: 24px;
   font-weight: bold;
   margin: 0;
   padding: 0;
 }
-.container .content-wrap h2 {
+.container .sleeve .content-wrap h2 {
   font-size: 38px;
   line-height: 45px;
   font-weight: bold;
   margin: 0 0 15px 0;
   padding: 0;
 }
-.container .content-wrap .teaser {
+.container .sleeve .content-wrap .teaser {
   margin: 0 0 45px 0;
   padding: 0;
 }
-.container .graphic-wrap {
+.container .sleeve .graphic-wrap {
   width: calc(60% - 15px);
+}
+
+@media screen and (max-width: 576px) {
+  .container .sleeve {
+    flex-wrap: wrap;
+  }
+  .container .sleeve .content-wrap {
+    width: 100%;
+  }
+  .container .sleeve .graphic-wrap {
+    width: 100%;
+    margin-bottom: 15px;
+    order: -1;
+  }
 }

package/dist/collection/components/biggive-video-feature/biggive-video-feature.js

@@ -1,312 +1,272 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 import { VideoService } from '../../util/video';
 export class BiggiveVideoFeature {
   constructor() {
-    /**
-     * Space above component
-     */
     this.spaceAbove = 0;
-    /**
-     * Space below component
-     */
     this.spaceBelow = 0;
-    /**
-     * Default text colour
-     */
     this.defaultTextColour = 'primary';
-    /**
-     * Full URL of a video.
-     */
     this.videoUrl = '';
-    /**
-     * Slug
-     */
     this.slug = null;
-    /**
-     * Slug colour
-     */
     this.slugColour = '';
-    /**
-     * Video title
-     */
     this.mainTitle = null;
-    /**
-     * Slug colour
-     */
     this.mainTitleColour = '';
-    /**
-     * Introductory teaser text
-     */
     this.teaser = null;
-    /**
-     * Teaser colour
-     */
     this.teaserColour = '';
-    /**
-     * Button Url
-     */
     this.buttonUrl = null;
-    /**
-     * Button Label
-     */
     this.buttonLabel = null;
-    /**
-     * Button Colour Scheme
-     */
     this.buttonColourScheme = 'primary';
   }
   render() {
-    return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow },
-      h("div", { class: "sleeve" },
-        h("div", { class: "content-wrap" },
-          h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug),
-          h("h2", { class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle),
-          h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser),
-          this.buttonLabel != null && this.buttonUrl != null ? (h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })) : null),
-        h("div", { class: "graphic-wrap" }, this.videoUrl.length > 0 ? h("div", { class: "video-wrap", innerHTML: VideoService.getEmbedHtml(this.videoUrl) }) : null))));
+    return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h("div", { class: "sleeve" }, h("div", { class: "content-wrap" }, h("div", { class: 'slug text-colour-' + this.slugColour }, this.slug), h("h2", { class: 'title text-colour-' + this.mainTitleColour }, this.mainTitle), h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser), this.buttonLabel != null && this.buttonUrl != null ? (h("biggive-button", { "colour-scheme": this.buttonColourScheme, url: this.buttonUrl, label: this.buttonLabel })) : null), h("div", { class: "graphic-wrap" }, this.videoUrl.length > 0 ? h("div", { class: "video-wrap", innerHTML: VideoService.getEmbedHtml(this.videoUrl) }) : null))));
   }
   static get is() { return "biggive-video-feature"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-video-feature.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-video-feature.css"]
-  }; }
-  static get properties() { return {
-    "spaceAbove": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Space above component"
-      },
-      "attribute": "space-above",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "spaceBelow": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Space below component"
-      },
-      "attribute": "space-below",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "defaultTextColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Default text colour"
-      },
-      "attribute": "default-text-colour",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "videoUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Full URL of a video."
-      },
-      "attribute": "video-url",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "slug": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Slug"
-      },
-      "attribute": "slug",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "slugColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Slug colour"
-      },
-      "attribute": "slug-colour",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "mainTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Video title"
-      },
-      "attribute": "main-title",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "mainTitleColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-video-feature.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-video-feature.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spaceAbove": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Space above component"
+        },
+        "attribute": "space-above",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Slug colour"
+      "spaceBelow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Space below component"
+        },
+        "attribute": "space-below",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "main-title-colour",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "teaser": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "defaultTextColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Default text colour"
+        },
+        "attribute": "default-text-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Introductory teaser text"
+      "videoUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Full URL of a video."
+        },
+        "attribute": "video-url",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "teaser",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "teaserColour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "slug": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slug"
+        },
+        "attribute": "slug",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Teaser colour"
+      "slugColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slug colour"
+        },
+        "attribute": "slug-colour",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "teaser-colour",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "buttonUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "mainTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Video title"
+        },
+        "attribute": "main-title",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Url"
+      "mainTitleColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Slug colour"
+        },
+        "attribute": "main-title-colour",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "button-url",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "buttonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "teaser": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Introductory teaser text"
+        },
+        "attribute": "teaser",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Label"
+      "teaserColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Teaser colour"
+        },
+        "attribute": "teaser-colour",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "button-label",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "buttonColourScheme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "buttonUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button Url"
+        },
+        "attribute": "button-url",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button Colour Scheme"
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button Label"
+        },
+        "attribute": "button-label",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "button-colour-scheme",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    }
-  }; }
+      "buttonColourScheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button Colour Scheme"
+        },
+        "attribute": "button-colour-scheme",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
 }