@ilo-org/twig 1.1.6 → 1.2.0

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;
-        }
-      }
-    );
-  },
-};