Skip to content

Commit

Permalink
fix(styles): update examples using Rating Indicator [ci visual]
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Sep 18, 2024
1 parent 3606f74 commit 045ad25
Show file tree
Hide file tree
Showing 9 changed files with 261 additions and 166 deletions.
1 change: 1 addition & 0 deletions packages/styles/src/facet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ $block: #{$fd-namespace}-facet;

.#{$block}__container {
flex-direction: column;
margin-block: 0;
}

.#{$block}__rating-container {
Expand Down
6 changes: 3 additions & 3 deletions packages/styles/src/rating-indicator.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ $block: #{$fd-namespace}-rating-indicator;

&__list {
@include fd-reset();

@include fd-inline-flex-vertical-center() {
gap: var(--ratingIndicator_Item_Spacing);
};
Expand Down Expand Up @@ -94,11 +94,11 @@ $block: #{$fd-namespace}-rating-indicator;
position: absolute;

&:first-child {
clip-path: inset(0 50% 0 0);
clip-path: inset(0 48% 0 0);
left: 0;

@include fd-rtl() {
clip-path: inset(0 0 0 50%);
clip-path: inset(0 0 0 48%);
left: auto;
right: 0;
}
Expand Down
57 changes: 37 additions & 20 deletions packages/styles/stories/Components/card/extended-header.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,28 +186,45 @@
<div class="fd-card__header-extended" role="group" aria-roledescription="Extended content">
<div class="fd-card__header-column fd-card__header-column--right-aligned">
<div class="fd-card__header-row">
<div class="fd-rating-indicator fd-rating-indicator--sm">
<div class="fd-rating-indicator__container" aria-label="Star Rating (out of 5)">
<input aria-label="0 star" type="radio" class="fd-rating-indicator__input fd-rating-indicator__input--zero-rating" id="rating-s-0" name="rating-s" value="0">
<label class="fd-rating-indicator__label fd-rating-indicator__label--zero-rating" for="rating-s-0" aria-hidden="true"></label>

<input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-s-1" name="rating-s" value="1">
<label class="fd-rating-indicator__label" for="rating-s-1"></label>

<input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-s-2" name="rating-s" value="2" checked>
<label class="fd-rating-indicator__label" for="rating-s-2"></label>

<input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-s-3" name="rating-s" value="3">
<label class="fd-rating-indicator__label" for="rating-s-3"></label>

<input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-s-4" name="rating-s" value="4">
<label class="fd-rating-indicator__label" for="rating-s-4"></label>

<input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-s-5" name="rating-s" value="5">
<label class="fd-rating-indicator__label" for="rating-s-5"></label>
<div class="fd-rating-indicator">
<div
class="fd-rating-indicator__container"
title="Rating"
tabindex="0"
role="slider"
aria-orientation="horizontal"
aria-roledescription="Rating Indicator"
aria-valuemin="0"
aria-valuenow="2.5"
aria-valuemax="5"
aria-valuetext="2.5 of 5"
>
<ul class="fd-rating-indicator__list" aria-hidden="true">
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
</ul>
</div>
<span class="fd-rating-indicator__dynamic-text">(205)</span>
<span class="fd-rating-indicator__dynamic-text">(2.5 of 5)</span>
</div>

</div>
</div>
</div>
Expand Down
54 changes: 36 additions & 18 deletions packages/styles/stories/Dev/facets/combined.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,26 +50,44 @@ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle4">Pricin
</div>

<div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle1">
<h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle1">Average User Rating</h1>
<h2 class="fd-form-label">6 reviews</h2>
<span role="heading" aria-level="3" class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle1">Average User Rating</span>
<div class="fd-rating-indicator fd-facet__container">
<div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
<input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-1" name="rating-max-value-5" value="1">
<label class="fd-rating-indicator__label" for="rating-max-value-5-1"></label>

<input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-2" name="rating-max-value-5" value="2" checked>
<label class="fd-rating-indicator__label" for="rating-max-value-5-2"></label>

<input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-3" name="rating-max-value-5" value="3">
<label class="fd-rating-indicator__label" for="rating-max-value-5-3"></label>

<input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-4" name="rating-max-value-5" value="4">
<label class="fd-rating-indicator__label" for="rating-max-value-5-4"></label>

<input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="rating-max-value-5-5" name="rating-max-value-5" value="5">
<label class="fd-rating-indicator__label" for="rating-max-value-5-5"></label>
<div
class="fd-rating-indicator__container fd-facet__rating-container"
title="Rating"
tabindex="0"
role="slider"
aria-orientation="horizontal"
aria-roledescription="Rating Indicator"
aria-valuemin="0"
aria-valuenow="2.5"
aria-valuemax="5"
aria-valuetext="2.5 of 5"
>
<ul class="fd-rating-indicator__list" aria-hidden="true">
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
</ul>
</div>
<span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
<span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text">(2.5 of 5)</span>
</div>
</div>
</div>
11 changes: 0 additions & 11 deletions packages/styles/stories/Dev/facets/facets.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import objectPageMobileExampleHtml from "./object-page-mobile.example.html?raw";
import objectPageExampleHtml from "./object-page.example.html?raw";
import imageFacetExampleHtml from "./image-facet.example.html?raw";
import ratingIndicatorExampleHtml from "./rating-indicator.example.html?raw";
import formFacetLinkExampleHtml from "./form-facet-link.example.html?raw";
import formFacetExampleHtml from "./form-facet.example.html?raw";
import keyValueExampleHtml from "./key-value.example.html?raw";
Expand Down Expand Up @@ -71,16 +70,6 @@ FormFacetLink.parameters = {
}
}
};
export const RatingIndicator = () => ratingIndicatorExampleHtml;
RatingIndicator.storyName = 'Rating Indicator Facet';
RatingIndicator.parameters = {
docs: {
description: {
story: `The Rating Indicator Facet displays a **Rating Indicator**. It consists of a mandatory title, optional supplementary texts
like a subtitle or a dynamic text, and the rating indicator.`
}
}
};
export const ImageFacet = () => imageFacetExampleHtml;
ImageFacet.storyName = 'Image/Avatar Facet';
ImageFacet.parameters = {
Expand Down
56 changes: 37 additions & 19 deletions packages/styles/stories/Dev/facets/object-page.example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,27 +130,45 @@ <h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="kvFacetTitle12">Prici
</span>
</div>

<div class="fd-facet fd-facet--rating-indicator fd-margin-end--md fd-margin-bottom--sm" role="group" aria-labelledby="ratingFacetTitle3">
<h1 class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</h1>
<h2 class="fd-form-label">6 reviews</h2>
<div class="fd-facet fd-facet--rating-indicator">
<div role="heading" aria-level="3" class="fd-title fd-title--h5 fd-margin-bottom--sm" id="ratingFacetTitle3">Average User Rating</div>
<div class="fd-rating-indicator fd-facet__container">
<div class="fd-rating-indicator__container fd-facet__rating-container" aria-label="Star Rating (out of 5)">
<input aria-label="1 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-1" name="2-rating-max-value-5" value="1">
<label class="fd-rating-indicator__label" for="2-rating-max-value-5-1"></label>

<input aria-label="2 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-2" name="2-rating-max-value-5" value="2" checked>
<label class="fd-rating-indicator__label" for="2-rating-max-value-5-2"></label>

<input aria-label="3 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-3" name="2-rating-max-value-5" value="3">
<label class="fd-rating-indicator__label" for="2-rating-max-value-5-3"></label>

<input aria-label="4 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-4" name="2-rating-max-value-5" value="4">
<label class="fd-rating-indicator__label" for="2-rating-max-value-5-4"></label>

<input aria-label="5 star" type="radio" class="fd-rating-indicator__input" id="2-rating-max-value-5-5" name="2-rating-max-value-5" value="5">
<label class="fd-rating-indicator__label" for="2-rating-max-value-5-5"></label>
<div
class="fd-rating-indicator__container fd-facet__rating-container"
title="Rating"
tabindex="0"
role="slider"
aria-orientation="horizontal"
aria-roledescription="Rating Indicator"
aria-valuemin="0"
aria-valuenow="2.5"
aria-valuemax="5"
aria-valuetext="2.5 of 5"
>
<ul class="fd-rating-indicator__list" aria-hidden="true">
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--favorite fd-rating-indicator__icon fd-rating-indicator__icon--selected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
<li class="fd-rating-indicator__item">
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
<span class="sap-icon sap-icon--unfavorite fd-rating-indicator__icon fd-rating-indicator__icon--unselected"></span>
</li>
</ul>
</div>
<span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text fd-margin-top--tiny">(2 of 5)</span>
<span class="fd-rating-indicator__dynamic-text fd-facet__rating-dynamic-text">(2.5 of 5)</span>
</div>
</div>
</div>
Expand Down
23 changes: 0 additions & 23 deletions packages/styles/stories/Dev/facets/rating-indicator.example.html
View file

This file was deleted.

Loading

0 comments on commit 045ad25

Please sign in to comment.