@ilo-org/twig 0.12.2 → 0.13.0-next.0

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

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.12.2 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.13.0-next.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.12.2 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.13.0-next.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @ilo-org/twig
 
+## 0.13.0-next.0
+
+### Minor Changes
+
+- 39e6bab1f: Implemented functionality for external links to open in new browser tab
+
+### Patch Changes
+
+- cf4d43446: added hover effect for anchor item inside indented linked list
+- 3be0a12ac: reduced padding for accordion inner panel
+- Updated dependencies [ed548bcfc]
+- Updated dependencies [bf1ec0843]
+- Updated dependencies [ccdb35c99]
+- Updated dependencies [cf4d43446]
+- Updated dependencies [1794fc434]
+- Updated dependencies [3be0a12ac]
+- Updated dependencies [1e58f9c7d]
+  - @ilo-org/styles@0.11.3-next.0
+  - @ilo-org/themes@0.7.0-next.0
+
 ## 0.12.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.12.2",
+  "version": "0.13.0-next.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -25,8 +25,8 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.11.2",
-    "@ilo-org/themes": "0.6.1",
+    "@ilo-org/styles": "0.11.3-next.0",
+    "@ilo-org/themes": "0.7.0-next.0",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

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

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

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

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

package/src/patterns/components/linklist/linklist.js

@@ -0,0 +1,55 @@
+export default class LinkList {
+  /**
+   * LinkList 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;
+
+    /** element prefix */
+    this.prefix = `${this.element.dataset.prefix}--link-list`;
+
+    this.init();
+  }
+
+  /**
+   * Initializes the view by calling the functions to
+   * create DOM references, setup event handlers and
+   * then create the event listeners
+   *
+   * @return {Object} LinkList A reference to the instance of the class
+   * @chainable
+   */
+  init() {
+    this.append();
+
+    return this;
+  }
+
+  /**
+   * Appends target="_blank" to all external links in the list
+   *
+   * @return {Object} LinkList A reference to the current instance of the class
+   * @chainable
+   */
+  append() {
+    const selector = `a:not([target=_blank]).${this.prefix}--link`;
+    const links = this.element.querySelectorAll(selector);
+    const origin = window.location.origin;
+
+    for (const link of links) {
+      if (new URL(link.href).origin !== origin) {
+        link.setAttribute("target", "_blank");
+      }
+    }
+
+    return this;
+  }
+}

package/src/patterns/components/linklist/linklist.twig

@@ -1,7 +1,7 @@
 {#
   LINK LIST COMPONENT
 #}
-<div class="{{prefix}}--link-list {{prefix}}--link-list--{{theme}}">
+<div class="{{prefix}}--link-list {{prefix}}--link-list--{{theme}}" data-loadcomponent="LinkList" data-prefix="{{prefix}}">
   {% if headline %}
     <h3 class="{{prefix}}--link-list--headline">{{headline}}</h3>
   {% endif %}