@biggive/components 1.0.5 → 1.0.7

package/dist/collection/components/biggive-image/biggive-image.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-image/biggive-image.js

@@ -1,6 +1,10 @@
 import { Component, Prop, h } from '@stencil/core';
 export class BiggiveImage {
   constructor() {
+    /**
+     * Space above component
+     */
+    this.spaceAbove = 0;
     /**
      * Space below component
      */
@@ -9,11 +13,37 @@ export class BiggiveImage {
      * Full URL of a image.
      */
     this.imageUrl = '';
+    /**
+     * Image width
+     */
+    this.width = 0;
+    /**
+     * Image width
+     */
+    this.height = 0;
+    /**
+     * Size unit
+     */
+    this.sizeUnit = 'px';
+  }
+  getWidth() {
+    var width = 'auto';
+    if (this.width > 0) {
+      width = this.width + this.sizeUnit;
+    }
+    return width;
+  }
+  getHeight() {
+    var height = 'auto';
+    if (this.height > 0) {
+      height = this.height + this.sizeUnit;
+    }
+    return height;
   }
   render() {
-    return (h("div", { class: 'container space-below-' + this.spaceBelow },
+    return (h("div", { class: 'container space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow, style: { width: this.getWidth(), height: this.getHeight() } },
       h("div", { class: "image-wrap" },
-        h("img", { src: this.imageUrl }))));
+        h("img", { src: this.imageUrl, style: { width: this.getWidth(), height: this.getHeight() } }))));
   }
   static get is() { return "biggive-image"; }
   static get encapsulation() { return "shadow"; }
@@ -24,6 +54,24 @@ export class BiggiveImage {
     "$": ["biggive-image.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,
@@ -59,6 +107,60 @@ export class BiggiveImage {
       "attribute": "image-url",
       "reflect": false,
       "defaultValue": "''"
+    },
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image width"
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Image width"
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "sizeUnit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size unit"
+      },
+      "attribute": "size-unit",
+      "reflect": false,
+      "defaultValue": "'px'"
     }
   }; }
 }

package/dist/collection/components/biggive-image/biggive-image.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: {
@@ -11,16 +18,38 @@ export default {
     imageUrl: {
       name: 'Image URL',
     },
+    width: {
+      name: 'Width',
+    },
+    height: {
+      name: 'Height',
+    },
+    sizeUnit: {
+      name: 'Unit',
+      control: {
+        type: 'select',
+        options: ['px', '%'],
+      },
+    },
   },
 };
 const Template = args => `
               <biggive-image
+                space-above="${args.spaceAbove}"
                 space-below="${args.spaceBelow}"
-                image-url="${args.imageUrl}">
+                width="${args.width}"
+                height="${args.height}"
+                size-unit="${args.sizeUnit}"
+                image-url="${args.imageUrl}"
+                >
               </biggive-image>
               `;
 export const ImageComponent = Template.bind({});
 ImageComponent.args = {
+  spaceAbove: 4,
   spaceBelow: 4,
   imageUrl: 'https://media.istockphoto.com/vectors/childish-seamless-dotted-pattern-with-colorful-doodle-letters-fun-vector-id1208462693',
+  width: 0,
+  height: 0,
+  sizeUnit: null,
 };

package/dist/collection/components/biggive-image-feature/biggive-image-feature.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-misc-icon/biggive-misc-icon.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-page-columns/biggive-page-columns.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-page-section/biggive-page-section.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-progress-bar/biggive-progress-bar.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-quote/biggive-quote.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-search/biggive-search.css

@@ -306,6 +306,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 +350,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;

package/dist/collection/components/biggive-social-icon/biggive-social-icon.css

@@ -306,6 +306,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 +350,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;