@ilo-org/twig 0.17.1 → 1.0.0

package/src/patterns/components/card_detail/card_detail.twig

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

package/src/patterns/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/src/patterns/components/card_factlist/card_factlist.twig

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

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

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

package/src/patterns/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/src/patterns/components/card_promo/card_promo.twig

@@ -3,33 +3,33 @@
 #}
 
 <div class="{{prefix}}--card--wrapper {{prefix}}--card--wrapper__type__promo {{prefix}}--card--wrapper__type__promo__size__{{ size }}">
-  <div class="{{prefix}}--card {{prefix}}--card__type__promo {{prefix}}--card__size__{{ size }} {{prefix}}--card__action {{prefix}}--card__theme__{{theme}} {% if cornercut %}{{prefix}}--card__cornercut{% endif %}">
-    <a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
-      <span class="{{prefix}}--card--link--text">{{title}}</span>
-    </a>
-    <div class="{{prefix}}--card--wrap">
-      <div class="{{prefix}}--card--content">
-        {% if eyebrow %}
-          <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
-        {% endif %}
-        {% if title %}
-          <h3 class="{{prefix}}--card--title">{{title}}</h3>
-        {% endif %}
-        {% if intro %}
-          <p class="{{prefix}}--card--intro">{{intro}}</p>
-        {% endif %}
-        {% if cta %}
-          <div class="{{prefix}}--card--cta">
-            {% include "@components/button/button.twig" with {
+	<div class="{{prefix}}--card {{prefix}}--card__type__promo {{prefix}}--card__size__{{ size }} {{prefix}}--card__action {{prefix}}--card__theme__{{theme}} {% if cornercut %}{{prefix}}--card__cornercut{% endif %}">
+		<a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}">
+			<span class="{{prefix}}--card--link--text">{{title}}</span>
+		</a>
+		<div class="{{prefix}}--card--wrap">
+			<div class="{{prefix}}--card--content">
+				{% if eyebrow %}
+					<p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
+				{% endif %}
+				{% if title %}
+					<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
+				{% endif %}
+				{% if intro %}
+					<p class="{{prefix}}--card--intro">{{intro}}</p>
+				{% endif %}
+				{% if cta %}
+					<div class="{{prefix}}--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/src/patterns/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/src/patterns/components/card_stat/card_stat.twig

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

package/src/patterns/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/src/patterns/components/card_text/card_text.twig

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

@@ -2,14 +2,14 @@
   CARDGROUP COMPONENT
 #}
 {% if not cardcount%}
-  {% set cardcount = "three" %}
+	{% set cardcount = "three" %}
 {% endif %}
 
 <div class="{{prefix}}--cardgroup {{prefix}}--cardgroup__count__{{cardcount}} {% if collapsed %} {{prefix}}--cardgroup__collapsed {% endif %}">
-  <div class="{{prefix}}--cardgroup--inner">
-    {% for card in group %}
-      <div class="{{prefix}}--cardgroup--card">
-        {% include "@components/card/card.twig" with {
+	<div class="{{prefix}}--cardgroup--inner">
+		{% for card in group %}
+			<div class="{{prefix}}--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="{{prefix}}--cardgroup--button-wrap">
-      <a
-        class="{{prefix}}--button {{prefix}}--button--medium {{prefix}}--button--secondary"
-        href="{{cta.url}}"
-      >
-        <span class="button__label">{{ cta.label }}</span>
-      </a>
-    </div>
-    {% endif %}
+			</div>
+		{% endfor %}
+	</div>
+	{% if cta %}
+		<div class="{{prefix}}--cardgroup--button-wrap">
+			<a class="{{prefix}}--button {{prefix}}--button--medium {{prefix}}--button--secondary" href="{{cta.url}}">
+				<span class="button__label">{{ cta.label }}</span>
+			</a>
+		</div>
+	{% endif %}
 </div>

package/src/patterns/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/src/patterns/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/src/patterns/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/src/patterns/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/src/patterns/components/list/list-item.twig

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

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

@@ -10,7 +10,7 @@ list:
       description: The list item's collapsed content.
       preview:
         faker: lorem.word
-    id:
+    elementId:
       type: text
       label: ID
       description: The list item's id.

package/src/patterns/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>

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

@@ -16,27 +16,27 @@ list:
       required: true
       preview:
         - content: The International Labour Organization (ILO) was founded in 1919 as part of the League of Nations to promote workers' rights, encourage decent employment opportunities, and enhance social protection.
-          id: item1
+          elementId: item1
         - content: The ILO aims to promote rights at work, encourage decent job opportunities, enhance social protection, and strengthen dialogue on work-related issues.
-          id: item2
+          elementId: item2
         - content: The ILO advocates for social justice and internationally recognized human and labor rights.
-          id: item3
+          elementId: item3
         - content: The ILO develops international labor standards in the form of conventions and recommendations to improve working conditions and labor rights.
-          id: item4
+          elementId: item4
         - content: The ILO is unique in its tripartite structure that includes representatives from government, employer, and worker organizations.
-          id: item5
+          elementId: item5
         - content: The ILO works to eradicate child labor, targeting the worst forms of child labor through conventions and action programs.
-          id: item6
+          elementId: item6
         - content: The ILO promotes gender equality and empowers women through targeted policies and programs.
-          id: item7
+          elementId: item7
         - content: The ILO’s Decent Work agenda aims to secure fair income, safety at work, social protection, and respect for workers' rights.
-          id: item8
+          elementId: item8
         - content: The ILO provides research and data on global employment trends and labor market issues to inform policy development.
-          id: item9
+          elementId: item9
         - content: The ILO offers training and education programs to improve occupational skills and competencies.
-          id: item10
+          elementId: item10
         - content: The annual International Labor Conference is where ILO members convene to discuss and create labor standards.
-          id: item11
+          elementId: item11
   settings:
     ordered:
       type: select