@ilo-org/twig 0.0.1

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

@@ -0,0 +1,209 @@
+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);
+    console.log(e.key);
+
+    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

@@ -0,0 +1,7 @@
+import './index';
+
+const patternDefinition = require('./tabs.wingsuit.yml');
+
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/tabs/tabs.twig

@@ -0,0 +1,30 @@
+{#
+  TABS COMPONENT
+#}
+{% 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">
+          <a href="#tab--{{tabids[loop.index - 1]}}" class="{{prefix}}--tabs--selection--button{% if item.icon is defined %} icon{% endif %}" role="tab" aria-controls="tab--{{tabids[loop.index - 1]}}" tabindex="0" aria-selected="{% if loop.index == 1 %}true{% else %}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 {icon: item.icon} %}
+            {% endif %}
+          </a>
+        </li>
+      {% endfor %}
+    </ul>
+    <div class="{{prefix}}--tabs--content">
+      {% for item in items %}
+        <div id="tab--{{tabids[loop.index - 1]}}" role="tabpanel" aria-expanded="{% if loop.index == 1 %}true{% else %}false{% endif %}">
+          {% include '@components/' ~ item.component ~ '/' ~ item.component ~ '.twig' with item.componentdata %}
+        </div>
+      {% endfor %}
+    </div>
+</div>

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

@@ -0,0 +1,168 @@
+tabs:
+  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:
+    items:
+      type: object
+      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'
+          componentdata:
+            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'
+        - 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>"
+      required: true
+  variants:
+    default:
+      label: Default
+      description: the default settings for the Tabs
+    withicon:
+      label: With Icon
+      description: Tabs with Icons
+      fields:
+        items:
+          - label: 'Tab One'
+            component: 'image'
+            componentdata:
+              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'
+            icon: error
+          - label: 'Tab Two'
+            component: 'image'
+            componentdata:
+              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'
+            icon: error
+          - label: 'Tab Three'
+            component: 'image'
+            componentdata:
+              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'
+            icon: error
+    fiveitems:
+      label: Five Items
+      description: Tab component with five items
+      fields:
+        items:
+          - label: 'Tab One'
+            component: 'image'
+            componentdata:
+              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'
+            componentdata:
+              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'
+            componentdata:
+              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'
+            componentdata:
+              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'
+            componentdata:
+              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'
+  visibility: storybook

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

@@ -0,0 +1,7 @@
+/**
+ * tag
+ */
+// Module template
+import './tag-set.twig';
+import './tagset.wingsuit.yml';
+import './tag.behavior';

package/src/patterns/components/tag/tag-set.twig

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

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

@@ -0,0 +1,14 @@
+import Tag from './tagset';
+
+Drupal.behaviors.tag = {
+  attach() {
+    Array.prototype.forEach.call(
+      document.querySelectorAll(`[data-loadcomponent="Tag"]`),
+      (element) => {
+        // eslint-disable-next-line no-console
+        console.log('loading Tag component....');
+        new Tag(element);
+      }
+    );
+  },
+};

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

@@ -0,0 +1,7 @@
+import './index';
+
+const patternDefinition = require('./tagset.wingsuit.yml');
+
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/tag/tag.twig

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

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

@@ -0,0 +1,43 @@
+tag:
+  use: '@components/tag/tag.twig'
+  label: Tag
+  description: A clickable tag
+  fields:
+    content:
+      type: text
+      label: Content
+      description: The tag item's collapsed content.
+      preview:
+        faker: lorem.word
+    id:
+      type: text
+      label: ID
+      description: The tag item's id.
+      preview:
+        faker: lorem.word
+    url:
+      type: text
+      label: URL
+      description: The tag's url reference
+      preview:
+        faker: https://www.google.com/
+  settings: 
+    defaultActive:
+      type: select
+      label: Default Active
+      description: The tag loads in an active state
+      options:
+        true: True
+        false: False
+      preview: false
+      required: false
+    tagType:
+      type: type
+      label: Tag Type
+      description: The type of tag
+      options:
+        anchor: Anchor
+        button: Button
+        display: Display
+      preview: display
+  visibility: storybook