@ilo-org/twig 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "publishConfig": {
@@ -51,8 +51,8 @@
     "@ilo-org/brand-assets": "0.5.3",
     "@ilo-org/fonts": "0.2.2",
     "@ilo-org/icons": "0.4.0",
-    "@ilo-org/themes": "0.9.0",
-    "@ilo-org/styles": "1.1.0",
+    "@ilo-org/styles": "1.2.0",
+    "@ilo-org/themes": "0.9.1",
     "@ilo-org/utils": "0.1.1"
   },
   "devDependencies": {

package/src/patterns/components/button/button.twig

@@ -2,7 +2,7 @@
   BUTTON COMPONENT
 #}
 {% if url %}
-	<a class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly|boolval %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target %} target="{{target}}" rel="noopener noreferrer"{% endif %}{{ disabled|boolval ? ' disabled' }}>
+	<a class="{{prefix}}--button ilo--button__{{size}} {{prefix}}--button__{{type}}{% if icon %} {{prefix}}--button--icon {{prefix}}--button--icon--position__{{iconPosition}}{% endif %}{% if icononly|boolval %} {{prefix}}--button--icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target is defined and target != 'false' %} target="{{target}}" rel="noopener noreferrer" {% endif %} {{ disabled|boolval ? ' disabled' }}>
 		<span class="link__label">{{label}}</span>
 		{% block button_icon %}
 			{% if icon %}
@@ -16,7 +16,7 @@
 		{% endblock %}
 	</a>
 {% else %}
-	<button class="{{prefix}}--button ilo--button--{{size}} {{prefix}}--button--{{type}}{% if icon %} icon icon__position--{{iconPosition}}{% endif %}{% if icononly|boolval %} icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal|boolval %} aria-haspopup="dialog" {% endif %}{{ disabled|boolval ? ' disabled' }}{% if name %} name="{{name}}" {% endif %}>
+	<button class="{{prefix}}--button ilo--button__{{size}} {{prefix}}--button__{{type}}{% if icon %} {{prefix}}--button--icon {{prefix}}--button--icon--position__{{iconPosition}}{% endif %}{% if icononly|boolval %} {{prefix}}--button--icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal %} aria-haspopup="dialog" {% endif %} {{ disabled|boolval ? ' disabled' }}>
 		<span class="button__label">{{label}}</span>
 		{{ block("button_icon") }}
 	</button>

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

@@ -1,13 +1,13 @@
 {#
   CALLOUT COMPONENT
 #}
-<div class="{{prefix}}--callout {{prefix}}--callout--{{alert}} {% if isCollapsible|boolval and isOpen|boolval %} {{prefix}}--callout--open {% endif %} {% if isCollapsible|boolval %} {{prefix}}--callout--collapse {% endif %}" data-loadcomponent="Callout">
-	<div class="{{prefix}}--callout--sidebar">
-		<span class="{{prefix}}--callout--icon icon icon--{{alert}}"></span>
+<div class="{{prefix}}--callout {{prefix}}--callout__{{alert}} {% if isCollapsible|boolval and isOpen|boolval %} {{prefix}}--callout--open {% endif %} {% if isCollapsible|boolval %} {{prefix}}--callout--collapse {% 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>
+	<div class="{{prefix}}--callout__content">
+		<div class="{{prefix}}--callout__header">
+			<h5 class="{{prefix}}--callout__title">{{ title }}</h5>
 			{% if isCollapsible|boolval %}
 				<button class="{{prefix}}--callout--toggle" type="button" data-open="{{ toggleOpenLabel }}" data-closed="{{ toggleClosedLabel }}">
 					<span class="{{prefix}}--callout--button-text">
@@ -21,9 +21,9 @@
 				</button>
 			{% endif %}
 		</div>
-		{{ content }}
+		<p class="{{prefix}}--callout__description">{{ content }}</p>
 		{% if button %}
-			<div class="{{prefix}}--callout--footer">
+			<div class="{{prefix}}--callout__footer">
 				{% include '@components/button/button.twig' with {
           label: button.label,
           url: button.url,

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

@@ -1,4 +1,4 @@
 {#
   ICON COMPONENT
 #}
-<svg class="{{prefix}}--icon" data-name="{{name}}" data-size="{{size}}" data-color="{{color}}" data-loadcomponent="Icon"></svg>
+<svg width="24" height="24" class="{{prefix}}--icon" data-name="{{name}}" data-size="{{size}}" data-color="{{color}}" data-loadcomponent="Icon"></svg>

package/dist/components/icon/icon.css

@@ -1 +0,0 @@
-.ilo--icon:not([data-js-processed=true]){height:24px;width:24px}

package/src/tokens/exports/_font-families.scss

@@ -1,6 +0,0 @@
-@use "@ilo-org/themes/build/scss/tokens" as *;
-
-:export {
-  Display: $fonts-display;
-  Copy: $fonts-copy;
-}