@ilo-org/twig 0.14.6 → 0.16.0

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

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.14.6 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.14.6 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,54 @@
 # @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
+
+- 4153f99b5: Removed black bars from youtube ebedded video
+- 1ed3123ae: Re-implemented video.js styles
+
+### Patch Changes
+
+- 9bf73c7bd: Fix lists containing other elements than li items to improve accessibility
+- a3c872512: separated labels for breadcrumbs
+- 056754038: Revise and refactor color names with the same values and remove duplicates and replace where it was used
+- e1000fbbd: added legacy classname for react video component
+- Updated dependencies [4153f99b5]
+- Updated dependencies [c8de2b695]
+- Updated dependencies [7472dd625]
+- Updated dependencies [b3298a267]
+- Updated dependencies [bf4432d7c]
+- Updated dependencies [1ed3123ae]
+- Updated dependencies [f76a35fdc]
+- Updated dependencies [a3c872512]
+- Updated dependencies [056754038]
+- Updated dependencies [4bbac5457]
+- Updated dependencies [e1000fbbd]
+- Updated dependencies [ac58b53d2]
+- Updated dependencies [51b20d4aa]
+- Updated dependencies [5a1e32f8e]
+- Updated dependencies [52eeae214]
+- Updated dependencies [709675b79]
+  - @ilo-org/styles@0.13.3
+  - @ilo-org/brand-assets@0.4.0
+  - @ilo-org/themes@0.7.1
+
 ## 0.14.6
 
 ### Patch Changes

package/apps/storybook/theme.js

@@ -17,7 +17,7 @@ export default create({
   colorSecondary: brand["ilo-blue"].value,
 
   // UI
-  appBg: brand["ilo-lighter-blue"].value,
+  appBg: brand["ilo-light-blue"].value,
   appContentBg: brand["ilo-white"].value,
   appBorderColor: brand["ilo-grey-ui"].value,
   appBorderRadius: 0,
@@ -37,9 +37,9 @@ export default create({
 
   buttonBg: brand["ilo-white"].value,
   buttonBorder: brand["ilo-grey-ui"].value,
-  booleanBg: brand["ilo-lighter-blue"].value,
+  booleanBg: brand["ilo-light-blue"].value,
   booleanSelectedBg: brand["ilo-white"].value,
-  inputBg: brand["ilo-lighter-blue"].value,
+  inputBg: brand["ilo-light-blue"].value,
   inputBorder: brand["ilo-grey-ui"].value,
   inputTextColor: brand["ilo-dark-blue"].value,
   inputBorderRadius: 3,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.14.6",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -21,13 +21,14 @@
     "components"
   ],
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
     "video.js": "^7.21.2",
-    "@ilo-org/brand-assets": "0.3.1",
+    "videojs-youtube": "^3.0.1",
+    "@popperjs/core": "^2.11.8",
+    "@ilo-org/brand-assets": "0.4.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.13.2",
-    "@ilo-org/themes": "0.7.0",
+    "@ilo-org/styles": "0.14.0",
+    "@ilo-org/themes": "0.7.1",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

package/src/patterns/components/breadcrumb/breadcrumb.twig

@@ -24,7 +24,7 @@
 						{% if not loop.first and not loop.last %}
 							<li class="{{prefix}}--breadcrumb--item">
 								<a href="{{link.url}}" class="{{prefix}}--breadcrumb--link">
-									<span class="{{prefix}}--breadcrumb--link--label">{{link.label}}</span>
+									<span class="{{prefix}}--breadcrumb--link--label--dropdown">{{link.label}}</span>
 								</a>
 							</li>
 						{% endif %}

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

@@ -22,7 +22,7 @@ breadcrumb:
           url: "/linkone"
         - label: "Link Two"
           url: "/linktwo"
-        - label: "Link Three"
+        - label: "Link Three a long link that will wrap to the next line"
           url: "/linkthree"
         - label: "Link Four"
           url: "/linkfour"

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/hero/hero.twig

@@ -55,7 +55,7 @@
 					{% include '@components/tooltip/tooltip.twig' with {
 						prefix: prefix,
 						label: caption.label,
-						icon: true,
+						icon: "true",
 						theme: "dark",
 						icontheme: "dark"
 					} only %}

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/list/list.twig

@@ -1,30 +1,29 @@
 {#
   LIST COMPONENT
 #}
-{% if ordered == "ordered" %}
-<ol class="ilo--list ilo--list--{{ ordered|default('ordered') }}" data-loadcomponent="List">
+<div class="ilo--list ilo--list--{% if ordered == 'ordered' %}ordered{% endif %}{{alignment|default('') }}">
   {% if title %}
     <h5 class="ilo--list__title">{{ title }}</h5>
   {% endif %}
-  {% for item in items %}
-    {% include "@components/list/list-item.twig" with {
-      label: item.label,
-      content: item.content,
-      id: item.id,
-    } only %}
-  {% endfor %}
-</ol>
-{% else %}
-<ul class="ilo--list ilo--list--{{ ordered|default('unordered') }} ilo--list--{{ alignment|default('') }}" data-loadcomponent="List">
-  {% if title %}
-    <h5 class="ilo--list__title">{{ title }}</h5>
+  {% if ordered == "ordered" %}
+    <ol data-loadcomponent="List">
+      {% for item in items %}
+        {% include "@components/list/list-item.twig" with {
+          label: item.label,
+          content: item.content,
+          id: item.id,
+        } only %}
+      {% endfor %}
+    </ol>
+  {% else %}
+    <ul class="ilo--list--{{ alignment|default('') }}" data-loadcomponent="List">
+      {% for item in items %}
+        {% include "@components/list/list-item.twig" with {
+          label: item.label,
+          content: item.content,
+          id: item.id,
+        } only %}
+      {% endfor %}
+    </ul>
   {% endif %}
-  {% for item in items %}
-    {% include "@components/list/list-item.twig" with {
-      label: item.label,
-      content: item.content,
-      id: item.id,
-    } only %}
-  {% endfor %}
-</ul>
-{% endif %}
+</div>

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

@@ -2,7 +2,7 @@ pagination:
   namespace: Components/Navigation
   use: "@components/pagination/pagination.twig"
   label: Pagination
-  description: The Pagination component presents a dismissible alert.
+  description: The Pagination component breaks content into pages for easier navigation with intuitive controls like 'Previous' and 'Next' buttons.
   fields:
     currentPage:
       type: numeric

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

package/src/patterns/components/video/video.js

@@ -1,4 +1,4 @@
-import { EVENTS } from "@ilo-org/utils";
+import "videojs-youtube";
 import videojs from "video.js";
 
 /**
@@ -37,11 +37,7 @@ export default class Video {
    * @chainable
    */
   init() {
-    this.cacheDomReferences()
-      .start()
-      .cacheVideoReferences()
-      .setupHandlers()
-      .enable();
+    this.cacheDomReferences().start().setupHandlers().enable();
 
     return this;
   }
@@ -64,28 +60,6 @@ export default class Video {
     return this;
   }
 
-  /**
-   * Find all necessary DOM elements inside videojs
-   *
-   * @return {Object} Video A reference to the instance of the class
-   * @chainable
-   */
-  cacheVideoReferences() {
-    /**
-     * The button for video play control
-     * @type {?Element}
-     */
-    this.PlayButton = this.element.querySelector(".vjs-play-control");
-
-    /**
-     * The duration display
-     * @type {?Element}
-     */
-    this.Duration = this.element.querySelector(".vjs-duration");
-
-    return this;
-  }
-
   /**
    * Bind event handlers with the proper context of `this`.
    *
@@ -93,29 +67,19 @@ export default class Video {
    * @chainable
    */
   setupHandlers() {
-    this.onDurationHover = this.onDurationHover.bind(this);
-
     return this;
   }
 
   /**
-   * Creates event listeners to fix duration hover
-   * https://github.com/international-labour-organization/designsystem/issues/521
+   * Creates event listeners to enable interaction with view
    *
    * @return {Object} Video A reference to the instance of the class
    * @chainable
    */
   enable() {
-    if (!this.Duration) return this;
-    this.Duration.addEventListener(EVENTS.MOUSEOVER, () =>
-      this.onDurationHover(true)
-    );
-    this.Duration.addEventListener(EVENTS.MOUSEOUT, () => {
-      this.onDurationHover(false);
-    });
-
     return this;
   }
+
   /**
    * Starts up videojs
    *
@@ -146,25 +110,11 @@ export default class Video {
       sources: [
         { type: this.element.dataset.vjsType, src: this.element.dataset.src },
       ],
+      dataSetup: {
+        techOrder: ["youtube"],
+      },
     });
 
     return this;
   }
-
-  /**
-   * Controls duration hover
-   *
-   * @param {boolean} state - whether or not the duration is hovered
-   * @return {Object} Video A reference to the instance of the class
-   * @chainable
-   */
-  onDurationHover(state) {
-    if (!this.PlayButton) return this;
-    const className = `${this.controlsprefix}--play--hovered`;
-
-    if (this.PlayButton.classList.contains("vjs-playing")) return this;
-    this.PlayButton.classList.toggle(className, state);
-
-    return this;
-  }
 }

package/src/patterns/components/video/video.twig

@@ -10,7 +10,8 @@
       prefix: prefix,
       src: video.src,
       tracks: video.tracks,
-      url: url
+      url: url,
+      vjsType: vjsType
     } %}
   </div>
   <figcaption class="{{prefix}}--video--caption">{{caption}}</figcaption>

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

@@ -42,4 +42,41 @@ video:
           volume: "Volume"
         src: "/images/video-example.mp4"
         tracks: null
+
+youtube_video:
+  namespace: Components/Media
+  use: "@components/video/video.twig"
+  label: Youtube Video
+  description: A component for displaying a video, source from YouTube.
+  fields:
+    alt:
+      type: string
+      label: Alt
+      description: alt text for the image
+      required: true
+      preview: "The ILO logo animates into view"
+    caption:
+      type: string
+      label: Caption
+      description: string
+      preview: "The ILO brings together governments, employers and workers to set labour standards and promote decent work."
+    video:
+      type: object
+      label: Video
+      description: video player settings
+      required: true
+      preview:
+        controls:
+          fullscreen: "Fullscreen"
+          play: "Play"
+          pause: "Pause"
+          volume: "Volume"
+        src: "https://www.youtube.com/watch?v=55xQTgUJqhQ&ab_channel=InternationalLabourOrganization"
+        tracks: null
+    vjsType:
+      type: string
+      label: Source Type
+      description: The source type of video, required for youtube embedded videos
+      required: false
+      preview: "video/youtube"
   visibility: storybook

package/src/patterns/components/video/videoplayer.twig

@@ -6,4 +6,3 @@ VIDEO PLAYER SUB-COMPONENT
     <video class="{{prefix}}--video--element" poster="{{poster.src}}">
     </video>
 </div>
-