@ilo-org/twig 1.1.5 → 1.2.0

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

@@ -1,14 +0,0 @@
-import "./index";
-
-export default {};
-const patternDefinition = require("./linklist.wingsuit.yml");
-
-/* eslint-disable-next-line */
-export const wingsuit = {
-  patternDefinition,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-};

package/src/patterns/components/linklist/linklist.twig

@@ -1,26 +0,0 @@
-{#
-  LINK LIST COMPONENT
-#}
-<div class="{{prefix}}--link-list {{prefix}}--link-list--{{theme}}" data-loadcomponent="LinkList" data-prefix="{{prefix}}">
-  {% if headline %}
-    <h3 class="{{prefix}}--link-list--headline">{{headline}}</h3>
-  {% endif %}
-  <ul class="{{prefix}}--link-list--linkgroups">
-    {% for group in linkgroup %}
-    <li class="{{prefix}}--link-list--linkgroups-item">
-      {% if group.headline is not empty %}
-      <h4 class="{{prefix}}--link-list--links--headline">{{group.headline}}</h4>
-      {% endif %}
-      <ul class="{{prefix}}--link-list--links">
-        {% for link in group.links %}
-        <li class="{{prefix}}--link-list--links--item{{ link.indented|boolval ? ' indented'}}">
-          <a href="{{link.url}}" class="{{prefix}}--link-list--link">
-            <span class="{{prefix}}--link-list--label">{{link.label}}</span>
-          </a>
-        </li>
-        {% endfor %}
-      </ul>
-    </li>
-    {% endfor %}
-  </ul>
-</div>

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

@@ -1,6 +0,0 @@
-/**
- * accordion
- */
-// Module template
-import "./list.twig";
-import "./list.wingsuit.yml";

package/src/patterns/components/list/list-item.twig

@@ -1,6 +0,0 @@
-{#
-  ACCORDION ITEM COMPONENT
-#}
-<li class="{{ prefix }}--list--item" id="{{ elementId }}">
-	{{content}}
-</li>

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

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

package/src/patterns/components/list/list.twig

@@ -1,35 +0,0 @@
-{# list.twig #}
-
-{% if not ordered %}
-	{% set ordered = "unstyled" %}
-{% endif %}
-
-
-<div class="{{prefix}}--list {% if ordered == 'unstyled' %} {{prefix}}--list__unstyled {% endif %} {% if alignment == 'horizontal' %} {{prefix}}--list__horizontal {% endif %}">
-	{% if title %}
-		<h2 class="{{prefix}}--list--title">{{ title }}</h2>
-	{% endif %}
-	{% if ordered == "ordered" %}
-		<ol>
-			{% for item in items %}
-				{% include "@components/list/list-item.twig" with {
-				prefix: prefix,
-				label: item.label,
-				content: item.content,
-				elementId: item.id,
-			} only %}
-			{% endfor %}
-		</ol>
-	{% else %}
-		<ul>
-			{% for item in items %}
-				{% include "@components/list/list-item.twig" with {
-				prefix: prefix,
-				label: item.label,
-				content: item.content,
-				elementId: item.id,
-			} only %}
-			{% endfor %}
-		</ul>
-	{% endif %}
-</div>

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

@@ -1,7 +0,0 @@
-/**
- * loading
- */
-// Module template
-import "./loading.twig";
-import "./loading.wingsuit.yml";
-import "./loading.behavior";

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

@@ -1,16 +0,0 @@
-import Loading from "./loading";
-
-Drupal.behaviors.loading = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="Loading"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          // eslint-disable-next-line no-console
-          new Loading(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};

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

@@ -1,102 +0,0 @@
-import { EVENTS } from "@ilo-org/utils";
-
-/**
- * The Loading module which handles rendering field labels inline on a form.
- *
- * To use this, you'll need to have the Javascript that's making the API call send custom events equal to
- * the constants EVENTS.ITEMSLOADED and EVENTS.ITEMSLOADING to the document. Send EVENTS.ITEMSLOADING when the  * API call is made, and EVENTS.ITEMSLOADED when the data has successfully loaded.
- *
- * @class Loading
- */
-export default class Loading {
-  /**
-   * Loading constructor which assigns the element passed into the constructor
-   * to the `this.element` property for later reference
-   *
-   * @param {HTMLElement} element - REQUIRED - the module's container
-   */
-  constructor(element) {
-    /**
-     * Reference to the DOM element that is the root of the component
-     * @property {Object}
-     */
-    this.element = element;
-
-    // get the theme prefix
-    this.prefix = `${this.element.dataset.prefix}--loading`;
-
-    // set some values
-    this.status = "idle";
-
-    // Initialize the view
-    this.init();
-  }
-
-  /**
-   * Initializes the view by calling the functions to
-   * create DOM references, setup event handlers and
-   * then create the event listeners
-   *
-   * @return {Object} Loading A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.setupHandlers().enable();
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Loading A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.LoadingHandler = this.loading.bind(this);
-    this.LoadedHandler = this.loaded.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Loading A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    document.addEventListener(EVENTS.ITEMSLOADING, () => this.LoadingHandler);
-    document.addEventListener(EVENTS.ITEMSLOADED, () => this.LoadedHandler);
-
-    return this;
-  }
-
-  /**
-   * Items are loading
-   *
-   * @return {Object} Loading A reference to the instance of the class
-   * @chainable
-   */
-  loading() {
-    this.element.classList.remove(`${this.prefix}--idle`);
-    this.element.classList.add(`${this.prefix}--loading`);
-
-    return this;
-  }
-
-  /**
-   * What happens when the items have loaded
-   *
-   * @return {Object} Loading A reference to the instance of the class
-   * @chainable
-   */
-  loaded() {
-    this.element.classList.remove(`${this.prefix}--loading`);
-    this.element.classList.add(`${this.prefix}--loaded`);
-    this.element.querySelector(`.${this.prefix}--copy`).innerHTML =
-      this.element.dataset.loadedmessage;
-
-    return this;
-  }
-}

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

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

package/src/patterns/components/loading/loading.twig

@@ -1,8 +0,0 @@
-{#
-  LOADING COMPONENT
-#}
-<div class="storybook {{prefix}}--loading {{prefix}}--loading--{{size}} {{prefix}}--loading--{{status}}" role="alert" aria-live="assertive" data-loadcomponent="Loading" data-prefix="{{prefix}}">
-  {% if message or loadedmessage %}
-    <p class="{{prefix}}--loading--copy">{% if message and not status == 'loaded' %}{{message}}{% endif %}{% if loadedmessage and status == 'loaded' %}{{loadedmessage}}{% endif %}</p>
-  {% endif %}
-</div>

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

@@ -1,7 +0,0 @@
-/**
- * Localnav
- */
-// Module template
-import "./localnav.twig";
-import "./localnav.wingsuit.yml";
-import "../navigation/navigation.behavior";

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

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

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

@@ -1,86 +0,0 @@
-{#
-  LOCALNAV COMPONENT
-#}
-<header class="{{prefix}}--header {{prefix}}--header--local" data-loadcomponent="Navigation" data-prefix="{{prefix}}">
-  <div class="{{prefix}}--header--utility-bar {{prefix}}--header--utility-bar--local" {% if background %} style="background: {{background}};"{% endif %}>
-    <nav class="{{prefix}}--nav--local">
-      <div class="{{prefix}}--nav--local--logo-wrapper">
-        <a href="{{siteurl}}" class="{{prefix}}--nav--local--logo-link">
-          <img src="{{logo.image}}" alt="{{logo.alt}}" class="{{prefix}}--nav--local--logo">
-        </a>
-      </div>
-
-      <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">
-              <span>{{item.label}}</span>
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-    <div class="{{prefix}}--language-switcher">
-      <div class="{{prefix}}--language-switcher--wrap">
-        {% if mainlink is defined %}
-          <span class="{{prefix}}--language-switcher--link--wrap">
-            <a href="{{mainlink.url}}" class="{{prefix}}--language-switcher--link">{{mainlink.label}}</a>
-          </span>
-        {% endif %}
-        {% if languagecontextmenu.links is not empty %}
-          <button class="{{prefix}}--language-switcher--button" type="button">
-          {{languagelabel}}
-          </button>
-          {% include '@components/contextmenu/contextmenu.twig' with {
-            links: languagecontextmenu.links,
-            prefix: prefix
-          }
-        %}
-        {% endif %}
-      </div> <!-- /.{{prefix}}--language-switcher--wrap -->
-    </div> <!-- /.{{prefix}}--language-switcher -->
-    <button class="{{prefix}}--header--menu">Menu</button>
-  </div> <!-- /.{{prefix}}--header--utility-bar -->
-
-  <div class="{{prefix}}--header--navigation">
-    <div class="{{prefix}}--header--inner">
-      <div class="{{prefix}}--mobile--nav">
-        <div class="{{prefix}}--mobile--nav--logo">
-          <a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
-            <img class="{{prefix}}--header--logo" src="{{mobilelogo.image}}" alt="{{mobilelogo.alt}}">
-          </a>
-          <button class="{{prefix}}--header--menu--close">{{menucloselabel}}</button>
-        </div> <!-- /.{{prefix}}--mobile--logo -->
-      {% if languagecontextmenu.links is not empty %}
-        <div class="{{prefix}}--mobile--nav--language--switcher">
-          <button class="{{prefix}}--mobile--nav--language--switcher--button" type="button">{{languagelabel}}</button>
-        </div> <!-- /.{{prefix}}--mobile--nav--language--switcher -->
-        <div class="{{prefix}}--mobile--nav--language--select">
-          <div class="{{prefix}}--header--inner">
-            <div class="{{prefix}}--mobile--subnav--menu">
-              <button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
-              <button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
-              <h6 class="{{prefix}}--mobile--subnav--label">{{languagelabel}}</h6>
-            </div> <!-- /{{prefix}}--mobile--subnav--menu -->
-            <ul class="{{prefix}}--nav--set">
-              {% for item in languagecontextmenu.links %}
-                <li class="{{prefix}}--nav--items">
-                  <a href="{{item.url}}" class="{{prefix}}--nav--link {{prefix}}--nav--language">{{item.label}}</a>
-                </li>
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-      {% endif %}
-      </div> <!-- /.{{prefix}}--mobile--nav -->
-      <nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
-        <h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>
-        <ul class="{{prefix}}--nav--set">
-          {% for item in primarynav.items %}
-            <li class="{{prefix}}--nav--items">
-              <a href="{{item.link}}" class="{{prefix}}--nav--link">{{item.label}}</a>
-            </li>
-          {% endfor %}
-        </ul>
-      </nav>
-</header>

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

@@ -1,6 +0,0 @@
-/**
- * LogoGrid
- */
-// Module template
-import "./logogrid.twig";
-import "./logogrid.wingsuit.yml";

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

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

package/src/patterns/components/logogrid/logogrid.twig

@@ -1,17 +0,0 @@
-<div class="{{prefix}}--logo-grid {{prefix}}--logo-grid__theme__{{ theme }}">
-  <div class="{{prefix}}--logo-grid--logos">
-    {% for logo in logos %}
-      {% if logo.url %}
-        <a href="{{ logo.url }}" class="{{prefix}}--logo-grid--item {{prefix}}--logo-grid--link">
-      {% else %}
-        <div class="{{prefix}}--logo-grid--item">
-      {% endif %}
-        <img src="{{ logo.src }}" alt="{{ logo.label }}" class="{{prefix}}--logo-grid--logo__image">
-      {% if logo.url %}
-        </a>
-      {% else %}
-        </div>
-      {% endif %}
-    {% endfor %}
-  </div>
-</div>

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

@@ -1,7 +0,0 @@
-/**
- * Modal
- */
-// Module template
-import "./modal.twig";
-import "./modal.wingsuit.yml";
-import "./modal.behavior.js";

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

@@ -1,16 +0,0 @@
-import Modal from "./modal";
-
-Drupal.behaviors.modal = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="Modal"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          // eslint-disable-next-line no-console
-          new Modal(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};

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

@@ -1,134 +0,0 @@
-import { EVENTS } from "@ilo-org/utils";
-
-/**
- * The Modal module which handles control and display of a modal dialog
- *
- *
- * @class Modal
- */
-export default class Modal {
-  /**
-   * Modal constructor which assigns the element passed into the constructor
-   * to the `this.element` property for later reference
-   *
-   * @param {HTMLElement} element - REQUIRED - the module's container
-   */
-  constructor(element) {
-    /**
-     * Reference to the DOM element that is the root of the component
-     * @property {Object}
-     */
-    this.element = element;
-
-    // Initialize the view
-    this.init();
-  }
-
-  /**
-   * Initializes the view by calling the functions to
-   * create DOM references, setup event handlers and
-   * then create the event listeners
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().setupHandlers().enable();
-
-    return this;
-  }
-
-  /**
-   * Find all necessary DOM elements used in the view and cache them
-   *
-   * @return {Object} ReadMore A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The button for toggling Read More state
-     * @type {Object}
-     */
-    this.OpenButton = this.element.querySelector(`.modal--open`);
-    this.CloseButton = this.element.querySelector(`.modal--close`);
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Modal A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.OpenButtonHandler = this.openButtonClick.bind(this);
-    this.CloseHandler = this.closeButtonClick.bind(this);
-    this.KeyPressHandler = this.keyPress.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    if (!this.OpenButton || !this.CloseButton) return this;
-
-    this.OpenButton.addEventListener(EVENTS.CLICK, () =>
-      this.OpenButtonHandler()
-    );
-    this.CloseButton.addEventListener(EVENTS.CLICK, () => this.CloseHandler());
-
-    return this;
-  }
-
-  /**
-   * Actions performed on click of the open button
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  openButtonClick() {
-    this.element.classList.add("show");
-    setTimeout(() => {
-      this.element.classList.add("fadein");
-    }, 125);
-    window.addEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
-
-    return this;
-  }
-
-  /**
-   * Actions performed on click of the close button
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  closeButtonClick() {
-    this.element.classList.remove("fadein");
-    setTimeout(() => {
-      this.element.classList.remove("show");
-    }, 125);
-    window.removeEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
-
-    return this;
-  }
-
-  /**
-   * Actions performed on key press
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  keyPress(e) {
-    if (e.key === "Escape") {
-      this.closeButtonClick();
-    }
-
-    return this;
-  }
-}

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

@@ -1,10 +0,0 @@
-import "./index";
-
-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.twig

@@ -1,20 +0,0 @@
-{#
-  MODAL COMPONENT
-
-  The modal calls another Twig into it, and therefore passes `modaldata` into it. `modaldata` should contain the fields for the component in question, just as if the component were being used anywhere else.
-#}
-
-{% if component != 'modal' %}
-	<div class="{{prefix}}--modal" data-loadcomponent="Modal" data-prefix="{{prefix}}">
-		{% include '@components/button/button.twig' with openbutton %}
-		<div class="{{prefix}}--modal--wrapper" {% if modalLabel %} aria-label="{{modalLabel}}" {% endif %} aria-modal="true" role="alertdialog">
-			<div class="{{prefix}}--modal--background" role="presentation"></div>
-			<div class="{{prefix}}--modal--contents">
-				{% block modal_content %}
-					{% include '@components/' ~ component ~ '/' ~ component ~ '.twig' with modaldata %}
-				{% endblock %}
-				{% include '@components/button/button.twig' with closebutton %}
-			</div>
-		</div>
-	</div>
-{% endif %}

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

@@ -1,7 +0,0 @@
-/**
- * Navigation
- */
-// Module template
-import "./navigation.twig";
-import "./navigation.wingsuit.yml";
-import "./navigation.behavior";

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

@@ -1,16 +0,0 @@
-import Navigation from "./navigation";
-
-Drupal.behaviors.navigation = {
-  attach() {
-    Array.prototype.forEach.call(
-      document.querySelectorAll(`[data-loadcomponent="Navigation"]`),
-      (element) => {
-        if (!element.dataset.jsProcessed) {
-          // eslint-disable-next-line no-console
-          new Navigation(element);
-          element.dataset.jsProcessed = true;
-        }
-      }
-    );
-  },
-};