Europa Component Library

Text areas

{#
  Accepts:
    - "id" (string): textarea id (optional, default: default-id)
    - "name" (string): textarea name (mandatory, default: default-name)
    - "rows" (int): number of rows (optional, default: 4)
    - "label" (string): label text (optional, default: '')
    - "isDisabled" (boolean): is disabled (optional, default: false)
    - "hasError" (boolean): has error (optional, default: false)
    - "extraClass" (string): extra CSS classes (optional, default: '')
    - "extraAttributes" (string): extra attributes (optional, default: '')
#}

{% set id = id|default('default-id') %}
{% set name = name|default('default-name') %}
{% set rows = rows|default(4) %}
{% set label = label|default('') %}

{# Internal properties #}

{% set _cssClass = 'ecl-textarea' %}
{% set _extraAttributes = '' %}

{# Internal logic - Process properties #}

{% if hasError is defined and hasError == true %}
  {% set _cssClass = _cssClass ~ ' ecl-textarea--has-error' %}
{% endif %}

{% if extraClass is defined %}
  {% set _cssClass = _cssClass ~ ' ' ~ extraClass %}
{% endif %}

{% if isDisabled is defined and isDisabled == true %}
  {% set _extraAttributes = _extraAttributes ~ ' disabled' %}
{% endif %}

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

{# Print the result  #}

{% if label is defined and label != '' %}
<label for="{{ id }}" id="{{ id }}_label" aria-label="{{ id }}">{{ label }}</label>
{% endif %}
<textarea
  name="{{ name }}"
  id="{{ id }}"
  rows="{{ rows }}"
  class="{{ _cssClass }}"
  role="textbox"
  aria-multiline="true"
  aria-labelledby="{{ id }}_label"
  {{ _extraAttributes }}
>
</textarea>
/* Default */
{
  "label": "Normal textarea",
  "id": "example-textarea-id-1",
  "extraAttributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}

/* Is Disabled */
{
  "label": "Disabled textarea",
  "id": "example-textarea-id-2",
  "isDisabled": true,
  "extraAttributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}

/* Has Error */
{
  "label": "Textarea with error",
  "id": "example-textarea-id-3",
  "hasError": true,
  "extraAttributes": [
    {
      "name": "placeholder",
      "value": "Some placeholder text."
    }
  ]
}

<!-- Default -->
<label for="example-textarea-id-1" id="example-textarea-id-1_label" aria-label="example-textarea-id-1">Normal textarea</label>

<textarea name="default-name" id="example-textarea-id-1" rows="4" class="ecl-textarea" role="textbox" aria-multiline="true" aria-labelledby="example-textarea-id-1_label" placeholder="Some placeholder text.">
</textarea>

<!-- Is Disabled -->
<label for="example-textarea-id-2" id="example-textarea-id-2_label" aria-label="example-textarea-id-2">Disabled textarea</label>

<textarea name="default-name" id="example-textarea-id-2" rows="4" class="ecl-textarea" role="textbox" aria-multiline="true" aria-labelledby="example-textarea-id-2_label" disabled placeholder="Some placeholder text.">
</textarea>

<!-- Has Error -->
<label for="example-textarea-id-3" id="example-textarea-id-3_label" aria-label="example-textarea-id-3">Textarea with error</label>

<textarea name="default-name" id="example-textarea-id-3" rows="4" class="ecl-textarea ecl-textarea--has-error" role="textbox" aria-multiline="true" aria-labelledby="example-textarea-id-3_label" placeholder="Some placeholder text.">
</textarea>

  • Content:
    /**
     * Textarea component
     * @define textarea
     */
    
    .ecl-textarea {
      background-color: #fff;
      background-image: none;
      border: 1px solid $ecl-color-shade;
      color: $ecl-color-shade;
      display: block;
      font-family: $ecl-font-family-sans-serif;
      font-size: map-get($ecl-font-size, 's');
      line-height: 1.6;
      margin: 0;
      padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs');
      width: 100%;
    
      /* stylelint-disable-next-line plugin/selector-bem-pattern */
      * + & {
        margin-top: map-get($ecl-spacing, 'xs');
      }
    
      &:focus {
        border-color: map-get($ecl-colors, 'yellow-110');
        outline: 3px solid map-get($ecl-colors, 'yellow-110');
        outline-offset: 0;
        text-decoration: none;
      }
    
      &[disabled],
      &--is-disabled,
      &[readonly],
      &--is-readonly {
        background-color: #eee;
        cursor: not-allowed;
        opacity: 1;
      }
    }
    
    .ecl-textarea--has-error {
      border-color: $ecl-color-error;
    
      &:focus {
        border-color: darken($ecl-color-error, 10%);
        outline-color: darken($ecl-color-error, 10%);
      }
    }
    
  • URL: /components/raw/ecl-forms-textareas/ecl-textareas.scss
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-textareas/ecl-textareas.scss
  • Size: 1 KB
  • Handle: @ec-europa/ecl-forms-textareas
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-forms/ecl-forms-textareas/ecl-forms-textareas.twig