Review
<x-wirekit:: shows one customer review: its stars, its title and text, who wrote it and when, whether the purchase was verified, and the shop's reply. Each review is an article with a heading, so a reader can move from one to the next.
The average and the distribution above the reviews are the review summary.
Usage
Warm and well made
Verified purchase
The text is the slot. date takes a date, a string, or a Unix timestamp, and is written as the application's locale writes a date. verified marks a review whose purchase the shop has checked, with a badge that says so in words.
The Shop's Reply
The reply slot is the shop's answer, set off under the review with who wrote it and when:
Arrived late
Reply from Northwind Outfitters
Without reply-author the reply is from "the shop".
Actions
The actions slot holds what a reader can do with a review, such as marking it helpful or reporting it:
Exactly as described
A List of Reviews
The list is a composition: the summary with its filter rows, a select to sort, the reviews, and pagination under them. Each review's heading level follows the page's outline, 3 under a section headed at level 2:
Exactly as described
Verified purchase
Warm and well made
Verified purchase
Arrived late
In a Livewire component, render the page of reviews and the pagination from the same paginator:
@foreach ($reviews as $review)
<x-wirekit::review
:rating="$review->rating"
:title="$review->title"
:author="$review->author_name"
:date="$review->created_at"
:verified="$review->verified"
>
{{ $review->body }}
</x-wirekit::review>
@endforeach
<x-wirekit::pagination :paginator="$reviews" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rating |
int|float |
0 |
The review's score, drawn as stars |
max |
int |
5 |
The top of the scale, as on rating |
title |
string|null |
null |
The title, the review's heading |
author |
string|null |
null |
The reviewer's display name. It names the review where there is no title |
date |
DateTimeInterface|string|int|null |
null |
When the review was written |
verified |
bool |
false |
A purchase the shop has checked: a badge says "Verified purchase" |
level |
int |
3 |
The heading level of the title, from 2 to 6 |
replyAuthor |
string|null |
null |
Who replied for the shop. Without one, the reply is from "the shop" |
replyDate |
DateTimeInterface|string|int|null |
null |
When the shop replied |
timezone |
string|null |
null |
The zone both dates are written in. Null keeps each date's own |
scope |
string|null |
null |
Scoped personalization key |
Slots
| Slot | Description |
|---|---|
| default | The review's text |
reply |
The shop's reply |
actions |
What a reader can do with the review |
Accessibility
- A review is an article named by its title, or by its author where it has no title, and its title is a heading at the level the page needs, so a reader can move from review to review.
- The stars are an image named with the score, "4 out of 5 stars".
- The date is a
<time>with the moment in machine-readable form, written as the locale writes a date. - The verified mark is text, a badge that says "Verified purchase", not an icon or a color.
- The shop's reply is an article of its own, named "Reply from …", and set off by a line at its start edge, which mirrors in a right-to-left page.
Keyboard Interaction
A review takes no focus of its own. Tab reaches the controls in its actions slot.
Design Tokens
| Token | Use |
|---|---|
--text-wk-sm |
The text, the meta line and the reply |
--color-wk-text-muted |
The date and the meta line |
--border-wk-width + --color-wk-border |
The line beside the shop's reply |
--space-wk-md + --padding-wk-x-md |
The indent of the reply |
--gap-wk-sm |
The space between the parts of a review |