Europa Component Library

Rating form

Documentation • Demo

EMA Rating form

This component provides the form needed when you submit a rating.

{# Internal properties #}
{% set _css_class = 'ema-rating-form' %}
{% set _selector = selector|default('ema-rating-form__review') %}
{% set _message = message|default('Tell us more') %}

{# Internal logic - Process properties #}
{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_class %}
{% endif %}

{# Print result #}
<form class="{{_css_class}}">
  <div class="ecl-u-d-flex ecl-u-flex-wrap" id={{ _selector }} aria-controls={{ _selector ~ "-block" }}>
    {% for rating in ratings %}
      <div class="ecl-u-mr-l ecl-u-mb-s">
        {% include '@ec-europa/ema-ratings' with rating %}
      </div>
    {% endfor %}
    <div class="ecl-u-d-flex ecl-u-align-items-center">
      <a class="ecl-link--ema-default ecl-u-mb-s" href="#">View all 12 ratings</a>
    </div>
  </div>
  <div id={{ _selector ~ "-block" }} class="ema-rating-form__review ecl-u-flex-column" aria-hidden="true">
    <p class="ecl-u-ma-none">{{ _message }}</p>
    <div class="ecl-u-d-flex ecl-u-flex-row ecl-u-flex-wrap ecl-u-flex-md-nowrap ecl-u-align-items-end">
      {% include '@ec-europa/ecl-forms-textareas' with { rows: 3, extraClass: 'ecl-u-mr-md-s' } %}
      {% include '@ec-europa/ema-buttons' with {
        extra_classes: 'ecl-button--ema-primary ecl-u-mt-xxxs ema-u-width-100 ema-u-width-md-auto',
        label: 'Submit'
      } %}
    </div>
  </div>
</form>
 
{
  "_demo": {
    "scripts": "document.addEventListener('DOMContentLoaded', function () {\n        ECL.ratingForm(\"ema-rating-form__review\");\n      });"
  },
  "selector": "ema-rating-form__review",
  "message": "Tell us more",
  "ratings": [
    {
      "feedback": [
        "Unhelpful",
        "Not very helpful",
        "Fairly helpful",
        "Helpful",
        "Very helpful"
      ],
      "title": "Add your rating",
      "name": "ema-rating1"
    },
    {
      "title": "Average",
      "name": "ema-rating2",
      "default_rating": 3,
      "disabled": true
    }
  ]
}
 
<form class="ema-rating-form">
  <div class="ecl-u-d-flex ecl-u-flex-wrap" id=ema-rating-form__review aria-controls=ema-rating-form__review-block>
    <div class="ecl-u-mr-l ecl-u-mb-s">

      <div class="ema-rating">
        <span class="ema-rating__title">Add your rating</span>
        <div class="ema-rating__stars">
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating1--5" name="ema-rating1" tabindex="4" value="5" />
          <label class="ema-rating__star" title="Very helpful" for="ema-rating__ema-rating1--5">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating1--4" name="ema-rating1" tabindex="3" value="4" />
          <label class="ema-rating__star" title="Helpful" for="ema-rating__ema-rating1--4">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating1--3" name="ema-rating1" tabindex="2" value="3" />
          <label class="ema-rating__star" title="Fairly helpful" for="ema-rating__ema-rating1--3">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating1--2" name="ema-rating1" tabindex="1" value="2" />
          <label class="ema-rating__star" title="Not very helpful" for="ema-rating__ema-rating1--2">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating1--1" name="ema-rating1" tabindex="0" value="1" />
          <label class="ema-rating__star" title="Unhelpful" for="ema-rating__ema-rating1--1">
        ★
      </label>
        </div>
      </div>
    </div>
    <div class="ecl-u-mr-l ecl-u-mb-s">

      <div class="ema-rating">
        <span class="ema-rating__title">Average</span>
        <div class="ema-rating__stars">
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating2--5" name="ema-rating2" tabindex="4" value="5" disabled="disabled" />
          <label class="ema-rating__star" title="" disabled="disabled">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating2--4" name="ema-rating2" tabindex="3" value="4" disabled="disabled" />
          <label class="ema-rating__star" title="" disabled="disabled">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating2--3" name="ema-rating2" tabindex="2" value="3" disabled="disabled" aria-checked="true" checked="checked" />
          <label class="ema-rating__star" title="" disabled="disabled">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating2--2" name="ema-rating2" tabindex="1" value="2" disabled="disabled" />
          <label class="ema-rating__star" title="" disabled="disabled">
        ★
      </label>
          <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating2--1" name="ema-rating2" tabindex="0" value="1" disabled="disabled" />
          <label class="ema-rating__star" title="" disabled="disabled">
        ★
      </label>
        </div>
      </div>
    </div>
    <div class="ecl-u-d-flex ecl-u-align-items-center">
      <a class="ecl-link--ema-default ecl-u-mb-s" href="#">View all 12 ratings</a>
    </div>
  </div>
  <div id=ema-rating-form__review-block class="ema-rating-form__review ecl-u-flex-column" aria-hidden="true">
    <p class="ecl-u-ma-none">Tell us more</p>
    <div class="ecl-u-d-flex ecl-u-flex-row ecl-u-flex-wrap ecl-u-flex-md-nowrap ecl-u-align-items-end">

      <textarea name="default-name" id="default-id" rows="3" class="ecl-textarea ecl-u-mr-md-s" role="textbox" aria-multiline="true" aria-labelledby="default-id_label">
</textarea>

      <button class="ecl-button ecl-button--default ecl-button--ema-primary ecl-u-mt-xxxs ema-u-width-100 ema-u-width-md-auto">Submit</button>
    </div>
  </div>
</form>
  • Content: 
    import { queryAll } from '@ec-europa/ecl-base/helpers/dom';

export const ratingForm = (selector = '') => {
  if (
    !('querySelector' in document) ||
    !('addEventListener' in window) ||
    !document.documentElement.classList
  )
    return null;

  // SETUP
  const ratingStars = queryAll(
    `#${selector} .ema-rating__star:not([disabled])`
  );

  const eventItemClick = () => {
    const block = queryAll(`#${selector}`)[0].getAttribute('aria-controls');
    queryAll(`#${block}`)[0].removeAttribute('aria-hidden');
  };

  const bindEvents = el => {
    el.addEventListener('click', eventItemClick);
  };

  const unBindEvents = el => {
    el.removeEventListener('click', eventItemClick);
  };

  const init = () => {
    if (ratingStars.length) {
      ratingStars.forEach(star => {
        bindEvents(star);
      });
    }
  };

  const destroy = () => {
    if (ratingStars.length) {
      ratingStars.forEach(star => {
        unBindEvents(star);
      });
    }
  };

  init();

  return {
    init,
    destroy,
  };
};

// module exports
export default ratingForm;
  • URL: /components/raw/ema-rating-form/ema-rating-form.js
  • Filesystem Path: framework/components/ema-rating-form/ema-rating-form.js
  • Size: 1.1 KB
  • Content: 
    .ema-rating-form {
  margin: 0;
}

.ema-rating-form__review {
  display: flex;
}

.ema-rating-form__review[aria-hidden='true'] {
  display: none;
}
  • URL: /components/raw/ema-rating-form/ema-rating-form.scss
  • Filesystem Path: framework/components/ema-rating-form/ema-rating-form.scss
  • Size: 148 Bytes
  • Handle: @ec-europa/ema-rating-form
  • Preview:
  • Filesystem Path: framework/components/ema-rating-form/ema-rating-form.twig