@biggive/components 202303031447.0.0 → 202303061752.0.0

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

@@ -0,0 +1,315 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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-brand-1:hover,
+.text-colour-brand-1 {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-2:hover,
+.text-colour-brand-2 {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-3:hover,
+.text-colour-brand-3 {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-4:hover,
+.text-colour-brand-4 {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-5:hover,
+.text-colour-brand-5 {
+  color: #F07D00;
+}
+
+.text-colour-hover-brand-6:hover,
+.text-colour-brand-6 {
+  color: #CBC8C8;
+}
+
+.text-colour-hover-white:hover,
+.text-colour-white {
+  color: #FFFFFF;
+}
+
+.text-colour-hover-black:hover,
+.text-colour-black {
+  color: #000000;
+}
+
+.text-colour-hover-grey-extra-light:hover,
+.text-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+
+.text-colour-hover-grey-light:hover,
+.text-colour-grey-light {
+  color: #E8E8E8;
+}
+
+.text-colour-hover-grey-medium:hover,
+.text-colour-grey-medium {
+  color: #8A8A8A;
+}
+
+.text-colour-hover-grey-dark:hover,
+.text-colour-grey-dark {
+  color: #4A4A4A;
+}
+
+:host {
+  display: contents;
+}
+
+.container {
+  font-family: "Euclid Triangle", sans-serif;
+  font-size: 17px;
+  line-height: 24px;
+  position: relative;
+}
+.container .entry h3.heading {
+  position: relative;
+  margin: 15px 0 0 0;
+  padding: 10px 60px 10px 20px;
+  border-bottom: 1px solid #000000;
+  cursor: pointer;
+}
+.container .entry h3.heading span.arrow {
+  display: block;
+  position: absolute;
+  right: 20px;
+  top: 10px;
+  width: 40px;
+  height: 20px;
+  text-align: center;
+}
+.container .entry .content {
+  overflow: hidden;
+  max-height: 0;
+  padding: 0 20px;
+  transition: max-height 0.5s ease-in-out;
+}
+.container .entry.expanded .content {
+  max-height: 100%;
+}
+.container .entry.expanded span.arrow {
+  transform: rotate(-180deg);
+}
+.container.heading-colour-primary .entry h3.heading svg path {
+  stroke: #2C089B;
+}
+.container.heading-colour-primary h3.heading {
+  color: #2C089B;
+}
+.container.text-colour-primary .content {
+  color: #2C089B;
+}
+.container.heading-colour-secondary .entry h3.heading svg path {
+  stroke: #2AF135;
+}
+.container.heading-colour-secondary h3.heading {
+  color: #2AF135;
+}
+.container.text-colour-secondary .content {
+  color: #2AF135;
+}
+.container.heading-colour-tertiary .entry h3.heading svg path {
+  stroke: #FF7272;
+}
+.container.heading-colour-tertiary h3.heading {
+  color: #FF7272;
+}
+.container.text-colour-tertiary .content {
+  color: #FF7272;
+}
+.container.heading-colour-brand-1 .entry h3.heading svg path {
+  stroke: #B30510;
+}
+.container.heading-colour-brand-1 h3.heading {
+  color: #B30510;
+}
+.container.text-colour-brand-1 .content {
+  color: #B30510;
+}
+.container.heading-colour-brand-2 .entry h3.heading svg path {
+  stroke: #6E0887;
+}
+.container.heading-colour-brand-2 h3.heading {
+  color: #6E0887;
+}
+.container.text-colour-brand-2 .content {
+  color: #6E0887;
+}
+.container.heading-colour-brand-3 .entry h3.heading svg path {
+  stroke: #50B400;
+}
+.container.heading-colour-brand-3 h3.heading {
+  color: #50B400;
+}
+.container.text-colour-brand-3 .content {
+  color: #50B400;
+}
+.container.heading-colour-brand-4 .entry h3.heading svg path {
+  stroke: #FFE500;
+}
+.container.heading-colour-brand-4 h3.heading {
+  color: #FFE500;
+}
+.container.text-colour-brand-4 .content {
+  color: #FFE500;
+}
+.container.heading-colour-brand-5 .entry h3.heading svg path {
+  stroke: #F07D00;
+}
+.container.heading-colour-brand-5 h3.heading {
+  color: #F07D00;
+}
+.container.text-colour-brand-5 .content {
+  color: #F07D00;
+}
+.container.heading-colour-brand-6 .entry h3.heading svg path {
+  stroke: #62CFC9;
+}
+.container.heading-colour-brand-6 h3.heading {
+  color: #62CFC9;
+}
+.container.text-colour-brand-6 .content {
+  color: #62CFC9;
+}
+.container.heading-colour-white .entry h3.heading svg path {
+  stroke: #FFFFFF;
+}
+.container.heading-colour-white h3.heading {
+  color: #FFFFFF;
+}
+.container.text-colour-white .content {
+  color: #FFFFFF;
+}
+.container.heading-colour-black .entry h3.heading svg path {
+  stroke: #000000;
+}
+.container.heading-colour-black h3.heading {
+  color: #000000;
+}
+.container.text-colour-black .content {
+  color: #000000;
+}
+.container.heading-colour-grey-extra-light .entry h3.heading svg path {
+  stroke: #D7D7D7;
+}
+.container.heading-colour-grey-extra-light h3.heading {
+  color: #D7D7D7;
+}
+.container.text-colour-grey-extra-light .content {
+  color: #D7D7D7;
+}
+.container.heading-colour-grey-light .entry h3.heading svg path {
+  stroke: #E8E8E8;
+}
+.container.heading-colour-grey-light h3.heading {
+  color: #E8E8E8;
+}
+.container.text-colour-grey-light .content {
+  color: #E8E8E8;
+}
+.container.heading-colour-grey-medium .entry h3.heading svg path {
+  stroke: #8A8A8A;
+}
+.container.heading-colour-grey-medium h3.heading {
+  color: #8A8A8A;
+}
+.container.text-colour-grey-medium .content {
+  color: #8A8A8A;
+}
+.container.heading-colour-grey-dark .entry h3.heading svg path {
+  stroke: #4A4A4A;
+}
+.container.heading-colour-grey-dark h3.heading {
+  color: #4A4A4A;
+}
+.container.text-colour-grey-dark .content {
+  color: #4A4A4A;
+}

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

@@ -0,0 +1,114 @@
+import { h } from '@stencil/core';
+export class BiggiveAccordion {
+  constructor() {
+    this.children = [];
+    this.spaceBelow = 0;
+    this.textColour = 'black';
+    this.headingColour = 'primary';
+  }
+  componentWillLoad() {
+    this.children = Array.from(this.host.children);
+  }
+  toggleSection(e) {
+    const target = e.target;
+    const entry = target.closest('.entry');
+    const arrow = entry.querySelector('.arrow');
+    if (entry.classList.contains('expanded')) {
+      entry.classList.remove('expanded');
+      arrow.setAttribute('title', 'Expand section');
+    }
+    else {
+      entry.classList.add('expanded');
+      arrow.setAttribute('title', 'Collapse section');
+    }
+  }
+  render() {
+    return (h("div", { class: 'container' + ' space-below-' + this.spaceBelow + ' text-colour-' + this.textColour + ' heading-colour-' + this.headingColour }, h("div", { class: "sleeve" }, this.children.map(entry => (h("div", { class: "entry" }, h("h3", { class: "heading", onClick: event => this.toggleSection(event), title: "Expand section" }, entry.heading, h("span", { class: "arrow" }, h("svg", { width: "15", height: "9", viewBox: "0 0 15 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.1074 0.999859L7.55357 7.55371L0.999718 0.99986", stroke: "black", "stroke-width": "2" })))), h("div", { class: "content", innerHTML: entry.innerHTML })))))));
+  }
+  static get is() { return "biggive-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-accordion.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spaceBelow": {
+        "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": "space-below",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "textColour": {
+        "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": "text-colour",
+        "reflect": false,
+        "defaultValue": "'black'"
+      },
+      "headingColour": {
+        "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": "heading-colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/biggive-accordion/biggive-accordion.stories.js

@@ -0,0 +1,52 @@
+export default {
+  title: 'Components/Layout',
+  argTypes: {
+    spaceBelow: {
+      name: 'Space below',
+      control: {
+        type: 'select',
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    textColour: {
+      name: 'Text colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+    headingColour: {
+      name: 'Heading colour',
+      control: {
+        type: 'select',
+        options: ['primary', 'secondary', 'tertiary', 'brand-1', 'brand-2', 'brand-3', 'brand-4', 'brand-5', 'brand-6', 'white', 'black'],
+      },
+    },
+  },
+};
+const Template = args => `
+                    <biggive-accordion
+                      space-below="${args.spaceBelow}"  
+                      text-colour="${args.textColour}"
+                      heading-colour="${args.headingColour}"
+                      >
+                        <biggive-accordion-entry entry-heading="Heading 1">
+                        <p>1 Lorem ipsum dolor sit amet, fabulas appetere no sed. Per ea partem pertinacia, modo mollis usu ut. Audire eruditi ex his, ut imperdiet constituam ullamcorper nam. Sed cu etiam iudico qualisque. Dicam alienum ei vel.</p>
+                        <p>Quo ex mutat malorum conceptam, at usu dicta perfecto deserunt. An prompta offendit mel, sit regione constituto ei. Ludus possim hendrerit id vis, cu vim sonet dolorem mnesarchum, sit soleat aliquid eu. Ancillae appellantur cum ea. Agam delenit id qui, est summo corpora an.</p>
+                        </biggive-accordion-entry>
+                        <biggive-accordion-entry entry-heading="Heading 2">
+                        <p>1 Lorem ipsum dolor sit amet, fabulas appetere no sed. Per ea partem pertinacia, modo mollis usu ut. Audire eruditi ex his, ut imperdiet constituam ullamcorper nam. Sed cu etiam iudico qualisque. Dicam alienum ei vel.</p>
+                        <p>Quo ex mutat malorum conceptam, at usu dicta perfecto deserunt. An prompta offendit mel, sit regione constituto ei. Ludus possim hendrerit id vis, cu vim sonet dolorem mnesarchum, sit soleat aliquid eu. Ancillae appellantur cum ea. Agam delenit id qui, est summo corpora an.</p>
+                        </biggive-accordion-entry>
+                        <biggive-accordion-entry entry-heading="Heading 3">
+                        <p>1 Lorem ipsum dolor sit amet, fabulas appetere no sed. Per ea partem pertinacia, modo mollis usu ut. Audire eruditi ex his, ut imperdiet constituam ullamcorper nam. Sed cu etiam iudico qualisque. Dicam alienum ei vel.</p>
+                        <p>Quo ex mutat malorum conceptam, at usu dicta perfecto deserunt. An prompta offendit mel, sit regione constituto ei. Ludus possim hendrerit id vis, cu vim sonet dolorem mnesarchum, sit soleat aliquid eu. Ancillae appellantur cum ea. Agam delenit id qui, est summo corpora an.</p>
+                        </biggive-accordion-entry>
+                    </biggive-accordion>
+                    `;
+export const AccordionComponent = Template.bind({});
+AccordionComponent.args = {
+  spaceBelow: 4,
+  textColour: 'black',
+  headingColour: 'primary',
+};

package/dist/collection/components/biggive-accordion-entry/biggive-accordion-entry.css

@@ -0,0 +1,14 @@
+/**
+ * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
+ */
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+a:hover {
+  text-decoration: none;
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/biggive-accordion-entry/biggive-accordion-entry.js

@@ -0,0 +1,43 @@
+export class BiggiveAccordionEntry {
+  constructor() {
+    this.heading = '';
+  }
+  render() {
+    return null;
+  }
+  static get is() { return "biggive-accordion-entry"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-accordion-entry.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-accordion-entry.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -64,6 +64,31 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-grey-extra-light:hover,
+.background-colour-grey-extra-light {
+  background-color: #D7D7D7;
+}
+
+.background-colour-hover-grey-light:hover,
+.background-colour-grey-light {
+  background-color: #E8E8E8;
+}
+
+.background-colour-hover-grey-medium:hover,
+.background-colour-grey-medium {
+  background-color: #8A8A8A;
+}
+
+.background-colour-hover-grey-dark:hover,
+.background-colour-grey-dark {
+  background-color: #4A4A4A;
+}
+
 .image-wrap img {
   width: 100%;
   height: auto;
@@ -180,6 +205,26 @@ a:hover {
   color: #000000;
 }
 
+.text-colour-hover-grey-extra-light:hover,
+.text-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+
+.text-colour-hover-grey-light:hover,
+.text-colour-grey-light {
+  color: #E8E8E8;
+}
+
+.text-colour-hover-grey-medium:hover,
+.text-colour-grey-medium {
+  color: #8A8A8A;
+}
+
+.text-colour-hover-grey-dark:hover,
+.text-colour-grey-dark {
+  color: #4A4A4A;
+}
+
 :host {
   display: contents;
 }

package/dist/collection/components/biggive-basic-card/biggive-basic-card.css

@@ -64,6 +64,31 @@ a:hover {
   background-color: #000000;
 }
 
+.background-colour-hover-white:hover,
+.background-colour-white {
+  background-color: #FFFFFF;
+}
+
+.background-colour-hover-grey-extra-light:hover,
+.background-colour-grey-extra-light {
+  background-color: #D7D7D7;
+}
+
+.background-colour-hover-grey-light:hover,
+.background-colour-grey-light {
+  background-color: #E8E8E8;
+}
+
+.background-colour-hover-grey-medium:hover,
+.background-colour-grey-medium {
+  background-color: #8A8A8A;
+}
+
+.background-colour-hover-grey-dark:hover,
+.background-colour-grey-dark {
+  background-color: #4A4A4A;
+}
+
 .fill-primary {
   fill: #2C089B;
 }
@@ -112,6 +137,22 @@ a:hover {
   fill: #000000;
 }
 
+.fill-grey-extra-light {
+  fill: #D7D7D7;
+}
+
+.fill-grey-light {
+  fill: #E8E8E8;
+}
+
+.fill-grey-medium {
+  fill: #8A8A8A;
+}
+
+.fill-grey-dark {
+  fill: #4A4A4A;
+}
+
 .fill-red {
   fill: red;
 }
@@ -227,6 +268,26 @@ a:hover {
   color: #000000;
 }
 
+.text-colour-hover-grey-extra-light:hover,
+.text-colour-grey-extra-light {
+  color: #D7D7D7;
+}
+
+.text-colour-hover-grey-light:hover,
+.text-colour-grey-light {
+  color: #E8E8E8;
+}
+
+.text-colour-hover-grey-medium:hover,
+.text-colour-grey-medium {
+  color: #8A8A8A;
+}
+
+.text-colour-hover-grey-dark:hover,
+.text-colour-grey-dark {
+  color: #4A4A4A;
+}
+
 :host {
   display: contents;
 }
@@ -243,10 +304,19 @@ a:hover {
   height: 100%;
   white-space: pre-wrap;
 }
+.container a,
+.container a:hover {
+  text-decoration: none;
+}
 .container .sleeve {
   padding: 30px;
   height: 100%;
   box-sizing: border-box;
+  transition: all 1s ease-in-out;
+}
+.container.add-animation-true:hover .sleeve {
+  margin: -30px;
+  padding: 60px;
 }
 .container.clip-bottom-left-corner-false.clip-top-right-corner-true .sleeve {
   clip-path: polygon(0% 0%, 0% 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, 100% 100%, 0% 100%, 0 100%);