@ilo-org/twig 1.1.5 → 1.2.0

package/src/patterns/components/button/button.twig

@@ -1,23 +0,0 @@
-{#
-  BUTTON COMPONENT
-#}
-{% if url %}
-	<a class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly|boolval %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target %} target="{{target}}" rel="noopener noreferrer"{% endif %}{{ disabled|boolval ? ' disabled' }}>
-		<span class="link__label">{{label}}</span>
-		{% block button_icon %}
-			{% if icon %}
-				{% include '@components/icon/icon.twig' with {
-					prefix: prefix,
-					name: icon.name,
-					size: icon.size,
-					color: icon.color
-				} only %}
-			{% endif %}
-		{% endblock %}
-	</a>
-{% else %}
-	<button class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly|boolval %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal|boolval %} aria-haspopup="dialog" {% endif %}{{ disabled|boolval ? ' disabled' }}{% if name %} name="{{name}}" {% endif %}>
-		<span class="button__label">{{label}}</span>
-		{{ block("button_icon") }}
-	</button>
-{% endif %}

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

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

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

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

package/src/patterns/components/callout/callout.js

@@ -1,149 +0,0 @@
-import { EVENTS } from "@ilo-org/utils";
-
-/**
- * The Callout module which handles rendering field labels inline on a form.
- *
- * @class Callout
- */
-export default class Callout {
-  /**
-   * Callout 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.toggleLabel = "";
-
-    // 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} Callout A reference to the instance of the class
-   * @chainable
-   */
-  init() {
-    this.cacheDomReferences().setupHandlers().enable();
-    if (!this.toggleOpen && this.toggleCollapsible) {
-      this.calcHeight();
-    }
-
-    return this;
-  }
-
-  /**
-   * Find all necessary DOM elements used in the view and cache them
-   *
-   * @return {Object} Callout A reference to the instance of the class
-   * @chainable
-   */
-  cacheDomReferences() {
-    /**
-     * The field that a user interacts with on a form
-     * @type {Object}
-     */
-    this.toggle = this.element.querySelector(".ilo--callout--toggle");
-    this.toggleOpen = this.element.classList.value.includes("callout--open");
-    this.toggleCollapsible =
-      this.element.classList.value.includes("callout--collapse");
-    if (this.toggle) {
-      this.toggleLabel = this.toggle.querySelector(
-        ".ilo--callout--button-text"
-      );
-      this.toggleLabelOpen = this.toggle.getAttribute("data-open");
-      this.toggleLabelClosed = this.toggle.getAttribute("data-closed");
-    }
-    this.button = this.element.querySelector(".ilo--button");
-
-    return this;
-  }
-
-  /**
-   * Bind event handlers with the proper context of `this`.
-   *
-   * @return {Object} Callout A reference to the current instance of the class
-   * @chainable
-   */
-  setupHandlers() {
-    this.onToggle = this.handleToggle.bind(this);
-    this.onClick = this.handleClick.bind(this);
-
-    return this;
-  }
-
-  /**
-   * Creates event listeners to enable interaction with view
-   *
-   * @return {Object} Callout A reference to the instance of the class
-   * @chainable
-   */
-  enable() {
-    if (this.toggle) {
-      this.toggle.addEventListener(EVENTS.CLICK, this.onToggle);
-    }
-
-    if (this.button) {
-      this.button.addEventListener(EVENTS.CLICK, this.onClick);
-    }
-
-    return this;
-  }
-
-  /**
-   * calcHeight
-   *
-   * @return {Object} Callout A reference to the instance of the class
-   * @chainable
-   */
-  calcHeight() {
-    this.header = this.element.querySelector('[class*="--header"]');
-    this.height = this.header.offsetHeight;
-    this.element.style.maxHeight = `${this.height + 25}px`;
-
-    return this;
-  }
-
-  /**
-   * Onclick interaction
-   *
-   * @return {Object} Callout A reference to the instance of the class
-   * @chainable
-   */
-  handleClick() {
-    // callback of sorts
-    return this;
-  }
-
-  /**
-   * handleToggle
-   *
-   * toggle the collapse state of the callout
-   *
-   * @param {Object} e - Event
-   * @return {Object} Callout A reference to the instance of the class
-   * @chainable
-   */
-  handleToggle(e) {
-    e.preventDefault();
-    this.toggleOpen = !this.toggleOpen;
-
-    const label = this.toggleOpen
-      ? this.toggleLabelOpen
-      : this.toggleLabelClosed;
-
-    this.element.classList.toggle("ilo--callout--open");
-    this.toggleLabel.innerText = label;
-
-    return this;
-  }
-}

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

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

package/src/patterns/components/callout/callout.twig

@@ -1,41 +0,0 @@
-{#
-  CALLOUT COMPONENT
-#}
-<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isCollapsible|boolval and isOpen|boolval %} {{prefix}}--callout--open {% endif %} {% if isCollapsible|boolval %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout">
-	<div class="{{prefix}}--callout--sidebar">
-		<span class="{{prefix}}--callout--icon icon icon--{{alert}}"></span>
-	</div>
-	<div class="{{prefix}}--callout--content">
-		<div class="{{prefix}}--callout--header">
-			<h5 class="{{prefix}}--callout--title">{{ title }}</h5>
-			{% if isCollapsible|boolval %}
-				<button class="{{prefix}}--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
-					<span class="{{prefix}}--callout--button-text">
-						{% if isOpen %}
-							{{ toggleOpenLabel }}
-						{% else %}
-							{{ toggleClosedLabel }}
-						{% endif %}
-					</span>
-					<span class="{{prefix}}--callout--toggle--icon" role="presentation"></span>
-				</button>
-			{% endif %}
-		</div>
-		{{ content }}
-		{% if button %}
-			<div class="{{prefix}}--callout--footer">
-				{% include '@components/button/button.twig' with {
-          label: button.label,
-          url: button.url,
-          target: button.target,
-          icon: button.icon,
-          className: button.className,
-          icon: button.icon,
-          iconPosition: button.iconPosition,
-          size: "small",
-          type: "secondary",
-        } %}
-			</div>
-		{% endif %}
-	</div>
-</div>

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

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

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

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

package/src/patterns/components/card/card.twig

@@ -1,24 +0,0 @@
-{#
-  CARD COMPONENT
-#}
-{% if type == "" %}
-  {% set type = variant %}
-{% endif %}
-
-{% if type == "data" %}
-  {% include "@components/card_data/card_data.twig" %}
-{% elseif type == "detail" %}
-  {% include "@components/card_detail/card_detail.twig" %}
-{% elseif type == "factlist" %}
-  {% include "@components/card_factlist/card_factlist.twig" %}
-{% elseif type == "feature" %}
-  {% include "@components/card_feature/card_feature.twig" %}
-{% elseif type == "multilink" %}
-  {% include "@components/card_multilink/card_multilink.twig" %}
-{% elseif type == "promo" %}
-  {% include "@components/card_promo/card_promo.twig" %}
-{% elseif type == "stat" %}
-  {% include "@components/card_stat/card_stat.twig" %}
-{% elseif type == "text" %}
-  {% include "@components/card_text/card_text.twig" %}
-{% endif %}

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

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

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

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

package/src/patterns/components/card_data/card_data.twig

@@ -1,101 +0,0 @@
-{# card_data.twig #}
-
-{% if not columns %}
-	{% set columns = "one" %}
-{% endif %}
-
-{# Different layout options to apply depending on if the card has an image
- or if it has links. If it has two columns with image, then image goes on one side
- and content goes on the other. If it has two columns witout image but links, then
- links go on one side and the rest of the content goes on the other. Otherwise, flow
- all content normally. #}
-{% if image %}
-	{% set content = "with-image" %}
-{% elseif not image and dataset.links %}
-	{% set content = "no-image-with-links" %}
-{% else %}
-	{% set content = "default" %}
-{% endif %}
-
-
-<div class="{{prefix}}--card {{prefix}}--card__type__data {{prefix}}--card__size__{{size}} {{prefix}}--card__type__data__columns__{{columns}}">
-	<div class="{{prefix}}--card--wrap">
-		{% if not image and eyebrow %}
-			<div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
-		{% endif %}
-		<div class="{{prefix}}--card--content {{prefix}}--card--content__{{ content }}">
-			{% if image %}
-				<div class="{{prefix}}--card--area--image">
-					{% if eyebrow %}
-						<div class="{{prefix}}--card--eyebrow">{{ eyebrow }}</div>
-					{% endif %}
-					<div class="{{prefix}}--card--image">
-						{% include "@components/picture/picture.twig" with { image: image, class: "card" } %}
-					</div>
-				</div>
-			{% endif %}
-			{% if dataset.content %}
-				{% for item in dataset.content.items %}
-					<div class="{{prefix}}--card--area--content">
-						{% block content_item %}
-							<p class="{{prefix}}--card__type__data--content-label">{{ item.label }}</p>
-							<p class="{{prefix}}--card__type__data--content-copy">{{ item.copy }}</p>
-						{% endblock %}
-					</div>
-				{% endfor %}
-			{% endif %}
-			{% if dataset.files %}
-				<div class="{{prefix}}--card--area--files">
-					{% block area_files %}
-						<div class="{{prefix}}--card__type__data--content-files">
-							<p class="{{prefix}}--card__type__data--content-label">{{ dataset.files.headline }}</p>
-							{% for item in dataset.files.items %}
-								{% include "@components/button/button.twig" with {
-                  type: "primary",
-                  size: "small",
-                  url: item.url,
-                  label: item.label,
-                  prefix: prefix
-                } only %}
-							{% endfor %}
-						</div>
-					{% endblock %}
-				</div>
-			{% endif %}
-			{% if dataset.cta %}
-				<div class="{{prefix}}--card--area--cta">
-					{% block area_cta %}
-						<div class="{{prefix}}--card__type__data--content-cta">
-							<p class="{{prefix}}--card__type__data--content-label">{{ dataset.cta.headline }}</p>
-							{% for item in dataset.cta.items %}
-								{% include "@components/button/button.twig" with {
-                    type: "secondary",
-                    size: "small",
-                    url: item.url,
-                    label: item.label,
-                    prefix: prefix
-                  } only %}
-							{% endfor %}
-						</div>
-					{% endblock %}
-				</div>
-			{% endif %}
-			{% if dataset.links %}
-				<div class="{{prefix}}--card--area--links">
-					{% block area_links %}
-						<div class="{{prefix}}--card__type__data--content-links">
-							<p class="{{prefix}}--card__type__data--content-label">{{ dataset.links.headline }}</p>
-							{% for item in dataset.links.items %}
-								{% include "@components/link/link.twig" with {
-                  url: item.url,
-                  label: item.label,
-                  prefix: prefix
-                } only %}
-							{% endfor %}
-						</div>
-					{% endblock %}
-				</div>
-			{% endif %}
-		</div>
-	</div>
-</div>

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

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

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

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

package/src/patterns/components/card_detail/card_detail.twig

@@ -1,37 +0,0 @@
-{#
-  DETAIL CARD COMPONENT
-#}
-
-<div class="{{prefix}}--card {{prefix}}--card__type__detail {{prefix}}--card__action {{prefix}}--card__size__{{size}} {% if isvideo|boolval %} {{prefix}}--card__isvideo {% endif %}">
-	<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
-		<span class="{{prefix}}--card--link--text">{{title}}</span>
-	</a>
-	<div class="{{prefix}}--card--wrap">
-		{% if image %}
-			<div class="{{prefix}}--card--image--wrapper">
-				{% include "@components/picture/picture.twig" with {
-          image: image,
-          class: "card"
-        }
-      %}
-			</div>
-		{% endif %}
-		<div class="{{prefix}}--card--content">
-			{% if eyebrow %}
-				<p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
-			{% endif %}
-			{% if title %}
-				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
-			{% endif %}
-			{% if intro %}
-				<p class="{{prefix}}--card--intro">{{intro}}</p>
-			{% endif %}
-			{% if date %}
-				<time class="{{prefix}}--card--date" datetime="{{date.unix}}">{{date.human}}</time>
-			{% endif %}
-			{% if dateExtra %}
-				<p class="{{prefix}}--card--date-extra">{{dateExtra}}</p>
-			{% endif %}
-		</div>
-	</div>
-</div>

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

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

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

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

package/src/patterns/components/card_factlist/card_factlist.twig

@@ -1,21 +0,0 @@
-{#
-  FACT LIST CARD COMPONENT
-#}
-<div class="{{prefix}}--card {{prefix}}--card__type__factlist {{prefix}}--card__size__{{size}} {{prefix}}--card__theme__{{theme}}">
-	<div class="{{prefix}}--card--wrap">
-		<div class="{{prefix}}--card--content">
-			{% if title %}
-				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
-			{% endif %}
-			{% if list %}
-				{% include "@components/list/list.twig" with {
-          title: list.title,
-          ordered: list.ordered,
-          alignment: list.alignment,
-          items: list.items,
-          prefix: prefix,
-        } only %}
-			{% endif %}
-		</div>
-	</div>
-</div>

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

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

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

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

package/src/patterns/components/card_feature/card_feature.twig

@@ -1,39 +0,0 @@
-{#
-  FEATURE CARD COMPONENT
-#}
-
-<div class="{{prefix}}--card {{prefix}}--card__type__feature {{prefix}}--card__action {{prefix}}--card__theme__{{theme}} {{prefix}}--card__size__{{ size }} {% if isvideo|boolval %} {{prefix}}--card__isvideo {% endif %} {% if cta %} {{prefix}}--card__linklist {% endif %}">
-	<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
-		<span class="{{prefix}}--card--link--text">{{title}}</span>
-	</a>
-	<div class="{{prefix}}--card--wrap">
-		{% if image %}
-			<div class="{{prefix}}--card--image--wrapper">
-				{% include "@components/picture/picture.twig" with {
-          image: image,
-          class: "card"
-        }
-      %}
-			</div>
-		{% endif %}
-		<div class="{{prefix}}--card--content">
-			{% if eyebrow %}
-				<p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
-			{% endif %}
-			{% if title %}
-				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
-			{% endif %}
-			{% if date %}
-				<time class="{{prefix}}--card--date" datetime="{{date.unix}}">{{date.human}}</time>
-			{% endif %}
-			{% if cta %}
-				{% include "@components/linklist/linklist.twig" with {
-          linkgroup: [{
-            links: [cta]
-          }],
-          prefix: prefix
-        } only %}
-			{% endif %}
-		</div>
-	</div>
-</div>

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

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

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

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

package/src/patterns/components/card_multilink/card_multilink.twig

@@ -1,45 +0,0 @@
-{# card_multilink.twig #}
-
-<div class="{{prefix}}--card {{prefix}}--card__type__multilink {% if link|length > 0 %} {{prefix}}--card__action {% endif %} {{prefix}}--card__size__{{size}} {% if isvideo|boolval %} {{prefix}}--card__isvideo {% endif %} {% if linklist %} {{prefix}}--card__linklist {% endif %} {% if size == "wide" or size == "fluid" %} {{prefix}}--card__align__{{alignment}} {% endif %}">
-	{% if link|length > 0 %}
-		<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
-			<span class="{{prefix}}--card--link--text">{{title}}</span>
-		</a>
-	{% endif %}
-	<div class="{{prefix}}--card--wrap">
-		<div class="{{prefix}}--card--image--wrapper">
-			{% include "@components/picture/picture.twig" with {
-        image: image,
-        class: "card"
-      }
-      %}
-		</div>
-		<div class="{{prefix}}--card--content">
-			{% if eyebrow %}
-				<p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
-			{% endif %}
-			{% if title %}
-				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
-			{% endif %}
-			{% if image %}
-				<div class="{{prefix}}--card--image--wrapper">
-					{% include "@components/picture/picture.twig" with {
-            image: image,
-            class: "card"
-          }
-          %}
-				</div>
-			{% endif %}
-			{% if intro %}
-				<p class="{{prefix}}--card--intro">{{intro}}</p>
-			{% endif %}
-			{% if linklist %}
-				{% include "@components/linklist/linklist.twig" with {
-          headline: linklist.headline,
-          linkgroup: linklist.linkgroup,
-          prefix: prefix
-        } only %}
-			{% endif %}
-		</div>
-	</div>
-</div>

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

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

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

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