@ilo-org/twig 1.1.6 → 1.2.0

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

@@ -1,212 +0,0 @@
-import { EVENTS, ARIA } from "@ilo-org/utils";
-
-/**
- * The Tabs module which handles rendering field labels inline on a form.
- *
- *
- * @class Tabs
- */
-export default class Tabs {
-  /**
-   * Tabs 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;
-
-    // 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} Tabs 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.tabButtons = this.element.querySelectorAll(
-      `.${this.prefix}--tabs--selection--button`
-    );
-    this.tabPanels = this.element.querySelectorAll('[role="tabpanel"]');
-    this.firstTab;
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Tabs A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.OnClickHandler = this.onClick.bind(this);
-    this.KeyPressHandler = this.onKeyPress.bind(this);
-    this.OnPrevHandler = this.setSelectedToPreviousTab.bind(this);
-    this.OnNextHandler = this.setSelectedToNextTab.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Tabs A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    this.element.classList.add("tabs--js");
-
-    Array.from(this.tabButtons).forEach((button) => {
-      button.addEventListener(EVENTS.CLICK, (e) => this.OnClickHandler(e));
-      button.addEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
-
-      if (!this.firstTab) {
-        this.firstTab = button.getAttribute(ARIA.CONTROLS);
-      }
-      this.lastTab = button.getAttribute(ARIA.CONTROLS);
-    });
-
-    return this;
-  }
-
-  /**
-   * Actions performed on click of a tab
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  onClick(e) {
-    e.preventDefault();
-    const tabid = e.currentTarget.getAttribute(ARIA.CONTROLS);
-    this.selectTab(tabid);
-
-    return this;
-  }
-
-  /**
-   * Actions performed on key press
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  onKeyPress(e) {
-    let flag = false;
-    const tabid = e.currentTarget.getAttribute(ARIA.CONTROLS);
-
-    switch (e.key) {
-      case "ArrowLeft":
-        this.setSelectedToPreviousTab(tabid);
-        flag = true;
-        break;
-
-      case "ArrowRight":
-        this.setSelectedToNextTab(tabid);
-        flag = true;
-        break;
-
-      case "Home":
-        this.selectTab(this.firstTab.id);
-        flag = true;
-        break;
-
-      case "End":
-        this.selectTab(this.lastTab.id);
-        flag = true;
-        break;
-
-      default:
-        break;
-    }
-
-    if (flag) {
-      e.stopPropagation();
-      e.preventDefault();
-    }
-
-    return this;
-  }
-
-  /**
-   * Selects the chosen tab
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  selectTab(tabid) {
-    const selectedTab = this.element.querySelector(
-      `[${ARIA.CONTROLS}="${tabid}"]`
-    );
-    Array.from(this.tabPanels).forEach((panel) => {
-      panel.setAttribute(ARIA.EXPANDED, false);
-    });
-    Array.from(this.tabButtons).forEach((button) => {
-      button.setAttribute(ARIA.SELECTED, false);
-    });
-    selectedTab.focus();
-    selectedTab.setAttribute(ARIA.SELECTED, true);
-    document.getElementById(tabid).setAttribute(ARIA.EXPANDED, true);
-
-    return this;
-  }
-
-  /**
-   * Selects the previous tab in the list of tabs
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  setSelectedToPreviousTab(tabid) {
-    const prevTab =
-      document.getElementById(tabid).previousElementSibling !== null
-        ? document.getElementById(tabid).previousElementSibling
-        : document.getElementById(this.lastTab);
-    this.selectTab(prevTab.id);
-
-    return this;
-  }
-
-  /**
-   * Selects the previous tab in the list of tabs
-   *
-   * @return {Object} Modal A reference to the instance of the class
-   * @chainable
-   */
-  setSelectedToNextTab(tabid) {
-    const nextTab =
-      document.getElementById(tabid).nextElementSibling !== null
-        ? document.getElementById(tabid).nextElementSibling
-        : document.getElementById(this.firstTab);
-    this.selectTab(nextTab.id);
-
-    return this;
-  }
-}

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

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

@@ -1,29 +0,0 @@
-{% set uid = "now"|date('Uv') %}
-{% set tabids = [] %}
-{% for item in items %}
-  {% set tabids = tabids|merge([random(100000)]) %}
-{% endfor %}
-<div class="{{prefix}}--tabs" data-prefix="{{prefix}}" id="tabs--{{uid}}" data-loadcomponent="Tabs">
-    <ul class="{{prefix}}--tabs--selection" aria-controls="tabs--{{uid}}" role="tablist" style="--tabscount: {{items|length}};">
-      {% for item in items %}
-        <li class="{{prefix}}--tabs--selection--item" role="presentation"> {# changed role to presentation for list item #}
-          <a href="#tab--{{tabids[loop.index - 1]}}" class="{{prefix}}--tabs--selection--button{% if item.icon is defined %} icon{% endif %}" aria-controls="tab--{{tabids[loop.index - 1]}}" role="tab" tabindex="0" {% if loop.index == 1 %}aria-selected="true"{% else %}aria-selected="false"{% endif %} title="{{item.label}}">
-            <span class="{{prefix}}--tabs--selection--label">{{item.label}}</span>
-            {% if item.icon is defined %}
-              {% include '@components/icon/icon.twig' with {
-               name: item.icon,
-               size: '24'
-              } %}
-            {% endif %}
-          </a>
-        </li>
-      {% endfor %}
-    </ul>
-    <div class="{{prefix}}--tabs--content">
-      {% for item in items %}
-        <div id="tab--{{tabids[loop.index - 1]}}" role="tabpanel" aria-labelledby="tab--{{tabids[loop.index - 1]}}" {% if loop.index == 1 %}aria-expanded="true"{% else %}aria-expanded="false"{% endif %}>
-          {% include '@components/' ~ item.component ~ '/' ~ item.component ~ '.twig' with item.componentdata %}
-        </div>
-      {% endfor %}
-    </div>
-</div>

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

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

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

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

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

@@ -1,159 +0,0 @@
-import { getUpdatedItems, EVENTS } from "@ilo-org/utils";
-
-/**
- * The Tag module which handles rendering field labels inline on a form.
- *
- * @class Tag
- */
-export default class Tag {
-  /**
-   * Tag 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;
-    this.multipleActive = true;
-    this.itemStatuses = [];
-
-    // 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} Tag 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} Tag A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * 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.forEach((button, i) => {
-      const expanded = button.dataset["active"];
-      const id = this.buttonTags[i].getAttribute("id");
-      if (expanded === "true") {
-        this.itemStatuses = getUpdatedItems({
-          id,
-          itemStatuses: this.itemStatuses,
-          allowMultipleActive: this.multipleActive,
-        });
-      }
-    });
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Tag A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.onClick = this.onClick.bind(this);
-    this.updateTagItems = this.updateTagItems.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Tag A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    if (this.buttonTags.length > 0) {
-      this.buttonTags.forEach((button, i) => {
-        button.addEventListener(EVENTS.CLICK, () => this.onClick(i));
-      });
-    }
-
-    return this;
-  }
-
-  /**
-   * Onclick interaction with the tag button
-   *
-   * @return {Object} Tag A reference to the instance of the class
-   * @chainable
-   */
-  onClick(i) {
-    const id = this.buttonTags[i].getAttribute("id");
-
-    this.itemStatuses = getUpdatedItems({
-      id,
-      itemStatuses: this.itemStatuses,
-      allowMultipleacmultipleActive: this.multipleActive,
-    });
-
-    // this.updateTagItems();
-    this.removeParentDom(id);
-
-    return this;
-  }
-
-  /**
-   *
-   * @param {String} id The element id of the child of the node to be removed
-   *
-   * @return {Object} Tag A reference to the instance of the class
-   * @chainable
-   */
-  removeParentDom(id) {
-    const buttonTag = document.getElementById(id);
-
-    if (buttonTag) {
-      buttonTag.parentElement.remove();
-    }
-
-    return this;
-  }
-
-  /**
-   * Update tag items based off of new statuses
-   *
-   * @return {Object} Tag A reference to the instance of the class
-   * @chainable
-   */
-  updateTagItems() {
-    this.tags.forEach((item, i) => {
-      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");
-      } else {
-        this.tags[i].classList.remove("ilo--tag--active");
-        this.tags[i].setAttribute("data-active", "true");
-      }
-    });
-
-    return this;
-  }
-}

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

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

@@ -1,30 +0,0 @@
-{#
-  TAG COMPONENT
-#}
-{% if tagType == "button" and defaultActive %}
-  <li class="{{prefix}}--tags__item">
-    <button class="{{prefix}}--tag {{prefix}}--tag--button {{prefix}}--tag--active icon__position--right" id="{{ elementId }}" data-active={{ defaultActive }} type="button">
-      {{content}}
-      <span class="ilo--icon" title="Remove"></span>
-    </button>
-  </li>
-{% elseif tagType == "reset" %}
-  <li class="{{prefix}}--tags__item">
-    <button class="{{prefix}}--tag {{prefix}}--tag--reset {{prefix}}--tag--active" id="{{ elementId }}" data-active={{ defaultActive }} type="button">
-      {{content}}
-    </button>
-  </li>
-{% elseif tagType == "anchor" %}
-<li class="{{prefix}}--tags__item">
-    <a class="{{prefix}}--tag {{prefix}}--tag--anchor {% if defaultActive %} {{prefix}}--tag--active{% endif %}" href="{{ url }}"  id="{{ elementId }}" data-active={{ defaultActive }}>
-      {{content}}
-    </a>
-</li>
-{% elseif tagType == "display" %}
-<li class="{{prefix}}--tags__item">
-  <span class="{{prefix}}--tag {% if defaultActive %} {{prefix}}--tag--active{% endif %}" id="{{ elementId }}" data-active={{ defaultActive }}>
-    {{content}}
-  </span>
-</li>
-{% else %}
-{% endif %}

package/src/patterns/components/tags/tags.twig

@@ -1,15 +0,0 @@
-{#
-  TAGS COMPONENT
-#}
-<ul class="ilo--tags" data-loadcomponent="Tag" data-multipleactive="{{ allowMultipleActive|default(true) }}">
-  {% for item in items %}
-    {% include "@components/tags/tag.twig" with {
-      content: item.content,
-      defaultActive: item.defaultActive,
-      id: item.elementId,
-      prefix: prefix,
-      tagType: tagType,
-      url: item.url|default(null),
-    } only %}
-  {% endfor %}
-</ul>

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

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

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

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

package/src/patterns/components/textarea/textarea.twig

@@ -1,14 +0,0 @@
-{# textarea.twig #}
-
-{% extends "@components/form/formcontrol.twig" %}
-
-{% set baseClass = prefix ~ '--textarea' %}
-{% set textAreaClass = [baseClass] %}
-{% if error %}
-	{% set textAreaClass = textAreaClass|merge([baseClass ~ "__error"]) %}
-{% endif %}
-
-
-{% block formfield %}
-	<textarea class="{{ textAreaClass|join(' ') }}" name="{{ name }}" id="{{ id|default(name) }}" aria-describedby="{{ ariaDescribedBy }}" {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if form %} form="{{ form }}" {% endif %} {% if maxlength %} maxlength="{{ maxlength }}" {% endif %} {% if minlength %} minlength="{{ minlength }}" {% endif %} {% if spellcheck %} spellcheck="{{ spellcheck }}" {% endif %} {% if wrap %} wrap="{{ wrap }}" {% endif %}>{{ value|default('') }}</textarea>
-{% endblock %}

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

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

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

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

package/src/patterns/components/textinput/textinput.twig

@@ -1,14 +0,0 @@
-{# text-input.twig #}
-
-{% extends "@components/form/formcontrol.twig" %}
-
-{% set baseClass = prefix ~ "--text-input" %}
-{% set inputClass = [baseClass] %}
-{% if error %}
-	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
-{% endif %}
-
-{% block formfield %}
-	<input id="{{ id|default(name) }}" name="{{ name }}" type="{{ type|default("text") }}" class="{{ inputClass|join(" ") }}" {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} {% if pattern %} pattern="{{ pattern }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>
-
-{% endblock %}

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

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

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

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

package/src/patterns/components/toggle/toggle.twig

@@ -1,36 +0,0 @@
-{# toggle.twig #}
-
-{% extends "@components/form/formcontrol.twig" %}
-
-{# Define the default values, these values can be overridden when the template is included or extended. #}
-{% set size = size|default("medium") %}
-{% set error = error|default(false) %}
-{% set disabled = disabled|default(false) %}
-{% set defaultChecked = defaultChecked|default(false) %}
-{% set required = required|default(false) %}
-{% set name = name|default("toggle") %}
-{% set id = id|default(name) %}
-{% set ariaDescribedBy = ariaDescribedBy|default("") %}
-
-{# Calculate dynamic classes based on the passed values. #}
-{% set baseClass = prefix ~ "--input--toggle" %}
-{% set sliderClass = baseClass ~ "--slider" %}
-{% set toggleClass = [baseClass, class, baseClass ~ "__size__" ~ size] %}
-
-{% if not disabled and error %}
-	{% set toggleClass = toggleClass|merge([baseClass ~ "__error"]) %}
-{% endif %}
-{% if disabled %}
-	{% set toggleClass = toggleClass|merge([baseClass ~ "__disabled"]) %}
-{% endif %}
-
-{% block formfield %}
-
-	<div class="{{ toggleClass|join(" ") }}">
-		<input {% if defaultchecked %} defaultchecked {% endif %} {% if required %} required {% endif %} {% if checked %} checked {% endif %} name="{{ name }}" id="{{ id }}" type="checkbox" role="switch" aria-describedby="{{ ariaDescribedBy }}"/>
-
-
-		<span class="{{ sliderClass }}"/>
-	</div>
-
-{% endblock %}

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

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

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

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