@ilo-org/twig 0.0.1

package/src/patterns/components/footer/footer.twig

@@ -0,0 +1,62 @@
+{#
+  FOOTER COMPONENT
+#}
+<footer class="{{prefix}}--footer">
+  <div class="{{prefix}}--footer--main">
+    <div class="site--info">
+      <img class="{{prefix}}--footer--logo" src="{{logo.url}}" alt="{{logo.alt}}" />
+      <h3 class="{{prefix}}--footer--headline">{{tagline}}</h3>
+      <h4 class="{{prefix}}--footer--subhead">{{subtagline}}</h4>
+    </div>
+    {% if address %}
+    <div class="address">
+      {% for line in address %}
+        <p class="address--line">{{line}}</p>
+      {% endfor %}
+    </div>
+    {% endif %}
+    {% if linkgroup %}
+    <nav class="links">
+      {% include '@components/linklist/linklist.twig' with {linkgroup: linkgroup, theme: 'dark'} %}
+    </nav>
+    {% endif %}
+    {% if social or subscribe %}
+    <div class="connect">
+      {% if social %}
+        <h5 class="social--headline">{{social.headline}}</h5>
+        <ul class="social--links">
+          {% for link in social.links %}
+            <li class="social--links--item">
+              <a href="{{link.url}}" class="social--links--link {{link.type|lower}}">{{link.type|capitalize}}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+      {% if subscribe %}
+        {% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
+  <div class="{{prefix}}--footer--secondary">
+    {% if legal %}
+    <div class="legal">
+      {{legal}}
+    </div>
+    {% endif %}
+    {% if secondarylinks %}
+    <nav class="secondarylinks">
+      <ul class="secondarylinks--list">
+        {% for link in secondarylinks %}
+          <li class="secondarylinks--list--item">
+            <a href="{{link.url}}" class="secondarylinks--list--link">{{link.label}}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
+    {% endif %}
+    {% if anchorlink %}
+      <a href="{{anchorlink.href}}" class="anchorlink">{{anchorlink.label}}</a>
+    {% endif %}
+  </div>
+</footer>

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

@@ -0,0 +1,104 @@
+footer:
+  use: '@components/footer/footer.twig'
+  label: Footer
+  description: A component for displaying a page's footer
+  fields:
+    logo:
+      type: object
+      label: action
+      description: A URL and alt text for the site logo
+      preview:
+        alt: "My alt text"
+        url: "https://placekitten.com/g/266/96"
+      required: true
+    tagline:
+      type: string
+      label: tagline
+      description: the tagline for the site
+      preview: "Advancing social justice, promoting decent work"
+    subtagline:
+      type: string
+      label: subtagline
+      description: a sub-tagline for the site
+      preview: "ILO is a specialized agency of the United Nations"
+    address:
+      type: object
+      label: address
+      description: "any number of strings in an address"
+      preview:
+        - "International Labour Organization"
+        - "4 route des Morillons"
+        - "CH-1211 Genève 22"
+        - "Switzerland"
+    linkgroup:
+      type: object
+      label: links
+      description: "up to six links"
+      preview:
+        - links:
+            - label: "Link One"
+              url: "http://www.google.com"
+            - label: "Link Two"
+              url: "http://www.google.com"
+            - label: "Link Three"
+              url: "http://www.google.com"
+            - label: "Link Four"
+              url: "http://www.google.com"
+            - label: "Link Five"
+              url: "http://www.google.com"
+            - label: "Link Six"
+              url: "http://www.google.com"
+    social:
+      type: object
+      label: social
+      description: "Links to social media"
+      preview:
+        headline: "Social Links Headline"
+        links:
+          - type: "instagram"
+            url: "http://www.google.com"
+          - type: "facebook"
+            url: "http://www.google.com"
+          - type: "twitter"
+            url: "http://www.google.com"
+          - type: "twitter"
+            url: "http://www.google.com"
+          - type: "instagram"
+            url: "http://www.google.com"
+    subscribe:
+      type: object
+      label: subscribe
+      description: "a link to a subscribe form"
+      preview:
+        label: "Subscribe"
+        url: "http://www.google.com"
+    legal:
+      type: string
+      label: legal
+      description: "a string with legal information"
+      preview: "© 1996-2022 International Labour Organization (ILO)"
+    secondarylinks:
+      type: object
+      label: secondarylinks
+      description: "up to six links"
+      preview:
+        - label: "Link One"
+          url: "http://www.google.com"
+        - label: "Link Two"
+          url: "http://www.google.com"
+        - label: "Link Three"
+          url: "http://www.google.com"
+        - label: "Link Four"
+          url: "http://www.google.com"
+        - label: "Link Five"
+          url: "http://www.google.com"
+        - label: "Link Six"
+          url: "http://www.google.com"
+    anchorlink:
+      type: object
+      label: anchorlink
+      description: "an anchor href and label for navigating to another section on the page"
+      preview:
+        label: "Back to Top"
+        href: "#anchor"
+  visibility: storybook

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

@@ -0,0 +1,6 @@
+/**
+ * Footer
+ */
+// Module template
+import './footer.twig';
+import './footer.wingsuit.yml';

package/src/patterns/components/form/checkbox.twig

@@ -0,0 +1,13 @@
+{#
+  CHECKBOX COMPONENT
+#}
+{% extends '@components/fieldset/fieldset.twig' %}
+{% set fsinputid = id ? id : name %}
+{% set fslabel = label %}
+{% set fshelper = helper %}
+{% set fserror = error %}
+{% set fstype = type %}
+
+{% block formfield %}
+  <input id="{{id}}" name="{{name}}" type="checkbox" class="{{prefix}}--checkbox" {% if disabled %}disabled{% endif %} />
+{% endblock %}

package/src/patterns/components/form/checkboxgroup.twig

@@ -0,0 +1,5 @@
+{#
+  GROUPED CHECKBOX COMPONENT
+#}
+<input id="{{id}}" name="{{name}}" type="checkbox" class="{{prefix}}--checkbox" {% if disabled %}disabled{% endif %} />
+

package/src/patterns/components/form/datepicker.twig

@@ -0,0 +1,32 @@
+{#
+  DATEPICKER COMPONENT
+#}
+<div class="{{prefix}}--datepicker{% if range %}--range{% endif %}">
+  <fieldset class="{{prefix}}--fieldset">
+    <div class="{{prefix}}--fieldset--input--date ">
+      <label class="{{prefix}}--fieldset--label">{{label}}</label>
+      <input name="{{name}}" type="date" class="{{prefix}}--datepicker {{prefix}}--input {% if error %} error{% endif %}" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if required %}required{% endif %}{% if disabled %}disabled{% endif %}  id="{% if id %}{{id}}{% else %}{{name}}{% endif %}">
+      {% if helper and not error %}
+          <span class="ilo--fieldset--helper">{{helper}}</span>
+        {% endif %}
+        {% if error %}
+          <span class="ilo--fieldset--error">{{error}}</span>
+        {% endif %}
+    </div>
+  </fieldset>
+  {% if range %}
+  <fieldset class="{{prefix}}--fieldset">
+    <div class="{{prefix}}--fieldset--input--date ">
+      <label class="{{prefix}}--fieldset--label">{{enddata.label}}</label>
+      <input name="{{enddata.name}}" type="date" class="{{prefix}}--datepicker {{prefix}}--input{% if enddata['error'] is defined %} error{% endif %}" {% if enddata['placeholder'] is defined %}placeholder="{{enddata.placeholder}}"{% endif %} {% if enddata['required'] is defined %}required{% endif %} {% if enddata['disabled'] is defined %}disabled{% endif %} id="{% if enddata['id'] is defined %}{{enddata.id}}{% else %}{{enddata.name}}{% endif %}">
+    </div>
+    {% if enddata.helper and not enddata.error %}
+        <span class="ilo--fieldset--helper">{{enddata.helper}}</span>
+      {% endif %}
+      {% if enddata.error %}
+        <span class="ilo--fieldset--error">{{enddata.error}}</span>
+      {% endif %}
+    </div>
+  </fieldset>
+  {% endif %}
+</div>

package/src/patterns/components/form/file.twig

@@ -0,0 +1,14 @@
+{#
+  FILE UPLOAD COMPONENT
+#}
+{% extends '@components/fieldset/fieldset.twig' %}
+{% set fsinputid = id ? id : name %}
+{% set fslabel = label %}
+{% set fshelper = helper %}
+{% set fserror = error %}
+{% set fstype = "file" %}
+{% set fsclass = "file-upload" %}
+
+{% block formfield %}
+  <input name="{{name}}" type="file" class="{{prefix}}--file-upload {% if error %} error{% endif %}" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if disabled %}disabled{% endif %} {% if required %}required{% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" data-label="{{label}}" data-loadcomponent="FileUpload" />
+{% endblock %}

package/src/patterns/components/form/fileupload.behavior.js

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

package/src/patterns/components/form/fileupload.js

@@ -0,0 +1,118 @@
+import { getUpdatedItems, EVENTS, ARIA } from '@ilo-org/utils';
+
+/**
+ * The FileUpload module which handles rendering field labels inline on a form.
+ *
+ * @class FileUpload
+ */
+export default class FileUpload {
+  /**
+   * FileUpload 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} FileUpload 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} FileUpload A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The button for toggling Read More state
+     * @type {Object}
+     */
+    this.container = this.element.parentElement.parentElement;
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} FileUpload A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.onChange = this.onChange.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} FileUpload A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.element.addEventListener(EVENTS.CHANGE, (e) => this.onChange(e));
+
+    return this;
+  }
+
+  /**
+   * onChange interaction with the FileUpload button
+   *
+   * @return {Object} FileUpload A reference to the instance of the class
+   * @chainable
+   */
+  onChange(e) {
+    const oldDiv = this.container.querySelector(`.${this.prefix}--fieldset--input`) !== null;
+    if (oldDiv) {
+      this.container.remove(oldDiv);
+    }
+    const newDiv = document.createElement('div');
+    newDiv.classList.add(`${this.prefix}--fieldset--input`);
+    const fileList = document.createElement('ul');
+    fileList.classList.add(`${this.prefix}--file-upload--list`);
+    let files = '';
+    [...e.target.files].map((file) => {
+      files += this.template(file.name);
+    });
+    fileList.innerHTML = files;
+    newDiv.appendChild(fileList);
+    this.container.appendChild(newDiv);
+
+    return this;
+  }
+
+  /**
+   * A template for outputting the list item markup
+   *
+   * @param {String} filename
+   * @return {String}
+   */
+  template(filename) {
+    return `<li class="ilo--file-upload--list-item">${filename}</li>`;
+  }
+}

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

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

package/src/patterns/components/form/form.twig

@@ -0,0 +1,94 @@
+{#
+  FORM COMPONENT
+  TODO: This could stand to be more DRY
+#}
+<form class="{{prefix}}--form" id="{{formid}}" action="{{action}}" data-loadcomponent="Form">
+  {% for item in items %}
+    {% if item.type == "formgroup" %}
+      <fieldset class="{{prefix}}--formgroup {{prefix}}--fieldset">
+        {% if item.field.legend %}
+        <legend class="{{prefix}}--formgroup--legend {{item.field.type}}">{{item.field.legend}}
+          {% if item.field['grouptooltip'] is defined %}
+            {% include '@components/tooltip/tooltip.twig' with {label: item.field.grouptooltip, icon: true, className: prefix ~ "--formgroup--legend--tooltip"} %}
+          {% endif %}
+        </legend>
+        {% endif %}
+      {% for i in item.field.items %}
+        {% if i.type == "radio" or (i.type == "checkbox" and i.field[0].grouped == true) %}
+          <fieldset class="{{prefix}}--choice-group {{prefix}}--fieldset">
+            {% if i.legend %}
+            <legend class="{{prefix}}--fieldset--legend">{{i.legend}}
+              {% if i.grouptooltip is defined %}
+                {% include '@components/tooltip/tooltip.twig' with {label: i.grouptooltip.label, icon: i.grouptooltip.icon, theme: i.grouptooltip.theme, className: prefix ~ "--fieldset--legend--tooltip"} %}
+              {% endif %}
+            </legend>
+            {% endif %}
+            {% if i.grouphelper and not i.grouperror %}
+              <span class="{{prefix}}--fieldset--helper">{{i.grouphelper}}</span>
+            {% endif %}
+            {% if i.grouperror %}
+              <span class="{{prefix}}--fieldset--error">{{i.grouperror}}</span>
+            {% endif %}
+            {% for f in i.field %}
+            <div class="{{prefix}}--fieldset--input--{{i.type}}">
+              <label class="{{prefix}}--fieldset--label" for="{% if f.id %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
+              {% if i.type == "radio" %}
+                {% include '@components/form/radio.twig' with f %}
+              {% else %}
+                {% include '@components/form/checkboxgroup.twig' with f %}
+              {% endif %}
+            </div>
+            {% endfor %}
+          </fieldset>
+        {% elseif  i.type == "date" %}
+          {% include '@components/form/datepicker.twig' with i.field %}
+        {% else %}
+              {% if i.type == "input" or (i.type == "checkbox" and not i.field[0].grouped) or i.type == "file" or i.type == "number" or i.type == "textarea" %}
+                {% include '@components/form/'~ i.type ~'.twig' with i.field %}
+              {% endif %}
+              {% if i.type == "dropdown" %}
+                {% include '@components/dropdown/dropdown.twig' with i.field %}
+              {% endif %}
+        {% endif %}
+      {% endfor %}
+      </fieldset>
+    {% endif %}
+    {% if item.type == "radio" or (item.type == "checkbox" and item.field[0].grouped == true) %}
+      <fieldset class="{{prefix}}--choice-group {{prefix}}--fieldset">
+        {% if item.legend %}
+        <legend class="{{prefix}}--fieldset--legend">{{item.legend}}
+          {% if item.grouptooltip is defined %}
+            {% include '@components/tooltip/tooltip.twig' with {label: item.grouptooltip.label, icon: item.grouptooltip.icon, theme: item.grouptooltip.theme, className: prefix ~ "--fieldset--legend--tooltip"} %}
+          {% endif %}
+        </legend>
+        {% endif %}
+        {% if item.grouphelper and not item.grouperror %}
+          <span class="{{prefix}}--fieldset--helper">{{item.grouphelper}}</span>
+        {% endif %}
+        {% if item.grouperror %}
+          <span class="{{prefix}}--fieldset--error">{{item.grouperror}}</span>
+        {% endif %}
+        {% for f in item.field %}
+        <div class="{{prefix}}--fieldset--input--{{item.type}}">
+          <label class="{{prefix}}--fieldset--label" for="{% if f.id %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
+          {% if item.type == "radio" %}
+            {% include '@components/form/radio.twig' with f %}
+          {% else %}
+            {% include '@components/form/checkboxgroup.twig' with f %}
+          {% endif %}
+        </div>
+        {% endfor %}
+      </fieldset>
+    {% elseif  item.type == "date" %}
+      {% include '@components/form/datepicker.twig' with item.field %}
+    {% else %}
+          {% if item.type == "input" or (item.type == "checkbox" and not item.field[0].grouped) or item.type == "file" or item.type == "number" or item.type == "textarea" %}
+            {% include '@components/form/'~ item.type ~'.twig' with item.field %}
+          {% endif %}
+          {% if item.type == "dropdown" %}
+            {% include '@components/dropdown/dropdown.twig' with item.field %}
+          {% endif %}
+    {% endif %}
+  {% endfor %}
+  {% include '@components/button/button.twig' with {type: "primary", kind: "submit", size: "large", label: submitlabel} %}
+</form>