Europa Component Library

Search forms

Documentation • Demo

EMA Search from

{#
  - variant: can be '','internal' (default: '')
  - button (object)
    - label (string)
  - input (object)
    - extra_attributes (array of { name: '', value: '' })
  - extra_classes (string): additional classes to add to the component
  - extra_attributes (array of { name: '', value: '' })
#}

{# Internal properties #}

{% set _css_class = 'ecl-search-form' %}
{% set _extra_attributes = '' %}
{% set _aria_label = aria_label|default('Search this website') %}
{% set _button = { 'label': 'Search' }|merge(button|default({})) %}
{% set _input = { 'id': 'search', 'extra_attributes': [] }|merge(input|default({})) %}

{# Internal logic - Process properties #}

{% if variant is defined and variant is not empty %}
  {% set _css_class = _css_class ~ ' ' ~ 'ecl-search-form--' ~ variant %}
{% endif %}

{% if extra_classes is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
  {% endfor %}
{% endif %}

{# Print result #}
<form class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  <label class="ecl-search-form__textfield-wrapper">
    <span class="ecl-u-sr-only">{{ _aria_label }}</span>
    {% include '@ec-europa/ema-forms-text-inputs' with {
      'id': _input.id,
      'type': 'search',
      'extraClass': 'ecl-search-form__textfield ecl-text-input--ema',
      'extraAttributes': _input.extra_attributes
    } %}
  </label>
  {% include '@ec-europa/ecl-buttons' with {
    'modifier': variant is defined and variant == 'internal' ? 'form-primary' : 'form',
    'label': _button.label,
    'extra_classes': 'ecl-search-form__button ecl-button--primary ecl-button--ema-primary',
    'extra_attributes': [{ 'name': 'type', 'value': 'submit'}]
  } %}
</form>
 
{
  "extra_classes": "ecl-search-form--ema"
}
 
<form class="ecl-search-form ecl-search-form--ema">
  <label class="ecl-search-form__textfield-wrapper">
    <span class="ecl-u-sr-only">Search this website</span>
    






  

  


<input
  type="search"
  class="ecl-text-input ecl-search-form__textfield ecl-text-input--ema"
  id="search"
  name="default-name"
  
/>
  </label>

  <button class="ecl-button ecl-button--form ecl-search-form__button ecl-button--primary ecl-button--ema-primary" type="submit">Search</button>
</form>
  • Content: 
    /**
* EMA Search form component
*/

@mixin ema-search-button() {
  .ecl-search-form__button:hover,
  .ecl-search-form__button:focus {
    background-color: #fff;
    border-color: map-get($ema-colors, 'primary');
    color: map-get($ema-colors, 'grey-1');
  }
  .ecl-search-form__button::before:hover {
    color: #fff;
  }
}

.ecl-search-form--ema {
  @include ema-search-button();

  .ecl-search-form__textfield {
    padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs');
  }
}

.ecl-search-form--ema-internal {
  @include ema-search-button();

  .ecl-search-form__textfield {
    padding: map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'xs')
      map-get($ecl-spacing, 'xxs') map-get($ecl-spacing, 'l');
  }

  .ecl-search-form__textfield-wrapper {
    border-width: 2px;
  }

  .ecl-text-input:focus {
    border-color: map-get($ema-colors, 'blue-1');
    outline-color: 3px solid map-get($ema-colors, 'blue-1');
  }
}
  • URL: /components/raw/ema-search-forms/ema-search-forms.scss
  • Filesystem Path: framework/components/ema-search-forms/ema-search-forms.scss
  • Size: 943 Bytes
  • Handle: @ec-europa/ema-search-forms
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ema-search-forms/ema-search-forms.twig