@biggive/components 1.0.7 → 1.0.81

package/dist/collection/components/biggive-basic-card/biggive-basic-card.js

@@ -6,13 +6,21 @@ export class BiggiveBasicCard {
      */
     this.spaceBelow = 0;
     /**
-     * Full URL of the background image.
+     * Background colour.
      */
-    this.backgroundColour = 'white';
+    this.backgroundColour = 'primary';
     /**
      * Full URL of the background image.
      */
     this.backgroundImageUrl = '';
+    /**
+     * Card colour
+     */
+    this.cardColour = 'white';
+    /**
+     * Text colour
+     */
+    this.textColour = 'black';
     /**
      * Main title
      */
@@ -40,7 +48,7 @@ export class BiggiveBasicCard {
   }
   render() {
     return (h("div", { class: 'container space-below-' + this.spaceBelow + ' background-colour-' + this.backgroundColour, style: { 'background-image': "url('" + this.backgroundImageUrl + "')" } },
-      h("div", { class: "sleeve" },
+      h("div", { class: 'sleeve background-colour-' + this.cardColour + ' text-colour-' + this.textColour },
         h("div", { class: "content-wrap" },
           h("div", { class: "icon" },
             h("svg", { width: "53", height: "39", viewBox: "0 0 53 39", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -90,11 +98,11 @@ export class BiggiveBasicCard {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Full URL of the background image."
+        "text": "Background colour."
       },
       "attribute": "background-colour",
       "reflect": false,
-      "defaultValue": "'white'"
+      "defaultValue": "'primary'"
     },
     "backgroundImageUrl": {
       "type": "string",
@@ -114,6 +122,42 @@ export class BiggiveBasicCard {
       "reflect": false,
       "defaultValue": "''"
     },
+    "cardColour": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Card colour"
+      },
+      "attribute": "card-colour",
+      "reflect": false,
+      "defaultValue": "'white'"
+    },
+    "textColour": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text colour"
+      },
+      "attribute": "text-colour",
+      "reflect": false,
+      "defaultValue": "'black'"
+    },
     "mainTitle": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/biggive-basic-card/biggive-basic-card.stories.js

@@ -8,9 +8,30 @@ export default {
         options: [0, 1, 2, 3, 4, 5, 6],
       },
     },
+    backgroundColour: {
+      name: 'Background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'transparent'],
+      },
+    },
     backgroundImageUrl: {
       name: 'Background image URL',
     },
+    cardColour: {
+      name: 'Card colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'transparent'],
+      },
+    },
+    textColour: {
+      name: 'Text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'transparent'],
+      },
+    },
     iconColour: {
       name: 'Icon colour',
       control: {
@@ -44,6 +65,8 @@ const Template = args => `
                 space-below="${args.spaceBelow}"
                 background-colour="${args.backgroundColour}"
                 background-image-url="${args.backgroundImageUrl}"
+                card-colour="${args.cardColour}"
+                text-colour="${args.textColour}"
                 icon-colour="${args.iconColour}"
                 mainTitle="${args.mainTitle}"
                 subtitle="${args.subtitle}"
@@ -59,6 +82,8 @@ BasicCardComponent.args = {
   iconColour: 'primary',
   backgroundColour: 'white',
   backgroundImageUrl: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  cardColour: 'white',
+  textColour: 'white',
   mainTitle: 'Sample main title',
   subtitle: 'Sample subtitle',
   buttonUrl: '#',

package/dist/collection/components/biggive-beneficiary-icon/biggive-beneficiary-icon.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-boxed-content/biggive-boxed-content.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-branded-image/biggive-branded-image.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 {