@ilo-org/twig 0.0.1

package/src/patterns/components/cardgroup/cardgroup.twig

@@ -0,0 +1,30 @@
+{#
+  CARDGROUP COMPONENT
+#}
+<div class="{{prefix}}--cardgroup {{prefix}}--cardgroup--{{cardcount}}">
+  <div class="{{prefix}}--cardgroup--inner">
+    {% for card in group %}
+      {% include "@components/card/card.twig" with {
+        title: card.title,
+        image: card.image,
+        intro: card.intro,
+        eyebrow: card.eyebrow,
+        date: card.date,
+        dataset: card.dataset,
+        link: card.link,
+        profile: card.profile,
+        eventdate: card.eventdate,
+        cta: card.cta,
+        source: card.source,
+        list: card.list,
+        linklist: card.linklist,
+        color: card.color,
+        prefix: prefix,
+        theme: settings.theme,
+        cornercut: settings.cornercut,
+        alignment: settings.alignment,
+        variant: settings.variant
+      } only %}
+    {% endfor %}
+  </div>
+</div>

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

@@ -0,0 +1,419 @@
+cardgroup:
+  use: '@components/cardgroup/cardgroup.twig'
+  label: Card Group
+  description: The Card group
+  fields:
+    group:
+      type: object
+      label: Group of cards
+      description: The group of cards, object
+      preview: 
+    settings:
+      type: object
+      label: Settings
+      description: Settings for the cards
+  variants:
+    default:
+      label: Multilink
+      description: multilink settings
+      fields:
+        group:
+          - title: "Multi-link card - first"
+            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: ""
+            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'
+          - title: "Multi-link card second - 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: ""
+            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'
+          - 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: ""
+            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'
+        settings:
+          theme: light
+          cornercut: cornercut
+          alignment: left
+          variant: multilink
+      settings: 
+        cardcount: three
+    feature:
+      label: Feature
+      description: feature settings
+      fields:
+        group:
+          - title: "Vertical info card descriptive headline text"
+            image: "http://placekitten.com/475/267"
+            intro: ""
+            eyebrow: "Eyebrow title"
+            date:
+              human: "Date"
+              unix: 1670389200
+            link: "https://www.google.com/search?q=feature"
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+            color: ""
+          - title: "Vertical info card descriptive headline text"
+            image: "http://placekitten.com/475/267"
+            intro: ""
+            eyebrow: "Eyebrow title"
+            date:
+              human: "Date"
+              unix: 1670389200
+            link: "https://www.google.com/search?q=feature"
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+            color: ""
+          - title: "Vertical info card descriptive headline text Vertical info card descriptive headline text Vertical info card descriptive headline text"
+            image: "http://placekitten.com/475/267"
+            intro: ""
+            eyebrow: "Eyebrow title"
+            date:
+              human: "Date"
+              unix: 1670389200
+            link: "https://www.google.com/search?q=feature"
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+            color: ""
+          - title: "Vertical info card descriptive headline text"
+            image: "http://placekitten.com/475/267"
+            intro: ""
+            eyebrow: "Eyebrow title"
+            date:
+              human: "Date"
+              unix: 1670389200
+            link: "https://www.google.com/search?q=feature"
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+            color: ""
+        settings:
+          theme: light
+          cornercut: cornercut
+          alignment: left
+          variant: feature
+      settings: 
+        cardcount: four
+    detail:
+      label: Detail
+      description: detail settings
+      fields:
+        group:
+          - title: "Horizontal info card descriptive headline text"
+            image: "http://placekitten.com/196/296"
+            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"
+            profile: ""
+            eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET  |  Egypt"
+            cta: ""
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+            color: ""
+          - title: "Horizontal info card descriptive headline text"
+            image: "https://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_856513.jpg"
+            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"
+            profile: ""
+            eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET  |  Egypt"
+            cta: ""
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+            color: ""
+        settings:
+          theme: light
+          cornercut: cornercut
+          alignment: left
+          variant: detail
+      settings: 
+        cardcount: one
+    graphicpromo:
+      label: Graphic Promo
+      description: graphic promo settings
+      fields:
+        group:
+          - 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: ""
+            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"
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+        settings:
+          theme: dark
+          cornercut: cornercut
+          alignment: left
+          variant: graphicpromo
+      settings:
+        cardcount: one
+    stat:
+      label: Stat cards
+      description: Stat settings
+      fields:
+        group:
+          - title: "Date headline"
+            image: ""
+            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
+            eyebrow: ""
+            date: ""
+            link: ""
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: 
+              label: "Source: lorem ipsum dolor sit amet, 2020"
+              url: "https://www.google.com/search?q=stat"
+            color: blue
+          - title: "Date headline"
+            image: ""
+            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
+            eyebrow: ""
+            date: ""
+            link: ""
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: 
+              label: "Source: lorem ipsum dolor sit amet, 2020"
+              url: "https://www.google.com/search?q=stat"
+            color: green
+          - title: "Date headline"
+            image: ""
+            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
+            eyebrow: ""
+            date: ""
+            link: ""
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: 
+              label: "Source: lorem ipsum dolor sit amet, 2020"
+              url: "https://www.google.com/search?q=stat"
+            color: yellow
+          - title: "Date headline"
+            image: ""
+            intro: "Data title - Lorem ipsum dolor sit amet consectetur"
+            eyebrow: ""
+            date: ""
+            link: ""
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: 
+              label: "Source: lorem ipsum dolor sit amet, 2020"
+              url: "https://www.google.com/search?q=stat"
+            color: turquoise
+        settings:
+          theme: light
+          cornercut: cornercut
+          alignment: left
+          variant: stat
+      settings:
+        cardcount: two
+    graphic:
+      label: Graphic
+      description: graphic settings
+      fields:
+        group:
+          - title: "Brief title text - ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"
+            image: ""
+            intro: ""
+            eyebrow: "Eyebrow title"
+            date:
+              human: "date"
+              unix: 1670389200
+            link: "https://www.google.com/search?q=graphic"
+            profile: ""
+            eventdetails: ""
+            cta: ""
+            source: ""
+            linklist: ""
+            list: ""
+            dataset: ""
+        settings:
+          theme: light
+          cornercut: cornercut
+          alignment: left
+          variant: graphic
+      settings:
+        cardcount: one
+    factlist:
+      label: Factlist
+      description: Factlist settings
+      fields:
+        group:
+          - title: "Title of fast fact list"
+            intro: ""
+            eyebrow: ""
+            date: ""
+            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"
+        settings:
+          theme: light
+          cornercut: cornercut
+          alignment: left
+          variant: factlist
+      settings:
+        cardcount: one
+    data:
+      label: Data
+      description: Data settings
+      fields:
+        group:
+          - title: ""
+            image: ""
+            # image: "https://placekitten.com/205/179"
+            intro: ""
+            eyebrow: "Event details"
+            date: ""
+            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
+          cornercut: cornercut
+          alignment: left
+          variant: data
+      settings:
+        cardcount: one
+  settings:
+    cardcount:
+      type: select
+      label: Card Count
+      description: Number of cards within a group
+      required: true
+      preview: 'two'
+      options:
+        one: One
+        two: Two
+        three: Three
+        four: Four
+  visibility: storybook

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

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

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

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

package/src/patterns/components/contextmenu/contextmenu.twig

@@ -0,0 +1,12 @@
+{#
+  CONTEXT MENU COMPONENT
+#}
+<ul class="{{prefix}}--context-menu">
+  {% for link in links %}
+  <li class="{{prefix}}--context-menu--item{% if link.endsection == 'true' %} endsection{% endif %}">
+    <a href="{{link.url}}" class="{{prefix}}--context-menu--link">
+      <span class="{{prefix}}--context-menu--label">{{link.label}}</span>
+    </a>
+  </li>
+  {% endfor %}
+</ul>

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

@@ -0,0 +1,23 @@
+contextmenu:
+  use: '@components/contextmenu/contextmenu.twig'
+  label: Context Menu
+  description: The ContextMenu receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
+  fields:
+    links:
+      type: object
+      label: Links
+      description: The context menu item items.
+      required: true
+      preview:
+        - label: Link One
+          url: 'http://www.google.com'
+        - label: Link Two
+          url: 'http://www.google.com'
+        - endsection: 'true'
+          label: Link Three Ends A Section
+          url: 'http://www.google.com'
+        - label: Link Four
+          url: 'http://www.google.com'
+        - label: Link Five Is Slightly Longer
+          url: 'http://www.google.com'
+  visibility: storybook

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

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

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

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

package/src/patterns/components/dropdown/dropdown.twig

@@ -0,0 +1,20 @@
+{#
+  DROPDOWN COMPONENT
+
+  Like all form fields, extends the FIELDSET components, and passes it some variables
+#}
+{% extends '@components/fieldset/fieldset.twig' %}
+{% set fsinputid = id ? id : name %}
+{% set fslabel = label %}
+{% set fshelper = helper %}
+{% set fserror = error %}
+
+{% block formfield %}
+  <div class="{{prefix}}--dropdown--wrapper">
+    <select id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" {% if autocomplete is defined %}autocomplete="{{autocomplete}}"{% endif %} name="dropdown" class="{{prefix}}--dropdown{% if error %} error{% endif %}" {% if disabled is defined and disabled == 'true' %}disabled{% endif %}>
+      {% for option in options %}
+      <option label="{{option.label}}" value="{{option.value}}" {% if defaultValue is defined and defaultValue == option.value %}selected{% endif %} {% if option.disabled is defined and option.disabled == 'true' %}disabled{% endif %}></option>
+      {% endfor %}
+    </select>
+  </div>
+{% endblock %}

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

@@ -0,0 +1,71 @@
+dropdown:
+  use: '@components/dropdown/dropdown.twig'
+  label: Dropdown
+  description: The Dropdown displays a select element with options, and is most
+    commonly used in forms.
+  fields:
+    autocomplete:
+      type: string
+      label: autocomplete
+      description: Should this field autocomplete
+      preview: false
+      required: false
+    defaultValue:
+      type: string
+      label: defaultValue
+      description: The default value of the select
+      preview: "option one"
+      required: true
+    disabled:
+      type: boolean
+      label: disabled
+      description: Is this field disabled?
+      preview: false
+      required: false
+    error:
+      type: string
+      label: error
+      description: Does this have an error? If so, the error message
+      preview: false
+      required: false
+    helper:
+      type: string
+      label: helper
+      description: Does this have helper text? If so, the helper text
+      preview: "My helper text"
+      required: false
+    id:
+      type: string
+      label: id
+      description: the id of the form field
+      preview: "dropdown"
+      required: true
+    label:
+      type: string
+      label: label
+      description: the label of the form field
+      preview: "Dropdown Label"
+      required: true
+    name:
+      type: string
+      label: name
+      description: the name attribute of the form field
+      preview: "dropdown"
+      required: true
+    options:
+      type: object
+      label: Options
+      description: The options for this dropdown
+      required: true
+      preview:
+        - label: "Option One"
+          value: "option one"
+        - label: "Option Two"
+          value: "option two"
+        - label: "Option Three"
+          value: "option three"
+        - label: "Option Four"
+          value: "four"
+        - label: "Option Five"
+          value: "the fifth"
+  visibility: storybook

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

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

package/src/patterns/components/fieldset/fieldset.twig

@@ -0,0 +1,43 @@
+{#
+  FIELDSET COMPONENT
+  This component by itself does nothing, but is used to wrap form labels and inputs as well as provide their helper text and error messaging
+
+  it takes four params:
+
+  fsinputid: a string, the id of the form field it contains
+  fslabel: a string, the label of the form field
+  fshelper: a string, helper text, if any
+  fserror: a string, error message, if any
+  fstype: a string, the type of field
+  fsclass: a string, any additional classnames
+#}
+<fieldset id="{{fsinputid}}--fieldset" class="{{prefix}}--fieldset{% if fsclass %} {{fsclass}}{% endif %}" {% if fshelper %}data-helper="{{fshelper}}"{% endif %}  {% if fserror %}data-error="{{fserror}}"{% endif %}>
+  {% if legend %}
+  <legend class="ilo--fieldset--legend">{{legend}}
+    {% if grouptooltip %}
+      {% include '@components/tooltip/tooltip.twig' with {label: grouptooltip.label, icon: grouptooltip.icon, theme: grouptooltip.theme, className: "ilo--fieldset--legend--tooltip"} %}
+    {% endif %}
+  </legend>
+  {% endif %}
+  {% if grouphelper and not grouperror %}
+    <span class="ilo--fieldset--helper">{{grouphelper}}</span>
+  {% endif %}
+  {% if grouperror %}
+    <span class="ilo--fieldset--error">{{grouperror}}</span>
+  {% endif %}
+  <div class="ilo--fieldset--input--{{fstype}}">
+    <label class="{{prefix}}--fieldset--label" for="{{fsinputid}}">
+      {{fslabel}}
+      {% if tooltip %}
+        {% include '@components/tooltip/tooltip.twig' with tooltip %}
+      {% endif %}
+    </label>
+    {% block formfield %}
+    {% endblock %}
+    {% if fshelper and not fserror %}
+      <span class="{{prefix}}--fieldset--helper">{{fshelper}}</span>
+    {% endif %}
+    {% if fserror %}
+      <span class="{{prefix}}--fieldset--error">{{fserror}}</span>
+    {% endif %}
+</fieldset>

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

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