@ilo-org/twig 0.2.11 → 0.2.13

package/src/patterns/components/tooltip/tooltip.js

@@ -48,11 +48,11 @@ export default class Tooltip {
      */
 
     // enable defaults
-    this.prefix = this.element.getAttribute('data-prefix');
+    this.prefix = this.element.getAttribute("data-prefix");
     this.tooltip = this.element.querySelector(`.${this.prefix}--tooltip`);
     this.arrow = this.element.querySelector(`.${this.prefix}--tooltip--arrow`);
-    this.alignment = this.arrow.getAttribute('data-alignment');
-    this.placement = this.tooltip.getAttribute('data-placement');
+    this.alignment = this.arrow.getAttribute("data-alignment");
+    this.placement = this.tooltip.getAttribute("data-placement");
 
     return this;
   }
@@ -79,10 +79,10 @@ export default class Tooltip {
    * @chainable
    */
   enable() {
-    this.element.addEventListener('mouseover', this.onMouseOver);
-    this.element.addEventListener('focus', this.onMouseOver);
-    this.element.addEventListener('mouseout', this.onMouseOut);
-    this.element.addEventListener('blur', this.onMouseOut);
+    this.element.addEventListener("mouseover", this.onMouseOver);
+    this.element.addEventListener("focus", this.onMouseOver);
+    this.element.addEventListener("mouseout", this.onMouseOut);
+    this.element.addEventListener("blur", this.onMouseOut);
     return this;
   }
 
@@ -99,7 +99,7 @@ export default class Tooltip {
     return this;
   }
 
-  handleOnMouseOut(e) {
+  handleOnMouseOut() {
     this.tooltip.classList.remove(`${this.prefix}--tooltip--fade`);
     setTimeout(() => {
       this.tooltip.classList.remove(`${this.prefix}--tooltip--visible`);
@@ -110,8 +110,8 @@ export default class Tooltip {
 
   postMouseOver(hoverRect) {
     // position the tooltip after showing it
-    let placement = 'center';
-    let alignment = 'left';
+    let placement = "center";
+    let alignment = "left";
 
     const ttNode = this.tooltip;
     if (ttNode != null) {
@@ -132,7 +132,9 @@ export default class Tooltip {
       const bRight =
         rx + ttRect.width <= window.scrollX + docWidth &&
         ty + ttRect.height <= window.scrollY + docHeight;
-      const bLeft = lx - ttRect.width >= 0 && ty + ttRect.height <= window.scrollY + docHeight;
+      const bLeft =
+        lx - ttRect.width >= 0 &&
+        ty + ttRect.height <= window.scrollY + docHeight;
       const bAbove = ty - ttRect.height >= 0;
       const bBellow = by + ttRect.height <= window.scrollY + docHeight;
 
@@ -140,26 +142,26 @@ export default class Tooltip {
       if (bRight) {
         x = hoverRect.width + 32;
         y = 0;
-        placement = 'negative';
-        alignment = 'right';
+        placement = "negative";
+        alignment = "right";
       } else if (bBellow) {
         x = 0;
         y = hoverRect.height + 32;
 
-        placement = 'center';
-        alignment = 'bottom';
+        placement = "center";
+        alignment = "bottom";
       } else if (bLeft) {
         x = -ttRect.width - 32;
         y = 0;
 
-        placement = 'negative';
-        alignment = 'left';
+        placement = "negative";
+        alignment = "left";
       } else if (bAbove) {
         x = 0;
         y = -ttRect.height - 32;
 
-        placement = 'center';
-        alignment = 'top';
+        placement = "center";
+        alignment = "top";
       }
 
       // set style top and left on tooltip
@@ -167,17 +169,25 @@ export default class Tooltip {
       this.tooltip.style.left = x;
 
       // set class for placement on arrow
-      this.arrow.classList.remove(`${this.prefix}--tooltip--arrow--placement-${this.placement}`);
-      this.arrow.classList.add(`${this.prefix}--tooltip--arrow--placement-${this.placement}`);
+      this.arrow.classList.remove(
+        `${this.prefix}--tooltip--arrow--placement-${this.placement}`
+      );
+      this.arrow.classList.add(
+        `${this.prefix}--tooltip--arrow--placement-${this.placement}`
+      );
       this.placement = placement;
-      this.arrow.setAttribute('data-placement', placement);
+      this.arrow.setAttribute("data-placement", placement);
 
       // set class for alignment on tooltip
-      this.tooltip.classList.remove(`${this.prefix}--tooltip--alignment-${this.alignment}`);
-      this.tooltip.classList.add(`${this.prefix}--tooltip--alignment-${this.alignment}`);
+      this.tooltip.classList.remove(
+        `${this.prefix}--tooltip--alignment-${this.alignment}`
+      );
+      this.tooltip.classList.add(
+        `${this.prefix}--tooltip--alignment-${this.alignment}`
+      );
       this.alignment = alignment;
 
-      this.tooltip.setAttribute('data-alignment', alignment);
+      this.tooltip.setAttribute("data-alignment", alignment);
     }
 
     return this;

package/src/patterns/components/tooltip/tooltip.stories.jsx

@@ -1,7 +1,10 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./tooltip.wingsuit.yml');
+export default {};
+const patternDefinition = require("./tooltip.wingsuit.yml");
 
+/* eslint-disable-next-line */
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

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

@@ -1,5 +1,5 @@
 tooltip:
-  use: '@components/tooltip/tooltip.twig'
+  use: "@components/tooltip/tooltip.twig"
   label: Tooltip
   description: A component for displaying a tooltip
   fields:
@@ -8,7 +8,7 @@ tooltip:
       label: label
       description: label shown on the tooltip
       required: true
-      preview: 'Tooltip text'
+      preview: "Tooltip text"
     children:
       type: string
       label: children
@@ -21,9 +21,9 @@ tooltip:
       label: Icon
       description: does this tooltip have the "info" icon?
       options:
-        true: 'true'
+        true: "true"
         false: false
-      preview: 'true'
+      preview: "true"
       required: true
     theme:
       type: select

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

@@ -2,6 +2,6 @@
  * Video
  */
 // Module template
-import './video.twig';
-import './video.wingsuit.yml';
-import './video.behavior';
+import "./video.twig";
+import "./video.wingsuit.yml";
+import "./video.behavior";

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

@@ -1,4 +1,4 @@
-import Video from './video';
+import Video from "./video";
 
 Drupal.behaviors.media = {
   attach() {
@@ -6,7 +6,7 @@ Drupal.behaviors.media = {
       document.querySelectorAll(`[data-loadcomponent="Video"]`),
       (element) => {
         // eslint-disable-next-line no-console
-        console.log('loading Video component....');
+        console.log("loading Video component....");
         new Video(element);
       }
     );

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

@@ -1,5 +1,4 @@
-import { EVENTS, ARIA } from '@ilo-org/utils';
-import videojs from 'video.js';
+import videojs from "video.js";
 
 /**
  * The Video module which handles rendering field labels inline on a form.
@@ -53,7 +52,9 @@ export default class Video {
      * The button for toggling Read More state
      * @type {Object}
      */
-    this.VideoElement = this.element.querySelector(`.${this.prefix}--video--element`);
+    this.VideoElement = this.element.querySelector(
+      `.${this.prefix}--video--element`
+    );
 
     return this;
   }
@@ -85,12 +86,12 @@ export default class Video {
    * @chainable
    */
   start() {
-    console.log('this.VideoElement', this.VideoElement);
+    console.log("this.VideoElement", this.VideoElement);
 
     this.player = videojs(this.VideoElement, {
       autoplay: false,
       controls: true,
-      preload: 'auto',
+      preload: "auto",
       bigPlayButton: false,
       controlBar: {
         descriptionsButton: false,

package/src/patterns/components/video/video.stories.jsx

@@ -1,7 +1,10 @@
-import './index';
+import "./index";
 
-const patternDefinition = require('./video.wingsuit.yml');
+export default {};
+const patternDefinition = require("./video.wingsuit.yml");
 
+/* eslint-disable-next-line */
+/* eslint-disable-next-line */
 export const wingsuit = {
   patternDefinition,
 };

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

@@ -1,5 +1,5 @@
 video:
-  use: '@components/video/video.twig'
+  use: "@components/video/video.twig"
   label: Video
   description: A component for displaying a video, source from either a server or YouTube.
   fields:
@@ -8,12 +8,12 @@ video:
       label: Alt
       description: alt text for the image
       required: true
-      preview: 'My alt text'
+      preview: "My alt text"
     caption:
       type: string
       label: Caption
       description: string
-      preview: 'my image caption'
+      preview: "my image caption"
     url:
       type: object
       label: URL
@@ -21,13 +21,13 @@ video:
       required: true
       preview:
         - breakpoint: 0
-          src: 'https://place-hold.it/400x300?text=SmallBreakpointImage'
+          src: "https://place-hold.it/400x300?text=SmallBreakpointImage"
         - breakpoint: 800
-          src: 'https://place-hold.it/800x600?text=MediumBreakpointImage'
+          src: "https://place-hold.it/800x600?text=MediumBreakpointImage"
         - breakpoint: 1200
-          src: 'https://place-hold.it/1200x900?text=LargeBreakpointImage'
+          src: "https://place-hold.it/1200x900?text=LargeBreakpointImage"
         - breakpoint: 1440
-          src: 'https://place-hold.it/1600x1200?text=LargestBreakpointImage'
+          src: "https://place-hold.it/1600x1200?text=LargestBreakpointImage"
     video:
       type: object
       label: Video
@@ -35,10 +35,10 @@ video:
       required: true
       preview:
         controls:
-            fullscreen: "Fullscreen"
-            play: "Play"
-            pause: "Pause"
-            volume: "Volume"
+          fullscreen: "Fullscreen"
+          play: "Play"
+          pause: "Pause"
+          volume: "Volume"
         src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
         tracks: null
   visibility: storybook

package/src/vendorjs/lib.vendor.js

@@ -1 +1 @@
-import 'videojs';
+import "videojs";

package/wingsuit.config.js

@@ -1,26 +1,27 @@
-const namespaces = require('./src/namespaces');
+const namespaces = require("./src/namespaces");
 
 module.exports = {
-  presets: ['@wingsuit-designsystem/preset-scss'],
+  presets: ["@wingsuit-designsystem/preset-scss"],
   designSystems: {
     ilo: {
-      path: 'src',
-      patternFolder: 'patterns',
+      path: "src",
+      patternFolder: "patterns",
       namespaces,
     },
   },
   apps: {
     storybook: {
-      path: './apps/storybook',
-      type: 'storybook',
-      cssMode: 'hot',
-      distFolder: 'storybook-static',
-      designSystem: 'ilo',
+      path: "./apps/storybook",
+      type: "storybook",
+      cssMode: "hot",
+      distFolder: "storybook-static",
+      designSystem: "ilo",
       componentTypes: {
-        wingsuit_presenter: 'ILO component (UI Pattern) with presentation template',
-        plain: 'Twig only component',
-        plain_presenter: 'Twig only component with presentation template',
-        presenter: 'Presentation template',
+        wingsuit_presenter:
+          "ILO component (UI Pattern) with presentation template",
+        plain: "Twig only component",
+        plain_presenter: "Twig only component with presentation template",
+        presenter: "Presentation template",
       },
     },
   },

package/.editorconfig

@@ -1,12 +0,0 @@
-# Unix-style newlines with a newline ending every file
-[*]
-indent_style = space
-indent_size = 2
-tab_width = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-charset = utf-8
-
-[composer.{json,lock}]
-indent_size = 4

package/.eslintignore

@@ -1,11 +0,0 @@
-# Ignore any path/file using .gitignore syntax
-
-dist/
-pattern-lab/
-vendor/
-tools/tests/vrt/backstop_data
-preview.js-generated-config-entry.js
-storybook-init-framework-entry.js
-
-# Ignore yeoman new-component templates
-tools/new-component/templates

package/.prettierignore

@@ -1,16 +0,0 @@
-# Ignore any path/file using .gitignore syntax, ie:
-
-node_modules/
-vendor/
-
-dist/
-pattern-lab/
-tools/new-component/templates/
-
-package.json
-package-lock.json
-
-_icons-generated.scss
-
-env.json
-scssVariables.json

package/.prettierrc.js

@@ -1,13 +0,0 @@
-const base = require('@storybook/linter-config/prettier.config');
-
-module.exports = {
-  ...base,
-  arrowParens: 'always',
-  endOfLine:"auto",
-  overrides: [
-    {
-      files: '*.html',
-      options: { parser: 'babel' },
-    },
-  ],
-};