@ilo-org/twig 0.17.1 → 1.0.0

package/dist/components/{accordion-item → accordion}/accordion-item.twig

@@ -5,8 +5,8 @@
 {% set accordion_id = id ~ uid %}
 {% set button_id = 'button-' ~ accordion_id %}
 {% set panel_id = 'panel-' ~ accordion_id %}
-{% set expanded_class = defaultExpanded ? prefix ~ '--accordion--panel--open' : '' %}
-{% set scroll_class = scroll ? prefix ~ '--accordion--panel__scroll' : '' %}
+{% set expanded_class = defaultExpanded ? 'ilo' ~ '--accordion--panel--open' : '' %}
+{% set scroll_class = scroll ? 'ilo' ~ '--accordion--panel__scroll' : '' %}
 
 <li class="ilo--accordion--item" id="{{ accordion_id }}">
 	<div class="ilo--h3">

package/dist/components/card_detail/card_detail.twig

@@ -3,35 +3,35 @@
 #}
 
 <div class="ilo--card ilo--card__type__detail ilo--card__action ilo--card__size__{{size}} {% if isvideo %} ilo--card__isvideo {% endif %}">
-  <a class="ilo--card--link" href="{{link}}" title="{{title}}">
-    <span class="ilo--card--link--text">{{title}}</span>
-  </a>
-  <div class="ilo--card--wrap">
-    {% if image %}
-    <div class="ilo--card--image--wrapper">
-      {% include "@components/picture/picture.twig" with {
+	<a class="ilo--card--link" href="{{link}}" title="{{title}}">
+		<span class="ilo--card--link--text">{{title}}</span>
+	</a>
+	<div class="ilo--card--wrap">
+		{% if image %}
+			<div class="ilo--card--image--wrapper">
+				{% include "@components/picture/picture.twig" with {
           image: image,
           class: "card"
         }
       %}
-    </div>
-    {% endif %}
-    <div class="ilo--card--content">
-      {% if eyebrow %}
-        <p class="ilo--card--eyebrow">{{eyebrow}}</p>
-      {% endif %}
-      {% if title %}
-        <h3 class="ilo--card--title">{{title}}</h3>
-      {% endif %}
-      {% if intro %}
-        <p class="ilo--card--intro">{{intro}}</p>
-      {% endif %}
-      {% if date %}
-        <time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
-      {% endif %}
-      {% if dateExtra %}
-        <p class="ilo--card--date-extra">{{dateExtra}}</p>
-      {% endif %}
-    </div>
-  </div>
+			</div>
+		{% endif %}
+		<div class="ilo--card--content">
+			{% if eyebrow %}
+				<p class="ilo--card--eyebrow">{{eyebrow}}</p>
+			{% endif %}
+			{% if title %}
+				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
+			{% endif %}
+			{% if intro %}
+				<p class="ilo--card--intro">{{intro}}</p>
+			{% endif %}
+			{% if date %}
+				<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
+			{% endif %}
+			{% if dateExtra %}
+				<p class="ilo--card--date-extra">{{dateExtra}}</p>
+			{% endif %}
+		</div>
+	</div>
 </div>

package/dist/components/card_detail/card_detail.wingsuit.yml

@@ -69,3 +69,15 @@ detailcard:
       options:
         "true": "true"
         "false": "false"
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_factlist/card_factlist.twig

@@ -1,21 +1,21 @@
 {#
   FACT LIST CARD COMPONENT
 #}
-<div class="ilo--card ilo--card__type__factlist  ilo--card__size__{{size}} ilo--card__theme__{{theme}}">
-  <div class="ilo--card--wrap">
-    <div class="ilo--card--content">
-      {% if title %}
-        <h3 class="ilo--card--title">{{title}}</h3>
-      {% endif %}
-      {% if list %}
-        {% include "@components/list/list.twig" with {
+<div class="ilo--card ilo--card__type__factlist ilo--card__size__{{size}} ilo--card__theme__{{theme}}">
+	<div class="ilo--card--wrap">
+		<div class="ilo--card--content">
+			{% if title %}
+				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
+			{% 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 %}
-    </div>
-  </div>
+			{% endif %}
+		</div>
+	</div>
 </div>

package/dist/components/card_factlist/card_factlist.wingsuit.yml

@@ -44,3 +44,15 @@ factlistcard:
       options:
         dark: Dark
         light: Light
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_feature/card_feature.twig

@@ -3,37 +3,37 @@
 #}
 
 <div class="ilo--card ilo--card__type__feature ilo--card__action ilo--card__theme__{{theme}} ilo--card__size__{{ size }} {% if isvideo %} ilo--card__isvideo {% endif %} {% if cta %} ilo--card__linklist {% endif %}">
-  <a class="ilo--card--link" href="{{link}}" title="{{title}}">
-    <span class="ilo--card--link--text">{{title}}</span>
-  </a>
-  <div class="ilo--card--wrap">
-    {% if image %}
-    <div class="ilo--card--image--wrapper">
-      {% include "@components/picture/picture.twig" with {
+	<a class="ilo--card--link" href="{{link}}" title="{{title}}">
+		<span class="ilo--card--link--text">{{title}}</span>
+	</a>
+	<div class="ilo--card--wrap">
+		{% if image %}
+			<div class="ilo--card--image--wrapper">
+				{% include "@components/picture/picture.twig" with {
           image: image,
           class: "card"
         }
       %}
-    </div>
-    {% endif %}
-    <div class="ilo--card--content">
-      {% if eyebrow %}
-        <p class="ilo--card--eyebrow">{{eyebrow}}</p>
-      {% endif %}
-      {% if title %}
-        <h3 class="ilo--card--title">{{title}}</h3>
-      {% endif %}
-      {% if date %}
-        <time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
-      {% endif %}
-      {% if cta %}
-        {% include "@components/linklist/linklist.twig" with {
+			</div>
+		{% endif %}
+		<div class="ilo--card--content">
+			{% if eyebrow %}
+				<p class="ilo--card--eyebrow">{{eyebrow}}</p>
+			{% endif %}
+			{% if title %}
+				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
+			{% endif %}
+			{% if date %}
+				<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
+			{% endif %}
+			{% if cta %}
+				{% include "@components/linklist/linklist.twig" with {
           linkgroup: [{
             links: [cta]
           }],
           prefix: prefix
         } only %}
-      {% endif %}
-    </div>
-  </div>
+			{% endif %}
+		</div>
+	</div>
 </div>

package/dist/components/card_feature/card_feature.wingsuit.yml

@@ -78,3 +78,15 @@ featurecard:
       options:
         dark: Dark
         light: Light
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_multilink/card_multilink.twig

@@ -19,7 +19,7 @@
 				<p class="ilo--card--eyebrow">{{eyebrow}}</p>
 			{% endif %}
 			{% if title %}
-				<h3 class="ilo--card--title">{{title}}</h3>
+				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
 			{% endif %}
 			{% if image %}
 				<div class="ilo--card--image--wrapper">

package/dist/components/card_multilink/card_multilink.wingsuit.yml

@@ -89,3 +89,15 @@ multilinkcard:
         narrow: narrow
         wide: wide
         fluid: fluid
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_promo/card_promo.twig

@@ -3,33 +3,33 @@
 #}
 
 <div class="ilo--card--wrapper ilo--card--wrapper__type__promo ilo--card--wrapper__type__promo__size__{{ size }}">
-  <div class="ilo--card ilo--card__type__promo ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}} {% if cornercut %}ilo--card__cornercut{% endif %}">
-    <a class="ilo--card--link" href="{{link}}" title="{{title}}">
-      <span class="ilo--card--link--text">{{title}}</span>
-    </a>
-    <div class="ilo--card--wrap">
-      <div class="ilo--card--content">
-        {% if eyebrow %}
-          <p class="ilo--card--eyebrow">{{eyebrow}}</p>
-        {% endif %}
-        {% if title %}
-          <h3 class="ilo--card--title">{{title}}</h3>
-        {% endif %}
-        {% if intro %}
-          <p class="ilo--card--intro">{{intro}}</p>
-        {% endif %}
-        {% if cta %}
-          <div class="ilo--card--cta">
-            {% include "@components/button/button.twig" with {
+	<div class="ilo--card ilo--card__type__promo ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}} {% if cornercut %}ilo--card__cornercut{% endif %}">
+		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
+			<span class="ilo--card--link--text">{{title}}</span>
+		</a>
+		<div class="ilo--card--wrap">
+			<div class="ilo--card--content">
+				{% if eyebrow %}
+					<p class="ilo--card--eyebrow">{{eyebrow}}</p>
+				{% endif %}
+				{% if title %}
+					<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
+				{% endif %}
+				{% if intro %}
+					<p class="ilo--card--intro">{{intro}}</p>
+				{% endif %}
+				{% if cta %}
+					<div class="ilo--card--cta">
+						{% include "@components/button/button.twig" with {
               size: "medium",
               url: cta.url,
               label: cta.label,
               type: "primary",
               prefix: prefix,
             } only %}
-          </div>
-        {% endif %}
-      </div>
-    </div>
-  </div>
+					</div>
+				{% endif %}
+			</div>
+		</div>
+	</div>
 </div>

package/dist/components/card_promo/card_promo.wingsuit.yml

@@ -69,3 +69,15 @@ promocard:
       options:
         dark: Dark
         light: Light
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_stat/card_stat.twig

@@ -5,7 +5,7 @@
 	<div class="ilo--card--wrap">
 		<div class="ilo--card--content">
 			{% if title %}
-				<h3 class="ilo--card--title">{{title}}</h3>
+				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
 			{% endif %}
 			{% if intro %}
 				<p class="ilo--card--intro">{{intro}}</p>

package/dist/components/card_stat/card_stat.wingsuit.yml

@@ -42,3 +42,15 @@ statcard:
         yellow: yellow
         blue: blue
       preview: "blue"
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_text/card_text.twig

@@ -3,23 +3,23 @@
 #}
 
 <div class="ilo--card--wrapper">
-  <div class="ilo--card ilo--card__type__text ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}}">
-    <a class="ilo--card--link" href="{{link}}" title="{{title}}">
-      <span class="ilo--card--link--text">{{title}}</span>
-    </a>
-    <div class="ilo--card--wrap">
-      <div class="ilo--card--content">
-        {% if eyebrow %}
-          <p class="ilo--card--eyebrow">{{eyebrow}}</p>
-        {% endif %}
-        {% if title %}
-          <h3 class="ilo--card--title">{{title}}</h3>
-        {% endif %}
-        {% if date %}
-          <time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
-        {% endif %}
-        {% if profile %}
-          {% include "@components/profile/profile.twig" with {
+	<div class="ilo--card ilo--card__type__text ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}}">
+		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
+			<span class="ilo--card--link--text">{{title}}</span>
+		</a>
+		<div class="ilo--card--wrap">
+			<div class="ilo--card--content">
+				{% if eyebrow %}
+					<p class="ilo--card--eyebrow">{{eyebrow}}</p>
+				{% endif %}
+				{% if title %}
+					<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
+				{% endif %}
+				{% if date %}
+					<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
+				{% endif %}
+				{% if profile %}
+					{% include "@components/profile/profile.twig" with {
             avatar: profile.avatar,
             description: profile.description,
             link: profile.link,
@@ -28,8 +28,8 @@
             prefix: prefix,
             theme: theme,
           } only %}
-        {% endif %}
-      </div>
-    </div>
-  </div>
+				{% endif %}
+			</div>
+		</div>
+	</div>
 </div>

package/dist/components/card_text/card_text.wingsuit.yml

@@ -55,3 +55,15 @@ textcard:
       options:
         dark: Dark
         light: Light
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/cardgroup/cardgroup.twig

@@ -2,14 +2,14 @@
   CARDGROUP COMPONENT
 #}
 {% if not cardcount%}
-  {% set cardcount = "three" %}
+	{% set cardcount = "three" %}
 {% endif %}
 
 <div class="ilo--cardgroup ilo--cardgroup__count__{{cardcount}} {% if collapsed %} ilo--cardgroup__collapsed {% endif %}">
-  <div class="ilo--cardgroup--inner">
-    {% for card in group %}
-      <div class="ilo--cardgroup--card">
-        {% include "@components/card/card.twig" with {
+	<div class="ilo--cardgroup--inner">
+		{% for card in group %}
+			<div class="ilo--cardgroup--card">
+				{% include "@components/card/card.twig" with {
           size: size,
           theme: theme,
           type: type,
@@ -24,23 +24,21 @@
           linklist: card.linklist,
           list: card.list,
           title: card.title,
+          titleLevel: titleLevel,
           alignment: alignment,
           color: card.color,
           cornercut: card.cornercut,
           source: card.source,
           prefix: prefix
         } only %}
-      </div>
-      {% endfor %}
-  </div>
-  {% if cta %}
-    <div class="ilo--cardgroup--button-wrap">
-      <a
-        class="ilo--button ilo--button--medium ilo--button--secondary"
-        href="{{cta.url}}"
-      >
-        <span class="button__label">{{ cta.label }}</span>
-      </a>
-    </div>
-    {% endif %}
+			</div>
+		{% endfor %}
+	</div>
+	{% if cta %}
+		<div class="ilo--cardgroup--button-wrap">
+			<a class="ilo--button ilo--button--medium ilo--button--secondary" href="{{cta.url}}">
+				<span class="button__label">{{ cta.label }}</span>
+			</a>
+		</div>
+	{% endif %}
 </div>

package/dist/components/cardgroup/cardgroup.wingsuit.yml

@@ -53,6 +53,18 @@ cardgroup:
       options:
         dark: Dark
         light: Light
+    titleLevel:
+      type: select
+      label: TitleLevel
+      description: Sets the heading level of the title for all of the cards. This is not applied to Data Cards which do not have titles
+      preview: p
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5
     type:
       type: select
       label: Type

package/dist/components/checkbox/checkbox.twig

@@ -3,7 +3,7 @@
 {% extends "@components/form/formcontrol.twig" %}
 
 {% set disabled = disabled|default(false) %}
-{% set baseClass = prefix ~ '--checkbox' %}
+{% set baseClass = 'ilo' ~ '--checkbox' %}
 {% set errorClass = baseClass ~ '__error' %}
 {% set CheckboxClasses = [baseClass] %}
 

package/dist/components/checkbox/checkbox.wingsuit.yml

@@ -14,6 +14,7 @@ checkbox:
       preview: "Do you agree to these terms?"
     tooltip:
       type: string
+      label: Tooltip
       description: The tooltip for the form element.
     helper:
       type: text

package/dist/components/datepicker/datepicker.twig

@@ -5,8 +5,8 @@
 
 {# Default values and input preparation #}
 {% set disabled = disabled|default(false) %}
-{% set inputClass = prefix ~ '--input' %}
-{% set baseClass = prefix ~ '--datepicker' %}
+{% set inputClass = 'ilo' ~ '--input' %}
+{% set baseClass = 'ilo' ~ '--datepicker' %}
 {% set datePickerClasses = [inputClass, baseClass] %}
 
 {% if error %}

package/dist/components/dropdown/dropdown.twig

@@ -3,7 +3,7 @@
 {% extends "@components/form/formcontrol.twig" %}
 
 {% set disabled = disabled|default(false) %}
-{% set baseClass = prefix ~ '--dropdown' %}
+{% set baseClass = 'ilo' ~ '--dropdown' %}
 {% set dropdownClasses = [baseClass, class] %}
 {% if error %}
 	{% set dropdownClasses = dropdownClasses|merge(['error']) %}

package/dist/components/dropdown/dropdown.wingsuit.yml

@@ -1,5 +1,5 @@
 dropdown:
-  namespace: components/Forms
+  namespace: Components/Forms
   use: "@components/dropdown/dropdown.twig"
   label: Dropdown
   description: The Dropdown displays a select element with options, and is most
@@ -13,6 +13,7 @@ dropdown:
       preview: "Select a country"
     tooltip:
       type: string
+      label: Tooltip
       description: The tooltip for the form element.
     helper:
       type: text

package/dist/components/fileupload/fileupload.twig

@@ -2,7 +2,7 @@
 
 {% extends "@components/form/formcontrol.twig" %}
 
-{% set baseClass = prefix ~ '--file-upload' %}
+{% set baseClass = 'ilo' ~ '--file-upload' %}
 {% set fileUploadClasses = [baseClass] %}
 {% set inputClass = baseClass ~ '--input' %}
 

package/dist/components/fileupload/fileupload.wingsuit.yml

@@ -14,6 +14,7 @@ fileupload:
       preview: Upload your files here
     tooltip:
       type: string
+      label: Tooltip
       description: The tooltip for the form element.
     helper:
       type: text

package/dist/components/{fieldset → form}/fieldset.twig

@@ -1,6 +1,6 @@
 {# fieldset.twig #}
 
-{% set baseClass = prefix ~ "--fieldset" %}
+{% set baseClass = 'ilo' ~ "--fieldset" %}
 {% set wrapClass = baseClass ~ "--wrap__" ~ wrap %}
 {% set directionClass = baseClass ~ "--direction__" ~ direction %}
 {% set helperClass = baseClass ~ "--helper" %}

package/dist/components/form/form.twig

@@ -1,6 +1,6 @@
 {# form.twig #}
 
-{% set baseClass = prefix ~ "--form" %}
+{% set baseClass = 'ilo' ~ "--form" %}
 
 {% set formControlClass = [baseClass, class] %}
 

package/dist/components/{formcontrol → form}/formcontrol.twig

@@ -1,6 +1,6 @@
 {# formcontrol.twig #}
 
-{% set baseClass = prefix ~ "--form-control" %}
+{% set baseClass = 'ilo' ~ "--form-control" %}
 
 {# Initialize ariaDescribedBy #}
 {% set ariaDescribedBy  = [] %}

package/dist/components/{input → form}/input.twig

@@ -1,7 +1,7 @@
 {# text-input.twig #}
 {% extends "@components/form/formcontrol.twig" %}
 
-{% set baseClass = prefix ~ "--text-input" %}
+{% set baseClass = 'ilo' ~ "--text-input" %}
 {% set inputClass = [baseClass] %}
 {% if error %}
 	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}

package/dist/components/list/list-item.twig

@@ -0,0 +1,6 @@
+{#
+  ACCORDION ITEM COMPONENT
+#}
+<li class="{{ prefix }}--list--item" id="{{ elementId }}">
+	{{content}}
+</li>

package/dist/components/list/list.twig

@@ -16,7 +16,7 @@
 				prefix: prefix,
 				label: item.label,
 				content: item.content,
-				id: item.id,
+				elementId: item.id,
 			} only %}
 			{% endfor %}
 		</ol>
@@ -27,7 +27,7 @@
 				prefix: prefix,
 				label: item.label,
 				content: item.content,
-				id: item.id,
+				elementId: item.id,
 			} only %}
 			{% endfor %}
 		</ul>