@ilo-org/twig 0.10.5 → 0.11.0

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.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.5 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,28 @@
 # @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

package/package.json

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

@@ -2,33 +2,33 @@
   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 {
+	<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">
+		{% include "@components/herocard/herocard.twig" with {
     url: herocard.url,
     eyebrow: herocard.eyebrow,
     cornercut: herocard.cornercut,
@@ -40,13 +40,19 @@
     background: herocard.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

@@ -62,8 +62,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
@@ -153,6 +151,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/navigation/navigation.twig

@@ -47,6 +47,7 @@
 				</div>
 				<!-- /.{{prefix}}--mobile--logo -->
 				<div class="{{prefix}}--mobile--nav--search">
+					{% block mobileSearch %}
 					{% include '@components/form/form.twig' with {
             attributes: {
               action: searchfield.action,
@@ -63,6 +64,7 @@
             }]
           }
           %}
+					{% endblock %}
 				</div>
 				<!-- /.{{prefix}}--mobile--search -->
 
@@ -137,6 +139,7 @@
 
 		<div class="{{prefix}}--search-box">
 			<div class="{{prefix}}--header--inner {{ prefix }}--container">
+				{% block desktopSearch %}
 				{% include '@components/form/form.twig' with {
             attributes: {
               action: searchfield.action,
@@ -153,6 +156,7 @@
             }]
           }
           %}
+				{% endblock %}
 			</div>
 		</div>
 		<!-- /.{{prefix}}--search-box -->

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

@@ -0,0 +1,7 @@
+/**
+ * tag
+ */
+// Module template
+import "./numberpicker.twig";
+import "./numberpicker.wingsuit.yml";
+import "../tooltip/tooltip.behavior";

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

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

package/src/patterns/components/numberpicker/numberpicker.twig

@@ -0,0 +1,16 @@
+{# numberpicker.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set inputClass = prefix ~ '--input' %}
+{% set baseClass = prefix ~ '--numberpicker' %}
+{% set hasError = not disabled and error %}
+{% set numberPickerClasses = [inputClass, baseClass] %}
+
+{% if hasError %}
+	{% set numberPickerClasses = numberPickerClasses|merge(['error']) %}
+{% endif %}
+
+{% block formfield %}
+	<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="number" class="{{ numberPickerClasses|join(' ') }}" pattern="[0-9]*" inputmode="numeric" aria-describedby="{{ ariaDescribedBy }}" {% if max is defined %} max="{{ max }}" {% endif %} {% if min is defined %} min="{{ min }}" {% endif %} {% if step is defined %} step="{{ step }}" {% endif %}/>
+{% endblock %}

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

@@ -0,0 +1,91 @@
+numberpicker:
+  namespace: Components/Forms
+  use: "@components/numberpicker/numberpicker.twig"
+  label: Number Picker
+  description: The Number Picker component is used to select a number from a range.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Pick a number"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: checkbox
+      default: ""
+    placeholder:
+      type: text
+      label: Placeholder
+      description: The placeholder of the form field.
+      preview: "0 - 100"
+    min:
+      type: number
+      label: Min
+      description: The minimum value of the form field.
+      preview: 0
+    max:
+      type: number
+      label: Max
+      description: The maximum value of the form field.
+      preview: 100
+    step:
+      type: number
+      label: Step
+      description: The step value of the form field.
+      preview: 1
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "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
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      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/radio/index.js

@@ -0,0 +1,7 @@
+/**
+ * tag
+ */
+// Module template
+import "./radio.twig";
+import "./radio.wingsuit.yml";
+import "../tooltip/tooltip.behavior";

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

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

package/src/patterns/components/radio/radio.twig

@@ -0,0 +1,23 @@
+{# checkbox.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = (prefix is defined ? prefix ~ "--radio" : "--radio") %}
+{% set controlClass = baseClass ~ "--control" %}
+
+{% set errorClass = baseClass ~ "__error" %}
+
+{% set radioClasses = [baseClass, class] %}
+
+{% if error is defined and error %}
+	{% set radioClasses = radioClasses|merge([errorClass]) %}
+{% endif %}
+
+
+{% block formfield %}
+	<div class="{{ radioClasses|join(" ") }}">
+		<input id="{{ id is defined ? id : name }}" name="{{ name }}" type="radio" {% if defaultChecked is defined and defaultChecked %} defaultchecked {% endif %} {% if checked is defined and checked %} checked {% endif %} {% if ariaDescribedBy is defined %} aria-describedby="{{ ariaDescribedBy }}" {% endif %} {% if checked is defined and checked %} checked {% endif %} value="{{ value }}" {% if disabled is defined and disabled %} disabled {% endif %} {% if required is defined and required %} required {% endif %}/>
+		<span class="{{ controlClass }}"></span>
+	</div>
+
+{% endblock %}

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

@@ -0,0 +1,83 @@
+checkbox:
+  namespace: Components/Forms
+  use: "@components/radio/radio.twig"
+  label: Radio
+  description: The Radio component provides users with a switch they can use to
+    turn a single option on or off or alternate between multiple
+    different states.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Do you agree to these terms?"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: radio
+      default: ""
+    value:
+      type: text
+      label: Value
+      description: The value of the input.
+      preview: "1"
+  settings:
+    defaultSelected:
+      type: boolean
+      label: Default Selected
+      description: The default selected state of the form element.
+      preview: false
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "end"
+      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: "small"
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      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/textarea/index.js

@@ -0,0 +1,7 @@
+/**
+ * tag
+ */
+// Module template
+import "./textarea.twig";
+import "./textarea.wingsuit.yml";
+import "../tooltip/tooltip.behavior";

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

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

package/src/patterns/components/textarea/textarea.twig

@@ -0,0 +1,14 @@
+{# textarea.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ '--textarea' %}
+{% set textAreaClass = [baseClass] %}
+{% if error %}
+	{% set textAreaClass = textAreaClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+
+
+{% block formfield %}
+	<textarea class="{{ textAreaClass|join(' ') }}" name="{{ name }}" id="{{ id|default(name) }}" aria-describedby="{{ ariaDescribedBy }}" {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if form %} form="{{ form }}" {% endif %} {% if maxlength %} maxlength="{{ maxlength }}" {% endif %} {% if minlength %} minlength="{{ minlength }}" {% endif %} {% if spellcheck %} spellcheck="{{ spellcheck }}" {% endif %} {% if wrap %} wrap="{{ wrap }}" {% endif %}>{{ value|default('') }}</textarea>
+{% endblock %}

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

@@ -0,0 +1,126 @@
+textarea:
+  namespace: Components/Forms
+  use: "@components/textarea/textarea.twig"
+  label: Text Area
+  description: The TextArea component allows users to enter multi-line text. It's used to capture free-form text, such as a comment or a description.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Insert your name here"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+      preview: "This is a tooltip"
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+      preview: "Enter first name and last name"
+    id:
+      type: text
+      label: ID
+      description: The ID of the text area.
+    name:
+      type: text
+      label: Name
+      description: The name of the text area.
+    placeholder:
+      type: text
+      label: Placeholder
+      description: The placeholder of the text area.
+      preview: Enter your life story here
+      default: ""
+    class:
+      type: text
+      label: Class
+      description: The class of the text area.
+      preview: textinput
+      default: ""
+    pattern:
+      type: text
+      label: Pattern
+      description: The pattern of the text area.
+      preview: textinput``
+      default: ""
+    form:
+      type: text
+      label: Form
+      description: The form of the text area if it's not nested in a form element.
+      preview: textinput
+      default: ""
+    maxlength:
+      type: number
+      label: Max Length
+      description: The maximum length of the text area.
+      preview: 100
+    minlength:
+      type: number
+      label: Min Length
+      description: The minimum length of the text area.
+      preview: 0
+    style:
+      type: text
+      label: Style
+      description: The style of the text area.
+      preview: "width: 100%;"
+  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
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the text area.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the text area.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false
+    spellcheck:
+      type: select
+      label: Spellcheck
+      description: The spellcheck state of the text area.
+      options:
+        true: true
+        false: false
+        default: default
+      preview: default
+    wrap:
+      type: select
+      label: Wrap
+      description: The wrap state of the text area.
+      options:
+        hard: hard
+        soft: soft
+        off: off
+      preview: off

package/src/patterns/components/textinput/textinput.twig

@@ -9,5 +9,6 @@
 {% endif %}
 
 {% block formfield %}
-	<input id="{{ id }}" name="{{ name }}" type="{{ type|default("text") }}" class="{{ inputClass|join(" ") }}" {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} {% if pattern %} pattern="{{ pattern }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>
+	<input id="{{ id|default(name) }}" name="{{ name }}" type="{{ type|default("text") }}" class="{{ inputClass|join(" ") }}" {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} {% if pattern %} pattern="{{ pattern }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>
+
 {% endblock %}

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

@@ -0,0 +1,7 @@
+/**
+ * tag
+ */
+// Module template
+import "./toggle.twig";
+import "./toggle.wingsuit.yml";
+import "../tooltip/tooltip.behavior";

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

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

package/src/patterns/components/toggle/toggle.twig

@@ -0,0 +1,36 @@
+{# toggle.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{# Define the default values, these values can be overridden when the template is included or extended. #}
+{% set size = size|default("medium") %}
+{% set error = error|default(false) %}
+{% set disabled = disabled|default(false) %}
+{% set defaultChecked = defaultChecked|default(false) %}
+{% set required = required|default(false) %}
+{% set name = name|default("toggle") %}
+{% set id = id|default(name) %}
+{% set ariaDescribedBy = ariaDescribedBy|default("") %}
+
+{# Calculate dynamic classes based on the passed values. #}
+{% set baseClass = prefix ~ "--input--toggle" %}
+{% set sliderClass = baseClass ~ "--slider" %}
+{% set toggleClass = [baseClass, class, baseClass ~ "__size__" ~ size] %}
+
+{% if not disabled and error %}
+	{% set toggleClass = toggleClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+{% if disabled %}
+	{% set toggleClass = toggleClass|merge([baseClass ~ "__disabled"]) %}
+{% endif %}
+
+{% block formfield %}
+
+	<div class="{{ toggleClass|join(" ") }}">
+		<input {% if defaultchecked %} defaultchecked {% endif %} {% if required %} required {% endif %} {% if checked %} checked {% endif %} name="{{ name }}" id="{{ id }}" type="checkbox" role="switch" aria-describedby="{{ ariaDescribedBy }}"/>
+
+
+		<span class="{{ sliderClass }}"/>
+	</div>
+
+{% endblock %}

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

@@ -0,0 +1,94 @@
+toggle:
+  namespace: Components/Forms
+  use: "@components/toggle/toggle.twig"
+  label: Toggle
+  description: The toggle component provides users with a switch they can use to
+    turn a single option on or off or alternate between two different
+    states.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: Accept cookies
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the text input.
+    name:
+      type: text
+      label: Name
+      description: The name of the text input.
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: end
+      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: small
+      options:
+        small: small
+        medium: medium
+        large: large
+    defaultchecked:
+      type: boolean
+      label: Default Checked
+      description: The default checked state of the text input.
+      preview: false
+      default: false
+    checked:
+      type: boolean
+      label: Checked
+      description: The checked state of the text input.
+      preview: false
+      default: 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
+    size:
+      type: select
+      label: Size
+      description: The size of the toggle.
+      preview: medium
+      options:
+        small: small
+        medium: medium
+        large: large

package/src/patterns/components/tooltip/tooltip.twig

@@ -1,8 +1,10 @@
-{#
-  TOOLTIP COMPONENT
-#}
-<div class="{{prefix}}--tooltip--wrapper {% if icon %}has-icon{% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}">
-	{% if not icon or icon == 'false' %}
+{# tooltip.twig #}
+
+{% set icontheme = icontheme|default("light") %}
+{% set theme = theme|default("dark") %}
+
+<div class="{{prefix}}--tooltip--wrapper {% if icon %} {{prefix}}--tooltip--wrapper__icon {{prefix}}--tooltip--wrapper__icon__theme__{{icontheme}} {% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="{{prefix}}">
+	{% if not icon or icon == "false" %}
 		{{ children|raw }}
 	{% endif %}
 	<span class="{{prefix}}--tooltip {{prefix}}--tooltip--{{theme}}" data-alignment="left" id={{tooltipId}}>

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

@@ -32,6 +32,15 @@ tooltip:
         false: false
       preview: "true"
       required: true
+    icontheme:
+      type: select
+      label: Icon Theme
+      description: Use dark for dark backgrounds, light for light backgrounds
+      options:
+        light: light
+        dark: dark
+      preview: light
+      required: true
     theme:
       type: select
       label: Theme

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

@@ -1,14 +0,0 @@
-{#
-  FILE UPLOAD COMPONENT
-#}
-{% extends '@components/fieldset/fieldset.twig' %}
-{% set fsinputid = id ? id : name %}
-{% set fslabel = label %}
-{% set fshelper = helper %}
-{% set fserror = error %}
-{% set fstype = "file" %}
-{% set fsclass = "file-upload" %}
-
-{% block formfield %}
-  <input name="{{name}}" type="file" class="{{prefix}}--file-upload {% if error %} error{% endif %}" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if disabled %}disabled{% endif %} {% if required %}required{% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" data-label="{{label}}" data-loadcomponent="FileUpload" />
-{% endblock %}

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

@@ -1,13 +0,0 @@
-{#
-  NUMBER COMPONENT
-#}
-{% extends '@components/fieldset/fieldset.twig' %}
-{% set fsinputid = id ? id : name %}
-{% set fslabel = label %}
-{% set fshelper = helper %}
-{% set fserror = error %}
-{% set fstype = "number" %}
-
-{% block formfield %}
-  <input name="{{name}}" type="text" class="{{prefix}}--numberpicker {{prefix}}--input{% if error %} error{% endif %}" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if required %}required{% endif %} {% if disabled %}disabled{% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" pattern="[0-9]*" inputmode="numeric" />
-{% endblock %}

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

@@ -1,4 +0,0 @@
-{#
-  RADIO COMPONENT
-#}
-<input id="{{id}}" name="{{name}}" type="radio" class="{{prefix}}--radio" value="{{value}}" {% if disabled %}disabled{% endif %}>

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

@@ -1,13 +0,0 @@
-{#
-  TEXTAREA COMPONENT
-#}
-{% extends '@components/fieldset/fieldset.twig' %}
-{% set fsinputid = id ? id : name %}
-{% set fslabel = label %}
-{% set fshelper = helper %}
-{% set fserror = error %}
-{% set fstype = "textarea" %}
-
-{% block formfield %}
-  <textarea name="textarea" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if required %}required{% endif %} {% if disabled %}disabled{% endif %} class="{{prefix}}--textarea" id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" spellcheck="false"></textarea>
-{% endblock %}