@ilo-org/twig 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @ilo-org/twig
+
+## 0.0.2
+
+### Patch Changes
+
+- b61692a: CSS should default to assuming fonts are being loaded via a server rather than by means of the monorepo
+- Updated dependencies [b61692a]
+  - @ilo-org/fonts@0.0.2
+  - @ilo-org/styles@0.0.2

package/apps/storybook/styles.scss

@@ -1,2 +1,2 @@
 @import '~@ilo-org/fonts';
-@import '@ilo-org/styles/scss';
+@import '@ilo-org/styles/scss/monorepo';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -20,9 +20,9 @@
     "components"
   ],
   "dependencies": {
-    "@ilo-org/fonts": "0.0.1",
+    "@ilo-org/fonts": "0.0.2",
     "@ilo-org/icons": "0.0.1",
-    "@ilo-org/styles": "0.0.1",
+    "@ilo-org/styles": "0.0.2",
     "@ilo-org/themes": "0.0.1",
     "@ilo-org/utils": "0.0.1",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",

package/src/patterns/components/callout/{callout.behaviors.js → callout.behavior.js}

@@ -1,6 +1,6 @@
 import Callout from './callout';
 
-Drupal.behaviors.tag = {
+Drupal.behaviors.callout = {
   attach() {
     Array.prototype.forEach.call(
       document.querySelectorAll(`[data-loadcomponent="Callout"]`),

package/src/patterns/components/callout/callout.js

@@ -34,6 +34,9 @@ export default class Callout {
    */
   init() {
     this.cacheDomReferences().setupHandlers().enable();
+    if (!this.toggleOpen) {
+      this.calcHeight();
+    }
 
     return this;
   }
@@ -51,10 +54,12 @@ export default class Callout {
      */
     this.toggle = this.element.querySelector('.ilo--callout--toggle');
     this.toggleOpen = this.element.classList.value.includes('ilo--callout--open');
-    this.toggleLabel = this.toggle.querySelector('.ilo--callout--button-text');
-    this.toggleLabelOpen = this.toggle.getAttribute('data-open');
-    this.toggleLabelClosed = this.toggle.getAttribute('data-closed');
-    this.button = this.element.querySelectorAll('.ilo--button');
+    if (this.toggle) {
+      this.toggleLabel = this.toggle.querySelector('.ilo--callout--button-text');
+      this.toggleLabelOpen = this.toggle.getAttribute('data-open');
+      this.toggleLabelClosed = this.toggle.getAttribute('data-closed');
+    }
+    this.button = this.element.querySelector('.ilo--button');
 
     return this;
   }
@@ -79,8 +84,29 @@ export default class Callout {
    * @chainable
    */
   enable() {
-    this.toggle.addEventListener(EVENTS.CLICK, onToggle);
-    this.button.addEventListener(EVENTS.CLICK, onClick);
+    if (this.toggle) {
+      console.log('this is toggle');
+      this.toggle.addEventListener(EVENTS.CLICK, this.onToggle);
+    }
+
+    if (this.button) {
+      console.log('this is button');
+      this.button.addEventListener(EVENTS.CLICK, this.onClick);
+    }
+
+    return this;
+  }
+
+  /**
+   * calcHeight
+   *
+   * @return {Object} Callout A reference to the instance of the class
+   * @chainable
+   */
+  calcHeight() {
+    this.header = this.element.querySelector('[class*="--header"]');
+    this.height = this.header.offsetHeight;
+    this.element.style.maxHeight = `${this.height + 25}px`;
 
     return this;
   }
@@ -113,7 +139,7 @@ export default class Callout {
 
     const label = this.toggleOpen ? this.toggleLabelOpen : this.toggleLabelClosed;
 
-    this.element.classList.toggle('ilo--toggle--open');
+    this.element.classList.toggle('ilo--callout--open');
     this.toggleLabel.innerText = label;
 
     return this;

package/src/patterns/components/callout/callout.twig

@@ -1,7 +1,7 @@
 {#
   CALLOUT COMPONENT
 #}
-<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isOpen %} {{prefix}}--callout--open {% endif %}" data-loadcomponent="Callout" >
+<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isOpen %} {{prefix}}--callout--open {% endif %} {% if isCollapsible %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout" >
   <div class="{{prefix}}--callout--sidebar">
     <span class="{{prefix}}--callout--icon icon icon--{{alert}}"></span>
   </div>
@@ -22,7 +22,7 @@
           class="{{prefix}}--button {{prefix}}--button--small {{prefix}}--button--tertiary"
           type="button"
         >
-          {{ buttonLabel }}
+          <span class="button__label">{{ buttonLabel }}</span>
         </button>
       </div>
     {% endif %}

package/src/patterns/components/callout/index.js

@@ -4,3 +4,4 @@
 // Module template
 import './callout.twig';
 import './callout.wingsuit.yml';
+import './callout.behavior';