@ilo-org/twig 0.0.1

package/src/patterns/components/loading/loading.js

@@ -0,0 +1,102 @@
+import { EVENTS, ARIA } from '@ilo-org/utils';
+
+/**
+ * The Loading module which handles rendering field labels inline on a form.
+ *
+ * To use this, you'll need to have the Javascript that's making the API call send custom events equal to
+ * the constants EVENTS.ITEMSLOADED and EVENTS.ITEMSLOADING to the document. Send EVENTS.ITEMSLOADING when the  * API call is made, and EVENTS.ITEMSLOADED when the data has successfully loaded.
+ *
+ * @class Loading
+ */
+export default class Loading {
+  /**
+   * Loading 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}--loading`;
+
+    // set some values
+    this.status = 'idle';
+
+    // 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} Loading A reference to the instance of the class
+   * @chainable
+   */
+  init() {
+    this.setupHandlers().enable();
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Loading A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.LoadingHandler = this.loading.bind(this);
+    this.LoadedHandler = this.loaded.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Loading A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    document.addEventListener(EVENTS.ITEMSLOADING, () => this.LoadingHandler);
+    document.addEventListener(EVENTS.ITEMSLOADED, () => this.LoadedHandler);
+
+    return this;
+  }
+
+  /**
+   * Items are loading
+   *
+   * @return {Object} Loading A reference to the instance of the class
+   * @chainable
+   */
+  loading() {
+    this.element.classList.remove(`${this.prefix}--idle`);
+    this.element.classList.add(`${this.prefix}--loading`);
+
+    return this;
+  }
+
+  /**
+   * What happens when the items have loaded
+   *
+   * @return {Object} Loading A reference to the instance of the class
+   * @chainable
+   */
+  loaded() {
+    this.element.classList.remove(`${this.prefix}--loading`);
+    this.element.classList.add(`${this.prefix}--loaded`);
+    this.element.querySelector(`.${this.prefix}--copy`).innerHTML =
+      this.element.dataset.loadedmessage;
+
+    return this;
+  }
+}

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

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

package/src/patterns/components/loading/loading.twig

@@ -0,0 +1,8 @@
+{#
+  LOADING COMPONENT
+#}
+<div class="storybook {{prefix}}--loading {{prefix}}--loading--{{size}} {{prefix}}--loading--{{status}}" role="alert" aria-live="assertive" data-loadcomponent="Loading" data-prefix="{{prefix}}">
+  {% if message or loadedmessage %}
+    <p class="{{prefix}}--loading--copy">{% if message and not status == 'loaded' %}{{message}}{% endif %}{% if loadedmessage and status == 'loaded' %}{{loadedmessage}}{% endif %}</p>
+  {% endif %}
+</div>

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

@@ -0,0 +1,37 @@
+loading:
+  use: '@components/loading/loading.twig'
+  label: Loading
+  description: The Loading component displays a loading state. (See Javascript comments in loading.js for how to use this with vanilla JS).
+  fields:
+    size:
+      type: select
+      label: Size
+      description: The size of the loader
+      required: true
+      options:
+        small: Small
+        large: Large
+      preview: 'large'
+    status:
+      type: select
+      label: Status
+      description: The status of the loading content
+      required: true
+      options:
+        idle: Idle
+        loading: Loading
+        loaded: Loaded
+      preview: 'loading'
+    message:
+      type: string
+      label: Message
+      description: The loading message
+      preview: 'Submitting'
+      required: true
+    loadedmessage:
+      type: string
+      label: LOaded Message
+      description: The loaded message
+      preview: 'Completed'
+      required: true
+  visibility: storybook

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

@@ -0,0 +1,7 @@
+/**
+ * Modal
+ */
+// Module template
+import './modal.twig';
+import './modal.wingsuit.yml';
+import './modal.behavior.js';

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

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

package/src/patterns/components/modal/modal.js

@@ -0,0 +1,130 @@
+import { EVENTS } from '@ilo-org/utils';
+
+/**
+ * The Modal module which handles control and display of a modal dialog
+ *
+ *
+ * @class Modal
+ */
+export default class Modal {
+  /**
+   * Modal 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} Modal 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}
+     */
+    this.OpenButton = this.element.querySelector(`.modal--open`);
+    this.CloseButton = this.element.querySelector(`.modal--close`);
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Modal A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.OpenButtonHandler = this.openButtonClick.bind(this);
+    this.CloseHandler = this.closeButtonClick.bind(this);
+    this.KeyPressHandler = this.keyPress.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Modal A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.OpenButton.addEventListener(EVENTS.CLICK, () => this.OpenButtonHandler());
+    this.CloseButton.addEventListener(EVENTS.CLICK, () => this.CloseHandler());
+
+    return this;
+  }
+
+  /**
+   * Actions performed on click of the open button
+   *
+   * @return {Object} Modal A reference to the instance of the class
+   * @chainable
+   */
+  openButtonClick() {
+    this.element.classList.add('show');
+    setTimeout(() => {
+      this.element.classList.add('fadein');
+    }, 125);
+    window.addEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
+
+    return this;
+  }
+
+  /**
+   * Actions performed on click of the close button
+   *
+   * @return {Object} Modal A reference to the instance of the class
+   * @chainable
+   */
+  closeButtonClick() {
+    this.element.classList.remove('fadeout');
+    setTimeout(() => {
+      this.element.classList.remove('show');
+    }, 125);
+    window.removeEventListener(EVENTS.KEY_DOWN, (e) => this.KeyPressHandler(e));
+
+    return this;
+  }
+
+  /**
+   * Actions performed on key press
+   *
+   * @return {Object} Modal A reference to the instance of the class
+   * @chainable
+   */
+  keyPress(e) {
+    if (e.key === 'Escape') {
+      this.closeButtonClick();
+    }
+
+    return this;
+  }
+}

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

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

package/src/patterns/components/modal/modal.twig

@@ -0,0 +1,18 @@
+{#
+  MODAL COMPONENT
+
+  The modal calls another Twig into it, and therefore passes `modaldata` into it. `modaldata` should contain the fields for the component in question, just as if the component were being used anywhere else.
+#}
+
+  {% if component != 'modal' %}
+  <div class="{{prefix}}--modal" data-loadcomponent="Modal" data-prefix="{{prefix}}">
+    {% include '@components/button/button.twig' with openbutton %}
+    <div class="{{prefix}}--modal--wrapper" aria-modal="true" role="alertdialog">
+      <div class="{{prefix}}--modal--background" role="presentation"></div>
+      <div class="{{prefix}}--modal--contents">
+        {% include '@components/' ~ component ~ '/' ~ component ~ '.twig' with modaldata %}
+        {% include '@components/button/button.twig' with closebutton %}
+      </div>
+    </div>
+  </div>
+  {% endif %}

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

@@ -0,0 +1,54 @@
+modal:
+  use: '@components/modal/modal.twig'
+  label: Modal
+  description: The Modal displays a div containing a button which is visible on page load. On click of this button, a modal dialog is opened which displays a semitransparent fixed-position background and the contents of the chosen component.
+  fields:
+    closebutton:
+      type: object
+      label: Closee Button
+      description: Label and settings for the "close" button
+      preview:
+        size: 'small'
+        type: 'secondary'
+        label: 'Close Button'
+        icon: close
+        iconPos: center
+        icononly: true
+        className: 'modal--close'
+      required: true
+    component:
+      type: string
+      label: Component
+      description: The component to add to this modal
+      preview: "image"
+      required: true
+    modaldata:
+      type: object
+      label: Modal Data
+      description: The fields needed to populate the component being displayed by the modal
+      preview:
+        alt: 'My alt text'
+        caption: 'my image caption'
+        credit: 'Photo: copyright 2022 Person S. Name'
+        url:
+            - 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'
+      required: true
+    openbutton:
+      type: object
+      label: Open Button
+      description: The label and settings for the button that will open the modal
+      preview:
+        size: 'large'
+        type: 'primary'
+        label: 'Open Button'
+        className: 'modal--open'
+        opensmodal: true
+      required: true
+  visibility: storybook

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

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

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

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

package/src/patterns/components/notification/notification.js

@@ -0,0 +1,95 @@
+import { EVENTS } from '@ilo-org/utils';
+
+/**
+ * The Notification module which handles rendering field labels inline on a form.
+ *
+ * @class Notification
+ */
+export default class Notification {
+  /**
+   * Notification 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.parent = this.element.parentElement;
+
+    // get the theme prefix
+    this.prefix = this.element.dataset.prefix;
+
+    // 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} Notification 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} Notification A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The button for toggling Read More state
+     * @type {Object}
+     */
+    this.CloseButton = this.element.querySelector(`.${this.prefix}--notification--close`);
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Notification A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.onClick = this.onClick.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Notification A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.CloseButton.addEventListener(EVENTS.CLICK, () => this.onClick());
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the Notification button
+   *
+   * @return {Object} Notification A reference to the instance of the class
+   * @chainable
+   */
+  onClick() {
+    this.parent.removeChild(this.element);
+
+    return this;
+  }
+}

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

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

package/src/patterns/components/notification/notification.twig

@@ -0,0 +1,18 @@
+{#
+  NOTIFICATION COMPONENT
+#}
+<div class="{{prefix}}--notification {{prefix}}--notification--{{placement}} icon icon--{{type}}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Notification" data-prefix="{{prefix}}">
+  <div class="{{prefix}}--notification--content">
+    <h2 class="{{prefix}}--notification--headline">{{headline}}</h2>
+    <p class="{{prefix}}--notification--copy">{{copy}}</p>
+    {% if timestamp %}
+      <time class="{{prefix}}--notification--date" datetime="{{timestamp.unix}}">{{timestamp.human}}</time>
+    {% endif %}
+    {% if cta %}
+      <a class="{{prefix}}--notification--cta {{prefix}}--button {{prefix}}--button--small {{prefix}}--button--secondary  --light" href="{{cta.url}}">
+        <span class="link__label">{{cta.label}}</span>
+      </a>
+    {% endif %}
+  </div>
+  <button class="{{prefix}}--notification--close" type="button"><span>{{closelabel}}</span></button>
+</div>

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

@@ -0,0 +1,58 @@
+notification:
+  use: '@components/notification/notification.twig'
+  label: Notification
+  description: The Notification component presents a dismissible alert.
+  fields:
+    closelabel:
+      type: string
+      label: Close Button Label
+      description: The label for the close button
+      required: true
+      preview: 'Close'
+    copy:
+      type: string
+      label: Copy
+      description: The text content of the notification
+      required: true
+      preview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+    cta:
+      type: object
+      label: Call To Action
+      description: an optional call to action button
+      preview:
+        label: Optional CTA
+        url: 'http://www.google.com'
+    headline:
+      type: string
+      label: Headline
+      description: The headline of the notification
+      required: true
+      preview: 'With CTA'
+    placement:
+      type: select
+      label: Placement
+      description: The placement of the notification
+      required: true
+      options:
+        inline: Inline
+        dialog: Dialog
+      preview: 'dialog'
+    type:
+      type: select
+      label: Type
+      description: What kind of notification is it?
+      required: true
+      options:
+        error: Error
+        info: Info
+        success: Success
+        warning: Warning
+      preview: 'info'
+    timestamp:
+      type: object
+      label: Timestamp
+      description: an optional date object, with human-readable and unix timestamps
+      preview:
+        human: Dec 7, 2022
+        unix: 1670389200
+  visibility: storybook

package/src/patterns/components/pagination/Pagination.stories.jsx

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

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

@@ -0,0 +1,6 @@
+/**
+ * Pagination
+ */
+// Module template
+import './pagination.twig';
+import './pagination.wingsuit.yml';

package/src/patterns/components/pagination/pagination.twig

@@ -0,0 +1,48 @@
+{#
+  PAGINATION COMPONENT
+#}
+<div class="{{prefix}}--pagination icon icon--{{type}}">
+  <div class="{{prefix}}--pagination--previous-set">
+    <a
+      class="{{prefix}}--pagination--first-page {{prefix}}--pagination--link {% if currentPage == 0 %}{{prefix}}--pagination--disable{% endif %}"
+      href="{{ firstPageUrl }}"
+      title="{{ firstPageTitle }}"
+    >
+      {{ firstPageTitle }}
+    </a>
+
+    <a
+      class="{{prefix}}--pagination--prev-page {{prefix}}--pagination--link {% if currentPage == 0 %}{{prefix}}--pagination--disable{% endif %}"
+      href="{{ prevPageUrl }}"
+      title="{{ prevPageTitle }}"
+    >
+      {{ prevPageTitle }}
+    </a>
+  </div>
+
+  <p class="{{prefix}}--pagination--page">
+    {% set currentPageZeroIndex = currentPage * 1 %}
+    {% set currentPageIndex = currentPageZeroIndex + 1 %}
+
+    <span>{{currentPageIndex}}</span> {{pageCountPreposition}}
+    <span>{{totalPages}}</span>
+  </p>
+
+  <div class="{{prefix}}--next-set">
+    <a
+      class="{{prefix}}--pagination--next-page {{prefix}}--pagination--link {% if currentPageIndex == totalPages %}{{prefix}}--pagination--disable{% endif %}"
+      href="{{ nextPageUrl }}"
+      title="{{ nextPageTitle }}"
+    >
+      {{ nextPageTitle }}
+    </a>
+
+    <a
+      class="{{prefix}}--pagination--last-page {{prefix}}--pagination--link {% if currentPageIndex == totalPages %}{{prefix}}--pagination--disable{% endif %}"
+      href="{{ lastPageUrl }}"
+      title="{{ lastPageTitle }}"
+    >
+      {{ lastPageTitle }}
+    </a>
+  </div>
+</div>