@ilo-org/twig 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ilo-org/twig
 
+## 0.1.3
+
+### Patch Changes
+
+- 774682316: Card fixes such as font sizes and some slight tweaks to make sure all the data is displayed
+- 2d7d8114a: Bug fixes and right-to-left stlying for rich text, tabs, image and credit components
+- 04fe60f9f: Mostly design bugfixes across multiple components
+- Updated dependencies [774682316]
+- Updated dependencies [2d7d8114a]
+- Updated dependencies [04fe60f9f]
+  - @ilo-org/icons@0.1.3
+  - @ilo-org/styles@0.1.3
+  - @ilo-org/themes@0.1.3
+
 ## 0.1.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -21,9 +21,9 @@
   ],
   "dependencies": {
     "@ilo-org/fonts": "0.0.2",
-    "@ilo-org/icons": "0.1.2",
-    "@ilo-org/styles": "0.1.2",
-    "@ilo-org/themes": "0.1.2",
+    "@ilo-org/icons": "0.1.3",
+    "@ilo-org/styles": "0.1.3",
+    "@ilo-org/themes": "0.1.3",
     "@ilo-org/utils": "0.0.1",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"

package/src/patterns/components/breadcrumb/breadcrumb.js

@@ -47,6 +47,8 @@ export default class Breadcrumb {
   cacheDomReferences() {
     this.breadcrumbs = this.element.querySelector('.ilo--breadcrumb--items');
     this.breadcrumbwidth = this.breadcrumbs.offsetWidth;
+    this.ContextButton = this.element.querySelector(`.${this.prefix}--breadcrumb--item--context`);
+    this.ContextMenu = this.element.querySelector(`.context--menu`);
 
     return this;
   }
@@ -59,6 +61,7 @@ export default class Breadcrumb {
    */
   setupHandlers() {
     this.onResize = this.onResize.bind(this);
+    this.onClick = this.onClick.bind(this);
 
     return this;
   }
@@ -71,6 +74,7 @@ export default class Breadcrumb {
    */
   enable() {
     window.addEventListener(EVENTS.RESIZE, (e) => this.onResize(e));
+    this.ContextButton.addEventListener(EVENTS.CLICK, () => this.onClick());
 
     return this;
   }
@@ -84,8 +88,28 @@ export default class Breadcrumb {
   onResize(e) {
     if (this.breadcrumbwidth > this.element.offsetWidth / 2) {
       this.element.classList.add('contextmenu');
+      this.ContextMenu.classList.remove('open');
     } else {
       this.element.classList.remove('contextmenu');
+      this.ContextMenu.classList.remove('open');
+    }
+
+    return this;
+  }
+
+  /**
+   * OnClick interaction with the ContextMenu button
+   *
+   * @return {Object} Breadcrumb A reference to the instance of the class
+   * @chainable
+   */
+  onClick() {
+    if (this.element.classList.contains('contextmenu')) {
+      if (this.ContextMenu.classList.contains('open')) {
+        this.ContextMenu.classList.remove('open');
+      } else {
+        this.ContextMenu.classList.add('open');
+      }
     }
 
     return this;

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

@@ -2,7 +2,7 @@
   BUTTON COMPONENT
 #}
 {% if url %}
-  <a class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPos}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target is defined and target == 'true' %}target="{{target}}" rel="noopener noreferrer"{% endif %} {% if disabled is defined and disabled == 'true' %}disabled{% endif %}>
+  <a class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPos}}{% 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} %}

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

@@ -2,8 +2,11 @@
   CARD COMPONENT
 #}
 <div class="{{prefix}}--card {{prefix}}--card--{{theme}} {{prefix}}--card--{{variant}}{% if cornercut %} {{prefix}}--card--{{cornercut}}{% endif %}{% if color %} {{prefix}}--card--{{color}}{% endif %}{% if alignment %} {{prefix}}--card--{{alignment}}{% endif %} {% if link %} {{prefix}}--card--action{% endif %}{% if type %} 
-{{prefix}}--card--{{type}}{% endif %}{% if type %} 
+{{prefix}}--card--{{type}}{% endif %}{% if size %} 
 {{prefix}}--card--{{size}}{% endif %}">
+{% if type == "" %}
+  {% set type = variant %}
+{% endif %}
   {% if link %}
     <a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}"><span class="{{prefix}}--card--link--text">{{title}}</span></a>
   {% endif %}
@@ -18,7 +21,7 @@
       {% if title %}
         <h5 class="{{prefix}}--card--title">{{title}}</h5>
       {% endif %}
-      {% if type == "multilink" and image %}
+      {% if type == "multilink" or type == "data" and image %}
         <div class="{{prefix}}--card--image--wrapper"><picture><img class="{{prefix}}--card--image" src="{{image}}" alt="{{title}}"></picture></div>
       {% endif %}
       {% if intro %}
@@ -50,7 +53,7 @@
         } only %}
       {% endif %}
       {% if cta %}
-        <a class="{{prefix}}--card--cta {{prefix}}--button {{prefix}}--button--small {{prefix}}--button--primary" href="{{cta.url}}">
+        <a class="{{prefix}}--card--cta {{prefix}}--button {{prefix}}--button--medium {{prefix}}--button--primary" href="{{cta.url}}">
           <span class="link__label">{{cta.label}}</span>
         </a>
       {% endif %}
@@ -86,6 +89,7 @@
         {% endif %}
         {% if dataset.links %}
           <div class="{{prefix}}--card--data--content-links">
+            <p class="{{prefix}}--card--data--content-label">{{ dataset.links.headline }}</p>
             {% for item in dataset.links.items %}
               {% include "@components/link/link.twig" with {  
                 url: item.url,

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

@@ -156,7 +156,6 @@ card:
         source: 
           label: "Source: lorem ipsum dolor sit amet, 2020"
           url: "https://www.google.com/search?q=stat"
-        color: blue
     multilink:
       label: Multilink Card
       description: The multilink Card

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

@@ -338,8 +338,7 @@ cardgroup:
       fields:
         group:
           - title: ""
-            image: ""
-            # image: "https://placekitten.com/205/179"
+            image: "https://placekitten.com/205/179"
             intro: ""
             eyebrow: "Event details"
             date: ""

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

@@ -101,7 +101,6 @@ form:
               label: "File Upload Field Label"
               name: "fileupload"
               placeholder: "File Upload Field"
-              tooltip: "Tooltip"
           type: "file"
         - field:
             label: "Date Picker Field Label"

package/src/patterns/components/modal/modal.js

@@ -105,7 +105,7 @@ export default class Modal {
    * @chainable
    */
   closeButtonClick() {
-    this.element.classList.remove('fadeout');
+    this.element.classList.remove('fadein');
     setTimeout(() => {
       this.element.classList.remove('show');
     }, 125);

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

@@ -8,8 +8,8 @@ modal:
       label: Closee Button
       description: Label and settings for the "close" button
       preview:
-        size: 'small'
-        type: 'secondary'
+        size: 'medium'
+        type: 'tertiary'
         label: 'Close Button'
         icon: close
         iconPos: center

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

@@ -28,15 +28,6 @@ notification:
       description: The headline of the notification
       required: true
       preview: 'With CTA'
-    placement:
-      type: select
-      label: Placement
-      description: The placement of the notification
-      required: true
-      options:
-        inline: Inline
-        dialog: Dialog
-      preview: 'dialog'
     type:
       type: select
       label: Type
@@ -55,4 +46,13 @@ notification:
       preview:
         human: Dec 7, 2022
         unix: 1670389200
+  settings:
+    placement:
+      type: select
+      label: Placement
+      description: Is this notification inline (in the flow of the document) or a dialog (highest on the z-index and fixed-position)?
+      options:
+        inline: Inline
+        dialog: Dialog
+      preview: 'dialog'
   visibility: storybook

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

@@ -18,5 +18,5 @@ searchfield:
         helper: "The search field's helper text"
         name: "text"
         placeholder: "Search Field"
-        type: "text"
+        type: "search"
   visibility: storybook

package/src/patterns/components/table/table.js

@@ -201,6 +201,10 @@ export default class Table {
       );
     });
 
+    if (e.target.hasAttribute('href')) {
+      window.location.href = e.target.getAttribute('href');
+    }
+
     return this;
   }
 

package/src/patterns/components/table/table.twig

@@ -5,6 +5,9 @@
   <header class="{{prefix}}--table--header">
     <h3 class="{{prefix}}--table--headline">
       {{headline}}
+      {% if tooltip %}
+        {% include '@components/tooltip/tooltip.twig' with tooltip %}
+      {% endif %}
     </h3>
     {% if description is defined %}
     <p class="{{prefix}}--table--description">

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

@@ -9,7 +9,7 @@ table:
       description: The table's headline
       preview: "Headline"
       required: true
-    toolip:
+    tooltip:
       type: object
       label: Tooltip
       description: If there is a tooltip next to the headline, the tooltip's data

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

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

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

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

package/src/patterns/components/tableofcontents/tableofcontents.js

@@ -0,0 +1,164 @@
+import { EVENTS } from '@ilo-org/utils';
+
+/**
+ * The TableOfContents module which handles control and display of a TableOfContents dialog
+ *
+ *
+ * @class TableOfContents
+ */
+export default class TableOfContents {
+  /**
+   * TableOfContents 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} TableOfContents 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} ReadMore A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The button for toggling Read More state
+     * @type {Object}
+     */
+    this.OpenButton = this.element.querySelector(`.toc--modal--open`);
+    this.CloseButton = this.element.querySelector(`.toc--modal--close`);
+    this.trigger = this.element.querySelector(`.${this.prefix}--table-of-contents--trigger`);
+    this.modalUx = this.element.querySelector(`.${this.prefix}--table-of-contents--modal`);
+    this.toc = this.element.querySelector(`.${this.prefix}--table-of-contents`);
+    this.tocItems = this.element.querySelectorAll(`.${this.prefix}--table-of-contents--link`);
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} TableOfContents A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.OpenButtonHandler = this.openButtonClick.bind(this);
+    this.CloseHandler = this.closeButtonClick.bind(this);
+    this.KeyPressHandler = this.keyPress.bind(this);
+    this.linkClickHandler = this.linkClick.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} TableOfContents A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.OpenButton.addEventListener(EVENTS.CLICK, () => this.OpenButtonHandler());
+    this.CloseButton.addEventListener(EVENTS.CLICK, () => this.CloseHandler());
+
+    if (this.tocItems.length > 0) {
+      this.tocItems.forEach((link, i) => {
+        link.addEventListener(EVENTS.CLICK, () => this.linkClickHandler());
+      });
+    }
+
+    return this;
+  }
+
+  /**
+   * Actions performed on click of the open button
+   *
+   * @return {Object} TableOfContents A reference to the instance of the class
+   * @chainable
+   */
+  openButtonClick() {
+    this.trigger.classList.add('hide');
+    this.element.classList.add('show');
+    this.modalUx.classList.add('show');
+    this.toc.classList.add('show');
+    setTimeout(() => {
+      this.modalUx.classList.add('fadein');
+      this.toc.classList.add('fadein');
+    }, 125);
+    window.addEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
+
+    return this;
+  }
+
+  /**
+   * Actions performed on click of the close button
+   *
+   * @return {Object} TableOfContents A reference to the instance of the class
+   * @chainable
+   */
+  closeButtonClick() {
+    this.modalUx.classList.remove('fadein');
+    this.toc.classList.remove('fadein');
+    setTimeout(() => {
+      this.modalUx.classList.remove('show');
+      this.toc.classList.remove('show');
+      this.element.classList.remove('show');
+      this.trigger.classList.remove('hide');
+    }, 125);
+    window.removeEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
+
+    return this;
+  }
+
+  /**
+   * Actions performed on click of any link
+   *
+   * @return {Object} TableOfContents A reference to the instance of the class
+   * @chainable
+   */
+  linkClick() {
+    this.closeButtonClick();
+
+    return this;
+  }
+
+  /**
+   * Actions performed on key press
+   *
+   * @return {Object} TableOfContents A reference to the instance of the class
+   * @chainable
+   */
+  keyPress(e) {
+    if (e.key === 'Escape') {
+      this.closeButtonClick();
+    }
+
+    return this;
+  }
+}

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

@@ -2,13 +2,22 @@
   TABLE OF CONTENTS COMPONENT
 #}
 {% if items %}
-  <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 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>
 {% endif %}

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

@@ -3,6 +3,35 @@ tableofcontents:
   label: Table Of Contents
   description: A component for displaying links internal to a page
   fields:
+    openbutton:
+      type: object
+      label: Open Button
+      description: The label and settings for the button that will show the table of contents at small breakpoints
+      preview:
+        size: 'medium'
+        type: 'secondary'
+        label: 'Open Button'
+        className: 'toc--modal--open'
+        opensmodal: true
+      required: true
+    closebutton:
+      type: object
+      label: Close Button
+      description: Label and settings for the "close" button
+      preview:
+        size: 'large'
+        type: 'tertiary'
+        label: 'Close Button'
+        icon: close
+        iconPos: center
+        icononly: true
+        className: 'toc--modal--close'
+    headline:
+      type: string
+      label: Headline
+      description: A headline for the small breakpoint view of the table of contents, shown when it is opened. Design recommendation is that this matches the page title as shown in the hero.
+      preview: "Page Title"
+      required: true
     items:
       type: object
       label: Items

package/src/patterns/components/tabs/tabs.twig

@@ -6,7 +6,6 @@
 {% for item in items %}
   {% set tabids = tabids|merge([random(100000)]) %}
 {% endfor %}
-
 <div class="{{prefix}}--tabs" data-prefix="{{prefix}}" id="tabs--{{uid}}" data-loadcomponent="Tabs">
     <ul class="{{prefix}}--tabs--selection" aria-controls="tabs--{{uid}}" role="tablist" style="--tabscount: {{items|length}};">
       {% for item in items %}