From 76589b777662a1da1f9c72dcf1a77e74db75af06 Mon Sep 17 00:00:00 2001
From: Paul C Pederson <paul.c.pederson@gmail.com>
Date: Wed, 27 Jan 2021 12:52:50 -0800
Subject: [PATCH 1/3] fix(rating): use ignored display-value prop

---
 .../calcite-rating/calcite-rating.e2e.ts      | 15 ++++++++++----
 .../calcite-rating/calcite-rating.stories.ts  |  4 ++++
 .../calcite-rating/calcite-rating.tsx         | 20 ++++++++-----------
 src/demos/calcite-rating.html                 | 11 +++++++---
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/components/calcite-rating/calcite-rating.e2e.ts b/src/components/calcite-rating/calcite-rating.e2e.ts
index 44cc41f637e..da714ed88b3 100644
--- a/src/components/calcite-rating/calcite-rating.e2e.ts
+++ b/src/components/calcite-rating/calcite-rating.e2e.ts
@@ -381,14 +381,21 @@ describe("calcite-rating", () => {
 
   it("does not render the calcite chip when count and average are not present", async () => {
     const page = await newE2EPage();
-    await page.setContent("<calcite-rating></calcite-rating>");
+    await page.setContent("<calcite-rating display-value></calcite-rating>");
+    const calciteChip = await page.find("calcite-rating >>> calcite-chip");
+    expect(calciteChip).toBeNull();
+  });
+
+  it("does not render the calcite chip when display-value is false", async () => {
+    const page = await newE2EPage();
+    await page.setContent("<calcite-rating count=240 average=3 value=2></calcite-rating>");
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     expect(calciteChip).toBeNull();
   });
 
   it("renders the calcite chip and the count span when count is present and average is not", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-rating count=15></calcite-rating>`);
+    await page.setContent(`<calcite-rating count=15 display-value></calcite-rating>`);
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     const countSpan = await page.find("calcite-rating >>> .number--count");
     const averageSpan = await page.find("calcite-rating >>> .number--average");
@@ -399,7 +406,7 @@ describe("calcite-rating", () => {
 
   it("renders the calcite chip and the average span when average is present and count is not", async () => {
     const page = await newE2EPage();
-    await page.setContent("<calcite-rating average=4.2></calcite-rating>");
+    await page.setContent("<calcite-rating average=4.2 display-value></calcite-rating>");
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     const countSpan = await page.find("calcite-rating >>> .number---count");
     const averageSpan = await page.find("calcite-rating >>> .number--average");
@@ -410,7 +417,7 @@ describe("calcite-rating", () => {
 
   it("renders the calcite chip and both the average and count spans when average and count are present", async () => {
     const page = await newE2EPage();
-    await page.setContent("<calcite-rating count=15 average=4.2></calcite-rating>");
+    await page.setContent("<calcite-rating count=15 average=4.2 display-value></calcite-rating>");
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     const countSpan = await page.find("calcite-rating >>> .number--count");
     const averageSpan = await page.find("calcite-rating >>> .number--average");
diff --git a/src/components/calcite-rating/calcite-rating.stories.ts b/src/components/calcite-rating/calcite-rating.stories.ts
index 5aa223ab275..aee6a5670af 100644
--- a/src/components/calcite-rating/calcite-rating.stories.ts
+++ b/src/components/calcite-rating/calcite-rating.stories.ts
@@ -16,6 +16,7 @@ export const Simple = (): string => html`
   <calcite-rating
     scale="${select("scale", ["s", "m", "l"], "m")}"
     value="${number("value", 0)}"
+    ${boolean("display-value", false)}
     average="${number("average", 0)}"
     count="${number("count", 0)}"
     ${boolean("read-only", false)}
@@ -30,6 +31,7 @@ export const DarkMode = (): string => html`
     theme="dark"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     value="${number("value", 0)}"
+    ${boolean("display-value", false)}
     average="${number("average", 0)}"
     count="${number("count", 0)}"
     ${boolean("read-only", false)}
@@ -50,6 +52,7 @@ export const WrappedInCalciteLabel = (): string => html`
     <calcite-rating
       scale="${select("scale", ["s", "m", "l"], "m")}"
       value="${number("value", 0)}"
+      ${boolean("display-value", false)}
       average="${number("average", 0)}"
       count="${number("count", 0)}"
       ${boolean("read-only", false)}
@@ -69,6 +72,7 @@ export const Rtl = (): string => html`
     <calcite-rating
       scale="${select("scale", ["s", "m", "l"], "m")}"
       value="${number("value", 0)}"
+      ${boolean("display-value", false)}
       average="${number("average", 0)}"
       count="${number("count", 0)}"
       ${boolean("read-only", false)}
diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx
index 17e690ee67c..a1d0cfe7d3e 100644
--- a/src/components/calcite-rating/calcite-rating.tsx
+++ b/src/components/calcite-rating/calcite-rating.tsx
@@ -51,7 +51,7 @@ export class CalciteRating {
   /** is the rating component in a selectable mode */
   @Prop({ reflect: true }) disabled = false;
 
-  /** display rating value */
+  /** Show average and count data, if available */
   @Prop({ reflect: true }) displayValue = false;
 
   /** optionally pass a number of previous ratings to display */
@@ -72,7 +72,7 @@ export class CalciteRating {
   //
   //--------------------------------------------------------------------------
 
-  @Event() calciteRatingChange: EventEmitter;
+  @Event() calciteRatingChange: EventEmitter<{ value: number }>;
 
   //--------------------------------------------------------------------------
   //
@@ -153,6 +153,7 @@ export class CalciteRating {
   }
 
   render() {
+    const { intlRating, displayValue, scale, theme, count, average } = this;
     const dir = getElementDir(this.el);
     return (
       <Host dir={dir}>
@@ -162,18 +163,13 @@ export class CalciteRating {
           onMouseLeave={() => (this.hoverValue = null)}
           onTouchEnd={() => (this.hoverValue = null)}
         >
-          <legend class="visually-hidden">{this.intlRating}</legend>
+          <legend class="visually-hidden">{intlRating}</legend>
           {this.renderStars()}
         </fieldset>
-        {this.count || this.average ? (
-          <calcite-chip
-            dir={dir}
-            scale={this.scale}
-            theme={this.theme}
-            value={this.count?.toString()}
-          >
-            {this.average && <span class="number--average">{this.average.toString()}</span>}
-            {this.count && <span class="number--count">({this.count?.toString()})</span>}
+        {(count || average) && displayValue ? (
+          <calcite-chip dir={dir} scale={scale} theme={theme} value={count?.toString()}>
+            {!!average && <span class="number--average">{average.toString()}</span>}
+            {!!count && <span class="number--count">({count?.toString()})</span>}
           </calcite-chip>
         ) : null}
       </Host>
diff --git a/src/demos/calcite-rating.html b/src/demos/calcite-rating.html
index 5456a96fb9e..7ac9b832741 100644
--- a/src/demos/calcite-rating.html
+++ b/src/demos/calcite-rating.html
@@ -34,6 +34,10 @@ <h5>Default with average and value</h5>
       <calcite-rating average=3.65 value=2></calcite-rating>
       <h5>Default without average or value</h5>
       <calcite-rating></calcite-rating>
+      <h5>Default with average with display value true</h5>
+      <calcite-rating average=3.65 display-value></calcite-rating>
+      <h5>Default with average, value, and count; display value</h5>
+      <calcite-rating average=3.65 value=2 count=240 display-value></calcite-rating>
 
       <h2>Wrapped in calcite-label</h2>
       <calcite-label>
@@ -99,15 +103,16 @@ <h2>RTL</h2>
         <h2>Default</h2>
         <h5>Default with average</h5>
         <calcite-rating theme="dark" average=3.65></calcite-rating>
-        <calcite-rating theme="dark" average=3.6></calcite-rating>
-        <calcite-rating theme="dark" average=3.655></calcite-rating>
-
         <h5>Default with value</h5>
         <calcite-rating theme="dark" value=3></calcite-rating>
         <h5>Default with average and value</h5>
         <calcite-rating theme="dark" average=3.65 value=2></calcite-rating>
         <h5>Default without average or value</h5>
         <calcite-rating theme="dark"></calcite-rating>
+        <h5>Default with average with display value true</h5>
+        <calcite-rating theme="dark" average=3.65 display-value></calcite-rating>
+        <h5>Default with average, value, and count; display value</h5>
+        <calcite-rating theme="dark" average=3.65 value=2 count=240 display-value></calcite-rating>
         <h2>Wrapped in calcite-label</h2>
         <calcite-label theme="dark">
           Rate this item

From b1efe2348c622b7fe7b05c5f44906684a23c93f4 Mon Sep 17 00:00:00 2001
From: Paul C Pederson <paul.c.pederson@gmail.com>
Date: Thu, 28 Jan 2021 10:34:32 -0800
Subject: [PATCH 2/3] display-value => show-chip for ratings component #1481

---
 .../calcite-rating/calcite-rating.e2e.ts      | 10 ++++----
 .../calcite-rating/calcite-rating.stories.ts  |  8 +++----
 .../calcite-rating/calcite-rating.tsx         |  8 +++----
 src/components/calcite-rating/readme.md       | 24 +++++++++----------
 src/demos/calcite-rating.html                 | 16 ++++++-------
 5 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/calcite-rating/calcite-rating.e2e.ts b/src/components/calcite-rating/calcite-rating.e2e.ts
index da714ed88b3..704e57144f4 100644
--- a/src/components/calcite-rating/calcite-rating.e2e.ts
+++ b/src/components/calcite-rating/calcite-rating.e2e.ts
@@ -381,12 +381,12 @@ describe("calcite-rating", () => {
 
   it("does not render the calcite chip when count and average are not present", async () => {
     const page = await newE2EPage();
-    await page.setContent("<calcite-rating display-value></calcite-rating>");
+    await page.setContent("<calcite-rating show-chip></calcite-rating>");
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     expect(calciteChip).toBeNull();
   });
 
-  it("does not render the calcite chip when display-value is false", async () => {
+  it("does not render the calcite chip when show-chip is false", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-rating count=240 average=3 value=2></calcite-rating>");
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
@@ -395,7 +395,7 @@ describe("calcite-rating", () => {
 
   it("renders the calcite chip and the count span when count is present and average is not", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-rating count=15 display-value></calcite-rating>`);
+    await page.setContent(`<calcite-rating count=15 show-chip></calcite-rating>`);
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     const countSpan = await page.find("calcite-rating >>> .number--count");
     const averageSpan = await page.find("calcite-rating >>> .number--average");
@@ -406,7 +406,7 @@ describe("calcite-rating", () => {
 
   it("renders the calcite chip and the average span when average is present and count is not", async () => {
     const page = await newE2EPage();
-    await page.setContent("<calcite-rating average=4.2 display-value></calcite-rating>");
+    await page.setContent("<calcite-rating average=4.2 show-chip></calcite-rating>");
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     const countSpan = await page.find("calcite-rating >>> .number---count");
     const averageSpan = await page.find("calcite-rating >>> .number--average");
@@ -417,7 +417,7 @@ describe("calcite-rating", () => {
 
   it("renders the calcite chip and both the average and count spans when average and count are present", async () => {
     const page = await newE2EPage();
-    await page.setContent("<calcite-rating count=15 average=4.2 display-value></calcite-rating>");
+    await page.setContent("<calcite-rating count=15 average=4.2 show-chip></calcite-rating>");
     const calciteChip = await page.find("calcite-rating >>> calcite-chip");
     const countSpan = await page.find("calcite-rating >>> .number--count");
     const averageSpan = await page.find("calcite-rating >>> .number--average");
diff --git a/src/components/calcite-rating/calcite-rating.stories.ts b/src/components/calcite-rating/calcite-rating.stories.ts
index aee6a5670af..2085f377262 100644
--- a/src/components/calcite-rating/calcite-rating.stories.ts
+++ b/src/components/calcite-rating/calcite-rating.stories.ts
@@ -16,7 +16,7 @@ export const Simple = (): string => html`
   <calcite-rating
     scale="${select("scale", ["s", "m", "l"], "m")}"
     value="${number("value", 0)}"
-    ${boolean("display-value", false)}
+    ${boolean("show-chip", false)}
     average="${number("average", 0)}"
     count="${number("count", 0)}"
     ${boolean("read-only", false)}
@@ -31,7 +31,7 @@ export const DarkMode = (): string => html`
     theme="dark"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     value="${number("value", 0)}"
-    ${boolean("display-value", false)}
+    ${boolean("show-chip", false)}
     average="${number("average", 0)}"
     count="${number("count", 0)}"
     ${boolean("read-only", false)}
@@ -52,7 +52,7 @@ export const WrappedInCalciteLabel = (): string => html`
     <calcite-rating
       scale="${select("scale", ["s", "m", "l"], "m")}"
       value="${number("value", 0)}"
-      ${boolean("display-value", false)}
+      ${boolean("show-chip", false)}
       average="${number("average", 0)}"
       count="${number("count", 0)}"
       ${boolean("read-only", false)}
@@ -72,7 +72,7 @@ export const Rtl = (): string => html`
     <calcite-rating
       scale="${select("scale", ["s", "m", "l"], "m")}"
       value="${number("value", 0)}"
-      ${boolean("display-value", false)}
+      ${boolean("show-chip", false)}
       average="${number("average", 0)}"
       count="${number("count", 0)}"
       ${boolean("read-only", false)}
diff --git a/src/components/calcite-rating/calcite-rating.tsx b/src/components/calcite-rating/calcite-rating.tsx
index a1d0cfe7d3e..28684f109be 100644
--- a/src/components/calcite-rating/calcite-rating.tsx
+++ b/src/components/calcite-rating/calcite-rating.tsx
@@ -51,8 +51,8 @@ export class CalciteRating {
   /** is the rating component in a selectable mode */
   @Prop({ reflect: true }) disabled = false;
 
-  /** Show average and count data, if available */
-  @Prop({ reflect: true }) displayValue = false;
+  /** Show average and count data summary chip (if available) */
+  @Prop({ reflect: true }) showChip = false;
 
   /** optionally pass a number of previous ratings to display */
   @Prop({ reflect: true }) count?: number;
@@ -153,7 +153,7 @@ export class CalciteRating {
   }
 
   render() {
-    const { intlRating, displayValue, scale, theme, count, average } = this;
+    const { intlRating, showChip, scale, theme, count, average } = this;
     const dir = getElementDir(this.el);
     return (
       <Host dir={dir}>
@@ -166,7 +166,7 @@ export class CalciteRating {
           <legend class="visually-hidden">{intlRating}</legend>
           {this.renderStars()}
         </fieldset>
-        {(count || average) && displayValue ? (
+        {(count || average) && showChip ? (
           <calcite-chip dir={dir} scale={scale} theme={theme} value={count?.toString()}>
             {!!average && <span class="number--average">{average.toString()}</span>}
             {!!count && <span class="number--count">({count?.toString()})</span>}
diff --git a/src/components/calcite-rating/readme.md b/src/components/calcite-rating/readme.md
index c34ec3638e1..952c732e688 100644
--- a/src/components/calcite-rating/readme.md
+++ b/src/components/calcite-rating/readme.md
@@ -10,18 +10,18 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                     | Type                | Default       |
-| -------------- | --------------- | ----------------------------------------------------------------------------------------------- | ------------------- | ------------- |
-| `average`      | `average`       | optionally pass a cumulative average rating to display                                          | `number`            | `undefined`   |
-| `count`        | `count`         | optionally pass a number of previous ratings to display                                         | `number`            | `undefined`   |
-| `disabled`     | `disabled`      | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
-| `displayValue` | `display-value` | display rating value                                                                            | `boolean`           | `false`       |
-| `intlRating`   | `intl-rating`   | Localized string for "Rating" (used for aria label)                                             | `string`            | `TEXT.rating` |
-| `intlStars`    | `intl-stars`    | Localized string for labelling each star, `${num}` in the string will be replaced by the number | `string`            | `TEXT.stars`  |
-| `readOnly`     | `read-only`     | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
-| `scale`        | `scale`         | specify the scale of the component, defaults to m                                               | `"l" \| "m" \| "s"` | `"m"`         |
-| `theme`        | `theme`         | specify the theme of scrim, defaults to light                                                   | `"dark" \| "light"` | `undefined`   |
-| `value`        | `value`         | the value of the rating component                                                               | `number`            | `0`           |
+| Property       | Attribute     | Description                                                                                     | Type                | Default       |
+| -------------- | ------------- | ----------------------------------------------------------------------------------------------- | ------------------- | ------------- |
+| `average`      | `average`     | optionally pass a cumulative average rating to display                                          | `number`            | `undefined`   |
+| `count`        | `count`       | optionally pass a number of previous ratings to display                                         | `number`            | `undefined`   |
+| `disabled`     | `disabled`    | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
+| `displayValue` | `show-chip`   | display rating value                                                                            | `boolean`           | `false`       |
+| `intlRating`   | `intl-rating` | Localized string for "Rating" (used for aria label)                                             | `string`            | `TEXT.rating` |
+| `intlStars`    | `intl-stars`  | Localized string for labelling each star, `${num}` in the string will be replaced by the number | `string`            | `TEXT.stars`  |
+| `readOnly`     | `read-only`   | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
+| `scale`        | `scale`       | specify the scale of the component, defaults to m                                               | `"l" \| "m" \| "s"` | `"m"`         |
+| `theme`        | `theme`       | specify the theme of scrim, defaults to light                                                   | `"dark" \| "light"` | `undefined`   |
+| `value`        | `value`       | the value of the rating component                                                               | `number`            | `0`           |
 
 ## Events
 
diff --git a/src/demos/calcite-rating.html b/src/demos/calcite-rating.html
index 7ac9b832741..03203a92742 100644
--- a/src/demos/calcite-rating.html
+++ b/src/demos/calcite-rating.html
@@ -34,10 +34,10 @@ <h5>Default with average and value</h5>
       <calcite-rating average=3.65 value=2></calcite-rating>
       <h5>Default without average or value</h5>
       <calcite-rating></calcite-rating>
-      <h5>Default with average with display value true</h5>
-      <calcite-rating average=3.65 display-value></calcite-rating>
-      <h5>Default with average, value, and count; display value</h5>
-      <calcite-rating average=3.65 value=2 count=240 display-value></calcite-rating>
+      <h5>Default with average, show chip</h5>
+      <calcite-rating average=3.65 show-chip></calcite-rating>
+      <h5>Default with average, value, and count; show chip</h5>
+      <calcite-rating average=3.65 value=2 count=240 show-chip></calcite-rating>
 
       <h2>Wrapped in calcite-label</h2>
       <calcite-label>
@@ -109,10 +109,10 @@ <h5>Default with average and value</h5>
         <calcite-rating theme="dark" average=3.65 value=2></calcite-rating>
         <h5>Default without average or value</h5>
         <calcite-rating theme="dark"></calcite-rating>
-        <h5>Default with average with display value true</h5>
-        <calcite-rating theme="dark" average=3.65 display-value></calcite-rating>
-        <h5>Default with average, value, and count; display value</h5>
-        <calcite-rating theme="dark" average=3.65 value=2 count=240 display-value></calcite-rating>
+        <h5>Default with average, show chip</h5>
+        <calcite-rating theme="dark" average=3.65 show-chip></calcite-rating>
+        <h5>Default with average, value, and count; show chip</h5>
+        <calcite-rating theme="dark" average=3.65 value=2 count=240 show-chip></calcite-rating>
         <h2>Wrapped in calcite-label</h2>
         <calcite-label theme="dark">
           Rate this item

From e10e48d5b99b4a4db7b1b7a042c76e60b53b6113 Mon Sep 17 00:00:00 2001
From: Paul C Pederson <paul.c.pederson@gmail.com>
Date: Thu, 28 Jan 2021 11:06:46 -0800
Subject: [PATCH 3/3] update gnerated readme docs for rating

---
 src/components/calcite-rating/readme.md | 30 ++++++++++++-------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/calcite-rating/readme.md b/src/components/calcite-rating/readme.md
index 952c732e688..a31d9f9a3ff 100644
--- a/src/components/calcite-rating/readme.md
+++ b/src/components/calcite-rating/readme.md
@@ -10,24 +10,24 @@
 
 ## Properties
 
-| Property       | Attribute     | Description                                                                                     | Type                | Default       |
-| -------------- | ------------- | ----------------------------------------------------------------------------------------------- | ------------------- | ------------- |
-| `average`      | `average`     | optionally pass a cumulative average rating to display                                          | `number`            | `undefined`   |
-| `count`        | `count`       | optionally pass a number of previous ratings to display                                         | `number`            | `undefined`   |
-| `disabled`     | `disabled`    | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
-| `displayValue` | `show-chip`   | display rating value                                                                            | `boolean`           | `false`       |
-| `intlRating`   | `intl-rating` | Localized string for "Rating" (used for aria label)                                             | `string`            | `TEXT.rating` |
-| `intlStars`    | `intl-stars`  | Localized string for labelling each star, `${num}` in the string will be replaced by the number | `string`            | `TEXT.stars`  |
-| `readOnly`     | `read-only`   | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
-| `scale`        | `scale`       | specify the scale of the component, defaults to m                                               | `"l" \| "m" \| "s"` | `"m"`         |
-| `theme`        | `theme`       | specify the theme of scrim, defaults to light                                                   | `"dark" \| "light"` | `undefined`   |
-| `value`        | `value`       | the value of the rating component                                                               | `number`            | `0`           |
+| Property     | Attribute     | Description                                                                                     | Type                | Default       |
+| ------------ | ------------- | ----------------------------------------------------------------------------------------------- | ------------------- | ------------- |
+| `average`    | `average`     | optionally pass a cumulative average rating to display                                          | `number`            | `undefined`   |
+| `count`      | `count`       | optionally pass a number of previous ratings to display                                         | `number`            | `undefined`   |
+| `disabled`   | `disabled`    | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
+| `intlRating` | `intl-rating` | Localized string for "Rating" (used for aria label)                                             | `string`            | `TEXT.rating` |
+| `intlStars`  | `intl-stars`  | Localized string for labelling each star, `${num}` in the string will be replaced by the number | `string`            | `TEXT.stars`  |
+| `readOnly`   | `read-only`   | is the rating component in a selectable mode                                                    | `boolean`           | `false`       |
+| `scale`      | `scale`       | specify the scale of the component, defaults to m                                               | `"l" \| "m" \| "s"` | `"m"`         |
+| `showChip`   | `show-chip`   | Show average and count data summary chip (if available)                                         | `boolean`           | `false`       |
+| `theme`      | `theme`       | specify the theme of scrim, defaults to light                                                   | `"dark" \| "light"` | `undefined`   |
+| `value`      | `value`       | the value of the rating component                                                               | `number`            | `0`           |
 
 ## Events
 
-| Event                 | Description | Type               |
-| --------------------- | ----------- | ------------------ |
-| `calciteRatingChange` |             | `CustomEvent<any>` |
+| Event                 | Description | Type                              |
+| --------------------- | ----------- | --------------------------------- |
+| `calciteRatingChange` |             | `CustomEvent<{ value: number; }>` |
 
 ## Methods