@ilo-org/twig 0.0.1

package/src/patterns/components/tag/tagset.js

@@ -0,0 +1,160 @@
+import { getUpdatedItems, EVENTS, ARIA } from '@ilo-org/utils';
+
+/**
+ * The Tag module which handles rendering field labels inline on a form.
+ *
+ * @class Tag
+ */
+export default class Tag {
+  /**
+   * Tag 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.multipleActive = true;
+    this.itemStatuses = [];
+
+    // 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} Tag 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} Tag A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The field that a user interacts with on a form
+     * @type {Object}
+     */
+    this.buttonTags = this.element.querySelectorAll('.ilo--tag--button');
+    this.multipleActive = this.element.getAttribute('data-multipleactive');
+
+    this.buttonTags.forEach((button, i) => {
+      const expanded = button.dataset['active'];
+      const id = this.buttonTags[i].getAttribute('id');
+      if (expanded === 'true') {
+        this.itemStatuses = getUpdatedItems({
+          id,
+          itemStatuses: this.itemStatuses,
+          allowMultipleActive: this.multipleActive,
+        });
+      }
+    });
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Tag A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.onClick = this.onClick.bind(this);
+    this.updateTagItems = this.updateTagItems.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Tag A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    if (this.buttonTags.length > 0) {
+      this.buttonTags.forEach((button, i) => {
+        button.addEventListener(EVENTS.CLICK, () => this.onClick(i));
+      });
+    }
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the tag button
+   *
+   * @return {Object} Tag A reference to the instance of the class
+   * @chainable
+   */
+  onClick(i) {
+    const id = this.buttonTags[i].getAttribute('id');
+
+    this.itemStatuses = getUpdatedItems({
+      id,
+      itemStatuses: this.itemStatuses,
+      allowMultipleacmultipleActive: this.multipleActive,
+    });
+
+    // this.updateTagItems();
+    console.log(id);
+    this.removeParentDom(id);
+
+    return this;
+  }
+
+  /**
+   *
+   * @param {String} id The element id of the child of the node to be removed
+   *
+   * @return {Object} Tag A reference to the instance of the class
+   * @chainable
+   */
+  removeParentDom(id) {
+    const buttonTag = document.getElementById(id);
+
+    if (buttonTag) {
+      buttonTag.parentElement.remove();
+    }
+
+    return this;
+  }
+
+  /**
+   * Update tag items based off of new statuses
+   *
+   * @return {Object} Tag A reference to the instance of the class
+   * @chainable
+   */
+  updateTagItems() {
+    this.tags.forEach((item, i) => {
+      const id = item.getAttribute('id');
+      const open = this.itemStatuses.indexOf(id) > -1;
+      if (open) {
+        this.tags[i].classList.add('ilo--tag--active');
+        this.tags[i].setAttribute('data-active', 'true');
+      } else {
+        this.tags[i].classList.remove('ilo--tag--active');
+        this.tags[i].setAttribute('data-active', 'true');
+      }
+    });
+
+    return this;
+  }
+}

package/src/patterns/components/tag/tagset.wingsuit.yml

@@ -0,0 +1,43 @@
+tagset:
+  use: '@components/tag/tag-set.twig'
+  label: Tag Set
+  description: A set of tags
+  fields:
+    items:
+      type: object
+      label: Items
+      description: The tag items.
+      required: true
+      preview:
+        - content: content 1
+          id: tag1
+          defaultActive: true
+          url: https://www.google.com/
+        - content: content 2
+          id: tag2
+          defaultActive: true
+          url: https://www.google.com/
+        - content: content 3
+          id: tag3
+          defaultActive: false
+  settings: 
+    allowMultipleActive:
+      type: select
+      label: Allow Multiple Active
+      description: Allow mutiple tag items to be active at once.
+      options:
+        true: True
+        false: False
+      preview: true
+      required: false
+    tagType:
+      type: select
+      label: Tag Type
+      description: Type of tags
+      options:
+        anchor: Anchor
+        button: Button
+        display: Display
+      preview: display
+      required: true
+  visibility: storybook

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

@@ -0,0 +1,7 @@
+/**
+ * Tooltip
+ */
+// Module template
+import './tooltip.twig';
+import './tooltip.wingsuit.yml';
+import './tooltip.behavior';

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

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

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

@@ -0,0 +1,184 @@
+/**
+ * The Tooltip module which handles showing a bit of markup on mouseover
+ *
+ * @class Tooltip
+ */
+export default class Tooltip {
+  /**
+   * Tooltip 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;
+
+    // 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} ReadMore 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}
+     */
+
+    // enable defaults
+    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');
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Tooltip A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.onMouseOver = this.handleOnMouseOver.bind(this);
+    this.onFocus = this.handleOnMouseOver.bind(this);
+    this.onMouseOut = this.handleOnMouseOut.bind(this);
+    this.onBlur = this.handleOnMouseOut.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} ReadMore A reference to the instance of the class
+   * @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);
+    return this;
+  }
+
+  handleOnMouseOver(e) {
+    const target = e.currentTarget;
+
+    if (target != null) {
+      const rect = target.getBoundingClientRect();
+      this.tooltip.classList.add(`${this.prefix}--tooltip--visible`);
+      this.postMouseOver(rect);
+    }
+
+    return this;
+  }
+
+  handleOnMouseOut(e) {
+    this.tooltip.classList.remove(`${this.prefix}--tooltip--visible`);
+
+    return this;
+  }
+
+  postMouseOver(hoverRect) {
+    // position the tooltip after showing it
+    let placement = 'center';
+    let alignment = 'left';
+
+    const ttNode = this.tooltip;
+    if (ttNode != null) {
+      let x = 0,
+        y = 0;
+
+      const docWidth = document.documentElement.clientWidth,
+        docHeight = document.documentElement.clientHeight;
+
+      const rx = hoverRect.x + hoverRect.width, // most right x
+        lx = hoverRect.x, // most left x
+        ty = hoverRect.y, // most top y
+        by = hoverRect.y + hoverRect.height; // most bottom y
+
+      // tooltip rectange
+      const ttRect = ttNode.getBoundingClientRect();
+
+      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 bAbove = ty - ttRect.height >= 0;
+      const bBellow = by + ttRect.height <= window.scrollY + docHeight;
+
+      // the tooltip doesn't fit to the left
+      if (bRight) {
+        x = hoverRect.width + 32;
+        y = 0;
+        placement = 'negative';
+        alignment = 'right';
+      } else if (bBellow) {
+        x = 0;
+        y = hoverRect.height + 32;
+
+        placement = 'center';
+        alignment = 'bottom';
+      } else if (bLeft) {
+        x = -ttRect.width - 32;
+        y = 0;
+
+        placement = 'negative';
+        alignment = 'left';
+      } else if (bAbove) {
+        x = 0;
+        y = -ttRect.height - 32;
+
+        placement = 'center';
+        alignment = 'top';
+      }
+
+      // set style top and left on tooltip
+      // setPosition({ x: x, y: y });
+      this.tooltip.style.top = y;
+      this.tooltip.style.left = x;
+
+      // set class for placement on arrow
+      // setArrowPlacement(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);
+
+      // set class for alignment on tooltip
+      // setArrowAlignment(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);
+    }
+
+    return this;
+  }
+}

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

@@ -0,0 +1,7 @@
+import './index';
+
+const patternDefinition = require('./tooltip.wingsuit.yml');
+
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/tooltip/tooltip.twig

@@ -0,0 +1,11 @@
+{#
+  TOOLTIP COMPONENT
+#}
+  <div
+    class="{{prefix}}--tooltip--wrapper{% if icon %} has-icon{% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}"
+  >
+    <span class="{{prefix}}--tooltip {{prefix}}--tooltip--{{theme}}" data-alignment="left">
+      <span class="{{prefix}}--tooltip--arrow {{prefix}}--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
+      {{label}}
+    </span>
+  </div>

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

@@ -0,0 +1,30 @@
+tooltip:
+  use: '@components/tooltip/tooltip.twig'
+  label: Tooltip
+  description: A component for displaying a tooltip
+  fields:
+    label:
+      type: string
+      label: label
+      description: label shown on the tooltip
+      required: true
+      preview: 'Tooltip text'
+    icon:
+      type: select
+      label: Icon
+      description: does this tooltip have the "info" icon?
+      fields:
+        true: 'true'
+        false: false
+      preview: 'true'
+      required: true
+    theme:
+      type: select
+      label: Theme
+      description: choose the tooltip's theme
+      fields:
+        light: light
+        dark: dark
+      preview: dark
+      required: true
+  visibility: storybook

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

@@ -0,0 +1,7 @@
+/**
+ * Video
+ */
+// Module template
+import './video.twig';
+import './video.wingsuit.yml';
+import './video.behavior';

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

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

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

@@ -0,0 +1,114 @@
+import { EVENTS, ARIA } from '@ilo-org/utils';
+import videojs from 'video.js';
+
+/**
+ * The Video module which handles rendering field labels inline on a form.
+ *
+ * @class Video
+ */
+export default class Video {
+  /**
+   * Video 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;
+    this.controlsprefix = `${this.prefix}--video--controls`;
+
+    // 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} ReadMore A reference to the instance of the class
+   * @chainable
+   */
+  init() {
+    this.cacheDomReferences().start().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.VideoElement = this.element.querySelector(`.${this.prefix}--video--element`);
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Video A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} ReadMore A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    return this;
+  }
+
+  /**
+   * Starts up videojs
+   *
+   * @return {Object} Video A reference to the instance of the class
+   * @chainable
+   */
+  start() {
+    console.log('this.VideoElement', this.VideoElement);
+
+    this.player = videojs(this.VideoElement, {
+      autoplay: false,
+      controls: true,
+      preload: 'auto',
+      bigPlayButton: false,
+      controlBar: {
+        descriptionsButton: false,
+        playbackRateMenuButton: false,
+        chaptersButton: false,
+        audioTrackButton: false,
+        pictureInPictureToggle: false,
+        subsCapsButton: false,
+        seekToLive: false,
+        liveDisplay: false,
+      },
+      textTrackDisplay: false,
+      liveTracker: false,
+      errorDisplay: false,
+      textTrackSettings: false,
+      resizeManager: false,
+    });
+
+    return this;
+  }
+}

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

@@ -0,0 +1,7 @@
+import './index';
+
+const patternDefinition = require('./video.wingsuit.yml');
+
+export const wingsuit = {
+  patternDefinition,
+};

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

@@ -0,0 +1,17 @@
+{#
+  VIDEO COMPONENT
+#}
+
+<figure class="{{prefix}}--video" data-prefix="{{prefix}}">
+  <div class="{{prefix}}--video--wrapper">
+    {% include "@components/video/videoplayer.twig" with {
+      alt: alt,
+      controls: video.controls,
+      prefix: prefix,
+      src: video.src,
+      tracks: video.tracks,
+      url: url
+    } %}
+  </div>
+  <figcaption class="{{prefix}}--video--caption">{{caption}}</figcaption>
+</figure>

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

@@ -0,0 +1,44 @@
+video:
+  use: '@components/video/video.twig'
+  label: Video
+  description: A component for displaying a video, source from either a server or YouTube.
+  fields:
+    alt:
+      type: string
+      label: Alt
+      description: alt text for the image
+      required: true
+      preview: 'My alt text'
+    caption:
+      type: string
+      label: Caption
+      description: string
+      preview: 'my image caption'
+    url:
+      type: object
+      label: URL
+      description: The image url(s), and at which breakpoint each should be displayed.
+      required: true
+      preview:
+        - breakpoint: 0
+          src: 'https://place-hold.it/400x300?text=SmallBreakpointImage'
+        - breakpoint: 800
+          src: 'https://place-hold.it/800x600?text=MediumBreakpointImage'
+        - breakpoint: 1200
+          src: 'https://place-hold.it/1200x900?text=LargeBreakpointImage'
+        - breakpoint: 1440
+          src: 'https://place-hold.it/1600x1200?text=LargestBreakpointImage'
+    video:
+      type: object
+      label: Video
+      description: video player settings
+      required: true
+      preview:
+        controls:
+            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/patterns/components/video/videoplayer.twig

@@ -0,0 +1,10 @@
+{#
+  VIDEO PLAYER SUB-COMPONENT
+#}
+{% set poster = url|last %}
+<div class="{{prefix}}--videoplayer" data-loadcomponent="Video" data-prefix="{{prefix}}"">
+    <video class="{{prefix}}--video--element" poster="{{poster.src}}">
+      <source src="{{src}}" />
+    </video>
+</div>
+

package/src/tokens/exports/_colors.scss

@@ -0,0 +1,7 @@
+@use "@ilo-org/themes/build/scss/tokens" as *;
+
+@each $color, $value in $brand {
+  :export {
+    #{$color}: $value;
+  }
+}