@ilo-org/twig 0.9.5 → 0.10.1

package/src/patterns/components/search/search.twig

@@ -0,0 +1,22 @@
+{# dropdown.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ "--searchfield" %}
+{% set searchClass = [baseClass, class] %}
+{% set inputClass = prefix ~ "--input" %}
+{% set buttonClass = baseClass ~ "--button" %}
+
+{% if error %}
+	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+
+
+{% block formfield %}
+
+	<div class="{{ searchClass|join(" ") }}" {% if style %} style={{ style }} {% endif %}>
+		<input name="{{name}}" type="{{type}}" class="{{ inputClass }}{% if error %} error{% endif %}" {% if placeholder %} placeholder="{{placeholder}}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}"/>
+		<input class="{{ buttonClass }}" type="submit"/>
+	</div>
+
+{% endblock %}

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

@@ -0,0 +1,89 @@
+searchfield:
+  namespace: Components/Forms
+  use: "@components/search/search.twig"
+  label: Search
+  description: A component for displaying a search field.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+    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.
+    placeholder:
+      type: text
+      label: Placeholder
+      description: The placeholder of the text input.
+      preview: Search for something
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+    style:
+      type: text
+      label: Style
+      description: The style of the text input.
+      preview: "width: 100%"
+      default: ""
+    pattern:
+      type: text
+      label: Pattern
+      description: The pattern 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: "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 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/socialmedia/socialmedia.wingsuit.yml

@@ -1,4 +1,5 @@
 socialmedia:
+  namespace: Components/Navigation
   use: "@components/socialmedia/socialmedia.twig"
   label: Social Media
   description: The Social Media component displays a series of social media icons with links and an optional headline. It can have a light or a dark theme.

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

@@ -1,4 +1,5 @@
 table:
+  namespace: Components/Content
   use: "@components/table/table.twig"
   label: Table
   description: A component for displaying data in a table

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

@@ -1,4 +1,5 @@
 tableofcontents:
+  namespace: Components/Navigation
   use: "@components/tableofcontents/tableofcontents.twig"
   label: Table Of Contents
   description: A component for displaying links internal to a page

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

@@ -1,4 +1,5 @@
 tabs:
+  namespace: Components/User Interface
   use: "@components/tabs/tabs.twig"
   label: Tabs
   description: The Tabs component displays content that is subdivided into sections, providing an interface for toggling visually between sections

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

@@ -1,4 +1,5 @@
 tags:
+  namespace: Components/User Interface
   use: "@components/tags/tags.twig"
   label: Tags
   description: A group of tags

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

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

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

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

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

@@ -0,0 +1,13 @@
+{# text-input.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ "--text-input" %}
+{% set inputClass = [baseClass] %}
+{% if error %}
+	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
+{% 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 %}/>
+{% endblock %}

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

@@ -0,0 +1,87 @@
+textinput:
+  namespace: Components/Forms
+  use: "@components/textinput/textinput.twig"
+  label: Text Input
+  description: The TextInput field provides a way for users with a single line of text to enter into a form. Use this component for things like names, email addresses, passwords and other short form fields.
+  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 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: Sarah Martinez
+      default: ""
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+    pattern:
+      type: text
+      label: Pattern
+      description: The pattern 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: "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 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/tooltip/tooltip.twig

@@ -1,14 +1,12 @@
 {#
   TOOLTIP COMPONENT
 #}
-  <div
-    class="{{prefix}}--tooltip--wrapper{% if icon and icon != 'false' %} has-icon{% endif %} {{prefix}}--tooltip--wrapper--{{theme}}" 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">
-      <span class="{{prefix}}--tooltip--arrow {{prefix}}--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
-      {{label}}
-    </span>
-  </div>
+<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' %}
+		{{ children|raw }}
+	{% endif %}
+	<span class="{{prefix}}--tooltip {{prefix}}--tooltip--{{theme}}" data-alignment="left" id={{tooltipId}}>
+		<span class="{{prefix}}--tooltip--arrow {{prefix}}--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
+		{{label}}
+	</span>
+</div>

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

@@ -1,4 +1,5 @@
 tooltip:
+  namespace: Components/Feedback
   use: "@components/tooltip/tooltip.twig"
   label: Tooltip
   description: A component for displaying a tooltip
@@ -9,6 +10,12 @@ tooltip:
       description: label shown on the tooltip
       required: true
       preview: "Tooltip text"
+    tooltipId:
+      type: string
+      label: tooltipId
+      description: id for the tooltip. This is often needed for accessibility purposes, for example when you need to provide an `id` to an `aria-describedby` attribute.
+      required: true
+      preview: "tooltip-id"
     children:
       type: string
       label: children

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

@@ -1,4 +1,5 @@
 video:
+  namespace: Components/Media
   use: "@components/video/video.twig"
   label: Video
   description: A component for displaying a video, source from either a server or YouTube.

package/contributing.md

@@ -1,5 +0,0 @@
-# Contributing
-
-Before contributing, please ensure your IDE or text editor is using the `.editorconfig` at the root of this project. To achieve this easily, see the docs section titled ["IDE/text editor setup"](https://phase2.gitbook.io/frontend/wingsuit/development/coding-and-linting#ide-text-editor-setup)
-
-Then to contribute to these tools, just fork this repo, modify as you see fit and push up a pull request!

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

@@ -1,44 +0,0 @@
-{#
-  FIELDSET COMPONENT
-  This component by itself does nothing, but is used to wrap form labels and inputs as well as provide their helper text and error messaging
-
-  it takes four params:
-
-  fsinputid: a string, the id of the form field it contains
-  fslabel: a string, the label of the form field
-  fshelper: a string, helper text, if any
-  fserror: a string, error message, if any
-  fstype: a string, the type of field
-  fsclass: a string, any additional classnames
-#}
-<fieldset id="{{fsinputid}}--fieldset" class="{{prefix}}--fieldset{% if fsclass %} {{fsclass}}{% endif %}" {% if fshelper %}data-helper="{{fshelper}}"{% endif %}  {% if fserror %}data-error="{{fserror}}"{% endif %}>
-  {% if legend %}
-  <legend class="ilo--fieldset--legend">{{legend}}
-    {% if grouptooltip %}
-      {% include '@components/tooltip/tooltip.twig' with {label: grouptooltip.label, icon: grouptooltip.icon, theme: grouptooltip.theme, className: "ilo--fieldset--legend--tooltip"} %}
-    {% endif %}
-  </legend>
-  {% endif %}
-  {% if grouphelper and not grouperror %}
-    <span class="ilo--fieldset--helper">{{grouphelper}}</span>
-  {% endif %}
-  {% if grouperror %}
-    <span class="ilo--fieldset--error">{{grouperror}}</span>
-  {% endif %}
-  <div class="ilo--fieldset--input--{{fstype}}">
-    <label class="{{prefix}}--fieldset--label" for="{{fsinputid}}">
-      {{fslabel}}
-      {% if tooltip %}
-        {% include '@components/tooltip/tooltip.twig' with tooltip %}
-      {% endif %}
-    </label>
-    {% block formfield %}
-    {% endblock %}
-    {% if fshelper and not fserror %}
-      <span class="{{prefix}}--fieldset--helper">{{fshelper}}</span>
-    {% endif %}
-    {% if fserror %}
-      <span class="{{prefix}}--fieldset--error">{{fserror}}</span>
-    {% endif %}
-  </div>
-</fieldset>

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

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

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

@@ -1,5 +0,0 @@
-{#
-  GROUPED CHECKBOX COMPONENT
-#}
-<input id="{{id}}" name="{{name}}" type="checkbox" class="{{prefix}}--checkbox" {% if disabled %}disabled{% endif %} />
-

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

@@ -1,41 +0,0 @@
-{#
-  DATEPICKER COMPONENT
-#}
-<div class="{{prefix}}--datepicker{% if range %}--range{% endif %}">
-  <fieldset class="{{prefix}}--fieldset">
-    <div class="{{prefix}}--fieldset--input--date ">
-      <label class="{{prefix}}--fieldset--label">
-        {{label}}
-        {% if tooltip %}
-          {% include '@components/tooltip/tooltip.twig' with tooltip %}
-        {% endif %}
-      </label>
-      <input name="{{name}}" type="date" class="{{prefix}}--datepicker {{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 %}">
-      {% if helper and not error %}
-          <span class="ilo--fieldset--helper">{{helper}}</span>
-        {% endif %}
-        {% if error %}
-          <span class="ilo--fieldset--error">{{error}}</span>
-        {% endif %}
-    </div>
-  </fieldset>
-  {% if range %}
-  <fieldset class="{{prefix}}--fieldset">
-    <div class="{{prefix}}--fieldset--input--date ">
-      <label class="{{prefix}}--fieldset--label">
-        {{enddata.label}}
-        {% if enddata.tooltip %}
-          {% include '@components/tooltip/tooltip.twig' with enddata.tooltip %}
-        {% endif %}
-      </label>
-      <input name="{{enddata.name}}" type="date" class="{{prefix}}--datepicker {{prefix}}--input{% if enddata['error'] is defined %} error{% endif %}" {% if enddata['placeholder'] is defined %}placeholder="{{enddata.placeholder}}"{% endif %} {% if enddata['required'] is defined %}required{% endif %} {% if enddata['disabled'] is defined %}disabled{% endif %} id="{% if enddata['id'] is defined %}{{enddata.id}}{% else %}{{enddata.name}}{% endif %}">
-    </div>
-    {% if enddata.helper and not enddata.error %}
-        <span class="ilo--fieldset--helper">{{enddata.helper}}</span>
-      {% endif %}
-      {% if enddata.error %}
-        <span class="ilo--fieldset--error">{{enddata.error}}</span>
-      {% endif %}
-  </fieldset>
-  {% endif %}
-</div>

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

@@ -1,6 +0,0 @@
-/**
- * Search Field
- */
-// Module template
-import "./searchfield.twig";
-import "./searchfield.wingsuit.yml";

package/src/patterns/components/searchfield/searchfield.twig

@@ -1,7 +0,0 @@
-{#
-  SEARCH FIELD COMPONENT
-#}
-<form class="{{prefix}}--searchfield{% if input.label %} haslabel{% endif %}" action="{{action}}">
-  {% include '@components/form/input.twig' with input %}
-  <input class="{{prefix}}--searchfield--button" type="submit" />
-</form>

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

@@ -1,22 +0,0 @@
-searchfield:
-  use: "@components/searchfield/searchfield.twig"
-  label: Search Field
-  description: A component for displaying a search field.
-  fields:
-    action:
-      type: string
-      label: action
-      description: The form's action attribute
-      preview: "http://www.ilo.org"
-      required: false
-    input:
-      type: object
-      label: input
-      description: The search field input's attributes
-      preview:
-        label: "Search Field Label"
-        helper: "The search field's helper text"
-        name: "text"
-        placeholder: "Search Field"
-        type: "search"
-  visibility: storybook