@ilo-org/twig 0.2.11 → 0.2.13

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

@@ -1,5 +1,5 @@
 linklist:
-  use: '@components/linklist/linklist.twig'
+  use: "@components/linklist/linklist.twig"
   label: Link List
   description: The Link List receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
   fields:
@@ -17,30 +17,30 @@ linklist:
         - headline: Section 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"
             - 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"
         - headline: Section 2 (With Indents)
           links:
             - label: Section 2 Link One
-              url: 'http://www.google.com'
-            - indented: 'true'
+              url: "http://www.google.com"
+            - indented: "true"
               label: Section 2 Link Two
-              url: 'http://www.google.com'
-            - indented: 'true'
+              url: "http://www.google.com"
+            - indented: "true"
               label: Section 2 Link Three
-              url: 'http://www.google.com'
-            - indented: 'true'
+              url: "http://www.google.com"
+            - indented: "true"
               label: Section 2 Link Four
-              url: 'http://www.google.com'
+              url: "http://www.google.com"
             - label: Section 2 Link Five Is Slightly Longer
-              url: 'http://www.google.com'
+              url: "http://www.google.com"
   settings:
     theme:
       type: select
@@ -50,5 +50,5 @@ linklist:
       options:
         light: Light
         dark: Dark
-      preview: 'light'
+      preview: "light"
   visibility: storybook

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

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

package/src/patterns/components/list/list-item.wingsuit.yml

@@ -1,5 +1,5 @@
 list:
-  use: '@components/list/list-item.twig'
+  use: "@components/list/list-item.twig"
   label: List Item
   description: A list item.
   fields:

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

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

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

@@ -1,5 +1,5 @@
 list:
-  use: '@components/list/list.twig'
+  use: "@components/list/list.twig"
   label: List
   description: The list component
   fields:
@@ -25,7 +25,7 @@ list:
           id: item4
         - content: Cappuccino. Made with espresso and milk that has been frothed up with pressurized steam.
           id: item5
-  settings: 
+  settings:
     ordered:
       type: select
       label: Ordered
@@ -35,7 +35,7 @@ list:
         ordered: Ordered
         unordered: Unordered
         unstyled: Unstyled
-      preview: 'unstyled'
+      preview: "unstyled"
     alignment:
       type: select
       label: Alignment
@@ -43,6 +43,6 @@ list:
       options:
         default: Default
         horizontal: Horizontal
-      preview: 'default'
+      preview: "default"
       required: false
   visibility: storybook

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

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

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

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

package/src/patterns/components/loading/loading.js

@@ -1,4 +1,4 @@
-import { EVENTS, ARIA } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The Loading module which handles rendering field labels inline on a form.
@@ -26,7 +26,7 @@ export default class Loading {
     this.prefix = `${this.element.dataset.prefix}--loading`;
 
     // set some values
-    this.status = 'idle';
+    this.status = "idle";
 
     // Initialize the view
     this.init();

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

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

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

@@ -1,5 +1,5 @@
 loading:
-  use: '@components/loading/loading.twig'
+  use: "@components/loading/loading.twig"
   label: Loading
   description: The Loading component displays a loading state. (See Javascript comments in loading.js for how to use this with vanilla JS).
   fields:
@@ -7,13 +7,13 @@ loading:
       type: string
       label: Message
       description: The loading message
-      preview: 'Submitting'
+      preview: "Submitting"
       required: true
     loadedmessage:
       type: string
       label: LOaded Message
       description: The loaded message
-      preview: 'Completed'
+      preview: "Completed"
       required: true
   settings:
     size:
@@ -24,7 +24,7 @@ loading:
       options:
         small: Small
         large: Large
-      preview: 'large'
+      preview: "large"
     status:
       type: select
       label: Status
@@ -34,5 +34,5 @@ loading:
         idle: Idle
         loading: Loading
         loaded: Loaded
-      preview: 'loading'
+      preview: "loading"
   visibility: storybook

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

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

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

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

package/src/patterns/components/localnav/localnav.twig

@@ -13,7 +13,9 @@
       <ul class="{{prefix}}--nav--local--set">
         {% for item in primarynav.items %}
           <li class="{{prefix}}--nav--local--item">
-            <a href="{{item.link}}" class="{{prefix}}--nav--local--link">{{item.label}}</a>
+            <a href="{{item.link}}" class="{{prefix}}--nav--local--link">
+              <span>{{item.label}}</span>
+            </a>
           </li>
         {% endfor %}
       </ul>

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

@@ -1,5 +1,5 @@
 localnav:
-  use: '@components/localnav/localnav.twig'
+  use: "@components/localnav/localnav.twig"
   label: Local nav
   description: The Local nav component
   fields:
@@ -7,21 +7,21 @@ localnav:
       type: string
       label: Background
       description: Override color for the background
-      preview: "#960A55"
+      preview: "#1E2DBE"
     logo:
       type: object
       label: Logo
       description: Logo for the nav
       required: true
       preview:
-        image: "https://placekitten.com/g/148/38"
+        image: "/brand-assets/logo_en_horizontal_white.svg"
         alt: Logo
     siteurl:
       type: string
       label: Site url
       description: home url for the website
       required: true
-      preview: "https://www.google.com/"
+      preview: "https://www.ilo.org/"
     tagline:
       type: object
       label: Site tagline
@@ -47,23 +47,21 @@ localnav:
         navlabel: Primary Local nav
         mobilecloselabel: Close
         items:
-          - link: "https://www.google.com/search?q=menu1"
+          - link: "https://www.ilo.org"
             label: Menu Item 1
-          - link: "https://www.google.com/search?q=menu2"
+          - link: "https://www.ilo.org"
             label: Menu Item 2
-          - link: "https://www.google.com/search?q=menu3"
+          - link: "https://www.ilo.org"
             label: Menu Item 3
-          - link: "https://www.google.com/search?q=menu4"
+          - link: "https://www.ilo.org"
             label: Menu Item 4
-          - link: "https://www.google.com/search?q=menu5"
-            label: Menu Item 5
     mainlink:
       type: object
       label: Main link object
       description: Link object for back to main site link
-      preview: 
-        url: 'https://www.google.com/'
-        label: 'Go to main ILO website'
+      preview:
+        url: "https://www.ilo.org/"
+        label: "Go to main website"
     languagelabel:
       type: string
       label: Language Label
@@ -76,14 +74,14 @@ localnav:
       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/modal/index.js

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

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

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

package/src/patterns/components/modal/modal.js

@@ -1,4 +1,4 @@
-import { EVENTS } from '@ilo-org/utils';
+import { EVENTS } from "@ilo-org/utils";
 
 /**
  * The Modal module which handles control and display of a modal dialog
@@ -76,7 +76,9 @@ export default class Modal {
    * @chainable
    */
   enable() {
-    this.OpenButton.addEventListener(EVENTS.CLICK, () => this.OpenButtonHandler());
+    this.OpenButton.addEventListener(EVENTS.CLICK, () =>
+      this.OpenButtonHandler()
+    );
     this.CloseButton.addEventListener(EVENTS.CLICK, () => this.CloseHandler());
 
     return this;
@@ -89,9 +91,9 @@ export default class Modal {
    * @chainable
    */
   openButtonClick() {
-    this.element.classList.add('show');
+    this.element.classList.add("show");
     setTimeout(() => {
-      this.element.classList.add('fadein');
+      this.element.classList.add("fadein");
     }, 125);
     window.addEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
 
@@ -105,9 +107,9 @@ export default class Modal {
    * @chainable
    */
   closeButtonClick() {
-    this.element.classList.remove('fadein');
+    this.element.classList.remove("fadein");
     setTimeout(() => {
-      this.element.classList.remove('show');
+      this.element.classList.remove("show");
     }, 125);
     window.removeEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
 
@@ -121,7 +123,7 @@ export default class Modal {
    * @chainable
    */
   keyPress(e) {
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       this.closeButtonClick();
     }
 

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

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

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

@@ -1,5 +1,5 @@
 modal:
-  use: '@components/modal/modal.twig'
+  use: "@components/modal/modal.twig"
   label: Modal
   description: The Modal displays a div containing a button which is visible on page load. On click of this button, a modal dialog is opened which displays a semitransparent fixed-position background and the contents of the chosen component.
   fields:
@@ -8,13 +8,13 @@ modal:
       label: Closee Button
       description: Label and settings for the "close" button
       preview:
-        size: 'medium'
-        type: 'tertiary'
-        label: 'Close Button'
+        size: "medium"
+        type: "tertiary"
+        label: "Close Button"
         icon: close
         iconPos: center
         icononly: true
-        className: 'modal--close'
+        className: "modal--close"
       required: true
     component:
       type: string
@@ -27,28 +27,28 @@ modal:
       label: Modal Data
       description: The fields needed to populate the component being displayed by the modal
       preview:
-        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'
+          - 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"
       required: true
     openbutton:
       type: object
       label: Open Button
       description: The label and settings for the button that will open the modal
       preview:
-        size: 'large'
-        type: 'primary'
-        label: 'Open Button'
-        className: 'modal--open'
+        size: "large"
+        type: "primary"
+        label: "Open Button"
+        className: "modal--open"
         opensmodal: true
       required: true
   visibility: storybook

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

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

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

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