@ilo-org/twig 0.2.4 → 0.2.6

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

@@ -1,7 +1,7 @@
 list:
   use: '@components/list/list.twig'
   label: List
-  description: A list.
+  description: The list component
   fields:
     title:
       type: text
@@ -12,7 +12,7 @@ list:
     items:
       type: object
       label: Items
-      description: The list items.
+      description: Array of the list items
       required: true
       preview:
         - content: Arabica. Arabica is the most popular type of coffee, hands down.
@@ -29,7 +29,7 @@ list:
     ordered:
       type: select
       label: Ordered
-      description: The order for the list.
+      description: The order for the list. `Ordered` uses numbers, `unordered` uses arrow indicators and `unstyled` doesn't have anything but spacing.
       required: false
       options:
         ordered: Ordered
@@ -39,7 +39,7 @@ list:
     alignment:
       type: select
       label: Alignment
-      description: Is the list displayed horizontally?
+      description: Is the list displayed horizontally? Usually used for shorter items inside a list.
       options:
         default: Default
         horizontal: Horizontal

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/navigation/navigation.wingsuit.yml

@@ -45,7 +45,7 @@ navigation:
     primarynav:
       type: object
       label: Primary Navigation
-      description: Navigation for the primary menu
+      description: Navigation for the primary menu, a list of navigation items as well as some labels for display.
       preview:
         navlabel: Primary Navigation
         mobilecloselabel: Close
@@ -63,7 +63,7 @@ navigation:
     subnav:
       type: object
       label: Secondary navigation
-      description: Navigation for the sub menu
+      description: Navigation for the sub menu, a list of subnav items as well as some labels for display.
       preview:
         navlabel: Secondary Navigation
         buttonlabel: More

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

@@ -28,17 +28,6 @@ notification:
       description: The headline of the notification
       required: true
       preview: 'With CTA'
-    type:
-      type: select
-      label: Type
-      description: What kind of notification is it?
-      required: true
-      options:
-        error: Error
-        info: Info
-        success: Success
-        warning: Warning
-      preview: 'info'
     timestamp:
       type: object
       label: Timestamp
@@ -55,4 +44,15 @@ notification:
         inline: Inline
         dialog: Dialog
       preview: 'dialog'
+    type:
+      type: select
+      label: Type
+      description: What kind of notification is it?
+      required: true
+      options:
+        error: Error
+        info: Info
+        success: Success
+        warning: Warning
+      preview: 'info'
   visibility: storybook

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

@@ -8,7 +8,7 @@ pagination:
       label: Current page
       description: current page number that the user is on, zero-indexed
       required: true
-      preview: 0
+      preview: '0'
     firstPageUrl:
       type: string
       label: First Page link
@@ -68,5 +68,5 @@ pagination:
       label: Total Pages
       description: The number of total pages
       required: true
-      preview: 8
+      preview: '8'
   visibility: storybook

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

@@ -23,10 +23,14 @@ readmore:
       description: HTML content
       preview: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
       required: true
+  settings:
     openatstart:
-      type: boolean
+      type: select
       label: Open At Start
       description: should the read more be open at page load?
+      options:
+        true: 'true'
+        false: false
       preview: false
       required: true
   visibility: storybook

package/src/patterns/components/tags/tag.wingsuit.yml

@@ -1,24 +1,24 @@
 tag:
   use: '@components/tags/tag.twig'
   label: Tag
-  description: A clickable tag
+  description: A display or interactable tag
   fields:
     content:
       type: text
       label: Content
-      description: The tag item's collapsed content.
+      description: The tag text content.
       preview:
         faker: lorem.word
     id:
       type: text
       label: ID
-      description: The tag item's id.
+      description: The tag's id.
       preview:
         faker: lorem.word
     url:
       type: text
       label: URL
-      description: The tag's url reference
+      description: The tag's url reference 
       preview:
         faker: https://www.google.com/
   settings: 
@@ -34,7 +34,7 @@ tag:
     tagType:
       type: type
       label: Tag Type
-      description: The type of tag
+      description: The type of tag. Anchor and button have potential user interactions where display is static.
       options:
         anchor: Anchor
         button: Button

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

@@ -1,12 +1,12 @@
 tags:
   use: '@components/tags/tags.twig'
   label: Tags
-  description: A set of tags
+  description: A group of tags
   fields:
     items:
       type: object
       label: Items
-      description: The tag items.
+      description: An array of tag data to implement a Tag component
       required: true
       preview:
         - content: content 1

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

@@ -92,6 +92,7 @@ export default class Tooltip {
     if (target != null) {
       const rect = target.getBoundingClientRect();
       this.tooltip.classList.add(`${this.prefix}--tooltip--visible`);
+      this.tooltip.classList.add(`${this.prefix}--tooltip--fade`);
       this.postMouseOver(rect);
     }
 
@@ -99,7 +100,10 @@ export default class Tooltip {
   }
 
   handleOnMouseOut(e) {
-    this.tooltip.classList.remove(`${this.prefix}--tooltip--visible`);
+    this.tooltip.classList.remove(`${this.prefix}--tooltip--fade`);
+    setTimeout(() => {
+      this.tooltip.classList.remove(`${this.prefix}--tooltip--visible`);
+    }, 150);
 
     return this;
   }
@@ -159,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;

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

@@ -9,11 +9,12 @@ tooltip:
       description: label shown on the tooltip
       required: true
       preview: 'Tooltip text'
+  settings:
     icon:
       type: select
       label: Icon
       description: does this tooltip have the "info" icon?
-      fields:
+      options:
         true: 'true'
         false: false
       preview: 'true'
@@ -21,8 +22,8 @@ tooltip:
     theme:
       type: select
       label: Theme
-      description: choose the tooltip's theme
-      fields:
+      description: Choose the tooltip's theme
+      options:
         light: light
         dark: dark
       preview: dark