@ilo-org/twig 0.10.5 → 0.11.1

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

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.10.5 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.11.1 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.5 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.11.1 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @ilo-org/twig
 
+## 0.11.1
+
+### Patch Changes
+
+- 515502c24: The Hero component accepts top level `theme` and `background` variables that it will pass to the card. Otherwise, it's still possible to pass them directly to the card on an object with all of the other card properties.
+- 7c5bb7bed: Update Hero to insert standard hero card offset so as to align it with content in the main content container
+- Updated dependencies [ee517d0f2]
+- Updated dependencies [71002bcde]
+- Updated dependencies [703bc66a6]
+- Updated dependencies [ad52c6442]
+- Updated dependencies [9be1cd23e]
+  - @ilo-org/styles@0.10.2
+  - @ilo-org/themes@0.6.0
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.10.5",
+  "version": "0.11.1",
   "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.10.0",
-    "@ilo-org/themes": "0.5.0",
+    "@ilo-org/styles": "0.10.2",
+    "@ilo-org/themes": "0.6.0",
     "@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.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

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]) %}

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

@@ -1,7 +1,6 @@
 /**
  * Form
  */
-// Module template
+
 import "./form.twig";
 import "./form.wingsuit.yml";
-import "./fileupload.behavior";

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

@@ -1,34 +1,37 @@
-{#
-  Hero COMPONENT
-#}
-<div class="hero hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }}">
-  <figure class="hero--figure">
-    {% block hero_image %}
-      {% if image %}
-        <picture>
-          {% for img in image.url|reverse %}
-            {% if loop.last == false  %}
-              <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
-            {% endif %}
-          {% endfor %}
-          <img class="{{prefix}}--card--image" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}"{% endif %}>
-        </picture>
-      {% endif %}
-    {% endblock %}
-  </figure>
-  {% if breadcrumb %}
-    <div class="hero--breadcrumbs">
-      <div class="hero--breadcrumbs--wrapper">
-        {% include "@components/breadcrumb/breadcrumb.twig" with {
+{# hero.twig #}
+
+{% set theme = theme|default(herocard.theme) %}
+{% set background = background|default(herocard.background) %}
+
+<div class="hero hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }} hero__card-theme__{{ theme }} hero__card-background__{{ background }}">
+	<figure class="hero--figure">
+		{% block hero_image %}
+			{% if image %}
+				<picture>
+					{% for img in image.url|reverse %}
+						{% if loop.last == false  %}
+							<source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+						{% endif %}
+					{% endfor %}
+					<img class="{{prefix}}--card--image" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
+				</picture>
+			{% endif %}
+		{% endblock %}
+	</figure>
+	{% if breadcrumb %}
+		<div class="hero--breadcrumbs">
+			<div class="hero--breadcrumbs--wrapper">
+				{% include "@components/breadcrumb/breadcrumb.twig" with {
           home: breadcrumb.home,
           links: breadcrumb.links,
           prefix: prefix,
         } only %}
-      </div>
-    </div>
-  {% endif %}
-  <div class="hero--card">
-    {% include "@components/herocard/herocard.twig" with {
+			</div>
+		</div>
+	{% endif %}
+	<div class="hero--card-offset"></div>
+	<div class="hero--card">
+		{% include "@components/herocard/herocard.twig" with {
     url: herocard.url,
     eyebrow: herocard.eyebrow,
     cornercut: herocard.cornercut,
@@ -36,17 +39,23 @@
     intro: herocard.intro,
     prefix: prefix,
     socialmedia: herocard.socialmedia,
-    theme: herocard.theme,
-    background: herocard.background,
+    theme: theme,
+    background: background,
     title: herocard.title,
   } only %}
-  </div>
-  <div class="hero--caption">
-    {% if not caption %}
-      {% else %}
-      <div class="hero--caption--wrapper">
-        {% include '@components/tooltip/tooltip.twig' with caption %}
-      </div>
-    {% endif %}
-  </div>
+	</div>
+	<div class="hero--caption">
+		{% if not caption %}
+			{% else %}
+				<div class="hero--caption--wrapper">
+					{% include '@components/tooltip/tooltip.twig' with {
+						prefix: prefix,
+						label: caption.label,
+						icon: true,
+						theme: "dark",
+						icontheme: "dark"
+					} only %}
+				</div>
+		{% endif %}
+	</div>
 </div>

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

@@ -35,6 +35,8 @@ hero:
             url: "/linkfour"
           - label: "Link Five"
             url: "/linkfive"
+          - label: "Link Six"
+            url: "/linksix"
     herocard:
       label: Hero Card
       type: object
@@ -62,8 +64,6 @@ hero:
       description: The credit and caption information about the image. Appears as a tooltip.
       preview:
         label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
-        icon: "true"
-        theme: "dark"
   settings:
     justify:
       label: Justify
@@ -104,6 +104,23 @@ hero:
         xlarge: xlarge
         xxlarge: xxlarge
       preview: small
+    background:
+      type: select
+      label: Background
+      description: Should the background be solid, semi-transparent or transparent
+      options:
+        solid: solid
+        semi-transparent: semi-transparent
+        transparent: transparent
+      preview: "solid"
+    theme:
+      type: select
+      label: Theme
+      description: The theme of the hero card.
+      options:
+        light: light
+        dark: dark
+      preview: "dark"
   variants:
     default:
       label: Default
@@ -153,6 +170,4 @@ hero:
                 icon: "linkedin"
         caption:
           label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
-          icon: "true"
-          theme: "dark"
   visibility: storybook

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

@@ -4,3 +4,4 @@
 // Module template
 import "./hero.twig";
 import "./hero.wingsuit.yml";
+import "../breadcrumb/breadcrumb.behavior";