Added a star-rating input for the product card

refs https://github.com/TryGhost/Team/issues/1245

- This is a proof-of-concept as there are so many ways to implement a star-rating component
- The component is only available when editing the product card
- Uses the unicode star character: ★
- The inspiration is an old article from Lea Verou: https://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/ (minus the clever use of :not(:checked) on something that's not an input to filter-out IE)
- There is currently no way to remove the star rating as it'll get designed this week

ghost/admin/app/styles/components/koenig.css

@@ -1731,6 +1731,59 @@ button.emoji-picker__category-button.active {
     margin-top: 24px;
 }
 
+.kg-product-card-rating-edit {
+    float:left;
+}
+
+.kg-product-card-rating-edit + * {
+    clear: both;
+}
+
+.kg-product-card-rating-edit > input {
+    position:absolute;
+    left:-9999px;
+    clip:rect(0,0,0,0);
+}
+
+.kg-product-card-rating-edit > label {
+    float:right;
+    width:1em;
+    padding:0 .1em;
+    overflow:hidden;
+    white-space:nowrap;
+    cursor:pointer;
+    font-size:200%;
+    line-height:1.2;
+    color:#ddd;
+}
+
+.kg-product-card-rating-edit > label:before {
+    content: '★ ';
+}
+
+.kg-product-card-rating-edit > input:checked ~ label {
+    color: #f70;
+}
+
+.kg-product-card-rating-edit:not(:checked) > label:hover,
+.kg-product-card-rating-edit:not(:checked) > label:hover ~ label {
+    color: gold;
+}
+
+.kg-product-card-rating-edit > input:checked + label:hover,
+.kg-product-card-rating-edit > input:checked + label:hover ~ label,
+.kg-product-card-rating-edit > input:checked ~ label:hover,
+.kg-product-card-rating-edit > input:checked ~ label:hover ~ label,
+.kg-product-card-rating-edit > label:hover ~ input:checked ~ label {
+    color: #ea0;
+}
+
+.kg-product-card-rating-edit > label:active {
+    position:relative;
+    top:2px;
+    left:2px;
+}
+
 /* Button card
 /* --------------------------------------------------------------- */
 .kg-button-card {

ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs

@@ -91,6 +91,13 @@
                     @onChange={{action "setProductDescription"}}
                     @didCreateEditor={{action "registerEditor"}}
                 />
+                <div class="kg-product-card-rating-edit" style="height: auto;">
+                    <input type="radio" id="star5" name="rating" value="5" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "5"}}/><label for="star5" title="5 stars">5 stars</label>
+                    <input type="radio" id="star4" name="rating" value="4" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "4"}}/><label for="star4" title="4 stars">4 stars</label>
+                    <input type="radio" id="star3" name="rating" value="3" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "3"}}/><label for="star3" title="3 stars">3 stars</label>
+                    <input type="radio" id="star2" name="rating" value="2" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "2"}}/><label for="star2" title="2 stars">2 stars</label>
+                    <input type="radio" id="star1" name="rating" value="1" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "1"}}/><label for="star1" title="1 star">1 star</label>
+                </div>
                 {{#if (and @payload.productButton @payload.productUrl)}}
                     <a href={{@payload.productUrl}} class="gh-btn gh-btn-accent kg-product-card-button" target="_blank" rel="noopener noreferrer"><span>{{@payload.productButton}}</span></a>
                 {{/if}}

ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js

@@ -25,13 +25,13 @@ export default class KoenigCardProductComponent extends Component {
     get isEmpty() {
         const {productTitle, productDescription, productUrl, productButton, productImageSrc} = this.args.payload;
 
-        return isBlank(productTitle) && isBlank(productDescription) && isBlank(productUrl) && isBlank(productButton) && isBlank(productImageSrc);
+        return isBlank(productTitle) && isBlank(productDescription) && (isBlank(productUrl) || isBlank(productButton)) && isBlank(productImageSrc);
     }
 
     get isIncomplete() {
-        const {productTitle, productDescription, productUrl, productButton, productImageSrc} = this.args.payload;
+        const {productTitle, productDescription} = this.args.payload;
 
-        return isBlank(productTitle) || isBlank(productDescription) || isBlank(productUrl) || isBlank(productButton) || isBlank(productImageSrc);
+        return isBlank(productTitle) || isBlank(productDescription);
     }
 
     get toolbar() {
@@ -234,4 +234,11 @@ export default class KoenigCardProductComponent extends Component {
             .find('input[type="file"]')
             .click();
     }
+
+    @action
+    changeStars(event) {
+        if (event.target.checked) {
+            this._updatePayloadAttr('productStarRating', event.target.value);
+        }
+    }
 }