@ilo-org/twig 0.0.1

package/src/patterns/components/callout/callout.behaviors.js

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

package/src/patterns/components/callout/callout.js

@@ -0,0 +1,121 @@
+import { EVENTS } from '@ilo-org/utils';
+
+/**
+ * The Callout module which handles rendering field labels inline on a form.
+ *
+ * @class Callout
+ */
+export default class Callout {
+  /**
+   * Callout 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.toggleLabel = '';
+
+    // 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} Callout 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} Callout A reference to the instance of the class
+   * @chainable
+   */
+  cacheDomReferences() {
+    /**
+     * The field that a user interacts with on a form
+     * @type {Object}
+     */
+    this.toggle = this.element.querySelector('.ilo--callout--toggle');
+    this.toggleOpen = this.element.classList.value.includes('ilo--callout--open');
+    this.toggleLabel = this.toggle.querySelector('.ilo--callout--button-text');
+    this.toggleLabelOpen = this.toggle.getAttribute('data-open');
+    this.toggleLabelClosed = this.toggle.getAttribute('data-closed');
+    this.button = this.element.querySelectorAll('.ilo--button');
+
+    return this;
+  }
+
+  /**
+   * Bind event handlers with the proper context of `this`.
+   *
+   * @return {Object} Callout A reference to the current instance of the class
+   * @chainable
+   */
+  setupHandlers() {
+    this.onToggle = this.handleToggle.bind(this);
+    this.onClick = this.handleClick.bind(this);
+
+    return this;
+  }
+
+  /**
+   * Creates event listeners to enable interaction with view
+   *
+   * @return {Object} Callout A reference to the instance of the class
+   * @chainable
+   */
+  enable() {
+    this.toggle.addEventListener(EVENTS.CLICK, onToggle);
+    this.button.addEventListener(EVENTS.CLICK, onClick);
+
+    return this;
+  }
+
+  /**
+   * Onclick interaction
+   *
+   * @return {Object} Callout A reference to the instance of the class
+   * @chainable
+   */
+  handleClick(e) {
+    // callback of sorts
+    console.log('button clicked');
+
+    return this;
+  }
+
+  /**
+   * handleToggle
+   *
+   * toggle the collapse state of the callout
+   *
+   * @param {Object} e - Event
+   * @return {Object} Callout A reference to the instance of the class
+   * @chainable
+   */
+  handleToggle(e) {
+    e.preventDefault();
+    this.toggleOpen = !this.toggleOpen;
+
+    const label = this.toggleOpen ? this.toggleLabelOpen : this.toggleLabelClosed;
+
+    this.element.classList.toggle('ilo--toggle--open');
+    this.toggleLabel.innerText = label;
+
+    return this;
+  }
+}

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

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

package/src/patterns/components/callout/callout.twig

@@ -0,0 +1,30 @@
+{#
+  CALLOUT COMPONENT
+#}
+<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isOpen %} {{prefix}}--callout--open {% endif %}" data-loadcomponent="Callout" >
+  <div class="{{prefix}}--callout--sidebar">
+    <span class="{{prefix}}--callout--icon icon icon--{{alert}}"></span>
+  </div>
+  <div class="{{prefix}}--callout--content">
+    <div class="{{prefix}}--callout--header">
+      <h5 class="{{prefix}}--callout--title">{{ title }}</h5>
+      {% if isCollapsible %}
+      <button class="{{prefix}}--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
+        <span class="{{prefix}}--callout--button-text">{% if isOpen %}{{ toggleOpenLabel }}{% else %}{{ toggleClosedLabel }}{% endif %}</span>
+        <span class="{{prefix}}--callout--toggle--icon" role="presentation"></span>
+      </button>
+      {% endif %}
+    </div>
+    {{ content }}
+    {% if buttonLabel %}
+      <div class="{{prefix}}--callout--footer">
+        <button
+          class="{{prefix}}--button {{prefix}}--button--small {{prefix}}--button--tertiary"
+          type="button"
+        >
+          {{ buttonLabel }}
+        </button>
+      </div>
+    {% endif %}
+  </div>
+</div>

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

@@ -0,0 +1,66 @@
+callout:
+  use: '@components/callout/callout.twig'
+  label: Callout
+  description: A callout alert
+  fields:
+    buttonLabel:
+      type: string
+      label: Button Label
+      description: The label for the optional button
+      preview: "Optional Button Label"
+      required: false
+    content:
+      type: text
+      label: Content
+      description: The callout's content
+      preview:
+        faker: lorem.word
+    isCollapsible:
+      type: select
+      label: Is Collapsible
+      description: Whether or not the callout is collapsible
+      required: false
+      options:
+        true: True
+        false: False
+      preview: false
+    isOpen:
+      type: select
+      label: Is Open
+      description: Whether or not a collapsible callout is open
+      required: false
+      options:
+        true: True
+        false: False
+      preview: true
+    title:
+      type: string
+      label: Notification Title
+      description: Title for the notification
+      preview: "Optional Title"
+      required: false
+    toggleOpenLabel:
+      type: string
+      label: Open Label for the collapse toggle
+      description: If there is a collapse toggle, this is the label
+      preview: "More"
+      required: false
+    toggleClosedLabel:
+      type: string
+      label: Closed Label for the collapse toggle
+      description: If there is a collapse toggle, this is the label
+      preview: "Less"
+      required: false
+  settings:
+    alert:
+      type: select
+      label: Alert
+      description: Alert type
+      required: true
+      options:
+        info: Info
+        error: Error
+        success: Success
+        warning: Warning
+      preview: 'info'
+  visibility: storybook

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

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

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

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

package/src/patterns/components/card/card.twig

@@ -0,0 +1,98 @@
+{#
+  CARD COMPONENT
+#}
+<div class="{{prefix}}--card {{prefix}}--card--{{theme}} {{prefix}}--card--{{variant}}{% if cornercut %} {{prefix}}--card--{{cornercut}}{% endif %}{% if color %} {{prefix}}--card--{{color}}{% endif %}{% if alignment %} {{prefix}}--card--{{alignment}}{% endif %} {% if link %} {{prefix}}--card--action{% endif %}">
+  {% if link %}
+    <a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}"></a>
+  {% endif %}
+  <div class="{{prefix}}--card--wrap">
+    {% if image %}
+      <div class="{{prefix}}--card--image--wrapper"><picture><img class="{{prefix}}--card--image" src="{{image}}" alt="{{title}}"></picture></div>
+    {% endif %}
+    <div class="{{prefix}}--card--content">
+      {% if eyebrow %}
+        <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
+      {% endif %}
+      {% if title %}
+        <h5 class="{{prefix}}--card--title">{{title}}</h5>
+      {% endif %}
+      {% if intro %}
+        <p class="{{prefix}}--card--intro">{{intro}}</p>
+      {% endif %}
+      {% if date %}
+        <time class="{{prefix}}--card--date" datetime="{{timestamp.unix}}">{{timestamp.human}}</time>
+      {% endif %}
+      {% if eventdetails %}
+        <p class="{{prefix}}--card--event-date">{{eventdetails}}</p>
+      {% endif %}
+      {% if profile %}
+        {% include "@components/profile/profile.twig" with {
+          avatar: profile.avatar,
+          description: profile.description,
+          link: profile.link,
+          name: profile.name,
+          role: profile.role,
+          prefix: prefix,
+        } only %}
+      {% endif %}
+      {% if list %}
+        {% include "@components/list/list.twig" with {
+          title: list.title,
+          ordered: list.ordered,
+          alignment: list.alignment,
+          items: list.items,
+          prefix: prefix,
+        } only %}
+      {% endif %}
+      {% if cta %}
+        <a class="{{prefix}}--card--cta {{prefix}}--button {{prefix}}--button--small {{prefix}}--button--primary" href="{{cta.url}}">
+          <span class="link__label">{{cta.label}}</span>
+        </a>
+      {% endif %}
+      {% if source %}
+        {% include "@components/link/link.twig" with {
+          theme: theme,
+          url: source.url,
+          label: source.label,
+          prefix: prefix
+        } %}
+      {% endif %}
+      {% if linklist %}
+        {% include "@components/linklist/linklist.twig" with {
+          headline: linklist.headline,
+          linkgroup: linklist.linkgroup,
+          prefix: prefix,
+          theme: theme
+        } only %}
+      {% endif %}
+      {% if dataset %}
+        {% if dataset.content %}
+          {% for item in dataset.content.items %}
+            <p class="{{prefix}}--card--data--content-label">{{ item.label }}</p>
+            <p class="{{prefix}}--card--data--content-copy">{{ item.copy }}</p>
+          {% endfor %}
+        {% endif %}
+        {% if dataset.files %}
+          <div class="{{prefix}}--card--data--content-files">
+            <p class="{{prefix}}--card--data--content-label">{{ dataset.files.headline }}</p>
+            {% for item in dataset.files.items %}
+              <a class="{{prefix}}--card--data--file {{prefix}}--button {{prefix}}--button--primary {{prefix}}--button--small" href="{{item.url}}"><span class="button__label" download>{{ item.label }}</span></a>
+            {% endfor %}
+          </div>
+        {% endif %}
+        {% if dataset.links %}
+          <div class="{{prefix}}--card--data--content-links">
+            {% for item in dataset.links.items %}
+              {% include "@components/link/link.twig" with {
+                theme: theme,
+                url: item.url,
+                label: item.label,
+                prefix: prefix
+              } %} <span>&nbsp;</span>
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endif %}
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,300 @@
+card:
+  use: '@components/card/card.twig'
+  label: Card
+  description: The Card presents an image banner.
+  fields:
+    title:
+      type: string
+      label: Title
+      description: Title field
+      preview: Lorem ipsum
+    intro:
+      type: string
+      label: Intro
+      description: Intro copy text
+      preview: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy text
+      preview: "Eyebrow"
+    date:
+      type: object
+      label: Date
+      description: Date copy text
+      preview:
+        human: 20 September 2022
+        unix: 1670389200
+    eventdetails:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy text
+      preview: ""
+    profile:
+      type: object
+      label: Profile
+      description: Profile to embed in the card
+      preview:
+    list:
+      type: object
+      label: List
+      description: List to embed in the card
+      preview:
+    link:
+      type: string
+      label: Link
+      description: Link for clickable cards
+      preview: "https://www.google.com/"
+    cta:
+      type: object
+      label: CTA
+      description: Items for clickable CTA button
+      preview:
+    image:
+      type: string
+      label: Image
+      description: The image for the card
+      preview: "http://placekitten.com/600/300"
+    source:
+      type: object
+      label: Source
+      description: Source link for stat cards
+      preview:
+    linklist:
+      type: object
+      label: Link List
+      description: Multi-link list
+      preview:
+    dataset:
+      type: object
+      label: Data set
+      description: This is a series of items, headline and copy, to include on the card
+      preview:
+    color:
+      type: string
+      label: Color
+      description: Color of the stat cards, options are turquoise, green, yellow, or blue
+      preview: 'blue'
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: The theme type for the hero
+      required: false
+      preview: 'dark'
+      options:
+        dark: Dark
+        light: Light
+    types:
+      type: select
+      label: Types
+      description: The type of hero
+      required: false
+      preview: 'graphic'
+      options:
+        graphic: graphic
+    cornercut:
+      type: select
+      label: Corner cut
+      description: Setting for whether the card has a cut corner
+      preview: cornercut
+      options:
+        cornercut: Corner cut
+        corner: Corner
+    alignment:
+      type: select
+      label: Alignment
+      description: Set whether card (multilink) image is right aligned or left aligned
+      preview: left
+      options:
+        left: Left
+        right: right
+  variants:
+    default:
+      label: Default
+      description: the default settings for the Card
+    graphic:
+      label: Graphic Text Card
+      description: The graphic Card
+      fields:
+        title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
+        intro: ""
+        eyebrow: Eyebrow title
+        date:
+          human: 20 September 2022
+          unix: 1670389200
+        link: "https://www.google.com/search?q=graphic"
+        profile:
+          avatar: "https://placekitten.com/128/128"
+          description: "Firstname Lastname is the Senior Media Strategist. He has been with ILO for eight years."
+          link: 
+            - label: "Optional Link"
+              url: "https://www.google.com"
+          name: "Firstname Lastname"
+          role: "Senior Media Strategist"
+        cta: ""
+        eventdetails: ""
+    stat:
+      label: Stat Card
+      description: The stat Card
+      settings:
+        theme: light
+      fields:
+        title: "Date headline"
+        image: ""
+        intro: "Data title - Lorem ipsum dolor sit amet consectetur"
+        eyebrow: ""
+        date:
+          human: ""
+          unix: 1670389200
+        link: ""
+        profile: ""
+        eventdetails: ""
+        cta: ""
+        source: 
+          label: "Source: lorem ipsum dolor sit amet, 2020"
+          url: "https://www.google.com/search?q=stat"
+        color: blue
+    multilink:
+      label: Multilink Card
+      description: The multilink Card
+      settings:
+        theme: light
+      fields:
+        title: "Multi-link card - right aligned image, wide option"
+        image: "http://placekitten.com/475/267"
+        intro: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas ipsum dolor sit amet consectetur adipiscing elit. Lobortis egestas lacus."
+        eyebrow: ""
+        date:
+          human: ""
+          unix: 1670389200
+        link: ""
+        profile: ""
+        eventdetails: ""
+        cta: ""
+        source: ""
+        linklist:
+          headline: ""
+          linkgroup:
+            - headline: ""
+              links:
+                - label: Link One
+                  url: 'http://www.google.com'
+                - label: Link Two
+                  url: 'http://www.google.com'
+                - label: Link Three
+                  url: 'http://www.google.com'
+    graphicpromo:
+      label: Graphic Promo Card
+      description: The graphic promo Card
+      fields:
+        title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
+        image: ""
+        intro: "We advance social justice and promote decent work by setting labour standards, developing policies and devising programmes."
+        eyebrow: ""
+        date:
+          human: ""
+          unix: 1670389200
+        link: "https://www.google.com/search?q=graphic-promo"
+        profile: ""
+        eventdetails: ""
+        cta: 
+          label: "Discover our unique mission"
+          url: "https://www.google.com/search?q=button"
+    feature:
+      label: Feature Card
+      description: The Feature Card
+      fields:
+        title: "Vertical info card descriptive headline text"
+        intro: ""
+        eyebrow: Eyebrow title
+        date:
+          human: Date
+          unix: 1670389200
+        link: "https://www.google.com/search?q=graphic"
+        image: "http://placekitten.com/412/232"
+        profile:
+        eventdetails: ""
+    detail:
+      label: Detail Card
+      description: The Detail Card
+      fields:
+        title: "Horizontal info card descriptive headline text"
+        intro: "This ILO flagship report details the effects of the COVID-19 crisis on the world of work. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu auctor tusrpis, this is 200 characters."
+        eyebrow: Eyebrow title
+        date:
+          human: 00 month 0000
+          unix: 1670389200
+        link: "https://www.google.com/search?q=detail"
+        # image: "http://placekitten.com/296/196"
+        image: "https://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_856513.jpg"
+        profile:
+        eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET  |  Egypt"
+    factlist:
+      label: Fact List Card
+      description: The Fact List Card
+      fields:
+        title: "Title of fast fact list"
+        intro: ""
+        eyebrow: ""
+        date:
+          human: ""
+          unix: 1670389200
+        link: ""
+        image: ""
+        profile: ""
+        eventdetails: ""
+        cta: ""
+        list: 
+          title: ""
+          settings:
+            - ordered: unordered
+            - alignment: default
+          items: 
+            - content: "Wipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor."
+              id: "list1"
+            - content: "Nut labore et dolore magna sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+              id: "list2"
+    data:
+      label: Data Card
+      description: The Data Card
+      fields:
+        title: ""
+        image: "https://placekitten.com/205/179"
+        intro: ""
+        eyebrow: "Event details"
+        date:
+          human: ""
+          unix: 1670389200
+        link: ""
+        profile: ""
+        eventdetails: ""
+        cta: ""
+        dataset: 
+          content: 
+            items: 
+              - label: Date
+                copy: Publication date
+              - label: Event type
+                copy: Event location
+          files:
+            headline: Files
+            items: 
+              - label: File/size MB 1
+                url: "https://www.google.com/search?q=file1"
+              - label: File/size MB 2
+                url: "https://www.google.com/search?q=file2"
+              - label: File/size MB 3
+                url: "https://www.google.com/search?q=file3"
+          links:
+            headline: Languages
+            items: 
+              - label: Language link 1
+                url: "https://www.google.com/search?q=link"
+              - label: Language link 2
+                url: "https://www.google.com/search?q=hyperlink"
+              - label: Language link 3
+                url: "https://www.google.com/search?q=url"
+      settings:
+        theme: light
+  visibility: storybook

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

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

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

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