@ilo-org/twig 0.15.0 → 0.16.0

package/.turbo/turbo-build:lib.log

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.15.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.16.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 
 theme prefix added
 
-> @ilo-org/twig@0.15.0 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.16.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ilo-org/twig
 
+## 0.16.0
+
+### Minor Changes
+
+- 138890e7a: implemented new icon component
+
+### Patch Changes
+
+- ac23bf484: Add clear button to search input field
+- fd26dbafc: Enable Button to use newly refactored Icon component
+- db2ecaf48: Correct the way the Table of Contents passes properties to the Open and Close buttons.
+- Updated dependencies [ac23bf484]
+- Updated dependencies [1b9c54f99]
+- Updated dependencies [138890e7a]
+  - @ilo-org/styles@0.14.0
+
 ## 0.15.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -27,7 +27,7 @@
     "@ilo-org/brand-assets": "0.4.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.13.3",
+    "@ilo-org/styles": "0.14.0",
     "@ilo-org/themes": "0.7.1",
     "@ilo-org/utils": "0.0.11"
   },

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

@@ -3,18 +3,21 @@
 #}
 {% if url %}
 	<a class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target is defined and target != 'false' %} target="{{target}}" rel="noopener noreferrer" {% endif %} {% if disabled is defined and disabled == 'true' %} disabled {% endif %}>
-
 		<span class="link__label">{{label}}</span>
-		{% if icon %}
-			{% include '@components/icon/icon.twig' with {icon: icon} %}
-		{% endif %}
+		{% 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 %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal %} aria-haspopup="dialog" {% endif %} {% if disabled is defined and disabled == 'true' %} disabled {% endif %} {% if name %} name="{{name}}" {% endif %}>
-
 		<span class="button__label">{{label}}</span>
-		{% if icon %}
-			{% include '@components/icon/icon.twig' with {icon: icon} %}
-		{% endif %}
+		{{ block("button_icon") }}
 	</button>
 {% endif %}

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

@@ -23,16 +23,18 @@ button:
       preview: ""
       required: false
     target:
-      type: string
+      type: object
       label: target
       description: Should the button open in a new tab? If so, include the name of the tab. Only evaluated if the url field is populated.
       preview: "true"
       required: false
     icon:
-      type: string
+      type: object
       label: Icon
-      description: optional icon to include in button
-      preview: false
+      description: Optional icon to include in button. See the `Icon` component for a full list of arguments
+      preview:
+        name: "add"
+        size: 24
       required: false
     className:
       type: string

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

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

package/src/patterns/components/icon/icon.js

@@ -0,0 +1,128 @@
+import * as Icons from "@ilo-org/icons";
+
+const SIZING = [16, 20, 24, 32];
+const DEFAULT_SIZE = 24;
+const SVG_NS = "http://www.w3.org/2000/svg";
+const PATH_NS = "http://www.w3.org/2000/path";
+
+/**
+ * The Icon module which handles rendering icons
+ *
+ * @class Icon
+ */
+export default class Icon {
+  /**
+   * Icon constructor which assigns the element passed into the constructor
+   *
+   * @param {SVGElement} element - REQUIRED - the module's container
+   */
+  constructor(element) {
+    /**
+     * Reference to the DOM element that is the root of the component
+     * @property {SVGElement}
+     */
+    this.element = element;
+
+    /** Initialize the icon logic*/
+    this.init();
+  }
+
+  /**
+   * Initializes the icon logic
+   */
+  init() {
+    const isValid = this.validate();
+    if (!isValid) {
+      return;
+    }
+
+    const svg = this.build();
+
+    this.prepare(svg);
+    this.element.outerHTML = svg.outerHTML;
+
+    return this;
+  }
+
+  /**
+   * Validate icon prop
+   *
+   * @returns {boolean}
+   */
+  validate() {
+    let { name, size } = this.element.dataset;
+    if (!SIZING.includes(+size)) {
+      console.warn(
+        `Icon size ${size} is not supported. Defaulting to ${DEFAULT_SIZE}px`
+      );
+      size = DEFAULT_SIZE;
+    }
+
+    if (!name) {
+      console.warn("Icon name is required");
+      return false;
+    }
+
+    const reference = this.getIconConfig(name, size);
+    if (!reference) {
+      console.warn(`Icon "${name}" not found`);
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Build a new SVG element
+   *
+   * @returns {SVGElement}
+   */
+  build() {
+    const { name, size, color } = this.element.dataset;
+    const config = this.getIconConfig(name, size);
+    const element = document.createElementNS(SVG_NS, "svg");
+
+    for (const [key, value] of Object.entries(config.attrs)) {
+      element.setAttribute(key, value);
+    }
+
+    if (color) {
+      element.setAttribute("fill", color);
+    }
+
+    for (const item of config.content) {
+      const child = document.createElementNS(PATH_NS, item.elem);
+      for (let [key, value] of Object.entries(item.attrs)) {
+        if (key === "fill" && color) {
+          value = color;
+        }
+        child.setAttribute(key, value);
+      }
+      element.appendChild(child);
+    }
+
+    return element;
+  }
+
+  /**
+   * Get the icon config
+   *
+   * @param {string} name
+   * @param {string} size
+   */
+  getIconConfig(name, size) {
+    const nameUpper = name.charAt(0).toUpperCase() + name.slice(1);
+
+    return Icons[`${nameUpper}${size}`];
+  }
+
+  /**
+   * Attach final attributes
+   *
+   * @param {SVGElement} icon - REQUIRED - the svg icon instance
+   */
+  prepare(icon) {
+    icon.setAttribute("class", this.element.getAttribute("class"));
+    icon.setAttribute("data-js-processed", true);
+  }
+}

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

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

package/src/patterns/components/icon/icon.twig

@@ -1,4 +1,4 @@
 {#
   ICON COMPONENT
 #}
-<img class="{{prefix}}--icon" src="{{'/images/'~icon~'.svg'}}" alt="{{icon}}" role="presentation">
+<svg class="{{prefix}}--icon" data-name="{{name}}" data-size="{{size}}" data-color="{{color}}" data-loadcomponent="Icon"></svg>

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

@@ -0,0 +1,29 @@
+icon:
+  namespace: Components/User Interface
+  use: "@components/icon/icon.twig"
+  label: Icon
+  description: A component for displaying an svg icon.
+  settings:
+    name:
+      type: string
+      label: Name
+      description: The name of the icon to display. <strong style="font-weight:bold">The name should match SVG file</strong>, see available icons in the <a target="_blank" href="https://github.com/international-labour-organization/designsystem/tree/develop/packages/icons/src/svg">@ilo-org/icons</a> package
+      preview: "arrowright"
+      required: true
+    size:
+      type: select
+      label: Size
+      description: The size of the icon in pixels
+      options:
+        16: 16
+        20: 20
+        24: 24
+        32: 32
+      preview: "24"
+      required: false
+    color:
+      type: string
+      label: Fill
+      description: The fill color of the icon in hex
+      preview: "#000000"
+      required: false

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

@@ -1,6 +1,6 @@
 /**
- * media
+ * Icon
  */
-// Module template
-import "./image.twig";
-import "./image.wingsuit.yml";
+import "./icon.twig";
+import "./icon.wingsuit.yml";
+import "./icon.behavior";

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

@@ -4,3 +4,4 @@
 // Module template
 import "./search.twig";
 import "./search.wingsuit.yml";
+import "./search.behavior";

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

@@ -0,0 +1,15 @@
+import Search from "./search";
+
+Drupal.behaviors.search = {
+  attach() {
+    Array.prototype.forEach.call(
+      document.querySelectorAll(`[data-loadcomponent="Search"]`),
+      (element) => {
+        if (!element.dataset.jsProcessed) {
+          new Search(element);
+          element.dataset.jsProcessed = true;
+        }
+      }
+    );
+  },
+};

package/src/patterns/components/search/search.js

@@ -0,0 +1,103 @@
+import { EVENTS, ARIA } from "@ilo-org/utils";
+
+/**
+ * The Search module which handles the clear button.
+ *
+ * @class Search
+ */
+export default class Search {
+  /**
+   * Search 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.multipleExpanded = false;
+
+    // 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} Search 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} Search A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The field that a user interacts with on a form
+     * @type {Object}
+     */
+    this.searchButton = this.element.querySelector(
+      ".ilo--searchfield--clear-button"
+    );
+    this.searchInputField = this.element.querySelector(".ilo--input");
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Search A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.onClick = this.onClick.bind(this);
+    this.KeyPressHandler = this.onKeyPress.bind(this);
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Search A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.searchButton.addEventListener(EVENTS.CLICK, this.onClick.bind(this));
+    this.searchInputField.addEventListener(
+      "keyup",
+      this.onKeyPress.bind(this, this.searchButton)
+    );
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the clear button
+   */
+  onClick(e) {
+    this.searchInputField.value = "";
+    this.searchButton.classList.remove("show");
+  }
+
+  onKeyPress(searchButton, e) {
+    const inputValue = e.target.value.trim();
+    if (inputValue !== "") {
+      this.searchButton.classList.add("show");
+    } else {
+      this.searchButton.classList.remove("show");
+    }
+  }
+}

package/src/patterns/components/search/search.twig

@@ -6,17 +6,26 @@
 {% set searchClass = [baseClass, class] %}
 {% set inputClass = prefix ~ "--input" %}
 {% set buttonClass = baseClass ~ "--button" %}
+{% set fieldSetClass = prefix ~ "--fieldset" %}
+{% set clearButtonClass = baseClass ~ "--clear-button" %}
 
 {% if error %}
 	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
 {% endif %}
 
-
 {% block formfield %}
-
-	<div class="{{ searchClass|join(" ") }}" {% if style %} style={{ style }} {% endif %}>
+	<div data-loadcomponent="Search" class="{{ searchClass|join(" ") }}" {% if style %} style={{ style }} {% endif %}>
+		<div class="{{fieldSetClass}}">
 		<input name="{{name}}" type="{{type}}" class="{{ inputClass }}{% if error %} error{% endif %}" {% if placeholder %} placeholder="{{placeholder}}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}"/>
+		<span class="{{clearButtonClass}}" >
+			{% include "@components/icon/icon.twig" with {
+  				"name": "Close",
+  				"size": "24",
+  				"color": "#230050"
+			} %}
+		</span>
+		</div>
 		<input class="{{ buttonClass }}" type="submit"/>
-	</div>
 
+	</div>
 {% endblock %}

package/src/patterns/components/tableofcontents/tableofcontents.twig

@@ -1,23 +1,47 @@
-{#
-  TABLE OF CONTENTS COMPONENT
-#}
+{# tableofcontents.twig #}
+
+{% set openbutton_size = openbutton.size|default("medium") %}
+{% set openbutton_type = openbutton.type|default("secondary") %}
+{% set openbutton_label = openbutton.label|default("Open") %}
+{% set openbutton_label = openbutton.label|default("Open") %}
+{% set closebutton_label = closebutton.label|default("Close") %}
+
 {% if items %}
-  <div class="{{prefix}}--table-of-contents--wrapper" data-loadcomponent="TableOfContents" data-prefix="{{prefix}}">
-    <div class="{{prefix}}--table-of-contents--trigger">
-      {% include '@components/button/button.twig' with openbutton %}
-    </div>
-    <div class="{{prefix}}--table-of-contents--modal">
-      <h3 class="{{prefix}}--table-of-contents--headline">{{headline}}</h3>
-      {% include '@components/button/button.twig' with closebutton %}
-    </div>
-    <nav class="{{prefix}}--table-of-contents">
-      <ul class="{{prefix}}--table-of-contents--list">
-        {% for item in items %}
-          <li class="{{prefix}}--table-of-contents--list--item">
-            <a class="{{prefix}}--table-of-contents--link" href="{{item.href}}">{{item.label}}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-  </div>
+	<div class="{{prefix}}--table-of-contents--wrapper" data-loadcomponent="TableOfContents" data-prefix="{{prefix}}">
+		<div class="{{prefix}}--table-of-contents--trigger">
+			{% include '@components/button/button.twig' with {
+				prefix: prefix,
+				size: openbutton_size,
+				type: openbutton_type,
+				label: openbutton_label,
+				opensmodal: true,
+        className: "toc--modal--open"
+			} only %}
+		</div>
+		<div class="{{prefix}}--table-of-contents--modal">
+			<h3 class="{{prefix}}--table-of-contents--headline">{{headline}}</h3>
+			{% include '@components/button/button.twig' with {
+				prefix: prefix,
+        size: "large",
+        type: "tertiary",
+				label: closebutton_label,
+        icon: {
+          name: "close",
+          size: 24,
+        },
+        iconPos: "center",
+        icononly: true,
+        className: "toc--modal--close"
+      } only %}
+		</div>
+		<nav class="{{prefix}}--table-of-contents">
+			<ul class="{{prefix}}--table-of-contents--list">
+				{% for item in items %}
+					<li class="{{prefix}}--table-of-contents--list--item">
+						<a class="{{prefix}}--table-of-contents--link" href="{{item.href}}">{{item.label}}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</nav>
+	</div>
 {% endif %}

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

@@ -7,26 +7,18 @@ tableofcontents:
     openbutton:
       type: object
       label: Open Button
-      description: The label and settings for the button that will show the table of contents at small breakpoints
+      description: Settings for the button that will show the table of contents at small breakpoints. Only the `size`, `type` and `label` properties will be passed to the underlying button.
       preview:
         size: "medium"
         type: "secondary"
-        label: "Open Button"
-        className: "toc--modal--open"
-        opensmodal: true
+        label: "Open"
       required: true
     closebutton:
       type: object
       label: Close Button
-      description: Label and settings for the "close" button
+      description: Settings for the button that closes the table of contents at small breakpoints. Only the `label` property will be passed to the underlying button.
       preview:
-        size: "large"
-        type: "tertiary"
-        label: "Close Button"
-        icon: close
-        iconPos: center
-        icononly: true
-        className: "toc--modal--close"
+        label: "Close"
     headline:
       type: string
       label: Headline