@biggive/components 1.0.7 → 1.0.9

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

@@ -0,0 +1,272 @@
+import { Component, Prop, h } from '@stencil/core';
+export class BiggiveArticleCard {
+  constructor() {
+    /**
+     * Space below component
+     */
+    this.spaceBelow = 0;
+    /**
+     * Card background colour
+     */
+    this.backgroundColour = 'white';
+    /**
+     * Card background colour hover
+     */
+    this.backgroundColourHover = 'tertiary';
+    /**
+     * Text colour
+     */
+    this.textColour = 'black';
+    /**
+     * Slug
+     */
+    this.slug = null;
+    /**
+     * Date
+     */
+    this.date = null;
+    /**
+     * Main title
+     */
+    this.mainTitle = null;
+    /**
+     * Image URL
+     */
+    this.imageUrl = null;
+    /**
+     * Image Label
+     */
+    this.imageLabel = null;
+    /**
+     * Button label
+     */
+    this.buttonLabel = null;
+    /**
+     * Button URL
+     */
+    this.buttonUrl = null;
+  }
+  render() {
+    return (h("div", { class: 'container space-below-' + this.spaceBelow },
+      h("div", { class: 'sleeve background-colour-' + this.backgroundColour + ' background-colour-hover-' + this.backgroundColourHover + ' text-colour-' + this.textColour },
+        h("div", { class: "content-wrap" },
+          this.slug != '' ? h("div", { class: "slug text-colour-primary" }, this.slug) : null,
+          this.date != '' ? h("div", { class: "date" }, this.date) : null,
+          h("h3", { class: "title" },
+            h("a", { href: this.buttonUrl }, this.mainTitle)),
+          this.imageUrl != '' ? (h("div", { class: "image-group" },
+            h("div", { class: "image-wrap", style: { 'background-image': "url('" + this.imageUrl + "')" } },
+              h("img", { src: this.imageUrl })),
+            h("div", { class: "image-label" }, this.imageLabel))) : null,
+          this.buttonLabel != null && this.buttonUrl != null ? (h("div", { class: "button-wrap align-right" },
+            h("biggive-button", { "colour-scheme": 'clear-primary', url: this.buttonUrl, label: this.buttonLabel }))) : null))));
+  }
+  static get is() { return "biggive-article-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["biggive-article-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["biggive-article-card.css"]
+  }; }
+  static get properties() { return {
+    "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"
+    },
+    "backgroundColour": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Card background colour"
+      },
+      "attribute": "background-colour",
+      "reflect": false,
+      "defaultValue": "'white'"
+    },
+    "backgroundColourHover": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Card background colour hover"
+      },
+      "attribute": "background-colour-hover",
+      "reflect": false,
+      "defaultValue": "'tertiary'"
+    },
+    "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'"
+    },
+    "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"
+    },
+    "date": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Date"
+      },
+      "attribute": "date",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "mainTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Main title"
+      },
+      "attribute": "main-title",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "imageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image URL"
+      },
+      "attribute": "image-url",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "imageLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image Label"
+      },
+      "attribute": "image-label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "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"
+    },
+    "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"
+    }
+  }; }
+}

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

@@ -0,0 +1,84 @@
+export default {
+  title: 'Components/Content',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    backgroundColour: {
+      name: 'Background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black', 'transparent'],
+      },
+    },
+    backgroundColourHover: {
+      name: 'Hover background 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'],
+      },
+    },
+    slug: {
+      name: 'Slug',
+    },
+    date: {
+      name: 'Date',
+    },
+    mainTitle: {
+      name: 'Title',
+    },
+    imageUrl: {
+      name: 'Image URL',
+    },
+    imageLabel: {
+      name: 'Image Label',
+    },
+    buttonUrl: {
+      name: 'Button URL',
+    },
+    buttonLabel: {
+      name: 'Button label',
+    },
+  },
+};
+const Template = args => `
+              <biggive-article-card
+                space-below="${args.spaceBelow}"
+                background-colour="${args.backgroundColour}"
+                background-colour-hover="${args.backgroundColourHover}"
+                text-colour="${args.textColour}"
+                slug="${args.slug}"
+                date="${args.date}"
+                main-title="${args.mainTitle}"
+                image-url="${args.imageUrl}"
+                image-label="${args.imageLabel}"
+                button-label="${args.buttonLabel}"
+                button-url="${args.buttonUrl}"
+                >
+              </biggive-article-card>
+              `;
+export const ArticleCardComponent = Template.bind({});
+ArticleCardComponent.args = {
+  spaceBelow: 4,
+  backgroundColour: 'white',
+  backgroundColourHover: 'tertiary',
+  textColour: 'black',
+  slug: '• Blog Post   • Mental Health',
+  date: 'September 2022',
+  mainTitle: 'Sample main title',
+  imageUrl: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  imageLabel: 'By Joe Bloggs',
+  buttonUrl: '#',
+  buttonLabel: 'Click here',
+};

package/dist/collection/components/biggive-back-to-top/biggive-back-to-top.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-basic-card/biggive-basic-card.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 {
@@ -453,7 +494,6 @@ a:hover {
   padding: 30px;
 }
 .container .sleeve {
-  background-color: #FFFFFF;
   padding: 30px;
   clip-path: polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 50px 100%, 0 calc(100% - 50px));
 }
@@ -469,9 +509,4 @@ a:hover {
 }
 .container .subtitle {
   margin-bottom: 15px;
-}
-.container button {
-  font-family: "Euclid Triangle", sans-serif;
-  font-size: 17px;
-  line-height: 24px;
 }