@ilo-org/twig 0.9.5 → 0.10.1

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

@@ -1,78 +1,100 @@
 dropdown:
+  namespace: components/Forms
   use: "@components/dropdown/dropdown.twig"
   label: Dropdown
   description: The Dropdown displays a select element with options, and is most
     commonly used in forms.
+  visibility: storybook
   fields:
-    defaultValue:
-      type: string
-      label: defaultValue
-      description: The default value of the select
-      preview: "option one"
-      required: true
-    error:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Select a country"
+    tooltip:
       type: string
-      label: error
-      description: Does this have an error? If so, the error message
-      preview: ""
-      required: false
+      description: The tooltip for the form element.
     helper:
-      type: string
-      label: helper
-      description: Does this have helper text? If so, the helper text
-      preview: "My helper text"
-      required: false
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
     id:
-      type: string
-      label: id
-      description: the id of the form field
-      preview: "dropdown"
-      required: true
-    label:
-      type: string
-      label: label
-      description: the label of the form field
-      preview: "Dropdown Label"
-      required: true
+      type: text
+      label: ID
+      description: The ID of the input.
     name:
-      type: string
-      label: name
-      description: the name attribute of the form field
-      preview: "dropdown"
-      required: true
+      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: ""
+    style:
+      type: text
+      label: Style
+      description: The style of the form field.
+    defaultOption:
+      type: text
+      label: Default Option
+      description: The value of the default option for the form element.
+      preview: "TH"
     options:
       type: object
       label: Options
-      description: The options for this dropdown
-      required: true
+      description: The options for the form element.
       preview:
-        - label: "Option One"
-          value: "option one"
-        - label: "Option Two"
-          value: "option two"
-        - label: "Option Three"
-          value: "option three"
-        - label: "Option Four"
-          value: "four"
-        - label: "Option Five"
-          value: "the fifth"
+        - label: Switzerland
+          value: CH
+        - label: Côte d'Ivoire
+          value: CI
+        - label: Thailand
+          value: TH
+        - label: United States
+          value: US
+        - label: Zimbabwe
+          value: ZW
+        - label: Afghanistan
+          value: AF
+        - label: Åland Islands
+          value: AX
   settings:
-    autocomplete:
+    labelPlacement:
       type: select
-      label: autocomplete
-      description: Should this field autocomplete
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "top"
       options:
-        true: "true"
-        false: false
-      preview: false
-      required: false
-    disabled:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
       type: select
-      label: disabled
-      description: Is this field disabled?
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: medium
       options:
-        true: "true"
-        false: false
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
       preview: false
-      required: false
-  visibility: storybook
+      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/footer/footer.wingsuit.yml

@@ -1,4 +1,5 @@
 footer:
+  namespace: Components/Cards
   use: "@components/footer/footer.twig"
   label: Footer
   description: A component for displaying a page's footer

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

@@ -0,0 +1,62 @@
+{# fieldset.twig #}
+
+{% set baseClass = prefix ~ "--fieldset" %}
+{% set wrapClass = baseClass ~ "--wrap__" ~ wrap %}
+{% set directionClass = baseClass ~ "--direction__" ~ direction %}
+{% set helperClass = baseClass ~ "--helper" %}
+{% set errorClass = baseClass ~ "__error" %}
+{% set disabledClass = baseClass ~ "__disabled" %}
+
+{% set fieldsetClasses = [fieldsetClass, baseClass, wrapClass, directionClass, class] %}
+{% if disabled %}
+	{% set fieldsetClasses = fieldsetClasses|merge([disabledClass]) %}
+{% endif %}
+
+{% set helperClasses = [helperClass] %}
+{% if hasError %}
+	{% set helperClasses = helperClasses|merge([errorClass]) %}
+{% endif %}
+
+{% set showHelper = helper or hasError %}
+{% set helperMessage = hasError ? errorMessage : helper %}
+
+<fieldset class="{{ fieldsetClasses|join(' ') }}" {% if style %} style="{{ style }}" {% endif %}>
+	{% if legend or helper %}
+		<div class="{{ baseClass ~ '--legend-wrapper' }}">
+			{% if legend %}
+				<legend class="{{ baseClass ~ '--legend' }}">
+					{{ legend }}
+					{% if tooltip %}
+						{% include '@components/tooltip/tooltip.twig' with {
+							"icon": true,
+							"label": tooltip,
+							"theme": "dark",
+							"prefix": prefix,
+							"tooltipId": tooltip
+						} only %}
+					{% endif %}
+				</legend>
+			{% endif %}
+			{% if showHelper %}
+				<span class="{{ helperClasses|join(' ') }}">{{ helperMessage }}</span>
+			{% endif %}
+		</div>
+	{% endif %}
+	<div class="{{ baseClass ~ '--elements' }}">
+		{% for field in fields %}
+			{% if field.type == "textinput" %}
+				{% include "@components/textinput/textinput.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "checkbox" %}
+				{% include "@components/checkbox/checkbox.twig" with field|merge({ "prefix": prefix }) only %}
+			{% elseif field.type == "datepicker" %}
+				{% 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 == "search" %}
+				{% include "@components/search/search.twig" with field|merge({ "prefix": prefix }) only %}
+			{% endif %}
+		{% endfor %}
+	</div>
+</fieldset>

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

@@ -1,97 +1,19 @@
-{#
-  FORM COMPONENT
-  TODO: This could stand to be more DRY
-#}
-<form class="{{prefix}}--form" id="{{formid}}" action="{{action}}" data-loadcomponent="Form">
-  {% if headline %}
-  <legend class="{{prefix}}--form--legend">{{headline}}</legend>
-  {% endif %}
-  {% for item in items %}
-    {% if item.type == "formgroup" %}
-      <fieldset class="{{prefix}}--formgroup {{prefix}}--fieldset">
-        {% if item.field.legend %}
-        <legend class="{{prefix}}--formgroup--legend {{item.field.type}}">{{item.field.legend}}
-          {% if item.field['grouptooltip'] is defined %}
-            {% include '@components/tooltip/tooltip.twig' with {label: item.field.grouptooltip, icon: true, className: prefix ~ "--formgroup--legend--tooltip"} %}
-          {% endif %}
-        </legend>
-        {% endif %}
-      {% for i in item.field.items %}
-        {% if i.type == "radio" or (i.type == "checkbox" and i.field[0].grouped == true) %}
-          <fieldset class="{{prefix}}--choice-group {{prefix}}--fieldset">
-            {% if i.legend %}
-            <legend class="{{prefix}}--fieldset--legend">{{i.legend}}
-              {% if i.grouptooltip is defined %}
-                {% include '@components/tooltip/tooltip.twig' with {label: i.grouptooltip.label, icon: i.grouptooltip.icon, theme: i.grouptooltip.theme, className: prefix ~ "--fieldset--legend--tooltip"} %}
-              {% endif %}
-            </legend>
-            {% endif %}
-            {% if i.grouphelper and not i.grouperror %}
-              <span class="{{prefix}}--fieldset--helper">{{i.grouphelper}}</span>
-            {% endif %}
-            {% if i.grouperror %}
-              <span class="{{prefix}}--fieldset--error">{{i.grouperror}}</span>
-            {% endif %}
-            {% for f in i.field %}
-            <div class="{{prefix}}--fieldset--input--{{i.type}}">
-              <label class="{{prefix}}--fieldset--label" for="{% if f.id is defined and f.id is not empty %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
-              {% if i.type == "radio" %}
-                {% include '@components/form/radio.twig' with f %}
-              {% else %}
-                {% include '@components/form/checkboxgroup.twig' with f %}
-              {% endif %}
-            </div>
-            {% endfor %}
-          </fieldset>
-        {% elseif  i.type == "date" %}
-          {% include '@components/form/datepicker.twig' with i.field %}
-        {% else %}
-              {% if i.type == "input" or (i.type == "checkbox" and not i.field[0].grouped) or i.type == "file" or i.type == "number" or i.type == "textarea" %}
-                {% include '@components/form/'~ i.type ~'.twig' with i.field %}
-              {% endif %}
-              {% if i.type == "dropdown" %}
-                {% include '@components/dropdown/dropdown.twig' with i.field %}
-              {% endif %}
-        {% endif %}
-      {% endfor %}
-      </fieldset>
-    {% endif %}
-    {% if item.type == "radio" or (item.type == "checkbox" and item.field[0].grouped == true) %}
-      <fieldset class="{{prefix}}--choice-group {{prefix}}--fieldset">
-        {% if item.legend %}
-        <legend class="{{prefix}}--fieldset--legend">{{item.legend}}
-          {% if item.grouptooltip is defined %}
-            {% include '@components/tooltip/tooltip.twig' with {label: item.grouptooltip.label, icon: item.grouptooltip.icon, theme: item.grouptooltip.theme, className: prefix ~ "--fieldset--legend--tooltip"} %}
-          {% endif %}
-        </legend>
-        {% endif %}
-        {% if item.grouphelper and not item.grouperror %}
-          <span class="{{prefix}}--fieldset--helper">{{item.grouphelper}}</span>
-        {% endif %}
-        {% if item.grouperror %}
-          <span class="{{prefix}}--fieldset--error">{{item.grouperror}}</span>
-        {% endif %}
-        {% for f in item.field %}
-        <div class="{{prefix}}--fieldset--input--{{item.type}}">
-          <label class="{{prefix}}--fieldset--label" for="{% if f.id is defined and f.id is not empty %}{{f.id}}{% else %}{{f.name}}{% endif %}">{{f.label}}</label>
-          {% if item.type == "radio" %}
-            {% include '@components/form/radio.twig' with f %}
-          {% else %}
-            {% include '@components/form/checkboxgroup.twig' with f %}
-          {% endif %}
-        </div>
-        {% endfor %}
-      </fieldset>
-    {% elseif  item.type == "date" %}
-      {% include '@components/form/datepicker.twig' with item.field %}
-    {% else %}
-          {% if item.type == "input" or (item.type == "checkbox" and not item.field[0].grouped) or item.type == "file" or item.type == "number" or item.type == "textarea" %}
-            {% include '@components/form/'~ item.type ~'.twig' with item.field %}
-          {% endif %}
-          {% if item.type == "dropdown" %}
-            {% include '@components/dropdown/dropdown.twig' with item.field %}
-          {% endif %}
-    {% endif %}
-  {% endfor %}
-  {% include '@components/button/button.twig' with {type: "primary", kind: "submit", size: "large", label: submitlabel} %}
+{# form.twig #}
+
+{% set baseClass = prefix ~ "--form" %}
+
+{% set formControlClass = [baseClass, class] %}
+
+<form class="{{ formControlClass|join(' ') }}" data-loadcomponent="Form" {%- for key, value in attributes|default({} ) -%} {{- ' ' ~ key ~ '="' ~ value|e('html_attr') ~ '"' -}} {%- endfor -%}>
+	{% if headline %}
+		<h2>{{ headline }}</h2>
+	{% endif %}
+	{% for fieldset in fieldsets %}
+		{% include "@components/form/fieldset.twig" with fieldset|merge({ "prefix": prefix }) only %}
+	{% endfor %}
+	{% if submit %}
+		{% include "@components/button/button.twig" with submit|merge({
+		"prefix": prefix, "kind": "submit" }) only
+	%}
+	{% endif %}
 </form>