Europa Component Library

Ratings

Documentation • Demo

EMA Ratings

This component only provides the inputs type=’radio’, it presumes you already have your form and only want to include a rating system

{#
  Accepts:
    - title (string): title of the panel (default: '')
    - default_rating (string): set a default rating (default: 0)
    - name (string): name of your form group input
    - disabled (boolean): read-only rating (default: false)
#}

{# Internal properties #}
{% set _css_class = 'ema-rating' %}
{% set _title = title|default('Your rating') %}
{% set _default_rating = default_rating|default(0) %}
{% set _name = name|default('ema-rating') %}
{% set _disabled = disabled|default(false) %}
{% set _feedback = feedback|default([]) %}

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

{# Print result #}
<div class="{{_css_class}}">
  <span class="ema-rating__title">{{_title}}</span>
  <div class="ema-rating__stars">
    {% for i in 5..1 %}
      <input
        type="radio"
        class="ema-rating__input"
        aria-hidden="true"
        id="ema-rating__{{_name}}--{{i}}"
        name="{{ _name }}"
        tabindex="{{ i-1 }}"
        value="{{ i }}"
        {{ _disabled ? 'disabled="disabled"'}}
        {{ i == _default_rating ? 'aria-checked="true" checked="checked"' }}
      />
      <label class="ema-rating__star" title="{{ _feedback[i-1] }}" {{ not _disabled ? 'for="ema-rating__' ~ _name ~ '--' ~ i ~ '"': 'disabled="disabled"'}}>
        ★
      </label>
    {% endfor %}
  </div>
</div>
 
{
  "title": "Add your rating",
  "name": "ema-rating",
  "feedback": [
    "Unhelpful",
    "Not very helpful",
    "Fairly helpful",
    "Helpful",
    "Very helpful"
  ]
}
 
<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-rating--5" name="ema-rating" tabindex="4" value="5" />
    <label class="ema-rating__star" title="Very helpful" for="ema-rating__ema-rating--5">
        ★
      </label>
    <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating--4" name="ema-rating" tabindex="3" value="4" />
    <label class="ema-rating__star" title="Helpful" for="ema-rating__ema-rating--4">
        ★
      </label>
    <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating--3" name="ema-rating" tabindex="2" value="3" />
    <label class="ema-rating__star" title="Fairly helpful" for="ema-rating__ema-rating--3">
        ★
      </label>
    <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating--2" name="ema-rating" tabindex="1" value="2" />
    <label class="ema-rating__star" title="Not very helpful" for="ema-rating__ema-rating--2">
        ★
      </label>
    <input type="radio" class="ema-rating__input" aria-hidden="true" id="ema-rating__ema-rating--1" name="ema-rating" tabindex="0" value="1" />
    <label class="ema-rating__star" title="Unhelpful" for="ema-rating__ema-rating--1">
        ★
      </label>
  </div>
</div>
  • Content: 
    .ema-rating {
  align-items: center;
  display: flex;
  margin: 0;
}

.ema-rating__title {
  margin-right: map-get($ecl-spacing, 'xxxs');
}

.ema-rating__stars {
  display: inline-block;
  font-size: map-get($ecl-font-size, 'l');

  .ema-rating__input {
    display: none;
    left: -9999px;
    opacity: 0;
    position: absolute;
    visibility: hidden;
  }
  .ema-rating__input:checked ~ label {
    color: map-get($ema-colors, 'orange-3');
  }
}

.ema-rating__stars:not(:checked) {
  .ema-rating__star {
    color: map-get($ema-colors, 'grey-3');
    float: right;
  }
}

.ema-rating__input:not(:disabled) ~ .ema-rating__star {
  cursor: pointer;
}

.ema-rating__input:not(:disabled) ~ .ema-rating__star:hover,
.ema-rating__input:not(:disabled) ~ .ema-rating__star:hover ~ label {
  color: map-get($ema-colors, 'orange-2');
}
  • URL: /components/raw/ema-ratings/ema-ratings.scss
  • Filesystem Path: framework/components/ema-ratings/ema-ratings.scss
  • Size: 830 Bytes
  • Handle: @ec-europa/ema-ratings
  • Preview:
  • Filesystem Path: framework/components/ema-ratings/ema-ratings.twig