@biggive/components 0.0.21 → 0.0.25

package/dist/collection/components/biggive-boxed-content/biggive-boxed-content.css

@@ -0,0 +1,408 @@
+body {
+  background-color: #D7D7D7;
+}
+
+h1 {
+  font-size: 50px;
+  line-height: 60px;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 38px;
+  line-height: 45px;
+  font-weight: bold;
+}
+
+h3 {
+  font-size: 25px;
+  line-height: 32px;
+  font-weight: bold;
+}
+
+h4 {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+h5 {
+  font-size: 17px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+.colour-primary {
+  color: #2C089B;
+}
+
+.colour-secondary {
+  color: #2AF135;
+}
+
+.colour-tertiary {
+  color: #FF7272;
+}
+
+.colour-white {
+  color: #FFFFFF;
+}
+
+.colour-black {
+  color: #000000;
+}
+
+.text-colour-primary {
+  color: #2C089B;
+}
+
+.text-colour-secondary {
+  color: #2AF135;
+}
+
+.text-colour-tertiary {
+  color: #FF7272;
+}
+
+.text-colour-white {
+  color: #FFFFFF;
+}
+
+.text-colour-black {
+  color: #000000;
+}
+
+.fill-primary {
+  fill: #2C089B;
+}
+
+.fill-secondary {
+  fill: #2AF135;
+}
+
+.fill-tertiary {
+  fill: #FF7272;
+}
+
+.fill-white {
+  fill: #FFFFFF;
+}
+
+.fill-black {
+  fill: #000000;
+}
+
+.background-colour-primary {
+  background-color: #2C089B;
+}
+
+.background-colour-secondary {
+  background-color: #2AF135;
+}
+
+.background-colour-tertiary {
+  background-color: #FF7272;
+}
+
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-black {
+  background-color: #000000;
+}
+
+.input-wrap {
+  display: flex;
+  justify-content: space-between;
+}
+
+.input-text {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+  color: #000000;
+  padding: 5px 10px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.input-text:focus {
+  outline: 0;
+}
+.input-text:placeholder {
+  color: #4A4A4A;
+}
+
+.button {
+  font-size: 18px;
+  line-height: 23px;
+  padding: 15px 30px;
+  border-radius: 5px;
+  border: 1px solid #000000;
+  background-color: #000000;
+  filter: drop-shadow(0px 8px 20px rgba(0, 0, 0, 0.22));
+  color: #FFFFFF;
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  transition: all ease-in-out 0.5s;
+  cursor: pointer;
+}
+.button:hover {
+  background-color: #FFFFFF;
+  color: #000000;
+}
+
+.button-primary {
+  color: #FFFFFF;
+  background-color: #2C089B;
+  border-color: #2C089B;
+}
+.button-primary:hover {
+  color: #2C089B;
+  background-color: #FFFFFF;
+}
+
+.button-secondary {
+  color: #2C089B;
+  background-color: #2AF135;
+  border-color: #2AF135;
+}
+.button-secondary:hover {
+  background-color: #FFFFFF;
+}
+
+.button-tertiary {
+  color: #FFFFFF;
+  background-color: #FF7272;
+  border-color: #FF7272;
+}
+.button-tertiary:hover {
+  background-color: #FFFFFF;
+}
+
+.button-clear-primary {
+  color: #2C089B;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-primary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-secondary {
+  color: #2AF135;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-secondary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-tertiary {
+  color: #FF7272;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-tertiary:hover {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-clear-white {
+  color: #FFFFFF;
+  background-color: transparent;
+  text-decoration: underline;
+  box-shadow: none;
+  border: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+.button-clear-white:hover {
+  color: #FFFFFF;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.button-rounded {
+  border-radius: 50%;
+}
+
+.progress-bar {
+  display: flex;
+}
+.progress-bar .slider {
+  margin: auto 15px auto 0;
+  position: relative;
+  flex-grow: 1;
+}
+.progress-bar .slider:before {
+  content: "";
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: #E8E8E8;
+  border-radius: 4px;
+}
+.progress-bar .slider .progress {
+  position: relative;
+  border-radius: 4px;
+  background-color: #000000;
+  height: 8px;
+}
+.progress-bar .counter {
+  font-weight: 700;
+  color: #000000;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.progress-bar-primary .slider .progress {
+  background-color: #2C089B;
+}
+.progress-bar-primary .counter {
+  color: #2C089B;
+}
+
+.progress-bar-secondary .slider .progress {
+  background-color: #2AF135;
+}
+.progress-bar-secondary .counter {
+  color: #2AF135;
+}
+
+.video-wrap video {
+  width: 100%;
+  height: auto;
+}
+
+.image-wrap img {
+  width: 100%;
+  height: auto;
+}
+
+.space-below-0 {
+  margin-bottom: 0;
+}
+
+.space-below-1 {
+  margin-bottom: 5px;
+}
+
+.space-below-2 {
+  margin-bottom: 10px;
+}
+
+.space-below-3 {
+  margin-bottom: 15px;
+}
+
+.space-below-4 {
+  margin-bottom: 30px;
+}
+
+.space-below-5 {
+  margin-bottom: 45px;
+}
+
+.space-below-6 {
+  margin-bottom: 60px;
+}
+
+.horizontal-padding-1 {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.horizontal-padding-2 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.horizontal-padding-3 {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.horizontal-padding-4 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.horizontal-padding-5 {
+  padding-left: 45px;
+  padding-right: 45px;
+}
+
+.horizontal-padding-6 {
+  padding-left: 60px;
+  padding-right: 60px;
+}
+
+.vertical-padding-1 {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.vertical-padding-2 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.vertical-padding-3 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.vertical-padding-4 {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.vertical-padding-5 {
+  padding-top: 45px;
+  padding-bottom: 45px;
+}
+
+.vertical-padding-6 {
+  padding-top: 60px;
+  padding-bottom: 60px;
+}
+
+:host {
+  display: content;
+}
+
+.container {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+}
+.container.shadow-true {
+  filter: drop-shadow(-1px 3px 12px rgba(0, 0, 0, 0.25));
+}

package/dist/collection/components/biggive-boxed-content/biggive-boxed-content.js

@@ -0,0 +1,138 @@
+import { Component, Prop, h } from '@stencil/core';
+export class BiggiveBoxedContent {
+  constructor() {
+    /**
+     * Space below component
+     */
+    this.spaceBelow = 0;
+    /**
+     * Vertical padding
+     */
+    this.verticalPadding = 3;
+    /**
+     * Horizontal padding
+     */
+    this.horizontalPadding = 3;
+    /**
+     * Background colour
+     */
+    this.backgroundColour = 'white';
+    /**
+     * Shadow
+     */
+    this.shadow = true;
+  }
+  render() {
+    return (h("div", { class: 'container background-colour-' +
+        this.backgroundColour +
+        ' space-below-' +
+        this.spaceBelow +
+        ' horizontal-padding-' +
+        this.horizontalPadding +
+        ' vertical-padding-' +
+        this.verticalPadding +
+        ' shadow-' +
+        this.shadow },
+      h("slot", null)));
+  }
+  static get is() { return "biggive-boxed-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["biggive-boxed-content.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["biggive-boxed-content.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"
+    },
+    "verticalPadding": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Vertical padding"
+      },
+      "attribute": "vertical-padding",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "horizontalPadding": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Horizontal padding"
+      },
+      "attribute": "horizontal-padding",
+      "reflect": false,
+      "defaultValue": "3"
+    },
+    "backgroundColour": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Background colour"
+      },
+      "attribute": "background-colour",
+      "reflect": false,
+      "defaultValue": "'white'"
+    },
+    "shadow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Shadow"
+      },
+      "attribute": "shadow",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+}

package/dist/collection/components/biggive-boxed-content/biggive-boxed-content.stories.js

@@ -0,0 +1,60 @@
+export default {
+  title: 'Components/Layout',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    horizontalPadding: {
+      name: 'Horizontal padding',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    verticalPadding: {
+      name: 'Vertical padding',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    backgroundColour: {
+      name: 'Background colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'white', 'black'],
+      },
+    },
+    shadow: {
+      name: 'Shadow',
+    },
+  },
+};
+const Template = args => `
+            <biggive-boxed-content
+              space-below="${args.spaceBelow}"  
+              horizontal-padding="${args.horizontalPadding}"   
+              vertical-padding="${args.verticalPadding}"    
+              background-colour="${args.backgroundColour}"
+              shadow="${args.shadow}"
+              >
+  
+              <biggive-quote 
+                attribution="Joe Bloggs"
+                quote="Lorem ipsum">
+              </biggive-quote>
+
+            </biggive-boxed-content>
+            `;
+export const BoxedContentComponent = Template.bind({});
+BoxedContentComponent.args = {
+  spaceBelow: 4,
+  horizontalPadding: '3',
+  verticalPadding: '4',
+  backgroundColour: 'white',
+  shadow: true,
+};