Review: Add

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="
        review
        review--add
        
    ">
    <h3 class="review__title">
        Write a review
    </h3>

    <fieldset class="fieldset" aria-labelledby="rating-field-label">
        <legend id="rating-field-label" class="rating-rate-legend review__rating-legend">
            Score
        </legend>

        <div class="
            rating
            rating--rate
            
        " role="listbox" aria-required="true" aria-labelledby="rating-field-label" tabindex="0">
            <div class="rating__rate-item " role="option" aria-selected="false">
                <label for="Rating_1" class="
                        rating__star
                        rating__star--rate
                        
                    " aria-label="Rate option, 1 of 5. Click to vote">
                    <span
                        class="
                            rating__indicator
                            
                        "
                        
                    ></span>
                </label>

                <input type="radio" name="ratings[1]" id="Rating_1" value="16" class="radio__field">
            </div>
            <div class="rating__rate-item " role="option" aria-selected="false">
                <label for="Rating_2" class="
                        rating__star
                        rating__star--rate
                        
                    " aria-label="Rate option, 2 of 5. Click to vote">
                    <span
                        class="
                            rating__indicator
                            
                        "
                        
                    ></span>
                </label>

                <input type="radio" name="ratings[2]" id="Rating_2" value="16" class="radio__field">
            </div>
            <div class="rating__rate-item " role="option" aria-selected="false">
                <label for="Rating_3" class="
                        rating__star
                        rating__star--rate
                        
                    " aria-label="Rate option, 3 of 5. Click to vote">
                    <span
                        class="
                            rating__indicator
                            
                        "
                        
                    ></span>
                </label>

                <input type="radio" name="ratings[3]" id="Rating_3" value="16" class="radio__field">
            </div>
            <div class="rating__rate-item " role="option" aria-selected="false">
                <label for="Rating_4" class="
                        rating__star
                        rating__star--rate
                        
                    " aria-label="Rate option, 4 of 5. Click to vote">
                    <span
                        class="
                            rating__indicator
                            
                        "
                        
                    ></span>
                </label>

                <input type="radio" name="ratings[4]" id="Rating_4" value="16" class="radio__field">
            </div>
            <div class="rating__rate-item " role="option" aria-selected="false">
                <label for="Rating_5" class="
                        rating__star
                        rating__star--rate
                        
                    " aria-label="Rate option, 5 of 5. Click to vote">
                    <span
                        class="
                            rating__indicator
                            
                        "
                        
                    ></span>
                </label>

                <input type="radio" name="ratings[5]" id="Rating_5" value="16" class="radio__field">
            </div>
        </div>
    </fieldset>

    <script src="/components/raw/rating/rating-rate.js"></script>

    <fieldset class="fieldset review__fieldset">

        <div class="input review__field">
            <label class="
            label
            input__label
            
        " for="review-nickname">
        Nickname *
    </label>
            <input class="input__field " id="review-nickname" name="review-nickname" type="text" placeholder="" autocomplete="name">
        </div>

        <div class="input review__field">
            <label class="
            label
            input__label
            
        " for="review-summary">
        Summary *
    </label>
            <input class="input__field " id="review-summary" name="review-summary" type="text" placeholder="" autocomplete="off">
        </div>

        <div class="input review__field">
            <label class="
            label
            input__label
            
        " for="review-text">
        Review *
    </label>

            <textarea class="input__field input__field--textarea " id="review-text" name="review-text" placeholder="" autocomplete="off"></textarea>
        </div>

        <button class="button review__submit-btn" type="button" aria-label="button">
    Post
</button>

        <p class="review__required-info">
            * Required fields
        </p>
    </fieldset>
</div>


        <div
    class="
        review
        review--add
        {{ class }}
    "
    {{{ attributes }}}
>
        <h3 class="review__title">
            {{ addTitle }}
        </h3>

        {{ render '@rating--rate' rate merge=true }}

        <fieldset class="fieldset review__fieldset">

            {{ render '@input' nickname }}
            {{ render '@input' summary }}
            {{ render '@input--textarea' textReview }}
            {{ render '@button' submitReview merge=true }}

            <p class="review__required-info">
                {{ requiredInfo }}
            </p>
        </fieldset>
</div>


        
            
            {
  "rating": {
    "ariaLabel": "Average rating 72%",
    "star": {
      "attributes": "style=\"width: 72%\""
    },
    "class": "review__rating"
  },
  "author": "Anna Maria",
  "authorDescription": "Verified Buyer",
  "shareText": "Share",
  "reviewText": "Was This Review Helpful?",
  "title": "Review title",
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper. ",
  "date": "07/08/2018",
  "icons": {
    "thumbUp": {
      "id": "thumb-up",
      "title": "Thumb up"
    },
    "thumbDown": {
      "id": "thumb-down",
      "title": "Thumb down"
    },
    "share": {
      "id": "share"
    }
  },
  "addTitle": "Write a review",
  "productTitle": "Product name",
  "rate": {
    "legendClass": "review__rating-legend"
  },
  "nickname": {
    "class": "review__field",
    "label": {
      "text": "Nickname *",
      "hidden": false
    },
    "field": {
      "attributes": "autocomplete=\"name\"",
      "id": "review-nickname",
      "name": "review-nickname",
      "type": "text"
    }
  },
  "summary": {
    "class": "review__field",
    "label": {
      "text": "Summary *",
      "hidden": false
    },
    "field": {
      "attributes": "autocomplete=\"off\"",
      "id": "review-summary",
      "name": "review-summary",
      "type": "text"
    }
  },
  "textReview": {
    "class": "review__field",
    "label": {
      "text": "Review *",
      "hidden": false
    },
    "field": {
      "attributes": "autocomplete=\"off\"",
      "id": "review-text",
      "name": "review-text",
      "type": "text"
    }
  },
  "submitReview": {
    "class": "review__submit-btn",
    "text": "Post"
  },
  "requiredInfo": "* Required fields"
}

File:

Content:


                                $review__width                          : 100% !default;

$review__wrapper-height                 : $spacer--extra-large !default;
$review__wrapper-margin                 : $spacer--medium 0 !default;

$review__title-font-weight              : $font-weight-bold !default;
$review__title-text-transform           : none !default;
$review__title-font-family              : $font-family-base !default;
$review__title-product-margin           : $spacer 0 !default;
$review__title-text-transform           : none !default;

$review__author-text-transform          : none !default;
$review__author-font-family             : $font-family-base !default;
$review__author-margin                  : 0 !default;
$review__author-description-color       : $gray-dark !default;
$review__author-description-font-size   : $font-size-small !default;
$review__author-font-weight             : $font-weight-bold !default;

$review__date-color                     : $color-secondary !default;
$review__date-font-size                 : $font-size-small !default;

$review__submit-btn-width               : 100% !default;
$review__submit-btn-width\@medium       : auto !default;

$review__required-info-margin           : $spacer--large 0 0 !default;
$review__required-info-font-size        : $font-size-small !default;

$review__amount-text-decoration         : none !default;
$review__amount-letter-spacing          : 2px !default;
$review__amount-margin                  : 0 $spacer 0 0 !default;
$review__amount-margin\@medium          : 0 $spacer 0 0 !default;
$review__amount-color                   : $gray-dark !default;

$review__summary-add-width              : 100% !default;
$review__summary-add-text-decoration    : underline !default;
$review__summary-add-text-align         : left !default;
$review__summary-add-color              : $gray-dark !default;

$review__details-max-width              : calc(100% - #{$spacer--extra-large}) !default;
$review__details-flex-basis             : calc(100% - #{$spacer--extra-large}) !default;
$review__details-padding                : 0 0 0 $spacer--medium !default;

$review__image-max-width                : $spacer--extra-large !default;
$review__image-width                    : $spacer--extra-large !default;
$review__image-flex-basis               : $spacer--extra-large !default;
$review__image-border-radius            : 50% !default;
$review__image-height                   : auto !default;

$review__rating-legend-color            : $gray-dark !default;

$review__fieldset-padding               : 0 0 $spacer--extra-large * 2 0 !default;
$review__fieldset-margin                : 0 auto !default;
$review__fieldset-max-width             : 650px !default;
$review__field-margin                   : $spacer--semi-medium 0 !default;

$review__rating-margin                  : 0 0 $spacer--medium !default;
$review__description-margin             : 0 0 $spacer--medium !default;
$review__description-paragraph-font-size: $font-size-base !default;
$review__description-paragraph-color    : $gray-dark !default;

$review__links-column-margin-first-child: $spacer--large 0 !default;
$review__links-margin                   : 0 0 $spacer--large !default;
$review__links-btn-color                : $gray-dark !default;
$review__links-btn-text-decoration      : none !default;
$review__links-btn-padding              : 0 $spacer--medium 0 0 !default;
$review__links-btn-icon-fill            : $gray-dark !default;
$review__links-btn-icon-margin          : 0 $spacer 0 0 !default;
$review__links-legend-color             : $gray-dark !default;
$review__links-legend-margin            : 0 $spacer--medium 0 0 !default;

// add variant
$review__padding--add                   : $spacer--semi-large 0 0 !default;
$review__margin--add                    : 0 0 $spacer--medium !default;
$review__border--add                    : $border-base !default;
$review__border-width--add              : 0 0 1px 0 !default;

// summary variant
$review__rating-margin--summary         : 0 $spacer 0 0 !default;

URL: /components/raw/review/_review-variables.scss
Filesystem Path: build/components/Organisms/review/_review-variables.scss
Size: 4 KB

Content:


                                @import 'review-variables';

.review {
    width: $review__width;

    @include mq($screen-m) {
        display: flex;
        flex-flow: row nowrap;
    }

    &--add {
        padding: $review__padding--add;
        margin: $review__margin--add;
        border: $review__border--add;
        border-width: $review__border-width--add;

        @include mq($screen-m) {
            display: block;
        }
    }

    &--summary {
        width: auto;
        .rating {
            margin: $review__rating-margin--summary;
        }
    }

    &__details {
        max-width: $review__details-max-width;
        flex-basis: $review__details-flex-basis;
        padding: $review__details-padding;
    }

    &__image {
        max-width: $review__image-max-width;
        flex-basis: $review__image-flex-basis;

        .image {
            max-width: $review__image-max-width;
            width: $review__image-width;
            height: $review__image-height;
            border-radius: $review__image-border-radius;
        }
    }

    &__rating-legend {
        color: $review__rating-legend-color;
    }

    &__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height: $review__wrapper-height;
        margin: $review__wrapper-margin;
    }

    &__title {
        font-weight: $review__title-font-weight;
        text-transform: $review__title-text-transform;
        font-family: $review__title-font-family;
    }

    &__title-product {
        display: block;
        margin: $review__title-product-margin;
        text-transform: $review__title-text-transform;
    }

    &__author-name {
        font-weight: $review__author-font-weight;
        text-transform: $review__author-text-transform;
        font-family: $review__author-font-family;
        margin: $review__author-margin;
    }

    &__author-description {
        color: $review__author-description-color;
        font-size: $review__author-description-font-size;
    }

    &__date {
        display: block;
        color: $review__date-color;
        font-size: $review__date-font-size;
    }

    &__fieldset {
        max-width: $review__fieldset-max-width;
        margin: $review__fieldset-margin;
        padding: $review__fieldset-padding;
    }

    &__field {
        margin: $review__field-margin;
    }

    &__submit-btn {
        width: $review__submit-btn-width;

        @include mq($screen-m) {
            width: $review__submit-btn-width\@medium;
        }
    }

    &__required-info {
        margin: $review__required-info-margin;
        font-size: $review__required-info-font-size;
    }

    &__summary-handle {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
    }

    &__amount {
        margin: $review__amount-margin;
        letter-spacing: $review__amount-letter-spacing;
        text-decoration: $review__amount-text-decoration;
        color: $review__amount-color;
        white-space: nowrap;

        @include mq($screen-m) {
            margin: $review__amount-margin\@medium;
        }

        &.focus-visible {
            @include focus-inline();
        }
    }

    &__summary-add {
        width: $review__summary-add-width;
        text-decoration: $review__summary-add-text-decoration;
        text-align: $review__summary-add-text-align;
        color: $review__summary-add-color;

        &.focus-visible {
            @include focus-inline();
        }
        .review-customer-view & {
            display: none;
        }
    }

    &__rating {
        margin: $review__rating-margin;
    }

    &__description {
        margin: $review__description-margin;

        p {
            font-size: $review__description-paragraph-font-size;
            color: $review__description-paragraph-color;
        }
    }

    &__links {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: $review__links-margin;

        .button {
            padding: 0;
        }
    }

    &__links-column {
        display: flex;
        align-items: center;

        &:first-child {
            margin: $review__links-column-margin-first-child;
        }
    }

    &__links-btn {
        display: flex;
        align-items: center;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: 0;
        color: $review__links-btn-color;
        text-decoration: $review__links-btn-text-decoration;
        padding: $review__links-btn-padding;

        &:last-child {
            padding-right: 0;
        }

        .icon {
            fill: $review__links-btn-icon-fill;
            margin: $review__links-btn-icon-margin;
        }
    }

    &__links-legend {
        color: $review__links-legend-color;
        margin: $review__links-legend-margin;
    }
}

URL: /components/raw/review/_review.scss
Filesystem Path: build/components/Organisms/review/_review.scss
Size: 4.9 KB

Handle: @review--add
Variants (3): Default , Add , Summary
Preview:
- With layout
- Component only
Filesystem Path: build/components/Organisms/review/review--add.hbs
References (4): @rating--rate, @input, @input--textarea, @button
Referenced by (2): @product-review, @product-reviews--details

There are no notes for this item.