@ilo-org/twig 0.9.5 → 0.10.0

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

@@ -0,0 +1,84 @@
+{# formcontrol.twig #}
+
+{% set baseClass = prefix ~ "--form-control" %}
+
+{# Initialize ariaDescribedBy #}
+{% set ariaDescribedBy  = [] %}
+
+{# if not defined id will be set to the value of name or to a random number #}
+{% if not id %}
+	{% if name  %}
+		{% set id = name %}
+	{% else %}
+		{% set id = baseClass ~ "--field--" ~ random() %}
+		{% set name = id %}
+	{% endif %}
+{% endif %}
+
+{# Determine which accessibility ids we're going to need #}
+{% if tooltip %}
+	{% set tooltipId = baseClass ~ "--tooltip--" ~ random() %}
+	{% set ariaDescribedBy = ariaDescribedBy|merge([tooltipId])   %}
+{% endif %}
+
+{% if helper %}
+	{% set helperId = baseClass ~ "--helper--" ~ random() %}
+	{% set ariaDescribedBy = ariaDescribedBy|merge([helperId])   %}
+{% endif %}
+
+{% if error %}
+	{% set errorId = baseClass ~ "--error--" ~ random() %}
+	{% set ariaDescribedBy = ariaDescribedBy|merge([errorId])   %}
+{% endif %}
+
+{# Condense them into a single string #}
+{% set ariaDescribedBy = ariaDescribedBy|join(' ') %}
+
+{# Classes for different form element states #}
+{% set errorClass = baseClass ~ "__error" %}
+{% set disabledClass = baseClass ~ "__disabled" %}
+{% set labelPlacementClass = baseClass ~ "__label-placement__" ~ labelPlacement|default("start") %}
+{% set formControlClass = [baseClass, class, labelPlacementClass] %}
+
+{% if error %}
+	{% set formControlClass = formControlClass|merge([errorClass]) %}
+{% endif %}
+
+{% if disabled %}
+	{% set formControlClass = formControlClass|merge([disabledClass]) %}
+{% endif %}
+
+{% set labelBaseClass = baseClass ~ "--label" %}
+{% set labelSizeClass = labelBaseClass ~ "__size__" ~ labelSize|default("medium") %}
+{% set labelClass = [labelBaseClass, labelSizeClass] %}
+{% set helperClass = baseClass ~ "--helper" %}
+
+{% set showError = error and errorMessage %}
+{% set showHelper = not showError and helper %}
+
+<div class="{{ formControlClass|join(' ') }}" {% if style %} style="{{ style }}" {% endif %}>
+	{% if label %}
+		<span class="{{ labelClass|join(' ') }}">
+			<label for="{{ id }}">{{ label }}</label>
+			{% if tooltip %}
+				{% include '@components/tooltip/tooltip.twig' with {
+				"icon": true,
+				"label": tooltip,
+				"theme": "dark",
+				"prefix": prefix,
+				"tooltipId": tooltipId
+			} only %}
+			{% endif %}
+		</span>
+	{% endif %}
+
+	{# Child content goes here. In the context of Twig #}
+	{{ block('formfield') }}
+
+	{% if showHelper %}
+		<span id="{{ helperid }}" class="{{ helperClass }}">{{ helper }}</span>
+	{% endif %}
+	{% if showError %}
+		<span id="{{ errorid }}" class="{{ helperClass }}" aria-live="assertive">{{ errorMessage }}</span>
+	{% endif %}
+</div>

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

@@ -1,13 +1,10 @@
-{#
-  INPUT COMPONENT
-#}
-{% extends '@components/fieldset/fieldset.twig' %}
-{% set fsinputid = id ? id : name %}
-{% set fslabel = label %}
-{% set fshelper = helper %}
-{% set fserror = error %}
-{% set fstype = type %}
+{# text-input.twig #}
+{% extends "@components/form/formcontrol.twig" %}
 
-{% block formfield %}
-  <input name="{{name}}" type="{{type}}" class="{{prefix}}--input{% if error %} error{% endif %}" {% if placeholder %}placeholder="{{placeholder}}"{% endif %} {% if disabled %}disabled{% endif %} {% if required %}required{% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" />
-{% endblock %}
+{% set baseClass = prefix ~ "--text-input" %}
+{% set inputClass = [baseClass] %}
+{% if error %}
+	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+
+<input id="{{ id ? id : name }}" name="{{ name }}" {% if disabled %} disabled {% endif %} placeholder="{{ placeholder }}" {% if required %} required {% endif %} type="{{ type }}" class="{{ inputClass|join(' ') }}" {% if pattern %} pattern="{{ pattern }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>

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

@@ -1,5 +1,6 @@
 hero:
   use: "@components/hero/hero.twig"
+  namespace: Components/Content
   label: Hero
   description: The Hero is an attention-grabbing section of a web page designed to engage users and create a memorable first impression.
   fields:
@@ -64,45 +65,45 @@ hero:
         icon: "true"
         theme: "dark"
   settings:
-      justify:
-        label: Justify
-        description: Sets the horizontal alignment of the hero card. `start` is on the left in LTR layouts and on the right in RTL layouts.
-        type: select
-        options:
-          start: start
-          offset: offset
-          center: center
-        preview: "start"
-      align:
-        label: Align
-        description: Sets the vertical alignment of the hero card.
-        type: select
-        options:
-          baseline: baseline
-          center: center
-          bottom: bottom
-        preview: "baseline"
-      postersize:
-        label: Poster Size
-        description: Sets the size of the image poster.
-        type: select
-        options:
-          small: small
-          medium: medium
-          large: large
-          xlarge: xlarge
-        preview: large
-      cardsize:
-        label: Card Size
-        description: Sets the width of the hero card.
-        type: select
-        options:
-          small: small
-          medium: medium
-          large: large
-          xlarge: xlarge
-          xxlarge: xxlarge
-        preview: small
+    justify:
+      label: Justify
+      description: Sets the horizontal alignment of the hero card. `start` is on the left in LTR layouts and on the right in RTL layouts.
+      type: select
+      options:
+        start: start
+        offset: offset
+        center: center
+      preview: "start"
+    align:
+      label: Align
+      description: Sets the vertical alignment of the hero card.
+      type: select
+      options:
+        baseline: baseline
+        center: center
+        bottom: bottom
+      preview: "baseline"
+    postersize:
+      label: Poster Size
+      description: Sets the size of the image poster.
+      type: select
+      options:
+        small: small
+        medium: medium
+        large: large
+        xlarge: xlarge
+      preview: large
+    cardsize:
+      label: Card Size
+      description: Sets the width of the hero card.
+      type: select
+      options:
+        small: small
+        medium: medium
+        large: large
+        xlarge: xlarge
+        xxlarge: xxlarge
+      preview: small
   variants:
     default:
       label: Default
@@ -155,4 +156,3 @@ hero:
           icon: "true"
           theme: "dark"
   visibility: storybook
-

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

@@ -1,4 +1,5 @@
 herocard:
+  namespace: Components/Content
   use: "@components/herocard/herocard.twig"
   label: Hero Card
   description: The Hero Card includes the title, intro, date, and social links for the hero

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

@@ -1,4 +1,5 @@
 image:
+  namespace: Components/Media
   use: "@components/image/image.twig"
   label: Image
   description: A component for displaying an image.

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

@@ -1,4 +1,5 @@
 link:
+  namespace: Components/Navigation
   use: "@components/link/link.twig"
   label: Link
   description: A component for displaying a link.

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

@@ -1,5 +1,6 @@
 linklist:
   use: "@components/linklist/linklist.twig"
+  namespace: Components/Navigation
   label: Link List
   description: The Link List receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'
   fields:

package/src/patterns/components/list/list-item.wingsuit.yml

@@ -1,4 +1,5 @@
 list:
+  namespace: Components/Content
   use: "@components/list/list-item.twig"
   label: List Item
   description: A list item.

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

@@ -1,4 +1,5 @@
 list:
+  namespace: Components/Content
   use: "@components/list/list.twig"
   label: List
   description: The list component

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

@@ -1,4 +1,5 @@
 loading:
+  namespace: Components/Transitions
   use: "@components/loading/loading.twig"
   label: Loading
   description: The Loading component displays a loading state. (See Javascript comments in loading.js for how to use this with vanilla JS).

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

@@ -1,4 +1,5 @@
 localnav:
+  namespace: Components/Navigation
   use: "@components/localnav/localnav.twig"
   label: Local nav
   description: The Local nav component

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

@@ -1,4 +1,5 @@
 logogrid:
+  namespace: Components/Brand
   use: "@components/logogrid/logogrid.twig"
   label: Logo Grid
   description: The Logo Grid component renders a series of logos representing a group of organizations. It can be shown on a light or dark background.
@@ -42,5 +43,3 @@ logogrid:
         - label: "UN Refugees"
           src: "/images/unhcr-logo.svg"
           url: "https://www.unhcr.org/"
-
-

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

@@ -1,5 +1,6 @@
 modal:
   use: "@components/modal/modal.twig"
+  namespace: Components/Feedback
   label: Modal
   description: The Modal displays a div containing a button which is visible on page load. On click of this button, a modal dialog is opened which displays a semitransparent fixed-position background and the contents of the chosen component.
   fields:

package/src/patterns/components/navigation/navigation.twig

@@ -2,120 +2,157 @@
   NAVIGATION COMPONENT
 #}
 <header class="{{prefix}}--header" data-loadcomponent="Navigation" data-prefix="{{prefix}}">
-  <div class="{{prefix}}--header--utility-bar">
-    <div class="{{prefix}}--language-switcher">
-      <div class="{{prefix}}--language-switcher--wrap">
-        <button class="{{prefix}}--language-switcher--button" type="button">
-          {{languagelabel}}
-        </button>
-        {% include '@components/contextmenu/contextmenu.twig' with {
+	<div class="{{prefix}}--header--utility-bar">
+		<div class="{{prefix}}--language-switcher">
+			<div class="{{prefix}}--language-switcher--wrap">
+				<button class="{{prefix}}--language-switcher--button" type="button">
+					{{languagelabel}}
+				</button>
+				{% include '@components/contextmenu/contextmenu.twig' with {
             links: languagecontextmenu.links,
             prefix: prefix
           }
         %}
-      </div> <!-- /.{{prefix}}--language-switcher--wrap -->
-    </div> <!-- /.{{prefix}}--language-switcher -->
-  </div> <!-- /.{{prefix}}--header--utility-bar -->
-  <div class="{{prefix}}--header--logo-bar">
-    <div class="{{prefix}}--header--inner">
-      <a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
-        <img class="{{prefix}}--header--logo" src="{{logo.image}}" alt="{{logo.alt}}">
-      </a>
-      <p class="{{prefix}}--header--logo-tagline">
-        {{tagline.tag}}
-        <span class="{{prefix}}--header--logo-tagline--small">{{tagline.small}}</span>
-      </p>
-      <button class="{{prefix}}--header--menu">{{menulabel}}</button>
-    </div> <!-- /.{{prefix}}--header--inner -->
-  </div> <!-- /.{{prefix}}--header--logo-bar -->
-  <div class="{{prefix}}--header--navigation">
-    <div class="{{prefix}}--header--inner">
-      <div class="{{prefix}}--mobile--nav">
-        <div class="{{prefix}}--mobile--nav--logo">
-          <a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
-            <img class="{{prefix}}--header--logo" src="{{mobilelogo.image}}" alt="{{mobilelogo.alt}}">
-          </a>
-          <button class="{{prefix}}--header--menu--close">{{menucloselabel}}</button>
-        </div> <!-- /.{{prefix}}--mobile--logo -->
-        <div class="{{prefix}}--mobile--nav--search">
-          {% include '@components/searchfield/searchfield.twig' with {
-            input: searchfield.input,
-            action: searchfield.action,
-            prefix: prefix
+			</div>
+			<!-- /.{{prefix}}--language-switcher--wrap -->
+		</div>
+		<!-- /.{{prefix}}--language-switcher -->
+	</div>
+	<!-- /.{{prefix}}--header--utility-bar -->
+	<div class="{{prefix}}--header--logo-bar">
+		<div class="{{prefix}}--header--inner">
+			<a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
+				<img class="{{prefix}}--header--logo" src="{{logo.image}}" alt="{{logo.alt}}">
+			</a>
+			<p class="{{prefix}}--header--logo-tagline">
+				{{tagline.tag}}
+				<span class="{{prefix}}--header--logo-tagline--small">{{tagline.small}}</span>
+			</p>
+			<button class="{{prefix}}--header--menu">{{menulabel}}</button>
+		</div>
+		<!-- /.{{prefix}}--header--inner -->
+	</div>
+	<!-- /.{{prefix}}--header--logo-bar -->
+	<div class="{{prefix}}--header--navigation">
+		<div class="{{prefix}}--header--inner">
+			<div class="{{prefix}}--mobile--nav">
+				<div class="{{prefix}}--mobile--nav--logo">
+					<a href="{{siteurl}}" class="{{prefix}}--header--logo-link">
+						<img class="{{prefix}}--header--logo" src="{{mobilelogo.image}}" alt="{{mobilelogo.alt}}">
+					</a>
+					<button class="{{prefix}}--header--menu--close">{{menucloselabel}}</button>
+				</div>
+				<!-- /.{{prefix}}--mobile--logo -->
+				<div class="{{prefix}}--mobile--nav--search">
+					{% include '@components/form/form.twig' with {
+            attributes: {
+              action: searchfield.action,
+              "aria-label": label,
+              "data-search": "true",
+            },
+            fieldsets: [{
+              fields: [{
+                type: "search",
+                placeholder: searchfield.input.placeholder,
+                name: searchfield.input.name,
+                id: searchfield.input.id,
+              }]
+            }]
           }
-        %}
-        </div> <!-- /.{{prefix}}--mobile--search -->
+          %}
+				</div>
+				<!-- /.{{prefix}}--mobile--search -->
 
-        <div class="{{prefix}}--mobile--nav--language--switcher">
-          <button class="{{prefix}}--mobile--nav--language--switcher--button" type="button">{{languagelabel}}</button>
-        </div> <!-- /.{{prefix}}--mobile--nav--language--switcher -->
-        <div class="{{prefix}}--mobile--nav--language--select">
-          <div class="{{prefix}}--header--inner">
-            <div class="{{prefix}}--mobile--subnav--menu">
-              <button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
-              <button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
-              <h6 class="{{prefix}}--mobile--subnav--label">{{languagelabel}}</h6>
-            </div> <!-- /{{prefix}}--mobile--subnav--menu -->
-            <ul class="{{prefix}}--nav--set">
-              {% for item in languagecontextmenu.links %}
-                <li class="{{prefix}}--nav--items">
-                  <a href="{{item.url}}" class="{{prefix}}--nav--link {{prefix}}--nav--language">{{item.label}}</a>
-                </li>
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-      </div> <!-- /.{{prefix}}--mobile--nav -->
-      <nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
-        <h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>
-        <ul class="{{prefix}}--nav--set">
-          {% for item in primarynav.items %}
-            <li class="{{prefix}}--nav--items">
-              <a href="{{item.link}}" class="{{prefix}}--nav--link">{{item.label}}</a>
-            </li>
-          {% endfor %}
-          {% if subnav %}
-            <li class="{{prefix}}--nav--items">
-              <button class="{{prefix}}--nav--trigger">{{subnav.buttonlabel}}</button>
-            </li>
-          {% endif %}
-        </ul>
-      </nav>
-      <div class="{{prefix}}--search">
-        <button class="{{prefix}}--search--button" type="button">{{searchlabel}}</button>
-      </div> <!-- /.{{prefix}}--search -->
-    </div> <!-- /.{{prefix}}--header--inner -->
-    {% if subnav %}
-      <nav class="{{prefix}}--subnav" aria-labelledby="secondary-navigation">
-        <div class="{{prefix}}--subnav--inner">
-          <div class="{{prefix}}--mobile--subnav">
-            <div class="{{prefix}}--mobile--subnav--menu">
-              <button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
-              <button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
-              <h6 class="{{prefix}}--mobile--subnav--label">{{subnav.buttonlabel}}</h6>
-            </div> <!-- /{{prefix}}--mobile--subnav--menu -->
-          </div> <!-- /.{{prefix}}--mobile--subnav -->
-          <h2 class="{{prefix}}--nav--label" id="secondary-navigation">{{subnav.navlabel}}</h2>
-          <ul class="{{prefix}}--subnav--set">
-            {% for item in subnav.items %}
-              <li class="{{prefix}}--subnav--items">
-                <a href="{{item.link}}" class="{{prefix}}--subnav--link">{{item.label}}</a>
-              </li>
-            {% endfor %}
-          </ul>
-        </div> <!-- /.{{prefix}}--subnav--inner -->
-      </nav>
-    {% endif %}
+				<div class="{{prefix}}--mobile--nav--language--switcher">
+					<button class="{{prefix}}--mobile--nav--language--switcher--button" type="button">{{languagelabel}}</button>
+				</div>
+				<!-- /.{{prefix}}--mobile--nav--language--switcher -->
+				<div class="{{prefix}}--mobile--nav--language--select">
+					<div class="{{prefix}}--header--inner">
+						<div class="{{prefix}}--mobile--subnav--menu">
+							<button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
+							<button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
+							<h6 class="{{prefix}}--mobile--subnav--label">{{languagelabel}}</h6>
+						</div>
+						<!-- /{{prefix}}--mobile--subnav--menu -->
+						<ul class="{{prefix}}--nav--set">
+							{% for item in languagecontextmenu.links %}
+								<li class="{{prefix}}--nav--items">
+									<a href="{{item.url}}" class="{{prefix}}--nav--link {{prefix}}--nav--language">{{item.label}}</a>
+								</li>
+							{% endfor %}
+						</ul>
+					</div>
+				</div>
+			</div>
+			<!-- /.{{prefix}}--mobile--nav -->
+			<nav class="{{prefix}}--nav" aria-labelledby="primary-navigation">
+				<h2 class="{{prefix}}--nav--label" id="primary-navigation">{{primarynav.navlabel}}</h2>
+				<ul class="{{prefix}}--nav--set">
+					{% for item in primarynav.items %}
+						<li class="{{prefix}}--nav--items">
+							<a href="{{item.link}}" class="{{prefix}}--nav--link">{{item.label}}</a>
+						</li>
+					{% endfor %}
+					{% if subnav %}
+						<li class="{{prefix}}--nav--items">
+							<button class="{{prefix}}--nav--trigger">{{subnav.buttonlabel}}</button>
+						</li>
+					{% endif %}
+				</ul>
+			</nav>
+			<div class="{{prefix}}--search">
+				<button class="{{prefix}}--search--button" type="button">{{searchlabel}}</button>
+			</div>
+			<!-- /.{{prefix}}--search -->
+		</div>
+		<!-- /.{{prefix}}--header--inner -->
+		{% if subnav %}
+			<nav class="{{prefix}}--subnav" aria-labelledby="secondary-navigation">
+				<div class="{{prefix}}--subnav--inner">
+					<div class="{{prefix}}--mobile--subnav">
+						<div class="{{prefix}}--mobile--subnav--menu">
+							<button class="{{prefix}}--mobile--subnav--back" type="button">{{subnav.mobilebacklabel}}</button>
+							<button class="{{prefix}}--header--menu--close">{{subnav.mobilecloselabel}}</button>
+							<h6 class="{{prefix}}--mobile--subnav--label">{{subnav.buttonlabel}}</h6>
+						</div>
+						<!-- /{{prefix}}--mobile--subnav--menu -->
+					</div>
+					<!-- /.{{prefix}}--mobile--subnav -->
+					<h2 class="{{prefix}}--nav--label" id="secondary-navigation">{{subnav.navlabel}}</h2>
+					<ul class="{{prefix}}--subnav--set">
+						{% for item in subnav.items %}
+							<li class="{{prefix}}--subnav--items">
+								<a href="{{item.link}}" class="{{prefix}}--subnav--link">{{item.label}}</a>
+							</li>
+						{% endfor %}
+					</ul>
+				</div>
+				<!-- /.{{prefix}}--subnav--inner -->
+			</nav>
+		{% endif %}
 
-    <div class="{{prefix}}--search-box">
-      <div class="{{prefix}}--header--inner">
-        {% include '@components/searchfield/searchfield.twig' with {
-            input: searchfield.input,
-            action: searchfield.action,
-            prefix: prefix
+		<div class="{{prefix}}--search-box">
+			<div class="{{prefix}}--header--inner">
+				{% include '@components/form/form.twig' with {
+            attributes: {
+              action: searchfield.action,
+              "aria-label": label,
+              "data-search": "true",
+            },
+            fieldsets: [{
+              fields: [{
+                type: "search",
+                placeholder: searchfield.input.placeholder,
+                name: searchfield.input.name,
+                id: searchfield.input.id,
+              }]
+            }]
           }
-        %}
-      </div>
-    </div> <!-- /.{{prefix}}--search-box -->
-  </div> <!-- /.{{prefix}}--header--navigation -->
+          %}
+			</div>
+		</div>
+		<!-- /.{{prefix}}--search-box -->
+	</div>
+	<!-- /.{{prefix}}--header--navigation -->
 </header>

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

@@ -1,4 +1,5 @@
 notification:
+  namespace: Components/Feedback
   use: "@components/notification/notification.twig"
   label: Notification
   description: The Notification component presents a dismissible alert.

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

@@ -1,4 +1,5 @@
 pagination:
+  namespace: Components/Navigation
   use: "@components/pagination/pagination.twig"
   label: Pagination
   description: The Pagination component presents a dismissible alert.

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

@@ -1,4 +1,5 @@
 profile:
+  namespace: Components/Content
   use: "@components/profile/profile.twig"
   label: Profile
   description: The Profile component is used to display information about a person.

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

@@ -1,4 +1,5 @@
 readmore:
+  namespace: Components/User Interface
   use: "@components/readmore/readmore.twig"
   label: Read More
   description: A component for displaying rich text as entered in a WYSIWYG editor.

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

@@ -1,4 +1,5 @@
 richtext:
+  namespace: Components/Content
   use: "@components/richtext/richtext.twig"
   label: Rich Text
   description: A component for displaying rich text as entered in a WYSIWYG editor.

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

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

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

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

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