npm - @biggive/components - Versions diffs - 1.0.7 → 1.0.81 - Mend

@biggive/components 1.0.7 → 1.0.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

package/dist/collection/components/biggive-header/biggive-header.stories.js CHANGED Viewed

@@ -1,8 +1,17 @@
 export default {
   title: 'Components/Header and Footer',
 };
-const Template = () => `
-    <biggive-header>
+const Template = args => `
+    <biggive-header
+      space-below="${args.spaceBelow}"
+      >
+      <div slot="social-icons">
+        <biggive-social-icon service="Facebook" url="https://www.facebook.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+        <biggive-social-icon service="Twitter" url="https://www.twitter.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+        <biggive-social-icon service="LinkedIn" url="https://www.linkedin.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+        <biggive-social-icon service="YouTube" url="https://www.youtube.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+        <biggive-social-icon service="Instagram" url="https://www.instagram.com" background-colour="tertiary" icon-colour="black"></biggive-social-icon>
+      </div>
       <ul slot="nav-primary">
         <li><a href="#">Explore Campaigns</a></li>
         <li><a href="#">For Charities</a></li>
@@ -18,3 +27,7 @@ const Template = () => `
     </biggive-header>
     `;
 export const HeaderComponent = Template.bind({});
+HeaderComponent.args = {
+  spaceBelow: '0',
+  logoUrl: '/',
+};

package/dist/collection/components/biggive-heading/biggive-heading.css CHANGED Viewed

@@ -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 {
@@ -461,29 +502,4 @@ a:hover {
 }
 .container .heading-colour-black {
   color: #000000;
-}
-.container .heading-size-1 {
-  font-size: 50px;
-  line-height: 60px;
-  font-weight: bold;
-}
-.container .heading-size-2 {
-  font-size: 38px;
-  line-height: 45px;
-  font-weight: bold;
-}
-.container .heading-size-3 {
-  font-size: 25px;
-  line-height: 32px;
-  font-weight: bold;
-}
-.container .heading-size-4 {
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: bold;
-}
-.container .heading-size-5 {
-  font-size: 17px;
-  line-height: 24px;
-  font-weight: bold;
 }

package/dist/collection/components/biggive-heading/biggive-heading.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class BiggiveHeading {
   render() {
     const Tag = this.htmlElement;
     return (h("div", { class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow },
-      h(Tag, { class: 'heading-colour-' + this.colour + ' heading-size-' + this.size }, this.text)));
+      h(Tag, { class: 'heading-colour-' + this.colour + ' heading-' + this.size }, this.text)));
   }
   static get is() { return "biggive-heading"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/biggive-hero-image/biggive-hero-image.css CHANGED Viewed

@@ -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 {
@@ -471,6 +512,9 @@ a:hover {
 .container .sleeve {
   display: flex;
   justify-content: space-between;
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
 }
 .content-wrap {

package/dist/collection/components/biggive-icon-group/biggive-icon-group.css CHANGED Viewed

@@ -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-image/biggive-image.css CHANGED Viewed

@@ -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 {