@biggive/components 202303201257.0.0 → 202303231047.0.0

package/dist/collection/components/biggive-generic-icon/biggive-generic-icon.js

@@ -0,0 +1,144 @@
+import { h } from '@stencil/core';
+import { FontAwesomeIconsService } from '../../util/fontawesome-icons';
+export class BiggiveGenericIcon {
+  constructor() {
+    this.backgroundColour = 'primary';
+    this.iconColour = 'white';
+    this.iconGroup = undefined;
+    this.icon = undefined;
+    this.url = undefined;
+  }
+  getIcon() {
+    let icon;
+    if (this.iconGroup == 'beneficiary') {
+      icon = FontAwesomeIconsService.getBeneficiaryIcon(this.icon);
+    }
+    else if (this.iconGroup == 'misc') {
+      icon = FontAwesomeIconsService.getMiscIcon(this.icon);
+    }
+    else if (this.iconGroup == 'social') {
+      icon = FontAwesomeIconsService.getSocialIcon(this.icon);
+    }
+    else if (this.iconGroup == 'category') {
+      icon = FontAwesomeIconsService.getCategoryIcon(this.icon);
+    }
+    return icon;
+  }
+  render() {
+    return (
+    // Note: the icon name prop is set as a css class too for any styling specific to certain icons
+    h("div", { class: 'generic-icon-item background-colour-' + this.backgroundColour + ' ' + this.icon }, h("a", { href: this.url }, this.getIcon() ? (h("svg", { width: this.getIcon().icon[0], height: this.getIcon().icon[1], xmlns: "http://www.w3.org/2000/svg", class: 'fill-' + this.iconColour, viewBox: '0 0 ' + this.getIcon().icon[0] + ' ' + this.getIcon().icon[1] }, h("path", { d: this.getIcon().icon[4].toString() }))) : null)));
+  }
+  static get is() { return "biggive-generic-icon"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-generic-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-generic-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backgroundColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "background-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "iconColour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "brandColour",
+          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "references": {
+            "brandColour": {
+              "location": "import",
+              "path": "../../globals/brand-colour"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-colour",
+        "reflect": false,
+        "defaultValue": "'white'"
+      },
+      "iconGroup": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'beneficiary' | 'misc' | 'social' | 'category'",
+          "resolved": "\"beneficiary\" | \"category\" | \"misc\" | \"social\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon-group",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "url",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/biggive-generic-icon/biggive-generic-icon.stories.js

@@ -0,0 +1,53 @@
+export default {
+  title: 'Components/Icons',
+  argTypes: {
+    backgroundColour: {
+      name: 'Background Colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    iconColour: {
+      name: 'Icon Colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    iconGroup: {
+      name: 'Icon Group',
+      control: {
+        type: 'select',
+        options: ['beneficiary', 'misc', 'social', 'category'],
+      },
+    },
+    icon: {
+      name: 'Service',
+      control: {
+        type: 'select',
+        options: ['AlarmClock', 'Heart'],
+      },
+    },
+    url: {
+      name: 'Url',
+    },
+  },
+};
+const Template = args => `
+            <biggive-generic-icon
+              background-colour="${args.backgroundColour}"
+              icon-colour="${args.iconColour}"
+              icon-group="${args.iconGroup}"
+              icon="${args.icon}"
+              url="${args.url}"
+            </biggive-misc-icon>
+            `;
+export const GenericIconComponent = Template.bind({});
+GenericIconComponent.args = {
+  backgroundColour: 'primary',
+  iconColour: 'white',
+  iconGroup: 'misc',
+  icon: 'AlarmClock',
+  url: '#',
+};

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

@@ -83,8 +83,8 @@ a:hover {
   display: block;
 }
 
-.column-count-4 ::slotted(*) {
-  width: 25%;
+.column-count-2 ::slotted(*) {
+  width: 50%;
   display: flex;
   flex-direction: column;
 }
@@ -95,23 +95,183 @@ a:hover {
   flex-direction: column;
 }
 
-.column-count-2 ::slotted(*) {
-  width: 50%;
+.column-count-4 ::slotted(*) {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+}
+
+.column-count-5 ::slotted(*) {
+  width: 20%;
   display: flex;
   flex-direction: column;
 }
 
+.column-count-6 ::slotted(*) {
+  width: 16.6666666667%;
+  display: flex;
+  flex-direction: column;
+}
+
+.column-gap-1 {
+  justify-content: space-between;
+}
+
+.column-gap-2 {
+  justify-content: space-between;
+}
+
+.column-gap-3 {
+  justify-content: space-between;
+}
+
+.column-gap-4 {
+  justify-content: space-between;
+}
+
+.column-gap-5 {
+  justify-content: space-between;
+}
+
+.column-gap-6 {
+  justify-content: space-between;
+}
+
+.column-count-2.column-gap-1 ::slotted(*) {
+  width: calc(50% - 2.5px);
+}
+
+.column-count-2.column-gap-2 ::slotted(*) {
+  width: calc(50% - 5px);
+}
+
+.column-count-2.column-gap-3 ::slotted(*) {
+  width: calc(50% - 7.5px);
+}
+
+.column-count-2.column-gap-4 ::slotted(*) {
+  width: calc(50% - 15px);
+}
+
+.column-count-2.column-gap-5 ::slotted(*) {
+  width: calc(50% - 22.5px);
+}
+
+.column-count-2.column-gap-6 ::slotted(*) {
+  width: calc(50% - 30px);
+}
+
+.column-count-3.column-gap-1 ::slotted(*) {
+  width: calc(33.3333333333% - 3.3333333333px);
+}
+
+.column-count-3.column-gap-2 ::slotted(*) {
+  width: calc(33.3333333333% - 6.6666666667px);
+}
+
+.column-count-3.column-gap-3 ::slotted(*) {
+  width: calc(33.3333333333% - 10px);
+}
+
+.column-count-3.column-gap-4 ::slotted(*) {
+  width: calc(33.3333333333% - 20px);
+}
+
+.column-count-3.column-gap-5 ::slotted(*) {
+  width: calc(33.3333333333% - 30px);
+}
+
+.column-count-3.column-gap-6 ::slotted(*) {
+  width: calc(33.3333333333% - 40px);
+}
+
+.column-count-4.column-gap-1 ::slotted(*) {
+  width: calc(25% - 3.75px);
+}
+
+.column-count-4.column-gap-2 ::slotted(*) {
+  width: calc(25% - 7.5px);
+}
+
+.column-count-4.column-gap-3 ::slotted(*) {
+  width: calc(25% - 11.25px);
+}
+
+.column-count-4.column-gap-4 ::slotted(*) {
+  width: calc(25% - 22.5px);
+}
+
+.column-count-4.column-gap-5 ::slotted(*) {
+  width: calc(25% - 33.75px);
+}
+
+.column-count-4.column-gap-6 ::slotted(*) {
+  width: calc(25% - 45px);
+}
+
+.column-count-5.column-gap-1 ::slotted(*) {
+  width: calc(20% - 4px);
+}
+
+.column-count-5.column-gap-2 ::slotted(*) {
+  width: calc(20% - 8px);
+}
+
+.column-count-5.column-gap-3 ::slotted(*) {
+  width: calc(20% - 12px);
+}
+
+.column-count-5.column-gap-4 ::slotted(*) {
+  width: calc(20% - 24px);
+}
+
+.column-count-5.column-gap-5 ::slotted(*) {
+  width: calc(20% - 36px);
+}
+
+.column-count-5.column-gap-6 ::slotted(*) {
+  width: calc(20% - 48px);
+}
+
+.column-count-6.column-gap-1 ::slotted(*) {
+  width: calc(16.6666666667% - 4.1666666667px);
+}
+
+.column-count-6.column-gap-2 ::slotted(*) {
+  width: calc(16.6666666667% - 8.3333333333px);
+}
+
+.column-count-6.column-gap-3 ::slotted(*) {
+  width: calc(16.6666666667% - 12.5px);
+}
+
+.column-count-6.column-gap-4 ::slotted(*) {
+  width: calc(16.6666666667% - 25px);
+}
+
+.column-count-6.column-gap-5 ::slotted(*) {
+  width: calc(16.6666666667% - 37.5px);
+}
+
+.column-count-6.column-gap-6 ::slotted(*) {
+  width: calc(16.6666666667% - 50px);
+}
+
 @media screen and (max-width: 768px) {
   .column-count-2 ::slotted(*),
 .column-count-3 ::slotted(*),
-.column-count-4 ::slotted(*) {
+.column-count-4 ::slotted(*),
+.column-count-5 ::slotted(*),
+.column-count-6 ::slotted(*) {
     width: calc(50% - 15px);
   }
 }
 @media screen and (max-width: 576px) {
   .column-count-2 ::slotted(*),
 .column-count-3 ::slotted(*),
-.column-count-4 ::slotted(*) {
+.column-count-4 ::slotted(*),
+.column-count-5 ::slotted(*),
+.column-count-6 ::slotted(*) {
     width: 100%;
   }
 }

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

@@ -4,9 +4,10 @@ export class BiggiveGrid {
     this.spaceBelow = 4;
     this.columnCount = 3;
     this.spaceBetween = false;
+    this.columnGap = 0;
   }
   render() {
-    return (h("div", { class: 'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + (this.spaceBetween ? ' space-between' : '') }, h("slot", null)));
+    return (h("div", { class: 'grid column-count-' + this.columnCount + ' space-below-' + this.spaceBelow + ' column-gap-' + this.columnGap + (this.spaceBetween ? ' space-between' : '') }, h("slot", null)));
   }
   static get is() { return "biggive-grid"; }
   static get encapsulation() { return "shadow"; }
@@ -34,7 +35,7 @@ export class BiggiveGrid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Space below component"
+          "text": ""
         },
         "attribute": "space-below",
         "reflect": false,
@@ -52,7 +53,7 @@ export class BiggiveGrid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Number of columns in grid"
+          "text": ""
         },
         "attribute": "column-count",
         "reflect": false,
@@ -70,11 +71,34 @@ export class BiggiveGrid {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Should have `justify-content: space-between`?"
+          "text": "Deprecated - should use columGap Instead"
         },
         "attribute": "space-between",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "columnGap": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "spacingOption",
+          "resolved": "0 | 1 | 2 | 3 | 4 | 5 | 6",
+          "references": {
+            "spacingOption": {
+              "location": "import",
+              "path": "../../globals/spacing-option"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "column-gap",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }