Rating input

stablev1.0.0

Let's the users give a rating through icons.

Overview

Use this element in forms when you need your users to input a rate about a provider, brand or service.

Please, rate

Slide to Rate

Please, rate

Slide to Rate

Usage

Dependencies

To get the rating star component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/02-molecules/rating';

include /node_modules/design-system/src/pug/02-molecules/rating

import rating from 'design-system/src/js/02-molecules/rating';

Basic code

The most simple rating input is made by:

A div element containing the icons. Its class is .rating__icons. This element in turn contains:
- A .rating__star element for each star
- A single .rating__touch-bar
A hidden select element used to store the values.

<!-- FULL STEP VERSION -->
  <div class="form-group">
    <label class="form-group__label">Please, rate</label>

    <!-- START OF ELEMENT ITSELF -->
    <div class="rating" data-initval="3" data-maxval="5">

      <!-- STARS CONTAINER -->
      <div class="rating__icons" aria-hidden="true" tabindex="0">

        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold rating__icon--active" title="Rate with 1 stars" data-value="1">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold rating__icon--active" title="Rate with 2 stars" data-value="2">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold rating__icon--active" title="Rate with 3 stars" data-value="3">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold" title="Rate with 4 stars" data-value="4">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold" title="Rate with 5 stars" data-value="5">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
        </div>

        <!-- MOBILE SLIDER -->
        <div class="rating__touch-bar rating__touch-bar--disabled"></div>

      </div>

      <!-- SELECT VALUE CONTAINER -->
      <select class="rating__select u-sr-only">
        <option value="0" aria-selected="false">0</option>
        <option value="1" aria-label="Rate with 1 stars" aria-selected="false">1</option>
        <option value="2" aria-label="Rate with 2 stars" aria-selected="false">2</option>
        <option value="3" aria-label="Rate with 3 stars" aria-selected="true">3</option>
        <option value="4" aria-label="Rate with 4 stars" aria-selected="false">4</option>
        <option value="5" aria-label="Rate with 5 stars" aria-selected="false">5</option>
      </select>

    </div>
  </div>


<!-- HALF STEP VERSION -->
  <div class="form-group">
    <label class="form-group__label">Please, rate</label>

    <!-- START OF ELEMENT ITSELF -->
    <div class="rating" data-initval="3" data-maxval="5">

      <!-- STARS CONTAINER -->
      <div class="rating__icons" aria-hidden="true" data-step="half" tabindex="0">

        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold rating__icon--active" title="Rate with 0.5 stars" data-value="1">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
          <div class="rating__icon rating__icon--half rating__icon--gold rating__icon--active" title="Rate with 1 stars" data-value="2">
            <svg aria-hidden="true">
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold rating__icon--active" title="Rate with 1.5 stars" data-value="3">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
          <div class="rating__icon rating__icon--half rating__icon--gold rating__icon--active" title="Rate with 2 stars" data-value="4">
            <svg aria-hidden="true">
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold rating__icon--active" title="Rate with 2.5 stars" data-value="5">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
          <div class="rating__icon rating__icon--half rating__icon--gold rating__icon--active" title="Rate with 3 stars" data-value="6">
            <svg aria-hidden="true">
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold" title="Rate with 3.5 stars" data-value="7">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
          <div class="rating__icon rating__icon--half rating__icon--gold" title="Rate with 4 stars" data-value="8">
            <svg aria-hidden="true">
            </svg>
          </div>
        </div>
        <div class="rating__star rating__star--md">
          <div class="rating__icon rating__icon--gold" title="Rate with 4.5 stars" data-value="9">
            <svg aria-hidden="true">
              <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
            </svg>
          </div>
          <div class="rating__icon rating__icon--half rating__icon--gold" title="Rate with 5 stars" data-value="10">
            <svg aria-hidden="true">
            </svg>
          </div>
        </div>

        <!-- MOBILE SLIDER -->
        <div class="rating__touch-bar rating__touch-bar--disabled"></div>

      </div>

      <!-- SELECT VALUE CONTAINER -->
      <select class="rating__select u-sr-only">
        <option value="0" aria-selected="false">0</option>
        <option value="0.5" aria-label="Rate with 0.5 stars" aria-selected="false">0.5</option>
        <option value="1" aria-label="Rate with 1 stars" aria-selected="false">1</option>
        <option value="1.5" aria-label="Rate with 1.5 stars" aria-selected="false">1.5</option>
        <option value="2" aria-label="Rate with 2 stars" aria-selected="false">2</option>
        <option value="2.5" aria-label="Rate with 2.5 stars" aria-selected="false">2.5</option>
        <option value="3" aria-label="Rate with 3 stars" aria-selected="true">3</option>
        <option value="3.5" aria-label="Rate with 3.5 stars" aria-selected="false">3.5</option>
        <option value="4" aria-label="Rate with 4 stars" aria-selected="false">4</option>
        <option value="4.5" aria-label="Rate with 4.5 stars" aria-selected="false">4.5</option>
        <option value="5" aria-label="Rate with 5 stars" aria-selected="false">5</option>
      </select>

    </div>
  </div>

//- Full step version
+rating('5', '3', '', 'true', 'gold', 'md')

//- Half step version
+rating('5', '3', 'half', 'true', 'gold', 'md')

tooltip();

Pug mixin

A pug mixin is available to implement the rating star with ease, find the parameters below:

+rating(qty, value, steps, touchindicator, color, size)

#	Name	Default	Required	Description
1	`qty`	`N/A`	yes	Total number of stars that we want to display. Normally we will put 5.
2	`value`	`N/A`	yes	The default value we want to show before the user interacts with the component.
3	`steps`	`none`	no	If `half` is specified, the rating will increment in half units. Any other value or empty will increment in full units.
4	`touchindicator`	`false`	no	`true` or `false`, depending on wether we want to show the visual text aid "Slide to rate".
5	`color`	`secondary`	no	either `gold` or `secondary` the later depending on the SCSS theme used.
6	`size`	`N/A`	Yes	Set the size of the rating stars: `sm`, `md`, `lg`.

Modifiers

Add the following modifiers to change the appearance of a star rating.

Size
Color
Half steps
Touch indicator

Size

Size modifier comes in 3 variants and allows you to change the size of the stars making it smaller or bigger.

Small

Medium

Large

HTML
Pug

<!-- Class to apply to each star element -->
  <!-- Small -->
  <div class="rating__star rating__star--sm">

  <!-- Medium -->
  <div class="rating__star rating__star--md">

  <!-- Large -->
  <div class="rating__star rating__star--lg">

//- Small
+rating('5', '3', '', 'false', 'gold', 'sm')

//- Medium
+rating('5', '3', '', 'false', 'gold', 'md')

//- Large
+rating('5', '3', '', 'false', 'gold', 'lg')

Color

We can choose in between gold or secondary

Gold

Secondary

HTML
Pug

<!-- Class to apply to each icon element -->
  <!-- Gold -->
  <div class="rating__icon rating__icon--gold" title="Rate with X stars" data-value="X">

  <!-- Secondary -->
  <div class="rating__icon  rating__icon--secondary" title="Rate with X stars" data-value="X">

//- Gold
+rating('5', '3', '', 'false', 'gold', 'sm')

//- Secondary
+rating('5', '3', '', 'false', 'secondary', 'md')

Half steps

Sometimes we might need to have more specific ratings. In these cases we can allow to use a half-unit rating system:

Half-units rating

To achieve this, we need to modify the structure of the .rating__star element and add all the option elements in the select tag or add the appropriate option in the pug mixin.

HTML
Pug

<!-- Structure of each star element -->
<div class="rating__star rating__star--md">
    <div class="rating__icon rating__icon--gold" title="Rate with X stars" data-value="X*2">
      <svg aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-star-filled"></use>
      </svg>
    </div>
    <div class="rating__icon rating__icon--half rating__icon--gold" title="Rate with Y stars" data-value="Y*2">
      <svg aria-hidden="true">
        <use xlink:href="/img/sprite.svg#icon-star-half-rating-only"></use>
      </svg>
    </div>
  </div>

  <!-- Corresponding options -->
  <option value="X" aria-label="Rate with X stars" aria-selected="false">X</option>
  <option value="Y" aria-label="Rate with Y stars" aria-selected="false">Y</option>

//- Each
+rating('5', '2.5', 'Half', 'false', 'gold', 'md')

Touch indicator

To make easier the input of a rating in mobile devices, the component features a "Slide to rate" system, so the user only have to swipe on top of the stars to give a rate. To make this behavior visible, we can choose to display a text-aid on compatible devices that carries a custom animation imitating the sliding effect.

Slide to rate

Slide to Rate

We need to add the element just before the closing tag of the .rating component or configure the pug mixin accordingly.

HTML
Pug

<!-- Text-aid element -->
<div class="rating__slider-help rating__slider-help--disabled">
  <span class="rating__slider-text">Slide to Rate</span>
</div>

//- True or false
+rating('5', '3', '', 'true', 'gold', 'md')

HTML attributes

Get more control over the input's value by specifying one of the following attribute:

data-initval
data-maxval

data-initval

Use this data-attribute to specify the initial value for your component. In the pug mixin it gets automatically populated from the options.

HTML
Pug

<div class="rating" data-initval="3" data-maxval="5">

+rating('5', '3', '', 'false', 'gold', 'md')

data-maxval

This data-attribute sets the maximum rate, and thus the total number of stars that get displayed, that the user can input.

HTML
Pug

<div class="rating" data-initval="3" data-maxval="5">

+rating('5', '3', '', 'false', 'gold', 'md')