# Review

# Most common usage scenario

NOT YET DOCUMENTED

This section is not fully documented yet. We are doing our best to make our documentation a good and complete source of knowledge about Storefront UI. If you would like to help us, please don't hesitate to contribute to our docs. You can read more about it here.

# Props

  • author

    • Author of the review
    • type: string
    • defaultValue: ""
  • date

    • Date of the review
    • type: string
    • defaultValue: ""
  • message

    • Message from the reviewer
    • type: string
    • defaultValue: ""
  • rating

    • Rating from the reviewer
    • type: number|string|boolean
    • defaultValue: false
  • maxRating

    • Max rating for the review
    • type: number|string
    • defaultValue: 5
  • charLimit

    • Char limit for the review
    • type: number|string
    • defaultValue: 250
  • readMoreText

    • Read more text for the review
    • type: string
    • defaultValue: "Read more"
  • hideFullText

    • Hide full text message for the review
    • type: string
    • defaultValue: "Read less"

# Slots

  • author

    • Review author. Slot content will replace default <div> tag (bind 'author' string).
    • bindings: author
  • info

    • Review information. Slot content will replace default <div> tag and its inner <div> tags (bind 'rating' boolean|number, 'maxRating' number, 'date' string).
    • bindings: rating, maxRating, date
  • message

    • Review message. Slot content will replace default <div> tag and its inner <span> and <a> tags (bind 'finalMessage' computed property, 'buttonText' computed property).
    • bindings: finalMessage, buttonText

# Events

None.

# CSS modifiers

None.

# SCSS variables

$review__div_tags-margin-bottom: $spacer-medium !default;
$review__div_tags-display-inline-block: inline-block !default;
$review__margin-left: $spacer-medium !default;
$review__author-text-transform: capitalize !default;
$review__author-font-weight: 450 !default;
$review__author-font-size: $font-size-big-desktop !default;
$review__author-font-family: $body-font-family-primary !default;
$review__author-color: $c-text-primary !default;
$review__date-text-transform: capitalize !default;
$review__date-font-weight: $body-font-weight-primary !default;
$review__date-font-size: $font-size-small-desktop !default;
$review__date-font-family: $body-font-family-secondary !default;
$review__date-color: $c-dark-secondary !default;
$review__message-font-weight: $body-font-weight-primary !default;
$review__message-font-size: $font-size-regular-desktop !default;
$review__message-color: $c-dark-secondary !default;
$review__message_read_more-font-weight: $body-font-weight-primary !default;
$review__message_read_more-font-size: $font-size-regular-desktop !default;
$review__message_read_more-color: $c-green-primary !default;
$review__message_read_more-background-color: Transparent !default;
$review__message_read_more-border: none !default;
$review__message_read_more-cursor: pointer !default;
$review__message_read_more-outline: none !default;
$review__message_read_more-font-family: $body-font-family-primary !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/molecules/SfReview/SfReview.html"></template>
<script src="@storefront-ui/vue/src/components/molecules/SfReview/SfReview.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfReview.scss";
</style>

You can read about using component partials here

# Play with this component

See all available configurations and play with this component on Storybook.