@ilo-org/twig 0.14.6 → 0.15.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.15.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.15.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @ilo-org/twig
 
+## 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.15.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.13.3",
+    "@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/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/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/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>
-