@ilo-org/twig 0.2.11 → 0.2.13

package/src/patterns/components/tabs/tabs.js

@@ -1,4 +1,4 @@
-import { EVENTS, ARIA } from '@ilo-org/utils';
+import { EVENTS, ARIA } from "@ilo-org/utils";
 
 /**
  * The Tabs module which handles rendering field labels inline on a form.
@@ -52,7 +52,9 @@ export default class Tabs {
      * The button for toggling Read More state
      * @type {Object}
      */
-    this.tabButtons = this.element.querySelectorAll(`.${this.prefix}--tabs--selection--button`);
+    this.tabButtons = this.element.querySelectorAll(
+      `.${this.prefix}--tabs--selection--button`
+    );
     this.tabPanels = this.element.querySelectorAll('[role="tabpanel"]');
     this.firstTab;
 
@@ -81,7 +83,7 @@ export default class Tabs {
    * @chainable
    */
   enable() {
-    this.element.classList.add('tabs--js');
+    this.element.classList.add("tabs--js");
 
     Array.from(this.tabButtons).forEach((button) => {
       button.addEventListener(EVENTS.CLICK, (e) => this.OnClickHandler(e));
@@ -122,22 +124,22 @@ export default class Tabs {
     console.log(e.key);
 
     switch (e.key) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         this.setSelectedToPreviousTab(tabid);
         flag = true;
         break;
 
-      case 'ArrowRight':
+      case "ArrowRight":
         this.setSelectedToNextTab(tabid);
         flag = true;
         break;
 
-      case 'Home':
+      case "Home":
         this.selectTab(this.firstTab.id);
         flag = true;
         break;
 
-      case 'End':
+      case "End":
         this.selectTab(this.lastTab.id);
         flag = true;
         break;
@@ -161,7 +163,9 @@ export default class Tabs {
    * @chainable
    */
   selectTab(tabid) {
-    const selectedTab = this.element.querySelector(`[${ARIA.CONTROLS}="${tabid}"]`);
+    const selectedTab = this.element.querySelector(
+      `[${ARIA.CONTROLS}="${tabid}"]`
+    );
     Array.from(this.tabPanels).forEach((panel) => {
       panel.setAttribute(ARIA.EXPANDED, false);
     });

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

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

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

@@ -1,5 +1,5 @@
 tabs:
-  use: '@components/tabs/tabs.twig'
+  use: "@components/tabs/tabs.twig"
   label: Tabs
   description: The Tabs component displays content that is subdivided into sections, providing an interface for toggling visually between sections
   fields:
@@ -8,23 +8,23 @@ tabs:
       label: Items
       description: The items and labels for each tab
       preview:
-        - label: 'Tab Label With A Really Really Lenghty Title Even Though We Do Not Recommend Such A Lengthy Title'
-          component: 'image'
+        - label: "Tab Label With A Really Really Lenghty Title Even Though We Do Not Recommend Such A Lengthy Title"
+          component: "image"
           componentdata:
-            alt: 'My alt text'
-            caption: 'my image caption'
-            credit: 'Photo: copyright 2022 Person S. Name'
+            alt: "My alt text"
+            caption: "my image caption"
+            credit: "Photo: copyright 2022 Person S. Name"
             url:
-                - breakpoint: 0
-                  src: 'https://place-hold.it/400x300?text=SmallBreakpointImage'
-                - breakpoint: 800
-                  src: 'https://place-hold.it/800x600?text=MediumBreakpointImage'
-                - breakpoint: 1200
-                  src: 'https://place-hold.it/1200x900?text=LargeBreakpointImage'
-                - breakpoint: 1440
-                  src: 'https://place-hold.it/1600x1200?text=LargestBreakpointImage'
-        - label: 'Tab Label 2'
-          component: 'richtext'
+              - breakpoint: 0
+                src: "https://place-hold.it/400x300?text=SmallBreakpointImage"
+              - breakpoint: 800
+                src: "https://place-hold.it/800x600?text=MediumBreakpointImage"
+              - breakpoint: 1200
+                src: "https://place-hold.it/1200x900?text=LargeBreakpointImage"
+              - breakpoint: 1440
+                src: "https://place-hold.it/1600x1200?text=LargestBreakpointImage"
+        - label: "Tab Label 2"
+          component: "richtext"
           componentdata:
             content: "<h1>Apollo 11</h1><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a> and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href='http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)'>Michael Collins</a>, piloted the <a href='http://en.wikipedia.org/wiki/Apollo_Command/Service_Module'>command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth. <figure><img alt='placeholder image' class='right' src='https://place-hold.it/400x300?text=Placeholder Image'><figcaption>The caption for this image</figcaption></figure></p><h2>Broadcasting and <em>quotes</em> <a id='quotes' name='quotes'></a></h2><p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p><blockquote><p>One small step for [a] man, one giant leap for mankind</p><cite>Neil Armstrong</cite></blockquote><h2>Technical details <a id='tech-details' name='tech-details'></a></h2><p>Launched by a <strong>Saturn V</strong> rocket from <a href='http://en.wikipedia.org/wiki/Kennedy_Space_Center'>Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href='http://en.wikipedia.org/wiki/NASA'>NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p><ol><li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li><li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li><li><strong>Lunar Module</strong> for landing on the Moon.</li></ol><p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href='http://en.wikipedia.org/wiki/Mare_Tranquillitatis'>Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href='http://en.wikipedia.org/wiki/Pacific_Ocean'>Pacific Ocean</a> on July 24.</p><hr><p><small>Source: <a href='http://en.wikipedia.org/wiki/Apollo_11'>Wikipedia.org</a></small></p>"
       required: true
@@ -37,132 +37,132 @@ tabs:
       description: Tabs with Icons
       fields:
         items:
-          - label: 'Tab One'
-            component: 'image'
+          - label: "Tab One"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab One Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab One tImage'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab One Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab One Image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab One Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab One tImage"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab One Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab One Image"
             icon: error
-          - label: 'Tab Two'
-            component: 'image'
+          - label: "Tab Two"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab Two Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab Two Image'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab Two Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab Two Image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab Two Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Two Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Two Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Two Image"
             icon: error
-          - label: 'Tab Three'
-            component: 'image'
+          - label: "Tab Three"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab Three Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab Three Image'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab Three Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab Three Image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab Three Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Three Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Three Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Three Image"
             icon: error
     fiveitems:
       label: Five Items
       description: Tab component with five items
       fields:
         items:
-          - label: 'Tab One'
-            component: 'image'
+          - label: "Tab One"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab One Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab One tImage'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab One Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab One Image'
-          - label: 'Tab Two'
-            component: 'image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab One Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab One tImage"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab One Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab One Image"
+          - label: "Tab Two"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab Two Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab Two Image'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab Two Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab Two Image'
-          - label: 'Tab Three'
-            component: 'image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab Two Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Two Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Two Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Two Image"
+          - label: "Tab Three"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab Three Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab Three Image'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab Three Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab Three Image'
-          - label: 'Tab Four Has A Really Lenghthy Title Which Might Get Truncated'
-            component: 'image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab Three Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Three Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Three Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Three Image"
+          - label: "Tab Four Has A Really Lenghthy Title Which Might Get Truncated"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab Four Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab Four Image'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab Four Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab Four Image'
-          - label: 'Tab Five'
-            component: 'image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab Four Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Four Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Four Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Four Image"
+          - label: "Tab Five"
+            component: "image"
             componentdata:
-              alt: 'My alt text'
-              caption: 'my image caption'
-              credit: 'Photo: copyright 2022 Person S. Name'
+              alt: "My alt text"
+              caption: "my image caption"
+              credit: "Photo: copyright 2022 Person S. Name"
               url:
-                  - breakpoint: 0
-                    src: 'https://place-hold.it/400x300?text=Tab Five Image'
-                  - breakpoint: 800
-                    src: 'https://place-hold.it/800x600?text=Tab Five Image'
-                  - breakpoint: 1200
-                    src: 'https://place-hold.it/1200x900?text=Tab Five Image'
-                  - breakpoint: 1440
-                    src: 'https://place-hold.it/1600x1200?text=Tab Five Image'
+                - breakpoint: 0
+                  src: "https://place-hold.it/400x300?text=Tab Five Image"
+                - breakpoint: 800
+                  src: "https://place-hold.it/800x600?text=Tab Five Image"
+                - breakpoint: 1200
+                  src: "https://place-hold.it/1200x900?text=Tab Five Image"
+                - breakpoint: 1440
+                  src: "https://place-hold.it/1600x1200?text=Tab Five Image"
   visibility: storybook

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

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

package/src/patterns/components/tags/tag.behavior.js

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

package/src/patterns/components/tags/tag.js

@@ -1,4 +1,4 @@
-import { getUpdatedItems, EVENTS, ARIA } from '@ilo-org/utils';
+import { getUpdatedItems, EVENTS } from "@ilo-org/utils";
 
 /**
  * The Tag module which handles rendering field labels inline on a form.
@@ -50,13 +50,13 @@ export default class Tag {
      * The field that a user interacts with on a form
      * @type {Object}
      */
-    this.buttonTags = this.element.querySelectorAll('.ilo--tag--button');
-    this.multipleActive = this.element.getAttribute('data-multipleactive');
+    this.buttonTags = this.element.querySelectorAll(".ilo--tag--button");
+    this.multipleActive = this.element.getAttribute("data-multipleactive");
 
     this.buttonTags.forEach((button, i) => {
-      const expanded = button.dataset['active'];
-      const id = this.buttonTags[i].getAttribute('id');
-      if (expanded === 'true') {
+      const expanded = button.dataset["active"];
+      const id = this.buttonTags[i].getAttribute("id");
+      if (expanded === "true") {
         this.itemStatuses = getUpdatedItems({
           id,
           itemStatuses: this.itemStatuses,
@@ -104,7 +104,7 @@ export default class Tag {
    * @chainable
    */
   onClick(i) {
-    const id = this.buttonTags[i].getAttribute('id');
+    const id = this.buttonTags[i].getAttribute("id");
 
     this.itemStatuses = getUpdatedItems({
       id,
@@ -144,14 +144,14 @@ export default class Tag {
    */
   updateTagItems() {
     this.tags.forEach((item, i) => {
-      const id = item.getAttribute('id');
+      const id = item.getAttribute("id");
       const open = this.itemStatuses.indexOf(id) > -1;
       if (open) {
-        this.tags[i].classList.add('ilo--tag--active');
-        this.tags[i].setAttribute('data-active', 'true');
+        this.tags[i].classList.add("ilo--tag--active");
+        this.tags[i].setAttribute("data-active", "true");
       } else {
-        this.tags[i].classList.remove('ilo--tag--active');
-        this.tags[i].setAttribute('data-active', 'true');
+        this.tags[i].classList.remove("ilo--tag--active");
+        this.tags[i].setAttribute("data-active", "true");
       }
     });
 

package/src/patterns/components/tags/tag.stories.jsx

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

package/src/patterns/components/tags/tag.wingsuit.yml

@@ -1,5 +1,5 @@
 tag:
-  use: '@components/tags/tag.twig'
+  use: "@components/tags/tag.twig"
   label: Tag
   description: A display or interactable tag
   fields:
@@ -18,10 +18,10 @@ tag:
     url:
       type: text
       label: URL
-      description: The tag's url reference 
+      description: The tag's url reference
       preview:
         faker: https://www.google.com/
-  settings: 
+  settings:
     defaultActive:
       type: select
       label: Default Active

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

@@ -1,5 +1,5 @@
 tags:
-  use: '@components/tags/tags.twig'
+  use: "@components/tags/tags.twig"
   label: Tags
   description: A group of tags
   fields:

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

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

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

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