@ilo-org/twig 0.2.12 → 0.2.14

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

@@ -1,5 +1,5 @@
 tableofcontents:
-  use: '@components/tableofcontents/tableofcontents.twig'
+  use: "@components/tableofcontents/tableofcontents.twig"
   label: Table Of Contents
   description: A component for displaying links internal to a page
   fields:
@@ -8,10 +8,10 @@ tableofcontents:
       label: Open Button
       description: The label and settings for the button that will show the table of contents at small breakpoints
       preview:
-        size: 'medium'
-        type: 'secondary'
-        label: 'Open Button'
-        className: 'toc--modal--open'
+        size: "medium"
+        type: "secondary"
+        label: "Open Button"
+        className: "toc--modal--open"
         opensmodal: true
       required: true
     closebutton:
@@ -19,13 +19,13 @@ tableofcontents:
       label: Close Button
       description: Label and settings for the "close" button
       preview:
-        size: 'large'
-        type: 'tertiary'
-        label: 'Close Button'
+        size: "large"
+        type: "tertiary"
+        label: "Close Button"
         icon: close
         iconPos: center
         icononly: true
-        className: 'toc--modal--close'
+        className: "toc--modal--close"
     headline:
       type: string
       label: Headline
@@ -39,13 +39,13 @@ tableofcontents:
       required: true
       preview:
         - label: "Item One"
-          href: '#example'
+          href: "#example"
         - label: "Item Two"
-          href: '#example'
+          href: "#example"
         - label: "Item Three"
-          href: '#example'
+          href: "#example"
         - label: "Item Four"
-          href: '#example'
+          href: "#example"
         - label: "Item Five"
-          href: '#example'
+          href: "#example"
   visibility: storybook

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

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

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

@@ -1,5 +1,5 @@
-import Tabs from './tabs';
-import Tooltip from '../tooltip/tooltip';
+import Tabs from "./tabs";
+import Tooltip from "../tooltip/tooltip";
 
 Drupal.behaviors.tabs = {
   attach() {
@@ -7,7 +7,7 @@ Drupal.behaviors.tabs = {
       document.querySelectorAll(`[data-loadcomponent="Tabs"]`),
       (element) => {
         // eslint-disable-next-line no-console
-        console.log('loading Tabs component....');
+        console.log("loading Tabs component....");
         new Tabs(element);
       }
     );
@@ -15,7 +15,7 @@ Drupal.behaviors.tabs = {
       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);
       }
     );

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,25 +8,25 @@ 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: "Women construction workers in Nepal build roads and bridges as part of a National Rural Transport Programme co-sponsored by the ILO."
+            credit: "© Marcel Crozet/ILO"
             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: "/images/small.jpg"
+              - breakpoint: 800
+                src: "/images/medium.jpg"
+              - breakpoint: 1200
+                src: "/images/large.jpg"
+              - breakpoint: 1440
+                src: "/images/large.jpg"
+        - 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>"
+            content: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/images/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>"
       required: true
   variants:
     default:
@@ -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);
       }
     );