Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/rating stars adapt props #558

Merged
merged 5 commits into from
Sep 8, 2021
Merged

Refactor/rating stars adapt props #558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c3c6b60
feat: new props and testing
ChrisPaj Aug 31, 2021
7e58d5f
feat: storybook
ChrisPaj Sep 1, 2021
c058f21
fix: snapshots; formatting
ChrisPaj Sep 1, 2021
aca939b
refactor: remove reflect from deprecated props
ChrisPaj Sep 3, 2021
dc5ffba
feat: status note for deprecated; deprecated logic from attribute to …
ChrisPaj Sep 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 88 additions & 4 deletions packages/components/src/components/rating-stars/__snapshots__/rating-stars.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`RatingStars snapshots deprecated overwrite actual props 1`] = `
<scale-rating-stars max="12" max-rating="12" rating="0" size="small" star-size="small">
<mock:shadow-root>
<div part="container">
<div aria-labeledby="scale-rating-star-5-label" aria-orientation="horizontal" aria-valuetext="0 out of 12 stars" part="wrapper" role="figure" tabindex="-1">
<input aria-orientation="horizontal" aria-valuemax="12" aria-valuemin="0" aria-valuenow="0" aria-valuetext="0 out of 12 stars" id="scale-rating-star-5" max="13" min="0" part="range-slider" step="1" type="range" value="0">
<div data-value="1" part="star" style="z-index: 5;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="2" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="3" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="4" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="5" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="6" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="7" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="8" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="9" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="10" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="11" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
<div data-value="12" part="star" style="z-index: auto;">
<scale-icon-action-favorite part="placeholder-star" size="16"></scale-icon-action-favorite>
<div class="icon-clip">
<scale-icon-action-favorite part="selected-star" selected="" size="16"></scale-icon-action-favorite>
</div>
</div>
</div>
</div>
</mock:shadow-root>
</scale-rating-stars>
`;

exports[`RatingStars snapshots rating 2 1`] = `
<scale-rating-stars max-rating="5" min-rating="0" rating="2" star-size="large">
<scale-rating-stars max="5" rating="2" size="large">
<mock:shadow-root>
<div part="container">
<div aria-labeledby="scale-rating-star-1-label" aria-orientation="horizontal" aria-valuetext="2 out of 5 stars" part="wrapper" role="figure" tabindex="-1">
Expand Down Expand Up @@ -43,7 +127,7 @@ exports[`RatingStars snapshots rating 2 1`] = `
`;

exports[`RatingStars snapshots rating 2, maxRating 7 1`] = `
<scale-rating-stars max-rating="7" min-rating="0" rating="2" star-size="large">
<scale-rating-stars max="7" max-rating="7" rating="2" size="large">
<mock:shadow-root>
<div part="container">
<div aria-labeledby="scale-rating-star-3-label" aria-orientation="horizontal" aria-valuetext="2 out of 7 stars" part="wrapper" role="figure" tabindex="-1">
Expand Down Expand Up @@ -97,7 +181,7 @@ exports[`RatingStars snapshots rating 2, maxRating 7 1`] = `
`;

exports[`RatingStars snapshots rating 3, disabled 1`] = `
<scale-rating-stars disabled="" max-rating="5" min-rating="0" rating="0" star-size="large">
<scale-rating-stars disabled="" max="5" rating="0" size="large">
<mock:shadow-root>
<div part="container">
<div aria-labeledby="scale-rating-star-4-label" aria-orientation="horizontal" aria-valuetext="0 out of 5 stars" part="wrapper" role="figure" tabindex="-1">
Expand Down Expand Up @@ -139,7 +223,7 @@ exports[`RatingStars snapshots rating 3, disabled 1`] = `
`;

exports[`RatingStars snapshots rating 3, minRating 1 1`] = `
<scale-rating-stars max-rating="5" min-rating="1" rating="3" star-size="large">
<scale-rating-stars max="5" min-rating="1" rating="3" size="large">
<mock:shadow-root>
<div part="container">
<div aria-labeledby="scale-rating-star-2-label" aria-orientation="horizontal" aria-valuetext="3 out of 5 stars" part="wrapper" role="figure" tabindex="-1">
Expand Down
21 changes: 17 additions & 4 deletions packages/components/src/components/rating-stars/rating-stars.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,24 @@ describe('RatingStars', () => {

it('check non default props', async () => {
page.root.maxRating = 7;
page.root.minRating = 1;
page.root.max = 7;
page.root.minRating = 0;
page.root.rating = 4;
page.root.starSize = 'small';
page.root.size = 'small';
page.root.disabled = true;
page.root.ariaLabelTranslation = '$value aus $maxValue Sternen';
page.root.ariaLabelTranslation = '$value aus $max Sternen';
page.root.label = 'Rating Label';
await page.waitForChanges();
expect(page.rootInstance.maxRating).toBe(7);
expect(page.rootInstance.minRating).toBe(1);
expect(page.rootInstance.max).toBe(7);
expect(page.rootInstance.minRating).toBe(0);
expect(page.rootInstance.rating).toBe(4);
expect(page.rootInstance.starSize).toBe('small');
expect(page.rootInstance.size).toBe('small');
expect(page.rootInstance.disabled).toBe(true);
expect(page.rootInstance.ariaLabelTranslation).toBe(
'$value aus $maxValue Sternen'
'$value aus $max Sternen'
);
expect(page.rootInstance.label).toBe('Rating Label');
});
Expand Down Expand Up @@ -76,6 +80,15 @@ describe('RatingStars', () => {
});
expect(page.root).toMatchSnapshot();
});
it('deprecated overwrite actual props', async () => {
page = await newSpecPage({
components: [RatingStars],
html: `<scale-rating-stars max-rating="12" star-size="small"></scale-rating-stars>`,
});
expect(page.root).toMatchSnapshot();
expect(page.rootInstance.max).toBe(12);
expect(page.rootInstance.size).toBe('small');
});
});

describe('emitter', () => {
Expand Down
60 changes: 46 additions & 14 deletions packages/components/src/components/rating-stars/rating-stars.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
EventEmitter,
} from '@stencil/core';
import { emitEvent } from '../../utils/utils';
import statusNote from '../../utils/status-note';

export interface StarInterface extends HTMLDivElement {
dataset: {
Expand All @@ -42,20 +43,24 @@ export class RatingStars {

ratingStarId = `scale-rating-star-${ratingStarCount++}`;

/** The lower limit of the rating. In cases where */
@Prop({ reflect: true }) starSize: 'small' | 'large' = 'large';
/** The lower limit of the rating. In cases where */
@Prop({ reflect: true }) minRating = 0;
/** Deprecated; size should be used instead of starSize */
@Prop() starSize: 'small' | 'large' = 'large';
/** size of the stars */
@Prop({ reflect: true, mutable: true }) size: 'small' | 'large' = 'large';
/** Deprecated; The lower limit of the rating */
@Prop() minRating = 0;
/** Deprecated; max should be used instead of maxRating */
@Prop() maxRating = 5;
/** The upper limit of the rating */
@Prop({ reflect: true }) maxRating = 5;
@Prop({ reflect: true, mutable: true }) max = 5;
/** Represents the current value of the rating */
@Prop({ mutable: true, reflect: true }) rating = 0;
/** makes the rating non-interactive (but still accessible) */
@Prop({ reflect: true }) readonly = false;
/** disables input */
@Prop({ reflect: true }) disabled = false;
/** a11y text for getting meaningful value. `$rating` and `$maxRating` are template variables and will be replaces by their corresponding properties. */
@Prop() ariaLabelTranslation = '$rating out of $maxRating stars';
/** a11y text for getting meaningful value. `$rating` and `$max` (deprecated `$maxRating`) are template variables and will be replaces by their corresponding properties. */
@Prop() ariaLabelTranslation = '$rating out of $max stars';
/** (optional) rating label */
@Prop({ reflect: true }) label?: string;

Expand All @@ -64,11 +69,38 @@ export class RatingStars {
/** @deprecated in v3 in favor of kebab-case event names */
@Event({ eventName: 'scaleChange' }) scaleChangeLegacy: EventEmitter;

componentWillRender() {
// make sure the deprecated props overwrite the actual ones if used
// and show status note deprecated
if (this.maxRating !== 5) {
this.max = this.maxRating;
statusNote({
tag: 'deprecated',
message:
'Property "maxRating" is deprecated. Please use the "max" property!',
type: 'warn',
source: this.host,
});
}
if (this.starSize !== 'large') {
this.size = this.starSize;
statusNote({
tag: 'deprecated',
message:
'Property "starSize" is deprecated. Please use the "size" property!',
type: 'warn',
source: this.host,
});
}
}

// constructs the aria message for the current rating
getRatingText() {
const filledText = this.ariaLabelTranslation
.replace(/\$rating/g, `${this.rating}`)
.replace(/\$maxRating/g, `${this.maxRating}`);
// TODO: remove when `maxRating` is also being removed
.replace(/\$maxRating/g, `${this.max}`)
.replace(/\$max/g, `${this.max}`);
return filledText;
}

Expand All @@ -81,8 +113,8 @@ export class RatingStars {
input.value = this.minRating.toString();
break;

case value > this.maxRating:
input.value = this.maxRating.toString();
case value > this.max:
input.value = this.max.toString();
break;
}

Expand All @@ -108,7 +140,7 @@ export class RatingStars {
};

renderStar(index: number, selected = false, rating: number) {
const size = sizes[this.starSize];
const size = sizes[this.size];
const isWholeNumber = rating % 1 === 0;
const isLastNumber = Math.ceil(rating) === index;

Expand Down Expand Up @@ -137,7 +169,7 @@ export class RatingStars {
renderRating() {
const stars = [];
const roundedRating = Math.ceil(this.rating);
const max = this.maxRating;
const max = this.max;

for (let index = 1; index <= max; index++) {
const isSelected = roundedRating >= index;
Expand Down Expand Up @@ -175,12 +207,12 @@ export class RatingStars {
type="range"
id={this.ratingStarId}
min={0}
max={this.maxRating + 1}
max={this.max + 1}
value={this.rating}
step="1"
aria-orientation="horizontal"
aria-valuemin={this.minRating}
aria-valuemax={this.maxRating}
aria-valuemax={this.max}
aria-valuenow={this.rating}
aria-valuetext={this.getRatingText()}
onInput={!this.readonly && this.handleInput}
Expand Down
22 changes: 12 additions & 10 deletions packages/components/src/components/rating-stars/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,18 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------------------------- |
| `ariaLabelTranslation` | `aria-label-translation` | a11y text for getting meaningful value. `$rating` and `$maxRating` are template variables and will be replaces by their corresponding properties. | `string` | `'$rating out of $maxRating stars'` |
| `disabled` | `disabled` | disables input | `boolean` | `false` |
| `label` | `label` | (optional) rating label | `string` | `undefined` |
| `maxRating` | `max-rating` | The upper limit of the rating | `number` | `5` |
| `minRating` | `min-rating` | The lower limit of the rating. In cases where | `number` | `0` |
| `rating` | `rating` | Represents the current value of the rating | `number` | `0` |
| `readonly` | `readonly` | makes the rating non-interactive (but still accessible) | `boolean` | `false` |
| `starSize` | `star-size` | The lower limit of the rating. In cases where | `"large" \| "small"` | `'large'` |
| Property | Attribute | Description | Type | Default |
| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------------------------- |
| `ariaLabelTranslation` | `aria-label-translation` | a11y text for getting meaningful value. `$rating` and `$max` (deprecated `$maxRating`) are template variables and will be replaces by their corresponding properties. | `string` | `'$rating out of $max stars'` |
| `disabled` | `disabled` | disables input | `boolean` | `false` |
| `label` | `label` | (optional) rating label | `string` | `undefined` |
| `max` | `max` | The upper limit of the rating | `number` | `5` |
| `maxRating` | `max-rating` | Deprecated; max should be used instead of maxRating | `number` | `5` |
| `minRating` | `min-rating` | Deprecated; The lower limit of the rating | `number` | `0` |
| `rating` | `rating` | Represents the current value of the rating | `number` | `0` |
| `readonly` | `readonly` | makes the rating non-interactive (but still accessible) | `boolean` | `false` |
| `size` | `size` | size of the stars | `"large" \| "small"` | `'large'` |
| `starSize` | `star-size` | Deprecated; size should be used instead of starSize | `"large" \| "small"` | `'large'` |


## Events
Expand Down
Loading