@ilo-org/twig 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ilo-org/twig
 
+## 0.2.4
+
+### Patch Changes
+
+- 48e7a4ada: - Hero: Breadcrumb add in
+  - Cards: Video icon for feature and external link option
+- 2bfdfd356: Fixes to Hero, Cards components
+- Updated dependencies [48e7a4ada]
+- Updated dependencies [2bfdfd356]
+  - @ilo-org/icons@0.1.9
+  - @ilo-org/styles@0.1.9
+  - @ilo-org/themes@0.1.9
+  - @ilo-org/utils@0.0.5
+
 ## 0.2.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -21,10 +21,10 @@
   ],
   "dependencies": {
     "@ilo-org/fonts": "0.0.2",
-    "@ilo-org/icons": "0.1.8",
-    "@ilo-org/styles": "0.1.8",
-    "@ilo-org/themes": "0.1.8",
-    "@ilo-org/utils": "0.0.4",
+    "@ilo-org/icons": "0.1.9",
+    "@ilo-org/styles": "0.1.9",
+    "@ilo-org/themes": "0.1.9",
+    "@ilo-org/utils": "0.0.5",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"
   },

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

@@ -1,7 +1,7 @@
 {#
   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 %}">
+<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 is defined %} {{prefix}}--card--linklist{% endif %}">
 {% if type == "" %}
   {% set type = variant %}
 {% endif %}
@@ -67,7 +67,7 @@
         {% include "@components/linklist/linklist.twig" with {
           headline: linklist.headline,
           linkgroup: linklist.linkgroup,
-          prefix: prefix,
+          prefix: prefix
         } only %}
       {% endif %}
       {% if dataset %}
@@ -92,7 +92,7 @@
               {% include "@components/link/link.twig" with {
                 url: item.url,
                 label: item.label,
-                prefix: prefix,
+                prefix: prefix
               } %} <span>&nbsp;</span>
             {% endfor %}
           </div>

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

@@ -8,6 +8,11 @@ card:
       label: Title
       description: Title field
       preview: Lorem ipsum
+    isvideo:
+      type: string
+      label: Is a Video
+      description: Whether the card should display a video icon
+      preview: False
     intro:
       type: string
       label: Intro
@@ -65,6 +70,11 @@ card:
       label: Link List
       description: Multi-link list
       preview:
+    externallink:
+      type: object
+      label: External Link
+      description: External link
+      preview:
     dataset:
       type: object
       label: Data set
@@ -176,6 +186,7 @@ card:
       label: Feature Card
       description: The Feature Card
       fields:
+        isvideo: true
         title: "Vertical info card descriptive headline text"
         eyebrow: Eyebrow title
         date:
@@ -183,6 +194,16 @@ card:
           unix: 1670389200
         link: "https://www.google.com/search?q=graphic"
         image: "https://placekitten.com/412/232"
+        linklist:
+          headline: ""
+          linkgroup:
+            - headline: ""
+              links:
+                - label: Link One
+                  url: 'http://www.google.com'
+        # externallink:
+        #     label: Link One
+        #     url: 'https://www.google.com'
     detail:
       label: Detail Card
       description: The Detail Card

package/src/patterns/components/hero/hero.twig

@@ -2,7 +2,13 @@
   HERO COMPONENT
 #}
 <div class="{{prefix}}--hero {{prefix}}--hero--{{theme}} {{prefix}}--hero--{{types}} {% if image %}{{prefix}}--hero--image{% endif %}">
-
+  {% if breadcrumb is defined %}
+    {% include "@components/breadcrumb/breadcrumb.twig" with {
+      home: breadcrumb.home,
+      links: breadcrumb.links,
+      prefix: prefix,
+    } only %}
+  {% endif %}
   {% if not image %}
   {% else %}
     {% include "@components/image/image.twig" with {

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

@@ -3,6 +3,24 @@ hero:
   label: Hero
   description: The Hero presents an image banner.
   fields:
+    breadcrumb:
+      label: breadcrumb
+      type: object
+      preview:
+        home:
+          label: "Home"
+          url: "/"
+        links:
+          - label: "Link One"
+            url: "/linkone"
+          - label: "Link Two"
+            url: "/linktwo"
+          - label: "Link Three"
+            url: "/linkthree"
+          - label: "Link Four"
+            url: "/linkfour"
+          - label: "Link Five"
+            url: "/linkfive"
     image:
       type: object
       preview: