@ilo-org/twig 0.10.4 → 0.11.0

package/.turbo/turbo-build:lib.log

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.10.4 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.11.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 
 theme prefix added
 
-> @ilo-org/twig@0.10.4 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.11.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @ilo-org/twig
 
+## 0.11.0
+
+### Minor Changes
+
+- 455e1b626: Add Radio as form element
+- 41f933135: Adds File Upload as form element
+- 4f439c1bf: Add Number Picker as form element
+- b7e6cda36: Add TextArea as form element
+- 2acffbd2e: Add Toggle as form element
+
+### Patch Changes
+
+- bd5919f50: Setting formControlClass as a variable with the default value at the begining of the template.
+- a43230b26: Add blocks to override with Drupal search block on the navigation.
+- c86fa4f33: Fix tooltip icon appearing in the wrong color. This adds a new parameter `icontheme` for the tooltip, which defaults to light.
+- 86b5b118a: Set name as default id for TextInput
+- Updated dependencies [c3b0e6def]
+- Updated dependencies [39ff32a91]
+- Updated dependencies [0488bc66e]
+- Updated dependencies [c86fa4f33]
+  - @ilo-org/styles@0.10.1
+  - @ilo-org/themes@0.5.1
+
+## 0.10.5
+
+### Patch Changes
+
+- ad590b833: Use container class to set max widths and padding for Navigation
+- e575c2973: Fit content in the footer inside a 1300px max-width container
+- Updated dependencies [1e18e0ca9]
+- Updated dependencies [ad590b833]
+- Updated dependencies [6c4ebfeb3]
+- Updated dependencies [e575c2973]
+- Updated dependencies [e575c2973]
+- Updated dependencies [73640499b]
+  - @ilo-org/styles@0.10.0
+  - @ilo-org/themes@0.5.0
+
 ## 0.10.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -25,8 +25,8 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.9.2",
-    "@ilo-org/themes": "0.4.0",
+    "@ilo-org/styles": "0.10.1",
+    "@ilo-org/themes": "0.5.1",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

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

@@ -1,4 +1,4 @@
-{# date_picker.html.twig #}
+{# datepicker.twig #}
 
 {% extends "@components/form/formcontrol.twig" %}
 

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

@@ -2,7 +2,7 @@ datepicker:
   namespace: Components/Forms
   use: "@components/datepicker/datepicker.twig"
   label: Date Picker
-  description: The facet component combines the Accordion and the Checkbox components. It's usually used to filter a list of items.
+  description: The Date Picker component is used to select a date from a calendar.
   visibility: storybook
   fields:
     label:

package/src/patterns/components/{form → fileupload}/fileupload.behavior.js

@@ -5,7 +5,6 @@ Drupal.behaviors.fileupload = {
     Array.prototype.forEach.call(
       document.querySelectorAll(`[data-loadcomponent="FileUpload"]`),
       (element) => {
-        // eslint-disable-next-line no-console
         new FileUpload(element);
       }
     );

package/src/patterns/components/{form → fileupload}/fileupload.js

@@ -47,12 +47,12 @@ export default class FileUpload {
    * @chainable
    */
   cacheDomReferences() {
-    /**
-     * The button for toggling Read More state
-     * @type {Object}
-     */
+    // Find the container of the input
     this.container = this.element.parentElement.parentElement;
 
+    // Find the form control
+    this.formControl = this.container.parentElement;
+
     return this;
   }
 
@@ -80,29 +80,56 @@ export default class FileUpload {
     return this;
   }
 
+  /**
+   * Format bytes to a human readable format
+   *
+   * @param {Number} bytes
+   * @param {Number} decimals
+   * @return {String}
+   */
+  formatBytes(bytes, decimals = 2) {
+    if (!+bytes) return "0 Bytes";
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+  }
+
   /**
    * onChange interaction with the FileUpload button
    *
    * @return {Object} FileUpload A reference to the instance of the class
    * @chainable
    */
-  onChange(e) {
-    const oldDiv =
-      this.container.querySelector(`.${this.prefix}--fieldset--input`) !== null;
-    if (oldDiv) {
-      this.container.remove(oldDiv);
+  onChange() {
+    // Classname of the list of files to upload
+    const fileListClass = `${this.prefix}--file-upload--list`;
+
+    // Find the fileList if it exsists
+    let fileList = this.formControl.querySelector(`.${fileListClass}`);
+
+    // Remove the fileList if it exists
+    if (fileList) {
+      fileList.remove();
     }
-    const newDiv = document.createElement("div");
-    newDiv.classList.add(`${this.prefix}--fieldset--input`);
-    const fileList = document.createElement("ul");
-    fileList.classList.add(`${this.prefix}--file-upload--list`);
+
+    // Create a new filelist and add it to the form control
+    fileList = document.createElement("ul");
+    fileList.classList.add(fileListClass);
+    this.formControl.appendChild(fileList);
+
+    // Add files to the filelist
     let files = "";
-    [...e.target.files].map((file) => {
-      files += this.template(file.name);
+    [...this.element.files].forEach((file) => {
+      const fileSize = this.formatBytes(file.size);
+      files += this.template(file.name, fileSize);
     });
+
     fileList.innerHTML = files;
-    newDiv.appendChild(fileList);
-    this.container.appendChild(newDiv);
 
     return this;
   }
@@ -111,9 +138,10 @@ export default class FileUpload {
    * A template for outputting the list item markup
    *
    * @param {String} filename
+   * @param {String} filesize
    * @return {String}
    */
-  template(filename) {
-    return `<li class="ilo--file-upload--list-item">${filename}</li>`;
+  template(filename, filesize) {
+    return `<li class="ilo--file-upload--list-item">${filename} (${filesize})</li>`;
   }
 }

package/src/patterns/components/fileupload/fileupload.stories.jsx

@@ -0,0 +1,9 @@
+import "./index";
+
+export default {};
+const patternDefinition = require("./fileupload.wingsuit.yml");
+
+/* eslint-disable-next-line */
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/fileupload/fileupload.twig

@@ -0,0 +1,20 @@
+{# fileupload.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ '--file-upload' %}
+{% set fileUploadClasses = [baseClass] %}
+{% set inputClass = baseClass ~ '--input' %}
+
+{% if error %}
+	{% set fileUploadClasses = fileUploadClasses|merge(['error']) %}
+{% endif %}
+
+{% block formfield %}
+	<div class="{{ fileUploadClasses|join(' ') }}">
+		<label class="{{ inputClass }}">
+			{{ placeholder }}
+			<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} {% if multiple %} multiple {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="file" data-label="{{ placeholder }}" aria-describedby="{{ ariaDescribedBy }}" {% if accept %} accept="{{ accept }}" {% endif %} data-loadcomponent="FileUpload" data-prefix="{{prefix}}"/>
+		</label>
+	</div>
+{% endblock %}

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

@@ -0,0 +1,94 @@
+fileupload:
+  namespace: Components/Forms
+  use: "@components/fileupload/fileupload.twig"
+  label: File Upload
+  description: The FileUpload component allows users to select and upload files
+    from their device to a web application. It displays a list of the
+    files to upload once they've been selected.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: Upload your files here
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+      preview: Max docs size 10MB
+    id:
+      type: text
+      label: ID
+      description: The ID of the text input.
+    name:
+      type: text
+      label: Name
+      description: The name of the text input.
+    placeholder:
+      type: text
+      label: Placeholder
+      description: The placeholder of the text input.
+      preview: Select files
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+    accept:
+      type: text
+      label: Accept
+      description: The accept attribute of the text input.
+      preview: ".pdf,.doc, .docx, .jpg, .png"
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "top"
+      default: "top"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: "medium"
+      default: "medium"
+      options:
+        small: small
+        medium: medium
+        large: large
+    multiple:
+      type: boolean
+      label: Multiple
+      description: If the user can select multiple files.
+      preview: false
+      options:
+        true: true
+        false: false
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the text input.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the text input.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/src/patterns/components/fileupload/index.js

@@ -0,0 +1,8 @@
+/**
+ * Fileupload
+ */
+
+import "./fileupload.twig";
+import "./fileupload.wingsuit.yml";
+import "./fileupload.behavior";
+import "../tooltip/tooltip.behavior";

package/src/patterns/components/footer/footer.twig

@@ -1,61 +1,63 @@
-{#
-  FOOTER COMPONENT
-#}
+{# footer.twig #}
 <footer class="{{prefix}}--footer">
-  <div class="{{prefix}}--footer--main">
-    <div class="site--info">
-      <img class="{{prefix}}--footer--logo" src="{{logo.url}}" alt="{{logo.alt}}" />
-      <h3 class="{{prefix}}--footer--headline">{{tagline}}</h3>
-      <h4 class="{{prefix}}--footer--subhead">{{subtagline}}</h4>
-    </div>
-    {% if address %}
-    <div class="address">
-      {% for line in address %}
-        <p class="address--line">{{line}}</p>
-      {% endfor %}
-    </div>
-    {% endif %}
-    {% if linkgroup %}
-    <nav class="links">
-      {% include '@components/linklist/linklist.twig' with {linkgroup: linkgroup, theme: 'dark'} %}
-    </nav>
-    {% endif %}
-    {% if social or subscribe %}
-    <div class="connect">
-      {% if socialmedia %}
-        <div class="social--links">
-          {% include '@components/socialmedia/socialmedia.twig' with {
+	<div class="{{prefix}}--footer--main {{prefix}}--container">
+		<div class="site--info">
+			<img class="{{prefix}}--footer--logo" src="{{logo.url}}" alt="{{logo.alt}}"/>
+			<h3 class="{{prefix}}--footer--headline">{{tagline}}</h3>
+			<h4 class="{{prefix}}--footer--subhead">{{subtagline}}</h4>
+		</div>
+		{% if address %}
+			<div class="address">
+				{% for line in address %}
+					<p class="address--line">{{line}}</p>
+				{% endfor %}
+			</div>
+		{% endif %}
+		{% if linkgroup %}
+			<nav class="links">
+				{% include '@components/linklist/linklist.twig' with {linkgroup: linkgroup, theme: 'dark'} %}
+			</nav>
+		{% endif %}
+		{% if socialmedia %}
+			<div class="connect">
+				<div class="social--links">
+					{% include '@components/socialmedia/socialmedia.twig' with {
             theme: "dark",
             headline: socialmedia.headline,
             icons: socialmedia.icons,
           } %}
-        </div>
-      {% endif %}
-      {% if subscribe %}
-        {% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}
-      {% endif %}
-    </div>
-    {% endif %}
-  </div>
-  <div class="{{prefix}}--footer--secondary">
-    {% if legal %}
-    <div class="legal">
-      {{legal}}
-    </div>
-    {% endif %}
-    {% if secondarylinks %}
-    <nav class="secondarylinks">
-      <ul class="secondarylinks--list">
-        {% for link in secondarylinks %}
-          <li class="secondarylinks--list--item">
-            <a href="{{link.url}}" class="secondarylinks--list--link">{{link.label}}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-    {% endif %}
-    {% if anchorlink %}
-      <a href="{{anchorlink.href}}" class="anchorlink">{{anchorlink.label}}</a>
-    {% endif %}
-  </div>
+				</div>
+			</div>
+		{% endif %}
+		{% if subscribe %}
+			<div class="subscribe">
+				{% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}
+			</div>
+		{% endif %}
+	</div>
+	<div class="{{prefix}}--footer--secondary">
+		<div class="{{prefix}}--container">
+			<div class="{{prefix}}--footer--secondary--details">
+				{% if legal %}
+					<div class="legal">
+						{{legal}}
+					</div>
+				{% endif %}
+				{% if secondarylinks %}
+					<nav class="secondarylinks">
+						<ul class="secondarylinks--list">
+							{% for link in secondarylinks %}
+								<li class="secondarylinks--list--item">
+									<a href="{{link.url}}" class="secondarylinks--list--link">{{link.label}}</a>
+								</li>
+							{% endfor %}
+						</ul>
+					</nav>
+				</div>
+			{% endif %}
+			{% if anchorlink %}
+				<a href="{{anchorlink.href}}" class="anchorlink">{{anchorlink.label}}</a>
+			{% endif %}
+		</div>
+	</div>
 </footer>

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

@@ -1,5 +1,5 @@
 footer:
-  namespace: Components/Cards
+  namespace: Components/Navigation
   use: "@components/footer/footer.twig"
   label: Footer
   description: A component for displaying a page's footer
@@ -37,24 +37,18 @@ footer:
       description: "up to six links"
       preview:
         - links:
-            - label: "Link One"
-              url: "http://www.google.com"
-            - label: "Link Two"
-              url: "http://www.google.com"
-            - label: "Link Three"
-              url: "http://www.google.com"
-            - label: "Link Four"
-              url: "http://www.google.com"
-            - label: "Link Five"
-              url: "http://www.google.com"
-            - label: "Link Six"
-              url: "http://www.google.com"
+            - label: "Contact us"
+              url: "https://www.ilo.org"
+            - label: "Contact us"
+              url: "https://www.ilo.org"
+            - label: "Contact us"
+              url: "https://www.ilo.org"
     socialmedia:
       type: object
       label: social
       description: "Links to social media"
       preview:
-        headline: "Connect with the ILO"
+        headline: "Stay informed"
         icons:
           - icon: "twitter"
             label: "Twitter"
@@ -82,8 +76,8 @@ footer:
       label: subscribe
       description: "a link to a subscribe form"
       preview:
-        label: "Subscribe"
-        url: "http://www.google.com"
+        label: "Subscribe for updates"
+        url: "https://www.ilo.org"
     legal:
       type: string
       label: legal
@@ -94,23 +88,19 @@ footer:
       label: secondarylinks
       description: "up to six links"
       preview:
-        - label: "Link One"
+        - label: "Rights and permissions"
           url: "http://www.cnn.com"
-        - label: "Link Two"
+        - label: "Privacy policy"
           url: "http://www.bing.com"
-        - label: "Link Three"
+        - label: "Fraud alert"
           url: "http://www.yahoo.com"
-        - label: "Link Four"
+        - label: "Disclaimer"
           url: "http://www.askjeeves.com"
-        - label: "Link Five"
-          url: "http://www.duckduckgo.com"
-        - label: "Link Six"
-          url: "http://www.aol.com"
     anchorlink:
       type: object
       label: anchorlink
       description: "an anchor href and label for navigating to another section on the page"
       preview:
-        label: "Back to Top"
+        label: "Back to top"
         href: "#anchor"
   visibility: storybook

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

@@ -52,10 +52,18 @@
 				{% include "@components/datepicker/datepicker.twig" with field|merge({ "prefix": prefix }) only %}
 			{% elseif field.type == "dropdown" %}
 				{% include "@components/dropdown/dropdown.twig" with field|merge({ "prefix": prefix }) only %}
-			{% elseif field.type == "dropdown" %}
-				{% include "@components/dropdown/dropdown.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "fileupload" %}
+				{% include "@components/fileupload/fileupload.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "numberpicker" %}
+				{% include "@components/numberpicker/numberpicker.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "radio" %}
+				{% include "@components/radio/radio.twig" with field|merge({ "prefix": prefix }) only %}
 			{% elseif field.type == "search" %}
 				{% include "@components/search/search.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "textarea" %}
+				{% include "@components/textarea/textarea.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "toggle" %}
+				{% include "@components/toggle/toggle.twig" with field|merge({ "prefix": prefix }) only %}
 			{% endif %}
 		{% endfor %}
 	</div>

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

@@ -89,8 +89,33 @@ form:
               labelSize: small
               class: my--formfield--class
               value: 3
+        - legend: Which committee will you be attending?
+          direction: row
+          fields:
+            - type: radio
+              name: priority-1
+              label: Credentials committee
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 1
+            - type: radio
+              name: priority-1
+              label: General Affairs Committee
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 2
+            - type: radio
+              name: priority-1
+              label: Finance Committee
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+              value: 3
         - legend: Tell us more about you
           direction: row
+          wrap: wrap
           style: "width: 100%"
           fields:
             - type: dropdown
@@ -99,7 +124,7 @@ form:
               labelPlacement: top
               labelSize: small
               class: my--formfield--class
-              style: "flex: 1 1 49%"
+              style: "flex: 1 0 250px"
               options:
                 - label: Switzerland
                   value: CH
@@ -121,7 +146,7 @@ form:
               labelPlacement: top
               labelSize: small
               class: my--formfield--class
-              style: "flex: 1 1 49%"
+              style: "flex: 1 0 250px"
               options:
                 - label: Workers
                   value: 1
@@ -131,6 +156,13 @@ form:
                   value: 3
                 - label: Other
                   value: 4
+            - type: numberpicker
+              name: arrival-date
+              label: How many people are in your delegation?
+              labelPlacement: top
+              labelSize: small
+              class: my--formfield--class
+              style: "flex: 1 0 250px"
         - legend: When will you be coming to the ILC?
           direction: row
           style: "width: 100%"
@@ -149,3 +181,25 @@ form:
               labelSize: small
               class: my--formfield--class
               style: "flex: 1 1 49%"
+        - legend: Submit a copy of your passport
+          direction: row
+          style: "width: 100%"
+          fields:
+            - type: fileupload
+              name: arrival-date
+              label: PDF or JPG files up to 10MB
+              accept: ".pdf,.jpg"
+              placeholder: Select file
+              labelPlacement: end
+              labelSize: small
+              class: my--formfield--class
+        - direction: row
+          style: "width: 100%"
+          fields:
+            - type: textarea
+              name: comments
+              label: Do you have any questions or comments?
+              labelPlacement: top
+              labelSize: medium
+              class: my--formfield--class
+              style: "flex: 1 1 100%"

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

@@ -5,6 +5,9 @@
 {# Initialize ariaDescribedBy #}
 {% set ariaDescribedBy  = [] %}
 
+{# Initialize formControlClass #}
+{% set formControlClass = formControlClass|default([]) %}
+
 {# if not defined id will be set to the value of name or to a random number #}
 {% if not id %}
 	{% if name  %}
@@ -38,7 +41,7 @@
 {% set errorClass = baseClass ~ "__error" %}
 {% set disabledClass = baseClass ~ "__disabled" %}
 {% set labelPlacementClass = baseClass ~ "__label-placement__" ~ labelPlacement|default("start") %}
-{% set formControlClass = [baseClass, class, labelPlacementClass] %}
+{% set formControlClass = formControlClass|merge([baseClass, class, labelPlacementClass]) %}
 
 {% if error %}
 	{% set formControlClass = formControlClass|merge([errorClass]) %}