@ilo-org/twig 0.2.12 → 0.2.13

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

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

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

@@ -1,4 +1,4 @@
-import { EVENTS } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The Callout module which handles rendering field labels inline on a form.
@@ -18,7 +18,7 @@ export default class Callout {
      * @property {Object}
      */
     this.element = element;
-    this.toggleLabel = '';
+    this.toggleLabel = "";
 
     // Initialize the view
     this.init();
@@ -52,15 +52,18 @@ export default class Callout {
      * The field that a user interacts with on a form
      * @type {Object}
      */
-    this.toggle = this.element.querySelector('.ilo--callout--toggle');
-    this.toggleOpen = this.element.classList.value.includes('callout--open');
-    this.toggleCollapsible = this.element.classList.value.includes('callout--collapse');
+    this.toggle = this.element.querySelector(".ilo--callout--toggle");
+    this.toggleOpen = this.element.classList.value.includes("callout--open");
+    this.toggleCollapsible =
+      this.element.classList.value.includes("callout--collapse");
     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.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');
+    this.button = this.element.querySelector(".ilo--button");
 
     return this;
   }
@@ -116,9 +119,9 @@ export default class Callout {
    * @return {Object} Callout A reference to the instance of the class
    * @chainable
    */
-  handleClick(e) {
+  handleClick() {
     // callback of sorts
-    console.log('button clicked');
+    console.log("button clicked");
 
     return this;
   }
@@ -136,9 +139,11 @@ export default class Callout {
     e.preventDefault();
     this.toggleOpen = !this.toggleOpen;
 
-    const label = this.toggleOpen ? this.toggleLabelOpen : this.toggleLabelClosed;
+    const label = this.toggleOpen
+      ? this.toggleLabelOpen
+      : this.toggleLabelClosed;
 
-    this.element.classList.toggle('ilo--callout--open');
+    this.element.classList.toggle("ilo--callout--open");
     this.toggleLabel.innerText = label;
 
     return this;

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

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

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

@@ -1,5 +1,5 @@
 callout:
-  use: '@components/callout/callout.twig'
+  use: "@components/callout/callout.twig"
   label: Callout
   description: A callout alert section with a few different types
   fields:
@@ -44,7 +44,7 @@ callout:
         error: Error
         success: Success
         warning: Warning
-      preview: 'info'
+      preview: "info"
     isCollapsible:
       type: select
       label: Is Collapsible?

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

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

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

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

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

@@ -1,5 +1,5 @@
 card:
-  use: '@components/card/card.twig'
+  use: "@components/card/card.twig"
   label: Card
   description: The Card presents an image banner.
   fields:
@@ -80,13 +80,13 @@ card:
         green: green
         yellow: yellow
         blue: blue
-      preview: 'blue'
+      preview: "blue"
     theme:
       type: select
       label: Theme
       description: The theme type for the card. Theme choice doesn't apply to these card types - `Multilink`, `Data`, `Stat` and `Detail`
       required: false
-      preview: 'light'
+      preview: "light"
       options:
         dark: Dark
         light: Light
@@ -94,7 +94,7 @@ card:
       type: select
       label: Size
       description: Size of the cards (usually reduces padding). `Wide` on Multilink and Feature cause a two column structure above a desktop breakpoint.
-      preview: 'standard'
+      preview: "standard"
       options:
         wide: Wide
         standard: Standard
@@ -168,11 +168,11 @@ card:
           linkgroup:
             - links:
                 - label: Link One
-                  url: 'http://www.google.com'
+                  url: "http://www.google.com"
                 - label: Link Two
-                  url: 'http://www.google.com'
+                  url: "http://www.google.com"
                 - label: Link Three
-                  url: 'http://www.google.com'
+                  url: "http://www.google.com"
     graphicpromo:
       label: Graphic Promo Card
       description: The graphic promo Card
@@ -200,7 +200,7 @@ card:
             - headline: ""
               links:
                 - label: Link One
-                  url: 'http://www.google.com'
+                  url: "http://www.google.com"
     detail:
       label: Detail Card
       description: The Detail Card

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

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

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

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

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

@@ -1,5 +1,5 @@
 cardgroup:
-  use: '@components/cardgroup/cardgroup.twig'
+  use: "@components/cardgroup/cardgroup.twig"
   label: Card Group
   description: The Card group
   fields:
@@ -7,7 +7,7 @@ cardgroup:
       type: object
       label: Group of cards
       description: The group of cards, object
-      preview: 
+      preview:
     cta:
       type: object
       label: CTA
@@ -38,11 +38,11 @@ cardgroup:
                 - headline: ""
                   links:
                     - label: Link One
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
                     - label: Link Two
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
                     - label: Link Three
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
           - title: "Multi-link card second - right aligned image, wide option"
             image: "https://placekitten.com/475/267"
             intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
@@ -59,11 +59,11 @@ cardgroup:
                 - headline: ""
                   links:
                     - label: Link One
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
                     - label: Link Two
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
                     - label: Link Three
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
           - title: "Multi-link card - right aligned image, wide option"
             image: "https://placekitten.com/475/267"
             intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
@@ -80,12 +80,12 @@ cardgroup:
                 - headline: ""
                   links:
                     - label: Link One
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
                     - label: Link Two
-                      url: 'http://www.google.com'
+                      url: "http://www.google.com"
                     - label: Link Three
-                      url: 'http://www.google.com'
-      settings: 
+                      url: "http://www.google.com"
+      settings:
         type: multilink
     feature:
       label: Feature
@@ -152,7 +152,7 @@ cardgroup:
             list: ""
             dataset: ""
             color: ""
-      settings: 
+      settings:
         type: feature
     detail:
       label: Detail
@@ -191,7 +191,7 @@ cardgroup:
             list: ""
             dataset: ""
             color: ""
-      settings: 
+      settings:
         type: detail
         theme: light
     graphicpromo:
@@ -207,7 +207,7 @@ cardgroup:
             link: "https://www.google.com/search?q=graphic-promo"
             profile: ""
             eventdetails: ""
-            cta: 
+            cta:
               label: "Discover our unique mission"
               url: "https://www.google.com/search?q=button"
             source: ""
@@ -231,7 +231,7 @@ cardgroup:
             eventdetails: ""
             cta: ""
             list: ""
-            source: 
+            source:
               label: "Source: lorem ipsum dolor sit amet, 2020"
               url: "https://www.google.com/search?q=stat"
             color: blue
@@ -245,7 +245,7 @@ cardgroup:
             eventdetails: ""
             cta: ""
             list: ""
-            source: 
+            source:
               label: "Source: lorem ipsum dolor sit amet, 2020"
               url: "https://www.google.com/search?q=stat"
             color: green
@@ -259,7 +259,7 @@ cardgroup:
             eventdetails: ""
             cta: ""
             list: ""
-            source: 
+            source:
               label: "Source: lorem ipsum dolor sit amet, 2020"
               url: "https://www.google.com/search?q=stat"
             color: yellow
@@ -273,7 +273,7 @@ cardgroup:
             eventdetails: ""
             cta: ""
             list: ""
-            source: 
+            source:
               label: "Source: lorem ipsum dolor sit amet, 2020"
               url: "https://www.google.com/search?q=stat"
             color: turquoise
@@ -316,12 +316,12 @@ cardgroup:
             profile: ""
             eventdetails: ""
             cta: ""
-            list: 
+            list:
               title: ""
               settings:
                 - ordered: unordered
                 - alignment: default
-              items: 
+              items:
                 - content: "Wipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
                   id: "list1"
                 - content: "Nut labore et dolore magna sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
@@ -342,16 +342,16 @@ cardgroup:
             profile: ""
             eventdetails: ""
             cta: ""
-            dataset: 
-              content: 
-                items: 
+            dataset:
+              content:
+                items:
                   - label: Date
                     copy: Publication date
                   - label: Event type
                     copy: Event location
               files:
                 headline: Files
-                items: 
+                items:
                   - label: File/size MB 1
                     url: "https://www.google.com/search?q=file1"
                   - label: File/size MB 2
@@ -360,7 +360,7 @@ cardgroup:
                     url: "https://www.google.com/search?q=file3"
               links:
                 headline: Languages
-                items: 
+                items:
                   - label: Language link 1
                     url: "https://www.google.com/search?q=link"
                   - label: Language link 2
@@ -375,7 +375,7 @@ cardgroup:
       type: select
       label: Size
       description: Size of the cards (usually reduces padding)
-      preview: 'standard'
+      preview: "standard"
       options:
         wide: wide
         standard: Standard
@@ -384,7 +384,7 @@ cardgroup:
       type: select
       label: Color
       description: Color of the stat cards, options are turquoise, green, yellow, or blue
-      preview: 'blue'
+      preview: "blue"
       options:
         blue: Blue
         turquoise: Turquoise
@@ -395,7 +395,7 @@ cardgroup:
       label: Card Count
       description: Number of cards within a group
       required: true
-      preview: 'detail'
+      preview: "detail"
       options:
         data: Data
         detail: Detail
@@ -410,7 +410,7 @@ cardgroup:
       label: Card Count
       description: Number of cards within a group
       required: true
-      preview: 'two'
+      preview: "two"
       options:
         one: One
         two: Two
@@ -421,7 +421,7 @@ cardgroup:
       label: Theme
       description: The theme type for the hero
       required: false
-      preview: 'dark'
+      preview: "dark"
       options:
         dark: Dark
         light: Light

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

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

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

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

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

@@ -1,5 +1,5 @@
 contextmenu:
-  use: '@components/contextmenu/contextmenu.twig'
+  use: "@components/contextmenu/contextmenu.twig"
   label: Context Menu
   description: The ContextMenu receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
   fields:
@@ -10,14 +10,14 @@ contextmenu:
       required: true
       preview:
         - 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/contextmenu/index.js

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

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

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

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

@@ -1,5 +1,5 @@
 dropdown:
-  use: '@components/dropdown/dropdown.twig'
+  use: "@components/dropdown/dropdown.twig"
   label: Dropdown
   description: The Dropdown displays a select element with options, and is most
     commonly used in forms.
@@ -14,7 +14,7 @@ dropdown:
       type: string
       label: error
       description: Does this have an error? If so, the error message
-      preview: ''
+      preview: ""
       required: false
     helper:
       type: string
@@ -62,7 +62,7 @@ dropdown:
       label: autocomplete
       description: Should this field autocomplete
       options:
-        true: 'true'
+        true: "true"
         false: false
       preview: false
       required: false
@@ -71,7 +71,7 @@ dropdown:
       label: disabled
       description: Is this field disabled?
       options:
-        true: 'true'
+        true: "true"
         false: false
       preview: false
       required: false

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

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

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

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

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

@@ -1,5 +1,5 @@
 footer:
-  use: '@components/footer/footer.twig'
+  use: "@components/footer/footer.twig"
   label: Footer
   description: A component for displaying a page's footer
   fields:

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

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

package/src/patterns/components/form/fileupload.behavior.js

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

package/src/patterns/components/form/fileupload.js

@@ -1,4 +1,4 @@
-import { getUpdatedItems, EVENTS, ARIA } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The FileUpload module which handles rendering field labels inline on a form.
@@ -87,15 +87,16 @@ export default class FileUpload {
    * @chainable
    */
   onChange(e) {
-    const oldDiv = this.container.querySelector(`.${this.prefix}--fieldset--input`) !== null;
+    const oldDiv =
+      this.container.querySelector(`.${this.prefix}--fieldset--input`) !== null;
     if (oldDiv) {
       this.container.remove(oldDiv);
     }
-    const newDiv = document.createElement('div');
+    const newDiv = document.createElement("div");
     newDiv.classList.add(`${this.prefix}--fieldset--input`);
-    const fileList = document.createElement('ul');
+    const fileList = document.createElement("ul");
     fileList.classList.add(`${this.prefix}--file-upload--list`);
-    let files = '';
+    let files = "";
     [...e.target.files].map((file) => {
       files += this.template(file.name);
     });

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

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