@ilo-org/twig 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @ilo-org/twig
 
+## 0.2.0
+
+### Minor Changes
+
+- 22bda9fb8: Rename tagset to Tags to match other components and work as an npm package
+
+### Patch Changes
+
+- a3bd6c73c: Bugfixes for Form, Loading components
+- aa8469ceb: Remove testing code from hero and add RTL style for tags
+- da45da834: Bugfixes in several components
+- 539894a90: Hero fixes for RTL and lack of image
+- Updated dependencies [a3bd6c73c]
+- Updated dependencies [aa8469ceb]
+- Updated dependencies [da45da834]
+- Updated dependencies [539894a90]
+- Updated dependencies [22bda9fb8]
+  - @ilo-org/styles@0.1.5
+  - @ilo-org/icons@0.1.5
+  - @ilo-org/themes@0.1.5
+
+## 0.1.4
+
+### Patch Changes
+
+- a8e627c45: Bugfixes in Form and Footer, and right-to-left styling for Form
+- 9d25aa0e8: QA bugfixes for Nav Hero and Callout
+- Updated dependencies [a8e627c45]
+- Updated dependencies [9d25aa0e8]
+  - @ilo-org/icons@0.1.4
+  - @ilo-org/styles@0.1.4
+  - @ilo-org/themes@0.1.4
+
 ## 0.1.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -21,9 +21,9 @@
   ],
   "dependencies": {
     "@ilo-org/fonts": "0.0.2",
-    "@ilo-org/icons": "0.1.3",
-    "@ilo-org/styles": "0.1.3",
-    "@ilo-org/themes": "0.1.3",
+    "@ilo-org/icons": "0.1.5",
+    "@ilo-org/styles": "0.1.5",
+    "@ilo-org/themes": "0.1.5",
     "@ilo-org/utils": "0.0.1",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"

package/src/patterns/components/accordion/accordion.twig

@@ -13,5 +13,4 @@
         prefix: prefix
       } only %}
     {% endfor %}
-    </ul>
-</div>
+</ul>

package/src/patterns/components/callout/callout.twig

@@ -19,7 +19,7 @@
     {% if buttonLabel %}
       <div class="{{prefix}}--callout--footer">
         <button
-          class="{{prefix}}--button {{prefix}}--button--small {{prefix}}--button--tertiary"
+          class="{{prefix}}--button {{prefix}}--button--small {{prefix}}--button--secondary"
           type="button"
         >
           <span class="button__label">{{ buttonLabel }}</span>

package/src/patterns/components/form/datepicker.twig

@@ -36,7 +36,6 @@
       {% if enddata.error %}
         <span class="ilo--fieldset--error">{{enddata.error}}</span>
       {% endif %}
-    </div>
   </fieldset>
   {% endif %}
 </div>

package/src/patterns/components/form/form.twig

@@ -3,6 +3,9 @@
   TODO: This could stand to be more DRY
 #}
 <form class="{{prefix}}--form" id="{{formid}}" action="{{action}}" data-loadcomponent="Form">
+  {% if headline %}
+  <legend class="{{prefix}}--form--legend">{{headline}}</legend>
+  {% endif %}
   {% for item in items %}
     {% if item.type == "formgroup" %}
       <fieldset class="{{prefix}}--formgroup {{prefix}}--fieldset">
@@ -31,7 +34,7 @@
             {% endif %}
             {% for f in i.field %}
             <div class="{{prefix}}--fieldset--input--{{i.type}}">
-              <label class="{{prefix}}--fieldset--label" for="{% if f.id %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
+              <label class="{{prefix}}--fieldset--label" for="{% if f.id is defined and f.id is not empty %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
               {% if i.type == "radio" %}
                 {% include '@components/form/radio.twig' with f %}
               {% else %}
@@ -70,7 +73,7 @@
         {% endif %}
         {% for f in item.field %}
         <div class="{{prefix}}--fieldset--input--{{item.type}}">
-          <label class="{{prefix}}--fieldset--label" for="{% if f.id %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
+          <label class="{{prefix}}--fieldset--label" for="{% if f.id is defined and f.id is not empty %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
           {% if item.type == "radio" %}
             {% include '@components/form/radio.twig' with f %}
           {% else %}

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

@@ -9,6 +9,11 @@ form:
       description: The form's action attribute
       preview: "http://www.ilo.org"
       required: true
+    headline:
+      type: string
+      label: Headline
+      description: Optional form headline
+      preview: ""
     formid:
       type: string
       label: formid
@@ -171,26 +176,26 @@ form:
                     type: "checkbox"
                 legend: "Multiple Checkboxes"
                 type: "checkbox"
-              - choicegroupid: "radios"
+              - choicegroupid: "radios2"
                 field:
                   - label: "Radio Field Label 1"
-                    name: "radio"
+                    name: "radio2"
                     type: "radio"
                     value: "radio1"
                   - label: "Radio Field Label 2"
-                    name: "radio"
+                    name: "radio2"
                     type: "radio"
                     value: "radio2"
                   - label: "Radio Field Label 3"
-                    name: "radio"
+                    name: "radio2"
                     type: "radio"
                     value: "radio3"
                   - label: "Radio Field Label 4"
-                    name: "radio"
+                    name: "radio2"
                     type: "radio"
                     value: "radio4"
                   - label: "Radio Field Label 5"
-                    name: "radio"
+                    name: "radio2"
                     type: "radio"
                     value: "radio5"
                 grouphelper: "Helper text"

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

@@ -1,15 +1,18 @@
 {#
   HERO COMPONENT
 #}
-
 <div class="{{prefix}}--hero {{prefix}}--hero--{{theme}} {{prefix}}--hero--{{types}} {% if image %}{{prefix}}--hero--image{% endif %}">
-  {% include "@components/image/image.twig" with {
-    alt: image.alt,
-    caption: image.caption,
-    credit: image.credit,
-    prefix: prefix,
-    url: image.url,
-  } only %}
+
+  {% if not image %}
+  {% else %}
+    {% include "@components/image/image.twig" with {
+      alt: image.alt,
+      caption: image.caption,
+      credit: image.credit,
+      prefix: prefix,
+      url: image.url,
+    } only %}
+  {% endif %}
   {% include "@components/herocard/herocard.twig" with {
     alignment: herocard.alignment,
     eyebrow: herocard.eyebrow,

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

@@ -30,6 +30,17 @@ hero:
             url: "https://www.linkedin.com/"
             icon: "linkedin"
         title: "This is an left aligned article headline that is more than two lines long"
+  variants:
+    default:
+      lable: Default
+    article:
+      label: Article
+      description: article settings
+      fields:
+        image: ""
+      settings:
+        theme: light
+        types: article
   settings:
     theme:
       type: select

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

@@ -3,6 +3,19 @@ loading:
   label: Loading
   description: The Loading component displays a loading state. (See Javascript comments in loading.js for how to use this with vanilla JS).
   fields:
+    message:
+      type: string
+      label: Message
+      description: The loading message
+      preview: 'Submitting'
+      required: true
+    loadedmessage:
+      type: string
+      label: LOaded Message
+      description: The loaded message
+      preview: 'Completed'
+      required: true
+  settings:
     size:
       type: select
       label: Size
@@ -22,16 +35,4 @@ loading:
         loading: Loading
         loaded: Loaded
       preview: 'loading'
-    message:
-      type: string
-      label: Message
-      description: The loading message
-      preview: 'Submitting'
-      required: true
-    loadedmessage:
-      type: string
-      label: LOaded Message
-      description: The loaded message
-      preview: 'Completed'
-      required: true
   visibility: storybook

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

@@ -88,8 +88,8 @@ navigation:
       preview:
         action: "http://www.ilo.org"
         input:
-          label: "Search Field Label"
-          helper: "The search field's helper text"
+          label: ""
+          helper: ""
           name: "text"
           placeholder: "Search Field"
           type: "text"

package/src/patterns/components/{tag → tags}/index.js

@@ -2,6 +2,6 @@
  * tag
  */
 // Module template
-import './tag-set.twig';
-import './tagset.wingsuit.yml';
+import './tags.twig';
+import './tags.wingsuit.yml';
 import './tag.behavior';

package/src/patterns/components/{tag → tags}/tag.behavior.js

@@ -1,4 +1,4 @@
-import Tag from './tagset';
+import Tag from './tag';
 
 Drupal.behaviors.tag = {
   attach() {

package/src/patterns/components/{tag → tags}/tag.stories.jsx

@@ -1,6 +1,6 @@
 import './index';
 
-const patternDefinition = require('./tagset.wingsuit.yml');
+const patternDefinition = require('./tags.wingsuit.yml');
 
 export const wingsuit = {
   patternDefinition,

package/src/patterns/components/{tag → tags}/tag.twig

@@ -2,20 +2,20 @@
   TAG COMPONENT
 #}
 {% if tagType == "button" and defaultActive %}
-  <li class="{{prefix}}--tag-set__item">
+  <li class="{{prefix}}--tags__item">
     <button class="{{prefix}}--tag {{prefix}}--tag--button {{prefix}}--tag--active icon__position--right" id="{{ id }}" data-active={{ defaultActive }} type="button">
       {{content}}
       <span class="ilo--icon" title="Remove"></span>
     </button>
   </li>
 {% elseif tagType == "anchor" %}
-<li class="{{prefix}}--tag-set__item">
+<li class="{{prefix}}--tags__item">
     <a class="{{prefix}}--tag {{prefix}}--tag--anchor {% if defaultActive %} {{prefix}}--tag--active{% endif %}" href="{{ url }}"  id="{{ id }}" data-active={{ defaultActive }}>
       {{content}}
     </a>
 </li>
 {% elseif tagType == "display" %}
-<li class="{{prefix}}--tag-set__item">
+<li class="{{prefix}}--tags__item">
   <span class="{{prefix}}--tag {% if defaultActive %} {{prefix}}--tag--active{% endif %}" id="{{ id }}" data-active={{ defaultActive }}>
     {{content}}
   </span>

package/src/patterns/components/{tag → tags}/tag.wingsuit.yml

@@ -1,5 +1,5 @@
 tag:
-  use: '@components/tag/tag.twig'
+  use: '@components/tags/tag.twig'
   label: Tag
   description: A clickable tag
   fields:

package/src/patterns/components/{tag/tag-set.twig → tags/tags.twig}

@@ -1,9 +1,9 @@
 {#
-  TAG SET COMPONENT
+  TAGS COMPONENT
 #}
-<ul class="ilo--tag-set" data-loadcomponent="Tag" data-multipleactive="{{ allowMultipleActive|default(true) }}">
+<ul class="ilo--tags" data-loadcomponent="Tag" data-multipleactive="{{ allowMultipleActive|default(true) }}">
   {% for item in items %}
-    {% include "@components/tag/tag.twig" with {
+    {% include "@components/tags/tag.twig" with {
       content: item.content,
       defaultActive: item.defaultActive,
       id: item.id,

package/src/patterns/components/{tag/tagset.wingsuit.yml → tags/tags.wingsuit.yml}

@@ -1,6 +1,6 @@
-tagset:
-  use: '@components/tag/tag-set.twig'
-  label: Tag Set
+tags:
+  use: '@components/tags/tags.twig'
+  label: Tags
   description: A set of tags
   fields:
     items: