Rating

With the rating component, a user can submit a rating.

The items of the component can have any inline content, for example a text or an Icon. By default it is assumed that an .icon icon-star is used.

The component could have a hidden input within, which will automatically updated. This means that the component can also be reused very simply in a form without any further work.

The number of items in the component is not fixed. There must be at least one item, but there can be any number.

The items are scaled larger on mobile devices so that they can be touched better.

The following code shows a extreme simple rating component:

<div class="rating">
  <div class="rating__list">
    <div class="rating__item"><span class="icon icon--star"></span></div>
    <div class="rating__item"><span class="icon icon--star"></span></div>
    <div class="rating__item"><span class="icon icon--star"></span></div>
  </div>
</div>

The following list describe all existing block/element/modifier classes and all data attributes.

• .rating required the block that represent the rating component and contains all elements
• .rating__list required an element that contains the .rating__items
• .rating__item required their must be at least one element
• .rating__label-from a label that stands before the .rating__items
• .rating__label-until a label that stands after the .rating__items
• .rating__input the value of a html <input> that will automatic will be updated
• .rating__value an element that contains the current value, only combine with the .rating--result modifier, see Result
• Modifier
  • .rating--result show a result of a rating, for more information see Result
  • .rating--center will horizontal center the rating component, make the default CSS inline component to a CSS block component
  • .rating--traffic-light normal their is only an active/inactive color state, with this modifier we use the success/waring/danger Colors of the current theme
  • .rating--background normaly the icons will be colorized, with this modifier the icon is white and the background will be colorized
  • .rating--no-hover this modifier disable the CSS hover effect
  • .rating--read-only the rating only sets its initial values, later change won’t work
  • .rating__item--active if you want to set an initial active state, you can this modifier to the needed .rating__item element
  • .rating__item--hover this modifier will only be set by JavaScript
• Data Attributes
  • data-sg-rating-value if you want to set the current value via data attribute, use this attribute on the .rating, for more information see below Initial Value, this only works with numberic values
  • data-sg-rating-item-value you can set an value per item that will use in the .rating__input

Basic

Here is a basic example, without initial values.

Initial Value

Here you can see how we set an initial value.

Result

You can use this simple display variant to present the average results of the assessment.

Other Values

The values that are entered into the hidden input are usually numbers from one to [number of items]. But you can change their values by setting the data attribute data-sg-rating-item-value.

If you want to use the data-sg-rating-value functions, the values in the data-sg-rating-item-value must be numbers.

Modifier

Center

The .rating--center modifier centers the component, regardless of the labels and their sizes.

Traffic Light

The .rating--traffic-light modifier change the colors to the success, danger and warning states.

Background

The .rating--background modifier will change the background color instead of the font color. The font color is simple white.

No Hover

The .rating--no-hover modifier will disable the CSS hover effect.

Fixed

The .rating--read-only modifier will prevent adding JavaScript events.

Examples

This examples shows a view examples how you can use the ratings.

Observer

The rating system use the Observer Pattern.

The rating is a subject and notify all observers, if a rating item is changed to active.

type Rating = TComponent;
type RatingItem = HTMLElement;
type RatingId = string;
type RatingItemValue = string;
type RatingData = { rating: Rating, ratingId: RatingId, ratingItemValue: RatingItemValue };
/**
 * simplified excerpt from rating-handler.ts
 */
class RatingHandler extends Subject<SubjectData> {
  // ...
  activated(rating: Rating, item: RatingItem): void {
    this.deactivatedAll(rating);
    [...this.getItemsBefore(rating, item), item].forEach(this.activatedItem)
    this.notifyObserver(rating, item);
  }
  private notifyObserver(rating: Rating, item?: RatingItem): void {
    const ratingData = {
      rating,
      ratingId: this.getRatingId(rating),
      ratingItemValue: item ? this.getItemValue(item) : ''
    };
    this.notify(ratingData);
  }
  // ...
}

You can listen to the notification by adding into the tab as an observer.

import { styleGuide, Observer } from '@finanzen-net/style-guide';
/**
 * This is what your code should look like
 */
class YourClass extends Observer {
   update({rating, ratingId, ratingItemValue}) {
     console(`In the rating "${ratingId}" the item "${ratingItemValue}" was activated`);
   }
}
const yourClass = new YourClass();
styleGuide.ratingHandler.addObserver(yourClass);