@ilo-org/twig 1.1.6 → 1.2.0

package/src/patterns/components/navigation/navigation.twig

@@ -1,171 +0,0 @@
-{#
-  NAVIGATION COMPONENT
-#}
-
-
-<header class="{{prefix}}--header" data-loadcomponent="Navigation" data-prefix="{{prefix}}">
-	<div class="{{prefix}}--header--utility-bar">
-		{% if languagecontextmenu.links is not empty %}
-			<div class="{{prefix}}--language-switcher">
-				<div class="{{prefix}}--language-switcher--wrap">
-					<button tabindex="2" class="{{prefix}}--language-switcher--button" type="button">
-						{{languagelabel}}
-					</button>
-					{% include '@components/contextmenu/contextmenu.twig' with {
-            links: languagecontextmenu.links,
-            prefix: prefix
-          }
-        %}
-				</div>
-				<!-- /.{{prefix}}--language-switcher--wrap -->
-			</div>
-			<!-- /.{{prefix}}--language-switcher -->
-		{% endif %}
-	</div>
-	<!-- /.{{prefix}}--header--utility-bar -->
-	<div class="{{prefix}}--header--logo-bar">
-		<div class="{{prefix}}--header--inner {{ prefix }}--container">
-			<a tabindex="1" href="{{siteurl}}" class="{{prefix}}--header--logo-link">
-				<img class="{{prefix}}--header--logo" src="{{logo.image}}" alt="{{logo.alt}}">
-			</a>
-			<p class="{{prefix}}--header--logo-tagline">
-				{{tagline.tag}}
-				<span class="{{prefix}}--header--logo-tagline--small">{{tagline.small}}</span>
-			</p>
-			<button class="{{prefix}}--header--menu">{{menulabel}}</button>
-		</div>
-		<!-- /.{{prefix}}--header--inner -->
-	</div>
-
-	<!-- /.{{prefix}}--header--logo-bar -->
-	<div class="{{prefix}}--header--navigation">
-		<div
-			class="{{prefix}}--header--inner {{ prefix }}--container">
-			<!-- /.{{prefix}}--mobile--nav -->
-			<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 -->
-				<div class="{{prefix}}--mobile--nav--search">
-					{% block mobileSearch %}
-						{% include '@components/form/form.twig' with {
-            attributes: {
-              action: searchfield.action,
-              "aria-label": label,
-              "data-search": "true",
-            },
-            fieldsets: [{
-              fields: [{
-                type: "search",
-                placeholder: searchfield.input.placeholder,
-                name: searchfield.input.name,
-                id: searchfield.input.id,
-              }]
-            }]
-          }
-          %}
-					{% endblock %}
-				</div>
-				<!-- /.{{prefix}}--mobile--search -->
-				{% 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>
-				{% endif %}
-				<!-- /.{{prefix}}--mobile--nav--language--switcher -->
-				<div class="{{prefix}}--mobile--nav--language--select">
-					<div class="{{prefix}}--header--inner {{ prefix }}--container">
-						<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>
-			</div>
-			<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 %}
-					{% if subnav %}
-						<li class="{{prefix}}--nav--items">
-							<button class="{{prefix}}--nav--trigger">{{subnav.buttonlabel}}</button>
-						</li>
-					{% endif %}
-				</ul>
-			</nav>
-			<div class="{{prefix}}--search">
-				<button class="{{prefix}}--search--button" type="button">{{searchlabel}}</button>
-			</div>
-			<!-- /.{{prefix}}--search -->
-		</div>
-		<!-- /.{{prefix}}--header--inner -->
-		{% if subnav %}
-			<nav class="{{prefix}}--subnav" aria-labelledby="secondary-navigation">
-				<div class="{{prefix}}--subnav--inner {{ prefix }}--container">
-					<div class="{{prefix}}--mobile--subnav">
-						<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">{{subnav.buttonlabel}}</h6>
-						</div>
-						<!-- /{{prefix}}--mobile--subnav--menu -->
-					</div>
-					<!-- /.{{prefix}}--mobile--subnav -->
-					<h2 class="{{prefix}}--nav--label" id="secondary-navigation">{{subnav.navlabel}}</h2>
-					<ul class="{{prefix}}--subnav--set">
-						{% for item in subnav.items %}
-							<li class="{{prefix}}--subnav--items">
-								<a href="{{item.link}}" class="{{prefix}}--subnav--link">{{item.label}}</a>
-							</li>
-						{% endfor %}
-					</ul>
-				</div>
-				<!-- /.{{prefix}}--subnav--inner -->
-			</nav>
-		{% endif %}
-
-		<div class="{{prefix}}--search-box">
-			<div class="{{prefix}}--header--inner {{ prefix }}--container">
-				{% block desktopSearch %}
-					{% include '@components/form/form.twig' with {
-            attributes: {
-              action: searchfield.action,
-              "aria-label": label,
-              "data-search": "true",
-            },
-            fieldsets: [{
-              fields: [{
-                type: "search",
-                placeholder: searchfield.input.placeholder,
-                name: searchfield.input.name,
-                id: searchfield.input.id,
-              }]
-            }]
-          }
-          %}
-				{% endblock %}
-			</div>
-		</div>
-		<!-- /.{{prefix}}--search-box -->
-	</div>
-	<!-- /.{{prefix}}--header--navigation -->
-</header>

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

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

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

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

package/src/patterns/components/notification/notification.js

@@ -1,97 +0,0 @@
-import { EVENTS } from "@ilo-org/utils";
-
-/**
- * The Notification module which handles rendering field labels inline on a form.
- *
- * @class Notification
- */
-export default class Notification {
-  /**
-   * Notification 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.parent = this.element.parentElement;
-
-    // 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} Notification 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} Notification A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The button for toggling Read More state
-     * @type {Object}
-     */
-    this.CloseButton = this.element.querySelector(
-      `.${this.prefix}--notification--close`
-    );
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Notification A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.onClick = this.onClick.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Notification A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    this.CloseButton.addEventListener(EVENTS.CLICK, () => this.onClick());
-
-    return this;
-  }
-
-  /**
-   * Onclick interaction with the Notification button
-   *
-   * @return {Object} Notification A reference to the instance of the class
-   * @chainable
-   */
-  onClick() {
-    this.parent.removeChild(this.element);
-
-    return this;
-  }
-}

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

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

package/src/patterns/components/notification/notification.twig

@@ -1,18 +0,0 @@
-{#
-  NOTIFICATION COMPONENT
-#}
-<div class="{{prefix}}--notification {{prefix}}--notification--{{placement}} icon icon--{{type}}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Notification" data-prefix="{{prefix}}">
-  <div class="{{prefix}}--notification--content">
-    <h2 class="{{prefix}}--notification--headline">{{headline}}</h2>
-    <p class="{{prefix}}--notification--copy">{{copy}}</p>
-    {% if timestamp %}
-      <time class="{{prefix}}--notification--date" datetime="{{timestamp.unix}}">{{timestamp.human}}</time>
-    {% endif %}
-    {% if cta %}
-      <a class="{{prefix}}--notification--cta {{prefix}}--button {{prefix}}--button--small {{prefix}}--button--secondary  --light" href="{{cta.url}}">
-        <span class="link__label">{{cta.label}}</span>
-      </a>
-    {% endif %}
-  </div>
-  <button class="{{prefix}}--notification--close" type="button"><span>{{closelabel}}</span></button>
-</div>

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

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

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

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

package/src/patterns/components/numberpicker/numberpicker.twig

@@ -1,16 +0,0 @@
-{# numberpicker.twig #}
-
-{% extends "@components/form/formcontrol.twig" %}
-
-{% set inputClass = prefix ~ '--input' %}
-{% set baseClass = prefix ~ '--numberpicker' %}
-{% set hasError = not disabled and error %}
-{% set numberPickerClasses = [inputClass, baseClass] %}
-
-{% if hasError %}
-	{% set numberPickerClasses = numberPickerClasses|merge(['error']) %}
-{% endif %}
-
-{% block formfield %}
-	<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="number" class="{{ numberPickerClasses|join(' ') }}" pattern="[0-9]*" inputmode="numeric" aria-describedby="{{ ariaDescribedBy }}" {% if max is defined %} max="{{ max }}" {% endif %} {% if min is defined %} min="{{ min }}" {% endif %} {% if step is defined %} step="{{ step }}" {% endif %}/>
-{% endblock %}

package/src/patterns/components/pagination/Pagination.stories.jsx

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

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

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

package/src/patterns/components/pagination/pagination.twig

@@ -1,49 +0,0 @@
-{#
-  PAGINATION COMPONENT
-#}
-<div class="{{prefix}}--pagination icon icon--{{type}}">
-  <div class="{{prefix}}--pagination--previous-set">
-    <a
-      class="{{prefix}}--pagination--first-page {{prefix}}--pagination--link {% if currentPage == 0 %}{{prefix}}--pagination--disable{% endif %}"
-      href="{{ firstPageUrl }}"
-      title="{{ firstPageTitle }}"
-    >
-      {{ firstPageTitle }}
-    </a>
-
-    <a
-      class="{{prefix}}--pagination--prev-page {{prefix}}--pagination--link {% if currentPage == 0 %}{{prefix}}--pagination--disable{% endif %}"
-      href="{{ prevPageUrl }}"
-      title="{{ prevPageTitle }}"
-    >
-      {{ prevPageTitle }}
-    </a>
-  </div>
-
-  <p class="{{prefix}}--pagination--page">
-    {% set currentPageZeroIndex = currentPage * 1 %}
-    {% set currentPageIndex = currentPageZeroIndex + 1 %}
-
-    <span>{{currentPageIndex}}</span> 
-    <span>{{pageCountPreposition}}</span>
-    <span>{{totalPages}}</span>
-  </p>
-
-  <div class="{{prefix}}--next-set">
-    <a
-      class="{{prefix}}--pagination--next-page {{prefix}}--pagination--link {% if currentPageIndex == totalPages %}{{prefix}}--pagination--disable{% endif %}"
-      href="{{ nextPageUrl }}"
-      title="{{ nextPageTitle }}"
-    >
-      {{ nextPageTitle }}
-    </a>
-
-    <a
-      class="{{prefix}}--pagination--last-page {{prefix}}--pagination--link {% if currentPageIndex == totalPages %}{{prefix}}--pagination--disable{% endif %}"
-      href="{{ lastPageUrl }}"
-      title="{{ lastPageTitle }}"
-    >
-      {{ lastPageTitle }}
-    </a>
-  </div>
-</div>

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

@@ -1,6 +0,0 @@
-/**
- * Link
- */
-// Module template
-import "./picture.twig";
-import "./link.wingsuit.yml";

package/src/patterns/components/picture/picture.twig

@@ -1,21 +0,0 @@
-{#
-  PICTURE COMPONENT
-#}
-{% if image.url is iterable %}
-  <picture>
-    {% for img in image.url|reverse %}
-      {% if loop.length == 1 or loop.last == false %}
-        {% if img.breakpoint matches '/^\\d+$/' %}
-          <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
-        {% else %}
-          <source srcset="{{img.src}}" media="{{img.breakpoint}}">
-        {% endif %}
-      {% endif %}
-    {% endfor %}
-    <img class="{{prefix}}--{{class}}--picture" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
-  </picture>
-  {% else %}
-  <picture>
-    <img class="{{prefix}}--{{class}}--picture" src="{{image.url}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
-  </picture>
-{% endif %}

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

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

package/src/patterns/components/polyfill/polyfill.twig

@@ -1,10 +0,0 @@
-{#
-  POLYFILL COMPONENT
-
-  This component is specifically to make this polyfill work correctly in Wingsuit. To use this in the context of Drupal, Wordpress, etc, consider using the approach documented at https://github.com/GoogleChromeLabs/container-query-polyfill
-#}
-<script>
-  if (!("container" in document.documentElement.style)) {
-    import("https://unpkg.com/container-query-polyfill@^0.2.0");
-  }
-</script>

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

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

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

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

package/src/patterns/components/profile/profile.twig

@@ -1,26 +0,0 @@
-{# profile.twig #}
-
-{% set defaultAlt = "Photo of " ~ name %}
-<figure class="{{prefix}}--profile {{prefix}}--profile__theme__{{theme|default("light")}} {{prefix}}--profile__size__{{size|default("large")}}">
-	{% if avatar %}
-		<img class="{{prefix}}--profile--avatar" src="{{avatar}}" alt="{{alt|default(defaultAlt)}}">
-	{% endif %}
-	<figcaption>
-		<div class="{{prefix}}--profile--figcaption--content">
-			<div class="{{prefix}}--profile--name">{{name}}</div>
-			{% if role %}
-				<div class="{{prefix}}--profile--role">{{role}}</div>
-			{% endif %}
-		</div>
-	</figcaption>
-	{% if description %}
-		<p class="{{prefix}}--profile--description">{{description}}</p>
-	{% endif %}
-	{% if link and link.url and link.label %}
-		<div class="{{prefix}}--profile--link">
-			<a href={{link.url}} target="__blank" rel="noopener noreferrer">
-				<span class="{{prefix}}--profile--link--label">{{link.label}}</span>
-			</a>
-		</div>
-	{% endif %}
-</figure>

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

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

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

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

package/src/patterns/components/radio/radio.twig

@@ -1,23 +0,0 @@
-{# checkbox.twig #}
-
-{% extends "@components/form/formcontrol.twig" %}
-
-{% set baseClass = (prefix is defined ? prefix ~ "--radio" : "--radio") %}
-{% set controlClass = baseClass ~ "--control" %}
-
-{% set errorClass = baseClass ~ "__error" %}
-
-{% set radioClasses = [baseClass, class] %}
-
-{% if error is defined and error %}
-	{% set radioClasses = radioClasses|merge([errorClass]) %}
-{% endif %}
-
-
-{% block formfield %}
-	<div class="{{ radioClasses|join(" ") }}">
-		<input id="{{ id is defined ? id : name }}" name="{{ name }}" type="radio" {% if defaultChecked is defined and defaultChecked %} defaultchecked {% endif %} {% if checked is defined and checked %} checked {% endif %} {% if ariaDescribedBy is defined %} aria-describedby="{{ ariaDescribedBy }}" {% endif %} {% if checked is defined and checked %} checked {% endif %} value="{{ value }}" {% if disabled is defined and disabled %} disabled {% endif %} {% if required is defined and required %} required {% endif %}/>
-		<span class="{{ controlClass }}"></span>
-	</div>
-
-{% endblock %}

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

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

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

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