@biggive/components 1.0.6 → 1.0.8

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 {
@@ -306,6 +347,22 @@ a:hover {
   height: auto;
 }
 
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-justify {
+  text-align: justify;
+}
+
 .space-below-0 {
   margin-bottom: 0;
 }
@@ -334,6 +391,34 @@ a:hover {
   margin-bottom: 60px;
 }
 
+.space-above-0 {
+  margin-top: 0;
+}
+
+.space-above-1 {
+  margin-top: 5px;
+}
+
+.space-above-2 {
+  margin-top: 10px;
+}
+
+.space-above-3 {
+  margin-top: 15px;
+}
+
+.space-above-4 {
+  margin-top: 30px;
+}
+
+.space-above-5 {
+  margin-top: 45px;
+}
+
+.space-above-6 {
+  margin-top: 60px;
+}
+
 .horizontal-padding-1 {
   padding-left: 5px;
   padding-right: 5px;
@@ -412,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

@@ -1,6 +1,10 @@
 import { Component, Prop, h } from '@stencil/core';
 export class BiggiveCallToAction {
   constructor() {
+    /**
+     * Space above component
+     */
+    this.spaceAbove = 0;
     /**
      * Space below component
      */
@@ -9,6 +13,10 @@ export class BiggiveCallToAction {
      * Default text colour
      */
     this.defaultTextColour = 'primary';
+    /**
+     * Slug size
+     */
+    this.slugSize = 4;
     /**
      * Slug colour
      */
@@ -21,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
      */
@@ -67,12 +83,12 @@ export class BiggiveCallToAction {
     this.secondaryButtonColourScheme = 'primary';
   }
   render() {
-    return (h("div", { class: 'container text-colour-' + this.defaultTextColour + ' space-below-' + this.spaceBelow },
+    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,
@@ -88,6 +104,24 @@ export class BiggiveCallToAction {
     "$": ["biggive-call-to-action.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,
@@ -124,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,
@@ -178,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,
@@ -196,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

@@ -1,6 +1,13 @@
 export default {
   title: 'Components/Content',
   argTypes: {
+    spaceAbove: {
+      name: 'Space above',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
     spaceBelow: {
       name: 'Space below',
       control: {
@@ -15,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: {
@@ -25,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: {
@@ -35,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: {
@@ -85,12 +113,16 @@ export default {
 };
 const Template = args => `
       <biggive-call-to-action
+        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}"
@@ -105,12 +137,16 @@ const Template = args => `
       `;
 export const CallToActionComponent = Template.bind({});
 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: '',