@biggive/components 1.0.7 → 1.0.9

package/dist/collection/components/biggive-button/biggive-button.css

@@ -2,31 +2,35 @@ body {
   background-color: #D7D7D7;
 }
 
-h1 {
+h1, h3, h3, h4, h5, h6 {
+  margin-bottom: 0;
+}
+
+h1, .heading-1 {
   font-size: 50px;
   line-height: 60px;
   font-weight: bold;
 }
 
-h2 {
+h2, .heading-2 {
   font-size: 38px;
   line-height: 45px;
   font-weight: bold;
 }
 
-h3 {
+h3, .heading-3 {
   font-size: 25px;
   line-height: 32px;
   font-weight: bold;
 }
 
-h4 {
+h4, .heading-4 {
   font-size: 20px;
   line-height: 24px;
   font-weight: bold;
 }
 
-h5 {
+h5, .heading-5 {
   font-size: 17px;
   line-height: 24px;
   font-weight: bold;
@@ -60,22 +64,27 @@ a:hover {
   color: #000000;
 }
 
+.text-colour-hover-primary:hover,
 .text-colour-primary {
   color: #2C089B;
 }
 
+.text-colour-hover-secondary:hover,
 .text-colour-secondary {
   color: #2AF135;
 }
 
+.text-colour-hover-tertiary:hover,
 .text-colour-tertiary {
   color: #FF7272;
 }
 
+.text-colour-hover-white:hover,
 .text-colour-white {
   color: #FFFFFF;
 }
 
+.text-colour-hover-black:hover,
 .text-colour-black {
   color: #000000;
 }
@@ -100,22 +109,27 @@ a:hover {
   fill: #000000;
 }
 
+.background-colour-hover-primary:hover,
 .background-colour-primary {
   background-color: #2C089B;
 }
 
+.background-colour-hover-secondary:hover,
 .background-colour-secondary {
   background-color: #2AF135;
 }
 
+.background-colour-hover-tertiary:hover,
 .background-colour-tertiary {
   background-color: #FF7272;
 }
 
+.background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
 }
 
+.background-colour-hover-black:hover,
 .background-colour-black {
   background-color: #000000;
 }
@@ -142,9 +156,9 @@ a:hover {
 }
 
 .button {
-  font-size: 18px;
-  line-height: 23px;
-  padding: 15px 30px;
+  font-size: 17px;
+  line-height: 24px;
+  padding: 10px 30px;
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
@@ -160,6 +174,17 @@ a:hover {
   background-color: #FFFFFF;
   color: #000000;
 }
+.button.size-small {
+  font-size: 13px;
+  line-height: 17px;
+  padding: 5px 15px;
+}
+.button.button.rounded-true {
+  border-radius: 27.5px;
+}
+.button.button.rounded-true.size-small {
+  border-radius: 20px;
+}
 
 .button-primary {
   color: #FFFFFF;
@@ -247,7 +272,10 @@ a:hover {
 }
 
 .button-rounded {
-  border-radius: 50%;
+  border-radius: 27.5px;
+}
+.button-rounded.size-small {
+  border-radius: 20px;
 }
 
 .progress-bar {
@@ -296,9 +324,22 @@ a:hover {
   color: #2AF135;
 }
 
+.video-wrap {
+  position: relative;
+  padding-bottom: 56.25%;
+}
+
+.video-wrap iframe,
 .video-wrap video {
+  position: absolute;
+  border: 0;
+  display: block;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   width: 100%;
-  height: auto;
+  height: 100%;
 }
 
 .image-wrap img {

package/dist/collection/components/biggive-button/biggive-button.js

@@ -21,10 +21,18 @@ export class BiggiveButton {
      * Display full width
      */
     this.fullWidth = false;
+    /**
+     * Size
+     */
+    this.size = 'medium';
+    /**
+     * Rounded corners
+     */
+    this.rounded = true;
   }
   render() {
     return (h("div", { class: 'container space-below-' + this.spaceBelow },
-      h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() }, this.label)));
+      h("a", { href: this.url, class: 'button button-' + this.colourScheme + ' full-width-' + this.fullWidth.toString() + ' size-' + this.size + ' rounded-' + this.rounded.toString() }, this.label)));
   }
   static get is() { return "biggive-button"; }
   static get encapsulation() { return "shadow"; }
@@ -124,6 +132,42 @@ export class BiggiveButton {
       "attribute": "full-width",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "rounded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Rounded corners"
+      },
+      "attribute": "rounded",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
 }

package/dist/collection/components/biggive-button/biggive-button.stories.js

@@ -21,6 +21,19 @@ export default {
     url: {
       name: 'Url',
     },
+    fullWidth: {
+      name: 'Full width',
+    },
+    size: {
+      name: 'Size',
+      control: {
+        type: 'select',
+        options: ['small', 'medium'],
+      },
+    },
+    rounded: {
+      name: 'Rounded',
+    },
   },
 };
 const Template = args => `
@@ -30,6 +43,8 @@ const Template = args => `
       label=${args.label}
       url=${args.url}
       full-width=${args.fullWidth}
+      size=${args.size}
+      rounded=${args.rounded}
     </biggive-button>
     `;
 export const ButtonComponent = Template.bind({});
@@ -39,4 +54,6 @@ ButtonComponent.args = {
   label: 'Donate now',
   url: 'http://www.google.com',
   fullWidth: false,
+  size: 'medium',
+  rounded: false,
 };

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.css

@@ -2,31 +2,35 @@ body {
   background-color: #D7D7D7;
 }
 
-h1 {
+h1, h3, h3, h4, h5, h6 {
+  margin-bottom: 0;
+}
+
+h1, .heading-1 {
   font-size: 50px;
   line-height: 60px;
   font-weight: bold;
 }
 
-h2 {
+h2, .heading-2 {
   font-size: 38px;
   line-height: 45px;
   font-weight: bold;
 }
 
-h3 {
+h3, .heading-3 {
   font-size: 25px;
   line-height: 32px;
   font-weight: bold;
 }
 
-h4 {
+h4, .heading-4 {
   font-size: 20px;
   line-height: 24px;
   font-weight: bold;
 }
 
-h5 {
+h5, .heading-5 {
   font-size: 17px;
   line-height: 24px;
   font-weight: bold;
@@ -60,22 +64,27 @@ a:hover {
   color: #000000;
 }
 
+.text-colour-hover-primary:hover,
 .text-colour-primary {
   color: #2C089B;
 }
 
+.text-colour-hover-secondary:hover,
 .text-colour-secondary {
   color: #2AF135;
 }
 
+.text-colour-hover-tertiary:hover,
 .text-colour-tertiary {
   color: #FF7272;
 }
 
+.text-colour-hover-white:hover,
 .text-colour-white {
   color: #FFFFFF;
 }
 
+.text-colour-hover-black:hover,
 .text-colour-black {
   color: #000000;
 }
@@ -100,22 +109,27 @@ a:hover {
   fill: #000000;
 }
 
+.background-colour-hover-primary:hover,
 .background-colour-primary {
   background-color: #2C089B;
 }
 
+.background-colour-hover-secondary:hover,
 .background-colour-secondary {
   background-color: #2AF135;
 }
 
+.background-colour-hover-tertiary:hover,
 .background-colour-tertiary {
   background-color: #FF7272;
 }
 
+.background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
 }
 
+.background-colour-hover-black:hover,
 .background-colour-black {
   background-color: #000000;
 }
@@ -142,9 +156,9 @@ a:hover {
 }
 
 .button {
-  font-size: 18px;
-  line-height: 23px;
-  padding: 15px 30px;
+  font-size: 17px;
+  line-height: 24px;
+  padding: 10px 30px;
   border-radius: 5px;
   border: 1px solid #000000;
   background-color: #000000;
@@ -160,6 +174,17 @@ a:hover {
   background-color: #FFFFFF;
   color: #000000;
 }
+.button.size-small {
+  font-size: 13px;
+  line-height: 17px;
+  padding: 5px 15px;
+}
+.button.button.rounded-true {
+  border-radius: 27.5px;
+}
+.button.button.rounded-true.size-small {
+  border-radius: 20px;
+}
 
 .button-primary {
   color: #FFFFFF;
@@ -247,7 +272,10 @@ a:hover {
 }
 
 .button-rounded {
-  border-radius: 50%;
+  border-radius: 27.5px;
+}
+.button-rounded.size-small {
+  border-radius: 20px;
 }
 
 .progress-bar {
@@ -296,9 +324,22 @@ a:hover {
   color: #2AF135;
 }
 
+.video-wrap {
+  position: relative;
+  padding-bottom: 56.25%;
+}
+
+.video-wrap iframe,
 .video-wrap video {
+  position: absolute;
+  border: 0;
+  display: block;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   width: 100%;
-  height: auto;
+  height: 100%;
 }
 
 .image-wrap img {
@@ -456,23 +497,14 @@ a:hover {
 }
 
 .content-wrap .slug {
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: bold;
   margin: 0;
   padding: 0;
 }
 .content-wrap h2 {
-  font-size: 38px;
-  line-height: 45px;
-  font-weight: bold;
   margin: 0 0 5px 0;
   padding: 0;
 }
 .content-wrap .subtitle {
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: bold;
   margin: 0 0 5px 0;
   padding: 0;
 }

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.js

@@ -13,6 +13,10 @@ export class BiggiveCallToAction {
      * Default text colour
      */
     this.defaultTextColour = 'primary';
+    /**
+     * Slug size
+     */
+    this.slugSize = 4;
     /**
      * Slug colour
      */
@@ -25,10 +29,18 @@ export class BiggiveCallToAction {
      * Main title colour
      */
     this.mainTitleColour = '';
+    /**
+     * Main title size
+     */
+    this.mainTitleSize = 2;
     /**
      * Main title
      */
     this.mainTitle = null;
+    /**
+     * Main title size
+     */
+    this.subtitleSize = 4;
     /**
      * Subtitle colour
      */
@@ -74,9 +86,9 @@ export class BiggiveCallToAction {
     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: 'slug text-colour-' + this.subtitleColour }, this.subtitle),
+          h("div", { class: 'slug heading-' + this.slugSize + ' text-colour-' + this.slugColour }, this.slug),
+          h("h2", { class: 'title heading-' + this.mainTitleSize + ' text-colour-' + this.mainTitleColour }, this.mainTitle),
+          h("div", { class: 'slug heading-' + this.subtitleSize + ' text-colour-' + this.subtitleColour }, this.subtitle),
           h("div", { class: 'teaser text-colour-' + this.teaserColour }, this.teaser),
           this.primaryButtonLabel != null && this.primaryButtonUrl != null ? (h("div", { class: "button-wrap" },
             h("biggive-button", { "colour-scheme": this.primaryButtonColourScheme, url: this.primaryButtonUrl, label: this.primaryButtonLabel }))) : null,
@@ -146,6 +158,24 @@ export class BiggiveCallToAction {
       "reflect": false,
       "defaultValue": "'primary'"
     },
+    "slugSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Slug size"
+      },
+      "attribute": "slug-size",
+      "reflect": false,
+      "defaultValue": "4"
+    },
     "slugColour": {
       "type": "string",
       "mutable": false,
@@ -200,6 +230,24 @@ export class BiggiveCallToAction {
       "reflect": false,
       "defaultValue": "''"
     },
+    "mainTitleSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Main title size"
+      },
+      "attribute": "main-title-size",
+      "reflect": false,
+      "defaultValue": "2"
+    },
     "mainTitle": {
       "type": "string",
       "mutable": false,
@@ -218,6 +266,24 @@ export class BiggiveCallToAction {
       "reflect": false,
       "defaultValue": "null"
     },
+    "subtitleSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Main title size"
+      },
+      "attribute": "subtitle-size",
+      "reflect": false,
+      "defaultValue": "4"
+    },
     "subtitleColour": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.stories.js

@@ -22,6 +22,13 @@ export default {
         options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
       },
     },
+    slugSize: {
+      name: 'Slug size',
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4, 5],
+      },
+    },
     slugColour: {
       name: 'Slug colour',
       control: {
@@ -32,6 +39,13 @@ export default {
     slug: {
       name: 'Slug',
     },
+    mainTitleSize: {
+      name: 'Main title size',
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4, 5],
+      },
+    },
     mainTitleColour: {
       name: 'Main title colour',
       control: {
@@ -42,6 +56,13 @@ export default {
     mainTitle: {
       name: 'Main title',
     },
+    subtitleSize: {
+      name: 'Subtitle size',
+      control: {
+        type: 'select',
+        options: [1, 2, 3, 4, 5],
+      },
+    },
     subtitleColour: {
       name: 'Subtitle colour',
       control: {
@@ -95,10 +116,13 @@ const Template = args => `
         space-anove=${args.spaceAbove}
         space-below=${args.spaceBelow}
         default-text-colour="${args.defaultTextColour}"
+        slug-size="${args.slugSize}"
         slug-colour="${args.slugColour}"
         slug="${args.slug}"
+        main-title-size="${args.mainTitleSize}"
         main-title-colour="${args.mainTitleColour}"
         main-title="${args.mainTitle}"
+        subtitle-size="${args.subtitleSize}"
         subtitle-colour="${args.subtitleColour}"
         subtitle="${args.subtitle}"
         teaser-colour="${args.teaserColour}"
@@ -116,10 +140,13 @@ CallToActionComponent.args = {
   spaceAbove: 0,
   spaceBelow: 0,
   defaultTextColour: 'primary',
+  slugSize: 4,
   slugColour: '',
   slug: 'Test Slug',
+  mainTitleSize: 2,
   mainTitleColour: '',
   mainTitle: 'Test title',
+  subtitleSize: 4,
   subtitleColour: '',
   subtitle: 'Test subtitle',
   teaserColour: '',