@ilo-org/twig 0.2.11 → 0.2.13

package/src/patterns/components/navigation/navigation.js

@@ -1,4 +1,4 @@
-import { EVENTS } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The Navigation module which handles rendering field labels inline on a form.
@@ -52,17 +52,31 @@ export default class Navigation {
      * The button for toggling Subnav state
      * @type {Object}
      */
-    this.subnavButton = this.element.querySelector(`.${this.prefix}--nav--trigger`);
-    this.menuCloseSet = this.element.querySelectorAll(`.${this.prefix}--header--menu--close`);
-    this.subnavBack = this.element.querySelectorAll(`.${this.prefix}--mobile--subnav--back`);
+    this.subnavButton = this.element.querySelector(
+      `.${this.prefix}--nav--trigger`
+    );
+    this.menuCloseSet = this.element.querySelectorAll(
+      `.${this.prefix}--header--menu--close`
+    );
+    this.subnavBack = this.element.querySelectorAll(
+      `.${this.prefix}--mobile--subnav--back`
+    );
     this.menuOpen = this.element.querySelector(`.${this.prefix}--header--menu`);
-    this.searchButton = this.element.querySelector(`.${this.prefix}--search--button`);
-    this.contextButton = this.element.querySelector(`.${this.prefix}--language-switcher--button`);
+    this.searchButton = this.element.querySelector(
+      `.${this.prefix}--search--button`
+    );
+    this.contextButton = this.element.querySelector(
+      `.${this.prefix}--language-switcher--button`
+    );
     this.languageButton = this.element.querySelector(
       `.${this.prefix}--mobile--nav--language--switcher--button`
     );
-    this.contextLinks = this.element.querySelectorAll(`.${this.prefix}--context-menu--link`);
-    this.languageLinks = this.element.querySelectorAll(`.${this.prefix}--nav--language`);
+    this.contextLinks = this.element.querySelectorAll(
+      `.${this.prefix}--context-menu--link`
+    );
+    this.languageLinks = this.element.querySelectorAll(
+      `.${this.prefix}--nav--language`
+    );
     this.body = document.body;
 
     return this;
@@ -105,62 +119,96 @@ export default class Navigation {
   enable() {
     // subnavButton
     if (this.subnavButton) {
-      this.subnavButton.addEventListener(EVENTS.CLICK, (e) => this.subnavClick(e));
-      this.subnavButton.addEventListener(EVENTS.TOUCH_START, (e) => this.subnavClick(e));
+      this.subnavButton.addEventListener(EVENTS.CLICK, (e) =>
+        this.subnavClick(e)
+      );
+      this.subnavButton.addEventListener(EVENTS.TOUCH_START, (e) =>
+        this.subnavClick(e)
+      );
     }
 
     // subnavBack
     if (this.subnavBack.length > 0) {
-      this.subnavBack.forEach((button, i) => {
+      this.subnavBack.forEach((button) => {
         button.addEventListener(EVENTS.CLICK, (e) => this.subnavBackClick(e));
-        button.addEventListener(EVENTS.TOUCH_START, (e) => this.subnavBackClick(e));
+        button.addEventListener(EVENTS.TOUCH_START, (e) =>
+          this.subnavBackClick(e)
+        );
       });
     }
 
     // searchButton
     if (this.searchButton) {
-      this.searchButton.addEventListener(EVENTS.CLICK, (e) => this.searchButtonClick(e));
-      this.searchButton.addEventListener(EVENTS.TOUCH_START, (e) => this.searchButtonClick(e));
+      this.searchButton.addEventListener(EVENTS.CLICK, (e) =>
+        this.searchButtonClick(e)
+      );
+      this.searchButton.addEventListener(EVENTS.TOUCH_START, (e) =>
+        this.searchButtonClick(e)
+      );
     }
     // menuCloseSet
     if (this.menuCloseSet.length > 0) {
       this.menuCloseSet.forEach((closeButton, i) => {
-        closeButton.addEventListener(EVENTS.CLICK, () => this.menuCloseClick(i));
-        closeButton.addEventListener(EVENTS.TOUCH_START, () => this.menuCloseClick(i));
+        closeButton.addEventListener(EVENTS.CLICK, () =>
+          this.menuCloseClick(i)
+        );
+        closeButton.addEventListener(EVENTS.TOUCH_START, () =>
+          this.menuCloseClick(i)
+        );
       });
     }
 
     // menuOpen
     if (this.menuOpen) {
-      this.menuOpen.addEventListener(EVENTS.CLICK, (e) => this.menuOpenClick(e));
-      this.menuOpen.addEventListener(EVENTS.TOUCH_START, (e) => this.menuOpenClick(e));
+      this.menuOpen.addEventListener(EVENTS.CLICK, (e) =>
+        this.menuOpenClick(e)
+      );
+      this.menuOpen.addEventListener(EVENTS.TOUCH_START, (e) =>
+        this.menuOpenClick(e)
+      );
     }
 
     // contextButton
     if (this.contextButton) {
-      this.contextButton.addEventListener(EVENTS.CLICK, (e) => this.contextButtonClick(e));
-      this.contextButton.addEventListener(EVENTS.TOUCH_START, (e) => this.contextButtonClick(e));
+      this.contextButton.addEventListener(EVENTS.CLICK, (e) =>
+        this.contextButtonClick(e)
+      );
+      this.contextButton.addEventListener(EVENTS.TOUCH_START, (e) =>
+        this.contextButtonClick(e)
+      );
     }
 
     // languageButton
     if (this.languageButton) {
-      this.languageButton.addEventListener(EVENTS.CLICK, () => this.languageButtonClick());
-      this.languageButton.addEventListener(EVENTS.TOUCH_START, () => this.languageButtonClick());
+      this.languageButton.addEventListener(EVENTS.CLICK, () =>
+        this.languageButtonClick()
+      );
+      this.languageButton.addEventListener(EVENTS.TOUCH_START, () =>
+        this.languageButtonClick()
+      );
     }
 
     // contextLinks
     if (this.contextLinks.length > 0 && this.callback) {
-      this.contextLinks.forEach((contextLink, i) => {
-        contextLink.addEventListener(EVENTS.CLICK, (e) => this.contextLinkClick(e));
-        contextLink.addEventListener(EVENTS.TOUCH_START, (e) => this.contextLinkClick(e));
+      this.contextLinks.forEach((contextLink) => {
+        contextLink.addEventListener(EVENTS.CLICK, (e) =>
+          this.contextLinkClick(e)
+        );
+        contextLink.addEventListener(EVENTS.TOUCH_START, (e) =>
+          this.contextLinkClick(e)
+        );
       });
     }
 
     // languageLinks
     if (this.languageLinks.length > 0 && this.callback) {
-      this.languageLinks.forEach((languageLink, i) => {
-        languageLink.addEventListener(EVENTS.CLICK, (e) => this.contextLinkClick(e));
-        languageLink.addEventListener(EVENTS.TOUCH_START, (e) => this.contextLinkClick(e));
+      this.languageLinks.forEach((languageLink) => {
+        languageLink.addEventListener(EVENTS.CLICK, (e) =>
+          this.contextLinkClick(e)
+        );
+        languageLink.addEventListener(EVENTS.TOUCH_START, (e) =>
+          this.contextLinkClick(e)
+        );
       });
     }
 
@@ -212,7 +260,7 @@ export default class Navigation {
    * @chainable
    */
   handleKeyPress(e, callback) {
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       callback(e);
     }
 
@@ -245,7 +293,11 @@ export default class Navigation {
       (ev) => this.keyPress(ev, this.contextButtonClickOff),
       false
     );
-    this.body.addEventListener(EVENTS.CLICK, (ev) => this.handleContextButtonClickOff(ev), false);
+    this.body.addEventListener(
+      EVENTS.CLICK,
+      (ev) => this.handleContextButtonClickOff(ev),
+      false
+    );
 
     return this;
   }
@@ -266,7 +318,8 @@ export default class Navigation {
     );
     this.body.removeEventListener(
       EVENTS.CLICK,
-      (ev) => this.handleContextButtonClickoff(ev, `${this.prefix}--context--open`),
+      (ev) =>
+        this.handleContextButtonClickoff(ev, `${this.prefix}--context--open`),
       false
     );
 
@@ -306,7 +359,11 @@ export default class Navigation {
     );
 
     if (window.innerWidth >= 1024) {
-      this.body.addEventListener(EVENTS.CLICK, (ev) => this.handleSearchButtonClickOff(ev), false);
+      this.body.addEventListener(
+        EVENTS.CLICK,
+        (ev) => this.handleSearchButtonClickOff(ev),
+        false
+      );
     }
 
     return this;
@@ -327,7 +384,11 @@ export default class Navigation {
       false
     );
 
-    this.body.removeEventListener(EVENTS.CLICK, (ev) => this.handleSearchButtonClickOff(ev), false);
+    this.body.removeEventListener(
+      EVENTS.CLICK,
+      (ev) => this.handleSearchButtonClickOff(ev),
+      false
+    );
 
     return this;
   }
@@ -373,10 +434,18 @@ export default class Navigation {
   handleSubnavClickOn(e) {
     e.stopImmediatePropagation();
     this.element.classList.add(`${this.prefix}--subnav--open`);
-    window.addEventListener(EVENTS.KEY_DOWN, (ev) => this.keyPress(ev, this.subnavClickOff), false);
+    window.addEventListener(
+      EVENTS.KEY_DOWN,
+      (ev) => this.keyPress(ev, this.subnavClickOff),
+      false
+    );
 
     if (window.innerWidth >= 1024) {
-      this.body.addEventListener(EVENTS.CLICK, (ev) => this.handleSubnavClickOff(ev), false);
+      this.body.addEventListener(
+        EVENTS.CLICK,
+        (ev) => this.handleSubnavClickOff(ev),
+        false
+      );
     }
     return this;
   }
@@ -396,7 +465,11 @@ export default class Navigation {
       false
     );
 
-    this.body.removeEventListener(EVENTS.CLICK, (ev) => this.handleSubnavClickOff(ev), false);
+    this.body.removeEventListener(
+      EVENTS.CLICK,
+      (ev) => this.handleSubnavClickOff(ev),
+      false
+    );
 
     return this;
   }
@@ -454,7 +527,7 @@ export default class Navigation {
    * @return {Object} Breadcrumb A reference to the instance of the class
    * @chainable
    */
-  handleResize(e) {
+  handleResize() {
     this.element.classList.remove(`${this.prefix}--context--open`);
     this.element.classList.remove(`${this.prefix}--mobile--open`);
     this.element.classList.remove(`${this.prefix}--subnav--open`);

package/src/patterns/components/navigation/navigation.stories.jsx

@@ -1,7 +1,10 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./navigation.wingsuit.yml');
+export default {};
+const patternDefinition = require("./navigation.wingsuit.yml");
 
+/* eslint-disable-next-line */
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

package/src/patterns/components/navigation/navigation.wingsuit.yml

@@ -1,5 +1,5 @@
 navigation:
-  use: '@components/navigation/navigation.twig'
+  use: "@components/navigation/navigation.twig"
   label: Navigation
   description: The Navigation component
   fields:
@@ -113,14 +113,14 @@ navigation:
       preview:
         links:
           - label: Link One
-            url: 'http://www.google.com'
+            url: "http://www.google.com"
           - label: Link Two
-            url: 'http://www.google.com'
-          - endsection: 'true'
+            url: "http://www.google.com"
+          - endsection: "true"
             label: Link Three Ends A Section
-            url: 'http://www.google.com'
+            url: "http://www.google.com"
           - label: Link Four
-            url: 'http://www.google.com'
+            url: "http://www.google.com"
           - label: Link Five Is Slightly Longer
-            url: 'http://www.google.com'
+            url: "http://www.google.com"
   visibility: storybook

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

@@ -2,6 +2,6 @@
  * Notification
  */
 // Module template
-import './notification.twig';
-import './notification.wingsuit.yml';
-import './notification.behavior';
+import "./notification.twig";
+import "./notification.wingsuit.yml";
+import "./notification.behavior";

package/src/patterns/components/notification/notification.behavior.js

@@ -1,13 +1,13 @@
-import Notification from './notification';
+import Notification from "./notification";
 
 Drupal.behaviors.notification = {
   attach() {
-    console.log('got here....');
+    console.log("got here....");
     Array.prototype.forEach.call(
       document.querySelectorAll(`[data-loadcomponent="Notification"]`),
       (element) => {
         // eslint-disable-next-line no-console
-        console.log('loading Notification component....');
+        console.log("loading Notification component....");
         new Notification(element);
       }
     );

package/src/patterns/components/notification/notification.js

@@ -1,4 +1,4 @@
-import { EVENTS } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The Notification module which handles rendering field labels inline on a form.
@@ -52,7 +52,9 @@ export default class Notification {
      * The button for toggling Read More state
      * @type {Object}
      */
-    this.CloseButton = this.element.querySelector(`.${this.prefix}--notification--close`);
+    this.CloseButton = this.element.querySelector(
+      `.${this.prefix}--notification--close`
+    );
 
     return this;
   }

package/src/patterns/components/notification/notification.stories.jsx

@@ -1,7 +1,10 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./notification.wingsuit.yml');
+export default {};
+const patternDefinition = require("./notification.wingsuit.yml");
 
+/* eslint-disable-next-line */
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

package/src/patterns/components/notification/notification.wingsuit.yml

@@ -1,5 +1,5 @@
 notification:
-  use: '@components/notification/notification.twig'
+  use: "@components/notification/notification.twig"
   label: Notification
   description: The Notification component presents a dismissible alert.
   fields:
@@ -8,26 +8,26 @@ notification:
       label: Close Button Label
       description: The label for the close button
       required: true
-      preview: 'Close'
+      preview: "Close"
     copy:
       type: string
       label: Copy
       description: The text content of the notification
       required: true
-      preview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+      preview: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
     cta:
       type: object
       label: Call To Action
       description: an optional call to action button
       preview:
         label: Optional CTA
-        url: 'http://www.google.com'
+        url: "http://www.google.com"
     headline:
       type: string
       label: Headline
       description: The headline of the notification
       required: true
-      preview: 'With CTA'
+      preview: "With CTA"
     timestamp:
       type: object
       label: Timestamp
@@ -43,7 +43,7 @@ notification:
       options:
         inline: Inline
         dialog: Dialog
-      preview: 'dialog'
+      preview: "dialog"
     type:
       type: select
       label: Type
@@ -54,5 +54,5 @@ notification:
         info: Info
         success: Success
         warning: Warning
-      preview: 'info'
+      preview: "info"
   visibility: storybook

package/src/patterns/components/pagination/Pagination.stories.jsx

@@ -1,7 +1,9 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./pagination.wingsuit.yml');
+export default {};
+const patternDefinition = require("./pagination.wingsuit.yml");
 
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

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

@@ -2,5 +2,5 @@
  * Pagination
  */
 // Module template
-import './pagination.twig';
-import './pagination.wingsuit.yml';
+import "./pagination.twig";
+import "./pagination.wingsuit.yml";

package/src/patterns/components/pagination/pagination.wingsuit.yml

@@ -1,5 +1,5 @@
 pagination:
-  use: '@components/pagination/pagination.twig'
+  use: "@components/pagination/pagination.twig"
   label: Pagination
   description: The Pagination component presents a dismissible alert.
   fields:
@@ -8,65 +8,65 @@ pagination:
       label: Current page
       description: current page number that the user is on, zero-indexed
       required: true
-      preview: '0'
+      preview: "0"
     firstPageUrl:
       type: string
       label: First Page link
       description: Link to the first page
       required: true
-      preview: 'http://www.google.com?s=first'
+      preview: "http://www.google.com?s=first"
     firstPageTitle:
       type: string
       label: First Page Title
       description: Title label for the first page
       required: true
-      preview: 'First'
+      preview: "First"
     lastPageUrl:
       type: string
       label: Last Page link
       description: Link to the last page
       required: true
-      preview: 'http://www.google.com?s=last'
+      preview: "http://www.google.com?s=last"
     lastPageTitle:
       type: string
       label: Last Page Title
       description: Title label for the last page
       required: true
-      preview: 'Last'
+      preview: "Last"
     nextPageUrl:
       type: string
       label: Next Page link
       description: Link to the next page
       required: true
-      preview: 'http://www.google.com?s=next'
+      preview: "http://www.google.com?s=next"
     nextPageTitle:
       type: string
       label: Next Page Title
       description: Title label for the next page
       required: true
-      preview: 'Next'
+      preview: "Next"
     prevPageUrl:
       type: string
       label: Prev Page link
       description: Link to the prev page
       required: true
-      preview: 'http://www.google.com?s=prev'
+      preview: "http://www.google.com?s=prev"
     prevPageTitle:
       type: string
       label: Prev Page Title
       description: Title label for the prev page
       required: true
-      preview: 'Previous'
+      preview: "Previous"
     pageCountPreposition:
       type: string
       label: Page Count Preposition
       description: Linking word for the page count
       required: true
-      preview: 'of'
+      preview: "of"
     totalPages:
       type: numeric
       label: Total Pages
       description: The number of total pages
       required: true
-      preview: '8'
+      preview: "8"
   visibility: storybook

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

@@ -2,5 +2,5 @@
  * Link
  */
 // Module template
-import './link.twig';
-import './link.wingsuit.yml';
+import "./link.twig";
+import "./link.wingsuit.yml";

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

@@ -2,5 +2,5 @@
  * profile
  */
 // Module template
-import './profile.twig';
-import './profile.wingsuit.yml';
+import "./profile.twig";
+import "./profile.wingsuit.yml";

package/src/patterns/components/profile/profile.stories.jsx

@@ -1,7 +1,10 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./profile.wingsuit.yml');
+export default {};
+const patternDefinition = require("./profile.wingsuit.yml");
 
+/* eslint-disable-next-line */
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

package/src/patterns/components/profile/profile.wingsuit.yml

@@ -1,5 +1,5 @@
 profile:
-  use: '@components/profile/profile.twig'
+  use: "@components/profile/profile.twig"
   label: Profile
   description: The Profile component is used to display information about a person.
   fields:
@@ -25,11 +25,11 @@ profile:
       type: string
       label: Name
       description: The name of the person associated with the profile
-      preview: 'Firstname Lastname'
+      preview: "Firstname Lastname"
       required: true
     role:
       type: string
       label: Role
       description: An optional plain-text field indicating the person's role in the organization
-      preview: 'Senior Media Strategist'
+      preview: "Senior Media Strategist"
   visibility: storybook

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

@@ -2,6 +2,6 @@
  * rich text
  */
 // Module template
-import './readmore.twig';
-import './readmore.wingsuit.yml';
-import './readmore.behavior';
+import "./readmore.twig";
+import "./readmore.wingsuit.yml";
+import "./readmore.behavior";

package/src/patterns/components/readmore/readmore.behavior.js

@@ -1,4 +1,4 @@
-import ReadMore from './readmore';
+import ReadMore from "./readmore";
 
 Drupal.behaviors.readmore = {
   attach() {
@@ -6,7 +6,7 @@ Drupal.behaviors.readmore = {
       document.querySelectorAll(`[data-loadcomponent="ReadMore"]`),
       (element) => {
         // eslint-disable-next-line no-console
-        console.log('loading ReadMore component....');
+        console.log("loading ReadMore component....");
         new ReadMore(element);
       }
     );

package/src/patterns/components/readmore/readmore.js

@@ -1,4 +1,4 @@
-import { getUpdatedItems, EVENTS, ARIA } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The ReadMore module which handles rendering field labels inline on a form.
@@ -67,7 +67,9 @@ export default class ReadMore {
      * The button for toggling Read More state
      * @type {Object}
      */
-    this.ReadMoreButton = this.element.querySelector(`.${this.prefix}--read-more--button`);
+    this.ReadMoreButton = this.element.querySelector(
+      `.${this.prefix}--read-more--button`
+    );
     this.RichText = this.element.querySelector(`.${this.prefix}--richtext`);
 
     return this;

package/src/patterns/components/readmore/readmore.stories.jsx

@@ -1,7 +1,10 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./readmore.wingsuit.yml');
+export default {};
+const patternDefinition = require("./readmore.wingsuit.yml");
 
+/* eslint-disable-next-line */
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };