@ilo-org/twig 0.2.25 → 0.2.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,9 @@
1
1
 
2
- > @ilo-org/twig@0.2.25 build:lib /home/runner/work/designsystem/designsystem/packages/twig
2
+ > @ilo-org/twig@0.2.26 build:lib /home/runner/work/designsystem/designsystem/packages/twig
3
3
  > node importprefix.js && node importsvgs.js && pnpm output
4
4
 
5
5
  theme prefix added
6
6
 
7
- > @ilo-org/twig@0.2.25 output /home/runner/work/designsystem/designsystem/packages/twig
7
+ > @ilo-org/twig@0.2.26 output /home/runner/work/designsystem/designsystem/packages/twig
8
8
  > node outputtwigs.js
9
9
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @ilo-org/twig
2
2
 
3
+ ## 0.2.26
4
+
5
+ ### Patch Changes
6
+
7
+ - 4dd7f57a5: Add an if statement to all Drupal.behaviors to avoid calling js functions more than once.
8
+ - 44ff8b6db: Add responsive image structure to card images. Add loading attribute for card images and image component.
9
+
3
10
  ## 0.2.25
4
11
 
5
12
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/twig",
3
- "version": "0.2.25",
3
+ "version": "0.2.26",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Twig components for the ILO's Design System",
6
6
  "main": "",
@@ -12,7 +12,14 @@
12
12
  {% if image %}
13
13
  <div class="{{prefix}}--card--image--wrapper">
14
14
  {% block card_image %}
15
- <picture><img class="{{prefix}}--card--image" src="{{image}}" alt="{{title}}"></picture>
15
+ <picture>
16
+ {% for img in url|reverse %}
17
+ {% if loop.last == false %}
18
+ <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
19
+ {% endif %}
20
+ {% endfor %}
21
+ <img class="{{prefix}}--card--image" src="{{url|reverse|last.src}}" alt="{{alt}}" {% if loading %}loading="{{ loading }}"{% endif %}>
22
+ </picture>
16
23
  {% endblock %}
17
24
  </div>
18
25
  {% endif %}
@@ -26,7 +33,14 @@
26
33
  {% if type == "multilink" or type == "data" and image %}
27
34
  <div class="{{prefix}}--card--image--wrapper">
28
35
  {% block card_image_multilink_or_data %}
29
- <picture><img class="{{prefix}}--card--image" src="{{image}}" alt="{{title}}"></picture>
36
+ <picture>
37
+ {% for img in url|reverse %}
38
+ {% if loop.last == false %}
39
+ <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
40
+ {% endif %}
41
+ {% endfor %}
42
+ <img class="{{prefix}}--card--image" src="{{url|reverse|last.src}}" alt="{{alt}}" {% if loading %}loading="{{ loading }}"{% endif %}>
43
+ </picture>
30
44
  {% endblock %}
31
45
  </div>
32
46
  {% endif %}
@@ -9,7 +9,7 @@
9
9
  <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
10
10
  {% endif %}
11
11
  {% endfor %}
12
- <img src="{{url|reverse|last.src}}" alt="{{alt}}">
12
+ <img src="{{url|reverse|last.src}}" alt="{{alt}}" {% if loading %}loading="{{ loading }}"{% endif %}>
13
13
  </picture>
14
14
  {% if not ishero or ishero =='false' %}
15
15
  {% if credit %}
@@ -20,6 +20,15 @@ image:
20
20
  description: string
21
21
  preview: "© Marcel Crozet/ILO"
22
22
  required: true
23
+ loading:
24
+ type: string
25
+ label: Loading
26
+ description: The loading attribute for the image
27
+ required: false
28
+ preview: "lazy"
29
+ options:
30
+ Lazy: lazy
31
+ Eager: eager
23
32
  url:
24
33
  type: object
25
34
  label: URL