@ilo-org/twig 0.13.0-next.1 → 0.13.0-next.2

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

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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ilo-org/twig
 
+## 0.13.0-next.2
+
+### Minor Changes
+
+- 55f0c47aa: Added chained hover effect for video play button
+
+### Patch Changes
+
+- ca463b9b7: added full width on mobile viewport for affected cards
+- Updated dependencies [55f0c47aa]
+- Updated dependencies [b976f7221]
+- Updated dependencies [ca463b9b7]
+  - @ilo-org/styles@0.11.3-next.2
+
 ## 0.13.0-next.1
 
 ### Patch Changes

package/apps/storybook/main.js

@@ -8,6 +8,7 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-backgrounds",
     "@storybook/addon-postcss",
+    "storybook-addon-rtl-direction",
   ],
   staticDirs: [
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.13.0-next.1",
+  "version": "0.13.0-next.2",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -25,7 +25,7 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.11.3-next.1",
+    "@ilo-org/styles": "0.11.3-next.2",
     "@ilo-org/themes": "0.7.0-next.0",
     "@ilo-org/utils": "0.0.11"
   },
@@ -70,6 +70,7 @@
     "resolve-url-loader": "^3.1.5",
     "sass-loader": "^10.4.1",
     "storybook": "^6.5.16",
+    "storybook-addon-rtl-direction": "^0.0.19",
     "style-loader": "^1.3.0",
     "stylelint-scss": "^3.21.0",
     "webpack": "^4.46.0",

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

@@ -1,3 +1,4 @@
+import { EVENTS } from "@ilo-org/utils";
 import videojs from "video.js";
 
 /**
@@ -36,7 +37,11 @@ export default class Video {
    * @chainable
    */
   init() {
-    this.cacheDomReferences().start().setupHandlers().enable();
+    this.cacheDomReferences()
+      .start()
+      .cacheVideoReferences()
+      .setupHandlers()
+      .enable();
 
     return this;
   }
@@ -59,6 +64,28 @@ 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`.
    *
@@ -66,19 +93,29 @@ export default class Video {
    * @chainable
    */
   setupHandlers() {
+    this.onDurationHover = this.onDurationHover.bind(this);
+
     return this;
   }
 
   /**
-   * Creates event listeners to enable interaction with view
+   * Creates event listeners to fix duration hover
+   * https://github.com/international-labour-organization/designsystem/issues/521
    *
-   * @return {Object} ReadMore A reference to the instance of the class
+   * @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
    *
@@ -113,4 +150,21 @@ export default class Video {
 
     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;
+  }
 }