@ilo-org/twig 0.0.1

package/src/namespaces.js

@@ -0,0 +1,14 @@
+/**
+ * Global namespaces
+ */
+
+const path = require('path');
+
+const patterns = path.resolve(__dirname, 'patterns');
+
+module.exports = {
+  patterns: patterns,
+  components: path.resolve(patterns, 'components'),
+  tokens: path.resolve(__dirname, 'tokens'),
+  svgs: path.resolve(__dirname, 'svgs'),
+};

package/src/patterns/components/accordion/accordion-item.twig

@@ -0,0 +1,16 @@
+{#
+  ACCORDION ITEM COMPONENT
+#}
+{% set uid = "now"|date('Uv') %}
+<li class="{{prefix}}--accordion--item" id=" {{ id }}{{ uid }}">
+  <div class="ilo--h3">
+    <button class="{{prefix}}--accordion--button {{prefix}}--accordion--button--{{ size|default('small') }}" aria-expanded="{{ defaultExpanded }}" aria-controls="panel-{{ id }}{{ uid }}" id="button-{{ id }}{{ uid }}">
+    {{label}}
+    </button>
+  </div>
+  <div class="{{prefix}}--accordion--panel{% if defaultExpanded == 'true'%} {{prefix}}--accordion--panel--open{% endif %}" id="panel-{{ id }}{{ uid }}" aria-labelledby="button-{{ id }}{{ uid }}" role="region">
+    <div class="{{prefix}}--accordion--innerpanel">
+      {{content|raw}}
+    </div>
+  </div>
+</li>

package/src/patterns/components/accordion/accordion-item.wingsuit.yml

@@ -0,0 +1,30 @@
+accordion:
+  use: '@components/accordion/accordion-item.twig'
+  label: Accordion Item
+  description: A collapsible accordion item.
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The accordion item's heading.
+      preview:
+        faker: lorem.word
+    content:
+      type: text
+      label: Content
+      description: The accordion item's collapsed content.
+      preview:
+        faker: lorem.word
+    id:
+      type: text
+      label: ID
+      description: The accordion item's id.
+      preview:
+        faker: lorem.word
+    defaultExpanded:
+      type: text
+      label: Default Expanded
+      description: The accordion item loads in default expanded state.
+      preview:
+        faker: lorem.word
+  visibility: storybook

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

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

package/src/patterns/components/accordion/accordion.js

@@ -0,0 +1,178 @@
+import { getUpdatedItems, EVENTS, ARIA, MISC } from '@ilo-org/utils';
+
+/**
+ * The Accordion module which handles rendering field labels inline on a form.
+ *
+ * @class Accordion
+ */
+export default class Accordion {
+  /**
+   * Accordion 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.multipleExpanded = false;
+
+    // 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} Accordion A reference to the instance of the class
+   * @chainable
+   */
+  init() {
+    this.cacheDomReferences().setupHandlers().enable().evaluateAccordionHeights();
+
+    return this;
+  }
+
+  /**
+   * Find all necessary DOM elements used in the view and cache them
+   *
+   * @return {Object} Accordion A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The field that a user interacts with on a form
+     * @type {Object}
+     */
+    this.accordionItems = this.element.querySelectorAll('.ilo--accordion--item');
+    this.multipleExpanded = this.element.getAttribute('data-multipleexpanded') === 'true';
+    this.accordionPanels = this.element.querySelectorAll('.ilo--accordion--panel');
+    this.accordionButtons = this.element.querySelectorAll('.ilo--accordion--button');
+    console.log(this.multipleExpanded);
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Accordion A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.collapseSection = this.collapseSection.bind(this);
+    this.expandSection = this.expandSection.bind(this);
+    this.onClick = this.onClick.bind(this);
+    this.updateAccordionItems = this.updateAccordionItems.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Accordion A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    if (this.accordionButtons.length > 0) {
+      this.accordionButtons.forEach((button, i) => {
+        button.addEventListener(EVENTS.CLICK, (e) => this.onClick(e));
+      });
+    }
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the accordion button
+   *
+   * @return {Object} Accordion A reference to the instance of the class
+   * @chainable
+   */
+  onClick(e) {
+    this.updateAccordionItems(e.target);
+
+    return this;
+  }
+
+  /**
+   * Evaluate accordion panel heights
+   *
+   * @chainable
+   */
+  evaluateAccordionHeights() {
+    this.accordionPanels.forEach((item, i) => {
+      item.style.setProperty(
+        '--height',
+        item.querySelector('.ilo--accordion--innerpanel').scrollHeight + 'px'
+      );
+    });
+
+    return this;
+  }
+
+  /**
+   * Update accordion items based off of new statuses
+   *
+   * @chainable
+   */
+  updateAccordionItems(panelbutton) {
+    const panel = panelbutton
+      .closest('.ilo--accordion--item')
+      .querySelector('.ilo--accordion--panel');
+    const isopen = panel.classList.contains('ilo--accordion--panel--open');
+
+    if (!this.multipleExpanded) {
+      this.accordionPanels.forEach((item) => {
+        if (panel !== item) {
+          this.collapseSection(item);
+        }
+      });
+    }
+
+    if (!isopen) {
+      this.expandSection(panel);
+    } else {
+      this.collapseSection(panel);
+    }
+    panelbutton.blur();
+
+    return this;
+  }
+
+  /**
+   * Animates a panel collapse
+   *
+   * @param {HTMLElement} element - REQUIRED - the accordion panel to be collapsed
+   *
+   * @chainable
+   */
+  collapseSection(element) {
+    element.parentElement
+      .querySelector('.ilo--accordion--button')
+      .setAttribute(ARIA.EXPANDED, 'true');
+    element.setAttribute(ARIA.HIDDEN, 'false');
+    element.classList.remove('ilo--accordion--panel--open');
+  }
+
+  /**
+   * Animates a panel expansion
+   *
+   * @param {HTMLElement} element - REQUIRED - the accordion panel to be expanded
+   *
+   * @chainable
+   */
+  expandSection(element) {
+    element.parentElement
+      .querySelector('.ilo--accordion--button')
+      .setAttribute(ARIA.EXPANDED, 'false');
+    element.setAttribute(ARIA.HIDDEN, 'true');
+    element.classList.add('ilo--accordion--panel--open');
+  }
+}

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

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

package/src/patterns/components/accordion/accordion.twig

@@ -0,0 +1,17 @@
+{#
+  ACCORDION COMPONENT
+#}
+<ul class="{{prefix}}--accordion {{prefix}}--accordion--{{ size|default('small') }}" data-loadcomponent="Accordion" data-multipleexpanded="{{ allowMultipleExpanded|default(false) }}">
+    {% for item in items %}
+      {% include "@components/accordion/accordion-item.twig" with {
+        label: item.label,
+        content: item.content,
+        defaultExpanded: item.defaultExpanded,
+        size: size,
+        headingLevel: headingLevel,
+        id: item.id,
+        prefix: prefix
+      } only %}
+    {% endfor %}
+    </ul>
+</div>

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

@@ -0,0 +1,59 @@
+accordion:
+  use: '@components/accordion/accordion.twig'
+  label: Accordion
+  description: The accordion component allows the user to show and hide sections of
+    related content on a page. Click the accordions below to
+    expand/collapse the accordion content.
+  fields:
+    size:
+      type: select
+      label: Size
+      description: The size of the accordion.
+      required: false
+      options:
+        small: Small
+        large: Large
+      preview: small
+    allowMultipleExpanded:
+      type: string
+      label: Allow Multiple Expanded
+      description: Allow mutiple accordion items to be expandable at once.
+      preview: 'true'
+      required: false
+    items:
+      type: object
+      label: Items
+      description: The accordion items.
+      required: true
+      preview:
+        - label: label 1
+          content: "<p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p>"
+          id: item1
+          defaultExpanded: false
+        - label: label 2
+          content: "<p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p>"
+          id: item2
+          defaultExpanded: false
+  variants:
+    default:
+      label: Default
+      description: the default settings for the Accordion
+    expanded:
+      label: Expanded
+      description: The Accordion with panels opened on page load
+      fields:
+        items:
+          - label: label 1
+            content: "<p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p>"
+            id: item1
+            defaultExpanded: 'true'
+          - label: label 2
+            content: "<p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p>"
+            id: item2
+            defaultExpanded: 'true'
+    multiple:
+      label: Allow Multiple Expanded
+      description: The Accordion set to allow multiple panels to be expanded at once
+      fields:
+        allowMultipleExpanded: 'true'
+  visibility: storybook

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

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

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

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

package/src/patterns/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,93 @@
+import { EVENTS } from '@ilo-org/utils';
+
+/**
+ * The Breadcrumb module which handles rendering field labels inline on a form.
+ *
+ * @class Breadcrumb
+ */
+export default class Breadcrumb {
+  /**
+   * Breadcrumb 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;
+
+    // Initialize the view
+    this.init();
+  }
+
+  /**
+   * Initializes the view
+   *
+   * @return {Object} Breadcrumb A reference to the instance of the class
+   * @chainable
+   */
+  init() {
+    this.cacheDomReferences().setupHandlers().enable().onResize();
+
+    return this;
+  }
+
+  /**
+   * Find all necessary DOM elements used in the view and cache them
+   *
+   * @return {Object} Breadcrumb A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    this.breadcrumbs = this.element.querySelector('.ilo--breadcrumb--items');
+    this.breadcrumbwidth = this.breadcrumbs.offsetWidth;
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Breadcrumb A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.onResize = this.onResize.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Breadcrumb A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    window.addEventListener(EVENTS.RESIZE, (e) => this.onResize(e));
+
+    return this;
+  }
+
+  /**
+   * onResize interaction with the accordion button
+   *
+   * @return {Object} Breadcrumb A reference to the instance of the class
+   * @chainable
+   */
+  onResize(e) {
+    if (this.breadcrumbwidth > this.element.offsetWidth / 2) {
+      this.element.classList.add('contextmenu');
+    } else {
+      this.element.classList.remove('contextmenu');
+    }
+
+    return this;
+  }
+}

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

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

package/src/patterns/components/breadcrumb/breadcrumb.twig

@@ -0,0 +1,32 @@
+{#
+  BREADCRUMB COMPONENT
+#}
+{% set lastlink = links|last %}
+
+<nav class="{{prefix}}--breadcrumb{% if className %} {{className}}{% endif %}" data-prefix="{{prefix}}" data-loadcomponent="Breadcrumb">
+  <ol class="{{prefix}}--breadcrumb--items">
+    <li class="{{prefix}}--breadcrumb--item home">
+      <a class="{{prefix}}--breadcrumb--link" href="{{home.url}}">
+        <span class="{{prefix}}--breadcrumb--link--label">{{home.label}}</span>
+      </a>
+    </li>
+    <li class="{{prefix}}--breadcrumb--item--context">
+      <ul class="{{prefix}}--breadcrumb--items context--menu">
+        {% for link in links %}
+        {% if 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>
+          </a>
+        </li>
+        {% endif %}
+        {% endfor %}
+      </ul>
+    </li>
+    <li class="{{prefix}}--breadcrumb--item final">
+      <a class="{{prefix}}--breadcrumb--link" href="{{lastlink.url}}">
+        <span class="{{prefix}}--breadcrumb--link--label">{{lastlink.label}}</span>
+      </a>
+    </li>
+  </ol>
+</nav>

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

@@ -0,0 +1,35 @@
+breadcrumb:
+  use: '@components/breadcrumb/breadcrumb.twig'
+  label: Breadcrumb
+  description: A component for displaying links in a "breadcrumb" ux
+  fields:
+    home:
+      type: object
+      label: Home
+      description: url and label for link to site home page
+      required: true
+      preview:
+        label: "Home"
+        url: "/"
+    links:
+      type: object
+      label: Home
+      description: the links to display in the breadcrumb
+      required: true
+      preview:
+        - label: "Link One"
+          url: "/linkone"
+        - label: "Link Two"
+          url: "/linktwo"
+        - label: "Link Three"
+          url: "/linkthree"
+        - label: "Link Four"
+          url: "/linkfour"
+        - label: "Link Five"
+          url: "/linkfive"
+    className:
+      type: string
+      label: className
+      description: optional class name
+      preview: "storybook"
+  visibility: storybook

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

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

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

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

package/src/patterns/components/button/button.twig

@@ -0,0 +1,18 @@
+{#
+  BUTTON COMPONENT
+#}
+{% if url %}
+  <a class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPos}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target %}target="{{target}}" rel="noopener noreferrer"{% endif %} {% if disabled is defined and disabled == 'true' %}disabled{% endif %}>
+    <span class="link__label">{{label}}</span>
+    {% if icon %}
+      {% include '@components/icon/icon.twig' with {icon: icon} %}
+    {% endif %}
+  </a>
+{% else %}
+  <button class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPos}}{% endif %}{% if icononly %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %}type="{{kind}}"{% endif %}{% if opensmodal %} aria-haspopup="dialog"{% endif %} {% if disabled is defined and disabled == 'true' %}disabled{% endif %}>
+    <span class="button__label">{{label}}</span>
+    {% if icon %}
+      {% include '@components/icon/icon.twig' with {icon: icon} %}
+    {% endif %}
+  </button>
+{% endif %}

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

@@ -0,0 +1,104 @@
+button:
+  use: '@components/button/button.twig'
+  label: Button
+  description: A button or a link styled like a button.
+  fields:
+    size:
+      type: select
+      label: Size
+      description: The size of the button.
+      required: true
+      options:
+        small: Small
+        medium: Medium
+        large: Large
+      preview: 'large'
+    type:
+      type: select
+      label: Type
+      description: The type of button.
+      required: true
+      options:
+        primary: Primary
+        secondary: Secondary
+        tertiary: Tertiary
+        alert: Alert
+        icononly: Icon Only
+      preview: 'primary'
+    disabled:
+      type: select
+      label: Disabled
+      description: The disabled state of the button.
+      required: false
+      options:
+        true: 'true'
+        false: false
+      preview: 'false'
+    label:
+      type: string
+      label: Label
+      description: The label for the button
+      preview: 'Button'
+      required: true
+    url:
+      type: string
+      label: url
+      description: The url for the button if it's a link
+      preview: ''
+      required: false
+    target:
+      type: string
+      label: target
+      description: Should the button open in a new tab? If so, include the name of the tab. Only evaluated if the url field is populated.
+      preview: 'true'
+      required: false
+    kind:
+      type: select
+      label: Kind
+      description: What kind of functionality does the button have?
+      required: false
+      options:
+        button: button
+        reset: reset
+        submit: submit
+      preview: 'button'
+    icon:
+      type: string
+      label: Icon
+      description: optional icon to include in button
+      preview: false
+      required: false
+    iconPosition:
+      type: select
+      label: Icon Position
+      description: if there's an icon, where is it in the button?
+      fields:
+        left: left
+        right: right
+      preview: left
+      required: false
+    icononly:
+      type: select
+      label: Icon Only
+      description: Is this an icon-only button?
+      fields:
+        true: 'true'
+        false: false
+      preview: false
+      required: false
+    className:
+      type: string
+      label: Class name
+      description: optional class name
+      preview: 'optionalclass'
+      required: false
+    opensmodal:
+      type: select
+      label: Opens Modal
+      description: Does this button trigger open a modal?
+      fields:
+        true: 'true'
+        false: false
+      preview: false
+      required: false
+  visibility: storybook

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

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