@ilo-org/twig 0.7.0 → 0.8.0

package/.turbo/turbo-build:lib.log

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.7.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.8.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 
 theme prefix added
 
-> @ilo-org/twig@0.7.0 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.8.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @ilo-org/twig
 
+## 0.8.0
+
+### Minor Changes
+
+- bdeca8720: Refactor the Card Group in line with changes made to the Cards.
+
+  - Width of the cards in the card group are set via a new `size` property that uses the `size` property of the cards in the group.
+  - A new `collapsed` property optionally removes the space between the cards so they are touching.
+  - A new `justify` property allows the user to horizontally align the cards to the beginning or center, or to the left and right edges of the container.
+
+- ba46a3a7d: Complete refactor of the Card component. Exposes each individual card as a separate template that can be imported individually or via the `Card` component using the `type` property.
+
+  Settings for the `Card` component change as follows:
+
+  - `cornercut` is deprecated for all cards except the Promo Card. For the others, it’s determined automatically by the type of card.
+  - `alignment` is deprecated for all cards except the Multilink Card, where it determines where the image should be placed, when size is set to wide.
+  - `size` has the following options: `narrow`, `wide`, `standard` and `fluid`. When a component only has two sizes, the options are `narrow`, `wide` and `fluid` and the default is `narrow`. When it has three options, all of the options are available and the default is `standard`. `fluid` is a new option which sets the card to be as wide as its container.
+  - `eventDetails` becomes `dateExtra`
+  - `imageAlt` is moved to `image.alt`
+  - `loading` is moved to `image.loading`
+
+  The following options for the Card's `type` setting have changed as follows:
+
+  - `graphic` becomes `text`
+  - `graphicpromo` becomes `promo`
+
+### Patch Changes
+
+- ee2889916: Cards are not clickable if they are passed a cta prop, only the cta is clickable
+- 8b12345cb: Remove alignment prop from Card component, which didn't do anything
+- ba46a3a7d: Create new picture component to be used internally where responsive images are needed without captions.
+- 8b12345cb: In Card, change cornercut options to be boolean `true` or `false`
+- Updated dependencies [ba46a3a7d]
+- Updated dependencies [bdeca8720]
+- Updated dependencies [bbd9262d1]
+- Updated dependencies [ee14cd3d3]
+- Updated dependencies [b56d55cfd]
+- Updated dependencies [5022dfc4c]
+- Updated dependencies [bacc0bba7]
+- Updated dependencies [ba46a3a7d]
+- Updated dependencies [652966ab7]
+  - @ilo-org/styles@0.7.0
+
 ## 0.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -25,7 +25,7 @@
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.6.0",
+    "@ilo-org/styles": "0.7.0",
     "@ilo-org/themes": "0.2.0",
     "@ilo-org/utils": "0.0.11"
   },

package/src/patterns/components/card/card.twig

@@ -1,125 +1,24 @@
 {#
   CARD COMPONENT
 #}
-<div class="{{prefix}}--card {{prefix}}--card--{{theme}} {{prefix}}--card--{{variant}}{% if cornercut %} {{prefix}}--card--{{cornercut}}{% endif %}{% if color %} {{prefix}}--card--{{color}}{% endif %}{% if alignment %} {{prefix}}--card--{{alignment}}{% endif %}{% if link %} {{prefix}}--card--action{% endif %}{% if type %} {{prefix}}--card--{{type}}{% endif %}{% if size %} {{prefix}}--card--{{size}}{% endif %}{% if isvideo %} {{prefix}}--card--isvideo{% endif %}{% if linklist %} {{prefix}}--card--linklist{% endif %}">
 {% if type == "" %}
   {% set type = variant %}
 {% endif %}
-  {% if link and type != 'data' and type != 'factlist' and type != 'stat' %}
-    <a class="{{prefix}}--card--link" href="{{link}}" title="{{title}}"><span class="{{prefix}}--card--link--text">{{title}}</span></a>
-  {% endif %}
-  <div class="{{prefix}}--card--wrap">
-    {% if image %}
-      {% block card_image %}
-        <div class="{{prefix}}--card--image--wrapper">
-          {% if image is iterable %}
-            <picture>
-              {% for img in image|reverse %}
-                {% if loop.last == false  %}
-                  {% if img.breakpoint matches '/^\\d+$/' %}
-                    <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
-                  {% else %}
-                    <source srcset="{{img.src}}" media="{{img.breakpoint}}">
-                  {% endif %}
-                {% endif %}
-              {% endfor %}
-              <img class="{{prefix}}--card--image" src="{{image|reverse|last.src}}" alt="{{imageAlt}}" {% if loading %} loading="{{ loading }}" {% endif %}>
-            </picture>
-            {% else %}
-            <picture>
-              <img class="{{prefix}}--card--image" src="{{image}}" alt="{{imageAlt}}" {% if loading %} loading="{{ loading }}" {% endif %}>
-            </picture>
-          {% endif %}
-        </div>
-      {% endblock %}
-    {% endif %}
-    <div class="{{prefix}}--card--content">
-      {% if eyebrow %}
-        <p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
-      {% endif %}
-      {% if title %}
-        <h5 class="{{prefix}}--card--title">{{title}}</h5>
-      {% endif %}
-      {% if type == "multilink" or type == "data" and image %}
-        {{ block("card_image") }}
-      {% endif %}
-      {% if intro %}
-        <p class="{{prefix}}--card--intro">{{intro}}</p>
-      {% endif %}
-      {% if date and type != "stat" and type != "data" and type != "graphicpromo" and type != "stat" and type != "factlist" %}
-        <time class="{{prefix}}--card--date" datetime="{{date.unix}}">{{date.human}}</time>
-      {% endif %}
-      {% if eventdetails %}
-        <p class="{{prefix}}--card--event-date">{{eventdetails}}</p>
-      {% endif %}
-      {% if profile %}
-        {% include "@components/profile/profile.twig" with {
-          avatar: profile.avatar,
-          description: profile.description,
-          link: profile.link,
-          name: profile.name,
-          role: profile.role,
-          prefix: prefix,
-          theme: theme,
-        } only %}
-      {% 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 %}
-      {% if cta %}
-        <a class="{{prefix}}--card--cta {{prefix}}--button {{prefix}}--button--medium {{prefix}}--button--primary" href="{{cta.url}}">
-          <span class="link__label">{{cta.label}}</span>
-        </a>
-      {% endif %}
-      {% if source %}
-        {% include "@components/link/link.twig" with {
-          theme: theme,
-          url: source.url,
-          label: source.label,
-          prefix: prefix
-        } %}
-      {% endif %}
-      {% if linklist %}
-        {% include "@components/linklist/linklist.twig" with {
-          headline: linklist.headline,
-          linkgroup: linklist.linkgroup,
-          prefix: prefix
-        } only %}
-      {% endif %}
-      {% if dataset %}
-        {% if dataset.content %}
-          {% for item in dataset.content.items %}
-            <p class="{{prefix}}--card--data--content-label">{{ item.label }}</p>
-            <p class="{{prefix}}--card--data--content-copy">{{ item.copy }}</p>
-          {% endfor %}
-        {% endif %}
-        {% if dataset.files %}
-          <div class="{{prefix}}--card--data--content-files">
-            <p class="{{prefix}}--card--data--content-label">{{ dataset.files.headline }}</p>
-            {% for item in dataset.files.items %}
-              <a class="{{prefix}}--card--data--file {{prefix}}--button {{prefix}}--button--primary {{prefix}}--button--small" href="{{item.url}}"><span class="button__label" download>{{ item.label }}</span></a>
-            {% endfor %}
-          </div>
-        {% endif %}
-        {% if dataset.links %}
-          <div class="{{prefix}}--card--data--content-links">
-            <p class="{{prefix}}--card--data--content-label">{{ dataset.links.headline }}</p>
-            {% for item in dataset.links.items %}
-              {% include "@components/link/link.twig" with {
-                url: item.url,
-                label: item.label,
-                prefix: prefix
-              } %} <span>&nbsp;</span>
-            {% endfor %}
-          </div>
-        {% endif %}
-      {% endif %}
-    </div>
-  </div>
-</div>
+
+{% if type == "data" %}
+  {% include "@components/card_data/card_data.twig" %}
+{% elseif type == "detail" %}
+  {% include "@components/card_detail/card_detail.twig" %}
+{% elseif type == "factlist" %}
+  {% include "@components/card_factlist/card_factlist.twig" %}
+{% elseif type == "feature" %}
+  {% include "@components/card_feature/card_feature.twig" %}
+{% elseif type == "multilink" %}
+  {% include "@components/card_multilink/card_multilink.twig" %}
+{% elseif type == "promo" %}
+  {% include "@components/card_promo/card_promo.twig" %}
+{% elseif type == "stat" %}
+  {% include "@components/card_stat/card_stat.twig" %}
+{% elseif type == "text" %}
+  {% include "@components/card_text/card_text.twig" %}
+{% endif %}