@ilo-org/twig 0.0.1

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

@@ -0,0 +1,72 @@
+pagination:
+  use: '@components/pagination/pagination.twig'
+  label: Pagination
+  description: The Pagination component presents a dismissible alert.
+  fields:
+    currentPage:
+      type: numeric
+      label: Current page
+      description: current page number that the user is on, zero-indexed
+      required: true
+      preview: 0
+    firstPageUrl:
+      type: string
+      label: First Page link
+      description: Link to the first page
+      required: true
+      preview: 'http://www.google.com?s=first'
+    firstPageTitle:
+      type: string
+      label: First Page Title
+      description: Title label for the first page
+      required: true
+      preview: 'First'
+    lastPageUrl:
+      type: string
+      label: Last Page link
+      description: Link to the last page
+      required: true
+      preview: 'http://www.google.com?s=last'
+    lastPageTitle:
+      type: string
+      label: Last Page Title
+      description: Title label for the last page
+      required: true
+      preview: 'Last'
+    nextPageUrl:
+      type: string
+      label: Next Page link
+      description: Link to the next page
+      required: true
+      preview: 'http://www.google.com?s=next'
+    nextPageTitle:
+      type: string
+      label: Next Page Title
+      description: Title label for the next page
+      required: true
+      preview: 'Next'
+    prevPageUrl:
+      type: string
+      label: Prev Page link
+      description: Link to the prev page
+      required: true
+      preview: 'http://www.google.com?s=prev'
+    prevPageTitle:
+      type: string
+      label: Prev Page Title
+      description: Title label for the prev page
+      required: true
+      preview: 'Previous'
+    pageCountPreposition:
+      type: string
+      label: Page Count Preposition
+      description: Linking word for the page count
+      required: true
+      preview: 'of'
+    totalPages:
+      type: numeric
+      label: Total Pages
+      description: The number of total pages
+      required: true
+      preview: 8
+  visibility: storybook

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

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

package/src/patterns/components/polyfill/polyfill.twig

@@ -0,0 +1,10 @@
+{#
+  POLYFILL COMPONENT
+
+  This component is specifically to make this polyfill work correctly in Wingsuit. To use this in the context of Drupal, Wordpress, etc, consider using the approach documented at https://github.com/GoogleChromeLabs/container-query-polyfill
+#}
+<script>
+  if (!("container" in document.documentElement.style)) {
+    import("https://unpkg.com/container-query-polyfill@^0.2.0");
+  }
+</script>

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

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

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

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

package/src/patterns/components/profile/profile.twig

@@ -0,0 +1,18 @@
+{#
+  PROFILE COMPONENT
+#}
+<figure class="storybook {{prefix}}--profile">
+  <img class="{{prefix}}--profile--avatar" src="{{avatar}}" alt="Avatar for {{name}}">
+  <figcaption class="{{prefix}}--profile--contents">
+    <span class="{{prefix}}--profile--name id">{{name}}</span>
+    {% if role %}
+    <span class="{{prefix}}--profile--role id">{{role}}</span>
+    {% endif %}
+    {% if description %}
+    <p class="{{prefix}}--profile--description info">{{description}}</p>
+    {% endif %}
+    {% if link and link.url and link.label %}
+    <a class="{{prefix}}--profile--link info" href="{{link.url}}"><span>{{link.label}}</span></a>
+    {% endif %}
+  </figcaption>
+</figure>

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

@@ -0,0 +1,35 @@
+profile:
+  use: '@components/profile/profile.twig'
+  label: Profile
+  description: The Profile component is used to display information about a person.
+  fields:
+    avatar:
+      type: string
+      label: Avatar
+      description: The avatar for the profile
+      required: true
+      preview: "http://placekitten.com/128/128"
+    description:
+      type: string
+      label: Description
+      description: An optional plain-text description (e.g. a short bio)
+      preview: "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years."
+    link:
+      type: object
+      label: Link
+      description: An optional url and label for a link associated with the profile
+      preview:
+        label: "Optional Link"
+        url: "http://www.google.com"
+    name:
+      type: string
+      label: Name
+      description: The name of the person associated with the profile
+      preview: 'Firstname Lastname'
+      required: true
+    role:
+      type: string
+      label: Role
+      description: An optional plain-text field indicating the person's role in the organization
+      preview: 'Senior Media Strategist'
+  visibility: storybook

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

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

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

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

package/src/patterns/components/readmore/readmore.js

@@ -0,0 +1,119 @@
+import { getUpdatedItems, EVENTS, ARIA } from '@ilo-org/utils';
+
+/**
+ * The ReadMore module which handles rendering field labels inline on a form.
+ *
+ * @class ReadMore
+ */
+export default class ReadMore {
+  /**
+   * ReadMore 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;
+
+    // set some values
+    this.openclass = `${this.prefix}--read-more--open`;
+    this.buttonopenclass = `${this.prefix}--read-more--button--open`;
+
+    // grab our HTML text to swap
+    this.fulltext = this.element.dataset.fulltext;
+
+    // cache the excerpt
+    this.excerpt = this.element.dataset.excerpt;
+
+    // grab out button labels to swap
+    this.buttonlabel = {
+      closed: this.element.dataset.closed,
+      opened: this.element.dataset.opened,
+    };
+
+    // 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}
+     */
+    this.ReadMoreButton = this.element.querySelector(`.${this.prefix}--read-more--button`);
+    this.RichText = this.element.querySelector(`.${this.prefix}--richtext`);
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} ReadMore 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} ReadMore A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.ReadMoreButton.addEventListener(EVENTS.CLICK, () => this.onClick());
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction with the ReadMore button
+   *
+   * @return {Object} ReadMore A reference to the instance of the class
+   * @chainable
+   */
+  onClick() {
+    if (this.element.classList.contains(this.openclass)) {
+      this.RichText.innerHTML = this.excerpt;
+      this.ReadMoreButton.innerHTML = this.buttonlabel.closed;
+    } else {
+      this.RichText.innerHTML = this.fulltext;
+      this.ReadMoreButton.innerHTML = this.buttonlabel.opened;
+    }
+    this.element.classList.toggle(this.openclass);
+    this.ReadMoreButton.classList.toggle(this.buttonopenclass);
+
+    return this;
+  }
+}

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

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

package/src/patterns/components/readmore/readmore.twig

@@ -0,0 +1,16 @@
+{#
+  READ MORE COMPONENT
+#}
+{% set content = excerpt %}
+{% set btnlabel = buttonlabel.closed %}
+{% if openatstart is defined and openatstart == 'true' %}
+  {% set content = fulltext %}
+  {% set btnlabel = buttonlabel.opened %}
+{% endif %}
+
+<div class="{{prefix}}--read-more" data-excerpt="{{excerpt|raw}}" data-fulltext="{{fulltext|raw}}" data-closed="{{buttonlabel.closed}}" data-opened="{{buttonlabel.opened}}" data-loadcomponent="ReadMore" data-prefix="{{prefix}}">
+  {% include "@components/richtext/richtext.twig" with {
+    content: content,
+  } %}
+  <button class="{{prefix}}--read-more--button">{{btnlabel}}</button>
+</div>

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

@@ -0,0 +1,32 @@
+readmore:
+  use: '@components/readmore/readmore.twig'
+  label: Read More
+  description: A component for displaying rich text as entered in a WYSIWYG editor.
+  fields:
+    buttonlabel:
+      type: object
+      label: Button Label
+      description: labels for the two states of button
+      required: true
+      preview:
+        closed: Read More
+        opened: Close
+    excerpt:
+      type: string
+      label: Excerpt
+      description: HTML content
+      preview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+      required: true
+    fulltext:
+      type: string
+      label: Full Text
+      description: HTML content
+      preview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+      required: true
+    openatstart:
+      type: boolean
+      label: Open At Start
+      description: should the read more be open at page load?
+      preview: false
+      required: true
+  visibility: storybook

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

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

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

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

package/src/patterns/components/richtext/richtext.twig

@@ -0,0 +1,6 @@
+{#
+  RICH TEXT COMPONENT
+#}
+<div class="{{prefix}}--richtext">
+  {{content|raw}}
+</div>

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

@@ -0,0 +1,12 @@
+richtext:
+  use: '@components/richtext/richtext.twig'
+  label: Rich Text
+  description: A component for displaying rich text as entered in a WYSIWYG editor.
+  fields:
+    content:
+      type: string
+      label: Content
+      description: HTML content
+      preview: "<h1>Apollo 11</h1><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a> and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href='http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)'>Michael Collins</a>, piloted the <a href='http://en.wikipedia.org/wiki/Apollo_Command/Service_Module'>command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth. <figure><img alt='placeholder image' class='right' src='https://place-hold.it/400x300?text=Placeholder Image'><figcaption>The caption for this image</figcaption></figure></p><h2>Broadcasting and <em>quotes</em> <a id='quotes' name='quotes'></a></h2><p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p><blockquote><p>One small step for [a] man, one giant leap for mankind</p><cite>Neil Armstrong</cite></blockquote><h2>Technical details <a id='tech-details' name='tech-details'></a></h2><p>Launched by a <strong>Saturn V</strong> rocket from <a href='http://en.wikipedia.org/wiki/Kennedy_Space_Center'>Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href='http://en.wikipedia.org/wiki/NASA'>NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p><ol><li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li><li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li><li><strong>Lunar Module</strong> for landing on the Moon.</li></ol><p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href='http://en.wikipedia.org/wiki/Mare_Tranquillitatis'>Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href='http://en.wikipedia.org/wiki/Pacific_Ocean'>Pacific Ocean</a> on July 24.</p><hr><p><small>Source: <a href='http://en.wikipedia.org/wiki/Apollo_11'>Wikipedia.org</a></small></p>"
+      required: true
+  visibility: storybook

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

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

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

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

package/src/patterns/components/searchfield/searchfield.twig

@@ -0,0 +1,7 @@
+{#
+  SEARCH FIELD COMPONENT
+#}
+<form class="{{prefix}}--searchfield{% if input.label %} haslabel{% endif %}" action="{{action}}">
+  {% include '@components/form/input.twig' with input %}
+  <input class="{{prefix}}--searchfield--button" type="submit" />
+</form>

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

@@ -0,0 +1,22 @@
+searchfield:
+  use: '@components/searchfield/searchfield.twig'
+  label: Search Field
+  description: A component for displaying a search field.
+  fields:
+    action:
+      type: string
+      label: action
+      description: The form's action attribute
+      preview: "http://www.ilo.org"
+      required: false
+    input:
+      type: object
+      label: input
+      description: The search field input's attributes
+      preview:
+        label: "Search Field Label"
+        helper: "The search field's helper text"
+        name: "text"
+        placeholder: "Search Field"
+        type: "text"
+  visibility: storybook

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

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

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

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