@ilo-org/twig 0.2.7 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ilo-org/twig
 
+## 0.2.8
+
+### Patch Changes
+
+- 62c3c624e: Bugfixes in multiple components
+- 1b29018f0: Adds better React Storybook experience
+- 43c2b0026: Cornercut changes to make more consistent across sizes and breakpoints for hero and cards
+- Updated dependencies [62c3c624e]
+- Updated dependencies [1b29018f0]
+- Updated dependencies [43c2b0026]
+  - @ilo-org/fonts@0.0.5
+  - @ilo-org/icons@0.1.13
+  - @ilo-org/styles@0.1.13
+  - @ilo-org/themes@0.1.13
+  - @ilo-org/utils@0.0.9
+
 ## 0.2.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -20,11 +20,11 @@
     "components"
   ],
   "dependencies": {
-    "@ilo-org/fonts": "0.0.4",
-    "@ilo-org/icons": "0.1.12",
-    "@ilo-org/styles": "0.1.12",
-    "@ilo-org/themes": "0.1.12",
-    "@ilo-org/utils": "0.0.8",
+    "@ilo-org/fonts": "0.0.5",
+    "@ilo-org/icons": "0.1.13",
+    "@ilo-org/styles": "0.1.13",
+    "@ilo-org/themes": "0.1.13",
+    "@ilo-org/utils": "0.0.9",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"
   },

package/src/patterns/components/breadcrumb/breadcrumb.twig

@@ -2,7 +2,6 @@
   BREADCRUMB COMPONENT
 #}
 {% set lastlink = links|last %}
-
 <nav class="{{prefix}}--breadcrumb{% if className %} {{className}}{% endif %}" data-prefix="{{prefix}}" data-loadcomponent="Breadcrumb">
   <ol class="{{prefix}}--breadcrumb--items">
     <li class="{{prefix}}--breadcrumb--item home">

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

@@ -21,6 +21,7 @@
     alignment: herocard.alignment,
     eyebrow: herocard.eyebrow,
     datecopy: herocard.datecopy,
+    hasbackground: hasbackground,
     intro: herocard.intro,
     prefix: prefix,
     socials: herocard.socials,

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

@@ -68,6 +68,14 @@ hero:
       options:
         dark: Dark
         light: Light
+    hasbackground:
+      type: select
+      label: Has Background
+      description: does the hero card have a background? (Defaults to true, only applied to Home Hero)
+      options:
+        true: true
+        false: 'false'
+      preview: true
     types:
       type: select
       label: Types

package/src/patterns/components/herocard/herocard.twig

@@ -1,7 +1,7 @@
 {#
   HEROCARD COMPONENT
 #}
-<div class="{{prefix}}--hero-card {{prefix}}--hero-card--{{alignment}} {{prefix}}--hero-card--{{theme}} {{prefix}}--hero-card--{{types}}">
+<div class="{{prefix}}--hero-card {{prefix}}--hero-card--{{alignment}} {{prefix}}--hero-card--{{theme}} {{prefix}}--hero-card--{{types}}{% if not hasbackground or hasbackground == 'false' %} {{prefix}}--hero-card--nobackground{% endif %}">
   {% if eyebrow %}
     <p class="{{ prefix }}--hero-card--eyebrow">{{ eyebrow }}</p>
   {% endif %}
@@ -28,4 +28,4 @@
       </li>
     {% endfor %}
   </ul>
-</div>
+</div>

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

@@ -45,4 +45,12 @@ herocard:
         center: 'center'
         right: 'right'
       preview: "center"
+    hasbackground:
+      type: select
+      label: Has Background
+      description: does the hero card have a background? (Defaults to true, only applied to Home Hero)
+      options:
+        true: true
+        false: 'false'
+      preview: true
   visibility: storybook

package/src/patterns/components/image/image.twig

@@ -3,7 +3,7 @@
 #}
 <figure class="{{prefix}}--image" data-prefix="{{prefix}}">
   <div class="image {{prefix}}--image--wrapper">
-    <picture class="{{prefix}}--image--img">
+    <picture class="{{prefix}}--image--img" {% if credit and ishero and ishero != 'false' %}title="{{credit}}"{% endif %}>
       {% for img in url|reverse %}
         {% if loop.last == false  %}
           <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
@@ -11,10 +11,12 @@
       {% endfor %}
       <img src="{{url|reverse|last.src}}" alt="{{alt}}">
     </picture>
-    {% if credit %}
-    <span class="{{prefix}}--credit">
-      <span class="{{prefix}}--credit--label">{{credit}}</span>
-    </span>
+    {% if not ishero or ishero =='false' %}
+      {% if credit %}
+      <span class="{{prefix}}--credit">
+        <span class="{{prefix}}--credit--label">{{credit}}</span>
+      </span>
+      {% endif %}
     {% endif %}
   </div>
   {% if caption %}

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

@@ -34,4 +34,14 @@ image:
           src: 'https://place-hold.it/1200x900?text=LargeBreakpointImage'
         - breakpoint: 1440
           src: 'https://place-hold.it/1600x1200?text=LargestBreakpointImage'
+  settings:
+    ishero:
+      type: select
+      label: Is Hero
+      description: Is this image in a hero? If true, and credit exists, will display credit in a title attribute
+      preview: false
+      required: false
+      options:
+        True: true
+        False: 'false'
   visibility: storybook

package/src/patterns/components/navigation/navigation.js

@@ -305,6 +305,10 @@ export default class Navigation {
       false
     );
 
+    if (window.innerWidth >= 1024) {
+      this.body.addEventListener(EVENTS.CLICK, (ev) => this.handleSearchButtonClickOff(ev), false);
+    }
+
     return this;
   }
 
@@ -323,6 +327,8 @@ export default class Navigation {
       false
     );
 
+    this.body.removeEventListener(EVENTS.CLICK, (ev) => this.handleSearchButtonClickOff(ev), false);
+
     return this;
   }