@ilo-org/twig 0.0.1

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

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

package/src/patterns/components/form/input.twig

@@ -0,0 +1,13 @@
+{#
+  INPUT COMPONENT
+#}
+{% extends '@components/fieldset/fieldset.twig' %}
+{% set fsinputid = id ? id : name %}
+{% set fslabel = label %}
+{% set fshelper = helper %}
+{% set fserror = error %}
+{% set fstype = type %}
+
+{% block formfield %}
+  <input name="{{name}}" type="{{type}}" class="{{prefix}}--input{% if error %} error{% endif %}" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if disabled %}disabled{% endif %} {% if required %}required{% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" />
+{% endblock %}

package/src/patterns/components/form/number.twig

@@ -0,0 +1,13 @@
+{#
+  NUMBER COMPONENT
+#}
+{% extends '@components/fieldset/fieldset.twig' %}
+{% set fsinputid = id ? id : name %}
+{% set fslabel = label %}
+{% set fshelper = helper %}
+{% set fserror = error %}
+{% set fstype = "number" %}
+
+{% block formfield %}
+  <input name="{{name}}" type="text" class="{{prefix}}--numberpicker {{prefix}}--input{% if error %} error{% endif %}" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if required %}required{% endif %} {% if disabled %}disabled{% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" pattern="[0-9]*" inputmode="numeric" />
+{% endblock %}

package/src/patterns/components/form/radio.twig

@@ -0,0 +1,4 @@
+{#
+  RADIO COMPONENT
+#}
+<input id="{{id}}" name="{{name}}" type="radio" class="{{prefix}}--radio" value="{{value}}" {% if disabled %}disabled{% endif %}>

package/src/patterns/components/form/textarea.twig

@@ -0,0 +1,13 @@
+{#
+  TEXTAREA COMPONENT
+#}
+{% extends '@components/fieldset/fieldset.twig' %}
+{% set fsinputid = id ? id : name %}
+{% set fslabel = label %}
+{% set fshelper = helper %}
+{% set fserror = error %}
+{% set fstype = "textarea" %}
+
+{% block formfield %}
+  <textarea name="textarea" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if required %}required{% endif %} {% if disabled %}disabled{% endif %} class="{{prefix}}--textarea" id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" spellcheck="false"></textarea>
+{% endblock %}

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

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

package/src/patterns/components/hero/hero.twig

@@ -0,0 +1,24 @@
+{#
+  HERO COMPONENT
+#}
+
+<div class="{{prefix}}--hero {{prefix}}--hero--{{theme}} {{prefix}}--hero--{{types}} {% if image %}{{prefix}}--hero--image{% endif %}">
+  {% include "@components/image/image.twig" with {
+    alt: image.alt,
+    caption: image.caption,
+    credit: image.credit,
+    prefix: prefix,
+    url: image.url,
+  } only %}
+  {% include "@components/herocard/herocard.twig" with {
+    alignment: herocard.alignment,
+    eyebrow: herocard.eyebrow,
+    datecopy: herocard.datecopy,
+    intro: herocard.intro,
+    prefix: prefix,
+    socials: herocard.socials,
+    theme: theme,
+    title: herocard.title,
+    types: types
+  } only %}
+</div>

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

@@ -0,0 +1,56 @@
+hero:
+  use: '@components/hero/hero.twig'
+  label: Hero
+  description: The Hero presents an image banner.
+  fields:
+    image:
+      type: object
+      preview:
+        alt: Lorem ipsum
+        caption: ""
+        credit: ""
+        url: 
+          - breakpoint: 0
+            src: "https://placekitten.com/1920/800"
+          - breakpoint: 768
+            src: "https://placekitten.com/1920/800"
+    herocard:
+      label: herocard
+      type: object
+      preview: 
+        alignment: left
+        datecopy: 11 February 2022
+        eyebrow: Eyebrow
+        intro: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+        socials: 
+          - label: "Facebook"
+            url: "https://www.facebook.com/"
+            icon: "facebook"
+          - label: "Linkedin"
+            url: "https://www.linkedin.com/"
+            icon: "linkedin"
+        title: "This is an left aligned article headline that is more than two lines long"
+  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: 'publication'
+      options:
+        home: Home
+        publication: Publication
+        graphic: Graphic
+        project: Project
+        article: Article
+        portal: Portal
+  visibility: storybook

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

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

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

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

package/src/patterns/components/herocard/herocard.twig

@@ -0,0 +1,31 @@
+{#
+  HEROCARD COMPONENT
+#}
+<div class="{{prefix}}--hero-card {{prefix}}--hero-card--{{alignment}} {{prefix}}--hero-card--{{theme}} {{prefix}}--hero-card--{{types}}">
+  {% if eyebrow %}
+    <p class="{{ prefix }}--hero-card--eyebrow">{{ eyebrow }}</p>
+  {% endif %}
+  {% if title %}
+    <h2 class="{{ prefix }}--hero-card--title">{{ title }}</h2>
+  {% endif %}
+  {% if datecopy %}
+    <p class="{{ prefix }}--hero-card--datecopy">{{ datecopy }}</p>
+  {% endif %}
+  {% if intro %}
+    <p class="{{ prefix }}--hero-card--intro">{{ intro }}</p>
+  {% endif %}
+
+  <ul class="{{ prefix }}--hero-card--list">
+    {% for item in socials %}
+      <li class="{{ prefix }}--hero-card--list--item">
+        <a
+          class="{{ prefix }}--hero-card--link icon icon--{{ item.icon }}"
+          href={{ item.url }}
+          title={{ item.label }}
+        >
+          {{ item.label }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+</div>

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

@@ -0,0 +1,43 @@
+herocard:
+  use: '@components/herocard/herocard.twig'
+  label: Hero Card
+  description: The Hero card
+  id: herocard
+  fields:
+    alignment:
+      type: string
+      label: Alignment
+      description: alignment for card
+      preview: "center"
+    datecopy:
+      type: string
+      label: Date copy
+      description: Date byline copy
+      preview: "11 February 2021"
+    eyebrow:
+      type: string
+      label: Date copy
+      description: Date byline copy
+      preview: "11 February 2021"
+    intro:
+      type: string
+      label: Intro
+      description: Intro text for the hero
+      preview: "Brief intro text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    socials:
+      type: object
+      label: Social links
+      description: The social links to include in the hero
+      preview:
+        - label: "Facebook"
+          url: "https://www.facebook.com/"
+          icon: "facebook"
+        - label: "Linkedin"
+          url: "https://www.linkedin.com/"
+          icon: "linkedin"
+    title:
+      type: string
+      label: Title
+      description: This is the title for the hero card
+      preview: "This is an centered aligned article headline that is more than two lines long"
+  visibility: storybook

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

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

package/src/patterns/components/icon/icon.twig

@@ -0,0 +1,4 @@
+{#
+  ICON COMPONENT
+#}
+<img class="{{prefix}}--icon" src="{{'/images/'~icon~'.svg'}}" alt="{{icon}}" role="presentation">

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

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

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

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

package/src/patterns/components/image/image.twig

@@ -0,0 +1,19 @@
+{#
+  IMAGE COMPONENT
+#}
+<figure class="{{prefix}}--image" data-prefix="{{prefix}}">
+  <div class="image {{prefix}}--image--wrapper">
+    <picture class="{{prefix}}--image--img">
+      {% for img in url|reverse|slice(0,-1) %}
+      <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+      {% endfor %}
+      <img src="{{url|reverse|last.src}}" alt="{{alt}}">
+    </picture>
+    {% if credit %}
+    <span class="{{prefix}}--credit">
+      <span class="{{prefix}}--credit--label">{{credit}}</span>
+    </span>
+    {% endif %}
+  </div>
+  <figcaption class="{{prefix}}--image--caption">{{caption}}</figcaption>
+</figure>

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

@@ -0,0 +1,37 @@
+image:
+  use: '@components/image/image.twig'
+  label: Image
+  description: A component for displaying an image.
+  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'
+    credit:
+      type: string
+      label: Credit
+      description: string
+      preview: 'Photo: copyright 2022 Person S. Name'
+      required: true
+    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'
+  visibility: storybook

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

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

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

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

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

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

package/src/patterns/components/link/link.twig

@@ -0,0 +1,8 @@
+{#
+  LINK COMPONENT
+#}
+<a class="{{prefix}}--link {{prefix}}--link--{{theme}}" href="{{url}}"{% if target %} target={{target}}{% endif %}{% if target == "_blank" %} rel="noopener noreferrer"{% endif %}>
+  {% if label %}
+    <span className="link__label">{{label}}</span>
+  {% endif %}
+</a>

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

@@ -0,0 +1,35 @@
+link:
+  use: '@components/link/link.twig'
+  label: Link
+  description: A component for displaying a link.
+  fields:
+    url:
+      type: string
+      label: URL
+      description: A string to be used as a url
+      preview: "http://www.ilo.org"
+      required: true
+    target:
+      type: string
+      label: target
+      description: If we want to set the target attribute, the string to use
+      preview: "_blank"
+      required: false
+    label:
+      type: string
+      label: label
+      description: Optional link label
+      preview: "Link"
+      required: false
+  settings: 
+    theme:
+      type: select
+      label: Theme
+      description: The theme for the link styles
+      required: false
+      options:
+        light: Light
+        dark: Dark
+        footer: Footer
+      preview: 'light'
+  visibility: storybook

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

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

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

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

package/src/patterns/components/linklist/linklist.twig

@@ -0,0 +1,26 @@
+{#
+  LINK LIST COMPONENT
+#}
+<div class="{{prefix}}--link-list {{prefix}}--link-list--{{theme}}">
+  {% if headline %}
+    <h3 class="{{prefix}}--link-list--headline">{{headline}}</h3>
+  {% endif %}
+  <ul class="{{prefix}}--link-list--linkgroups">
+    {% for group in linkgroup %}
+    <li class="{{prefix}}--link-list--linkgroups-item">
+      {% if group.headline is not empty %}
+      <h4 class="{{prefix}}--link-list--links--headline">{{group.headline}}</h4>
+      {% endif %}
+      <ul class="{{prefix}}--link-list--links">
+        {% for link in group.links %}
+        <li class="{{prefix}}--link-list--links--item{% if link.indented == 'true' %} indented{% endif %}">
+          <a href="{{link.url}}" class="{{prefix}}--link-list--link">
+            <span class="{{prefix}}--link-list--label">{{link.label}}</span>
+          </a>
+        </li>
+        {% endfor %}
+      </ul>
+    </li>
+    {% endfor %}
+  </ul>
+</div>

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

@@ -0,0 +1,53 @@
+linklist:
+  use: '@components/linklist/linklist.twig'
+  label: Link List
+  description: The Link List receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
+  fields:
+    headline:
+      type: string
+      label: Headline
+      description: Link List's Headline
+      preview: Link List Headling
+    linkgroup:
+      type: object
+      label: Link Group
+      description: A group of links
+      required: true
+      preview:
+        - headline: Section 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'
+            - label: Link Four
+              url: 'http://www.google.com'
+            - label: Link Five Is Slightly Longer
+              url: 'http://www.google.com'
+        - headline: Section 2 (With Indents)
+          links:
+            - label: Section 2 Link One
+              url: 'http://www.google.com'
+            - indented: 'true'
+              label: Section 2 Link Two
+              url: 'http://www.google.com'
+            - indented: 'true'
+              label: Section 2 Link Three
+              url: 'http://www.google.com'
+            - indented: 'true'
+              label: Section 2 Link Four
+              url: 'http://www.google.com'
+            - label: Section 2 Link Five Is Slightly Longer
+              url: 'http://www.google.com'
+    theme:
+      type: select
+      label: Theme
+      description: Is this link list on a light or dark background?
+      required: true
+      options:
+        primary: Light
+        secondary: Dark
+      preview: 'light'
+  visibility: storybook

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

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

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

@@ -0,0 +1,6 @@
+{#
+  ACCORDION ITEM COMPONENT
+#}
+<li class="ilo--list__item" id="{{ id }}">
+  {{content|raw}}
+</li>

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

@@ -0,0 +1,18 @@
+list:
+  use: '@components/list/list-item.twig'
+  label: List Item
+  description: A list item.
+  fields:
+    content:
+      type: text
+      label: Content
+      description: The list item's collapsed content.
+      preview:
+        faker: lorem.word
+    id:
+      type: text
+      label: ID
+      description: The list item's id.
+      preview:
+        faker: lorem.word
+  visibility: storybook

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

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

package/src/patterns/components/list/list.twig

@@ -0,0 +1,30 @@
+{#
+  LIST COMPONENT
+#}
+{% if ordered == "ordered" %}
+<ol class="ilo--list ilo--list--{{ ordered|default('ordered') }}" data-loadcomponent="List">
+  {% if title %}
+    <h5 class="ilo--list__title">{{ title }}</h5>
+  {% endif %}
+  {% for item in items %}
+    {% include "@components/list/list-item.twig" with {
+      label: item.label,
+      content: item.content,
+      id: item.id,
+    } only %}
+  {% endfor %}
+</ol>
+{% else %}
+<ul class="ilo--list ilo--list--{{ ordered|default('unordered') }} ilo--list--{{ alignment|default('') }}" data-loadcomponent="List">
+  {% if title %}
+    <h5 class="ilo--list__title">{{ title }}</h5>
+  {% endif %}
+  {% for item in items %}
+    {% include "@components/list/list-item.twig" with {
+      label: item.label,
+      content: item.content,
+      id: item.id,
+    } only %}
+  {% endfor %}
+</ul>
+{% endif %}

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

@@ -0,0 +1,48 @@
+list:
+  use: '@components/list/list.twig'
+  label: List
+  description: A list.
+  fields:
+    title:
+      type: text
+      label: Label
+      description: The list item's heading.
+      preview:
+        faker: lorem.word
+    items:
+      type: object
+      label: Items
+      description: The list items.
+      required: true
+      preview:
+        - content: Arabica. Arabica is the most popular type of coffee, hands down.
+          id: item1
+        - content: Robusta. While Arabica is the most popular, Robusta is cheaper and stronger.
+          id: item2
+        - content: Black coffee is as simple as it gets with ground coffee beans steeped in hot water, served warm.
+          id: item3
+        - content: Latte. Made with espresso and hot steamed milk, milkier than a cappuccino.
+          id: item4
+        - content: Cappuccino. Made with espresso and milk that has been frothed up with pressurized steam.
+          id: item5
+  settings: 
+    ordered:
+      type: select
+      label: Ordered
+      description: The order for the list.
+      required: false
+      options:
+        ordered: Ordered
+        unordered: Unordered
+        unstyled: Unstyled
+      preview: 'unstyled'
+    alignment:
+      type: select
+      label: Alignment
+      description: Is the list displayed horizontally?
+      options:
+        default: Default
+        horizontal: Horizontal
+      preview: 'default'
+      required: false
+  visibility: storybook

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

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

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

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