@ilo-org/twig 0.2.5 → 0.2.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @ilo-org/twig
 
+## 0.2.6
+
+### Patch Changes
+
+- f7f448c65: Fixes to React radio button, SearchField, add ability to serve different langauge fonts
+- f4b7bcb7f: Local nav fixes for mobile
+- 0dfb90274: Patchfix for Feature card wide version
+- Updated dependencies [f7f448c65]
+- Updated dependencies [f4b7bcb7f]
+- Updated dependencies [0dfb90274]
+  - @ilo-org/fonts@0.0.3
+  - @ilo-org/styles@0.1.11
+  - @ilo-org/themes@0.1.11
+  - @ilo-org/utils@0.0.7
+  - @ilo-org/icons@0.1.11
+
 ## 0.2.5
 
 ### Patch Changes

package/apps/storybook/styles.scss

@@ -1,2 +1 @@
-@import '~@ilo-org/fonts';
 @import '@ilo-org/styles/scss/monorepo';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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.2",
-    "@ilo-org/icons": "0.1.10",
-    "@ilo-org/styles": "0.1.10",
-    "@ilo-org/themes": "0.1.10",
-    "@ilo-org/utils": "0.0.6",
+    "@ilo-org/fonts": "0.0.3",
+    "@ilo-org/icons": "0.1.11",
+    "@ilo-org/styles": "0.1.11",
+    "@ilo-org/themes": "0.1.11",
+    "@ilo-org/utils": "0.0.7",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"
   },

package/src/patterns/components/localnav/localnav.twig

@@ -1,12 +1,14 @@
 {#
   LOCALNAV COMPONENT
 #}
-<header class="{{prefix}}--header" data-loadcomponent="Navigation" data-prefix="{{prefix}}">
+<header class="{{prefix}}--header {{prefix}}--header--local" data-loadcomponent="Navigation" data-prefix="{{prefix}}">
   <div class="{{prefix}}--header--utility-bar {{prefix}}--header--utility-bar--local">
     <nav class="{{prefix}}--nav--local">
-      <a href="{{siteurl}}" class="{{prefix}}--nav--local--logo-link">
-        <img src="{{logo.image}}" alt="{{logo.alt}}" class="{{prefix}}--nav--local--logo">
-      </a>
+      <div class="{{prefix}}--nav--local--logo-wrapper">
+        <a href="{{siteurl}}" class="{{prefix}}--nav--local--logo-link">
+          <img src="{{logo.image}}" alt="{{logo.alt}}" class="{{prefix}}--nav--local--logo">
+        </a>
+      </div>
 
       <ul class="{{prefix}}--nav--local--set">
         {% for item in primarynav.items %}
@@ -28,5 +30,57 @@
         %}
       </div> <!-- /.{{prefix}}--language-switcher--wrap -->
     </div> <!-- /.{{prefix}}--language-switcher -->
+    <button class="ilo--header--menu">Menu</button>
   </div> <!-- /.{{prefix}}--header--utility-bar -->
+
+
+  <div class="{{prefix}}--header--navigation">
+    <div class="{{prefix}}--header--inner">
+      <div class="{{prefix}}--mobile--nav">
+        <div class="{{prefix}}--mobile--nav--logo">
+          <a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
+            <img class="{{prefix}}--header--logo" src="{{mobilelogo.image}}" alt="{{mobilelogo.alt}}">
+          </a>
+          <button class="{{prefix}}--header--menu--close">{{menucloselabel}}</button>
+        </div> <!-- /.{{prefix}}--mobile--logo -->
+
+        <div class="{{prefix}}--mobile--nav--language--switcher">
+          <button class="{{prefix}}--mobile--nav--language--switcher--button" type="button">{{languagelabel}}</button>
+        </div> <!-- /.{{prefix}}--mobile--nav--language--switcher -->
+        <div class="{{prefix}}--mobile--nav--language--select">
+          <div class="{{prefix}}--header--inner">
+            <div class="{{prefix}}--mobile--subnav--menu">
+              <button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
+              <button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
+              <h6 class="{{prefix}}--mobile--subnav--label">{{languagelabel}}</h6>
+            </div> <!-- /{{prefix}}--mobile--subnav--menu -->
+            <ul class="{{prefix}}--nav--set">
+              {% for item in languagecontextmenu.links %}
+                <li class="{{prefix}}--nav--items">
+                  <a href="{{item.url}}" class="{{prefix}}--nav--link {{prefix}}--nav--language">{{item.label}}</a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </div> <!-- /.{{prefix}}--mobile--nav -->
+      <nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
+        <h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>
+        <ul class="{{prefix}}--nav--set">
+          {% for item in primarynav.items %}
+            <li class="{{prefix}}--nav--items">
+              <a href="{{item.link}}" class="{{prefix}}--nav--link">{{item.label}}</a>
+            </li>
+          {% endfor %}
+          {% if subnav %}
+            <li class="{{prefix}}--nav--items">
+              <button class="{{prefix}}--nav--trigger">{{subnav.buttonlabel}}</button>
+            </li>
+          {% endif %}
+        </ul>
+      </nav>
+      <div class="{{prefix}}--search">
+        <button class="{{prefix}}--search--button" type="button">{{searchlabel}}</button>
+      </div> <!-- /.{{prefix}}--search -->
+    </div> <!-- /.{{prefix}}--header--inner -->
 </header>

package/src/patterns/components/navigation/navigation.twig

@@ -65,7 +65,6 @@
             </ul>
           </div>
         </div>
-
       </div> <!-- /.{{prefix}}--mobile--nav -->
       <nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
         <h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>

package/src/patterns/components/tooltip/tooltip.js

@@ -163,19 +163,16 @@ export default class Tooltip {
       }
 
       // set style top and left on tooltip
-      // setPosition({ x: x, y: y });
       this.tooltip.style.top = y;
       this.tooltip.style.left = x;
 
       // set class for placement on arrow
-      // setArrowPlacement(placement);
       this.arrow.classList.remove(`${this.prefix}--tooltip--arrow--placement-${this.placement}`);
       this.arrow.classList.add(`${this.prefix}--tooltip--arrow--placement-${this.placement}`);
       this.placement = placement;
       this.arrow.setAttribute('data-placement', placement);
 
       // set class for alignment on tooltip
-      // setArrowAlignment(alignment);
       this.tooltip.classList.remove(`${this.prefix}--tooltip--alignment-${this.alignment}`);
       this.tooltip.classList.add(`${this.prefix}--tooltip--alignment-${this.alignment}`);
       this.alignment = alignment;