Merge pull request #1517 from EnergySage/ced-1822-more-es-rating

feat: finish EsRating TODOs
EnergySage · Sep 18, 2024 · 1c5483b · 1c5483b
2 parents 28584a9 + 1dc22ee
commit 1c5483b
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 21 deletions.
diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
@@ -4,12 +4,12 @@ import Rating from 'primevue/rating';
 const props = defineProps({
     /**
      * Starting rating
-     * 0-5; Avg will show half icons rounded down
+     * 0-5; Avg will show half icons rounded down in read only mode
      */
     rating: {
         type: Number,
         default: 0,
-        validator: (num) => num >= 0 && num <= 5,
+        validator: (num: number) => num >= 0 && num <= 5,
     },
     /**
      * Disable changing the rating
@@ -19,15 +19,15 @@ const props = defineProps({
         default: true,
     },
     /**
-     * Icon Width
+     * Icon width
      */
     width: {
         type: String,
         default: '20px',
         required: false,
     },
     /**
-     * Icon Height
+     * Icon height
      */
     height: {
         type: String,
@@ -60,28 +60,44 @@ const update = (value: number) => {
 </script>
 
 <template>
+    <div
+        v-if="readOnly"
+        :aria-label="`${roundedRating} out of 5 stars`"
+        class="bg-transparent rounded-0 text-orange rating">
+        <div
+            v-for="i in 5"
+            :key="i"
+            aria-hidden="true">
+            <span v-if="i <= roundedRating">
+                <icon-star-full
+                    :width="width"
+                    :height="height" />
+            </span>
+            <span v-else-if="i - 0.5 === roundedRating">
+                <icon-star-half
+                    :width="width"
+                    :height="height" />
+            </span>
+            <span v-else>
+                <icon-star-empty
+                    :width="width"
+                    :height="height" />
+            </span>
+        </div>
+    </div>
     <rating
+        v-else
         :model-value="roundedRating"
         :cancel="false"
         :readonly="readOnly"
         v-bind="$attrs"
-        data-testid="rating-test"
         :pt="{
-            root: (options) => ({
-                class: [
-                    'bg-transparent rounded-0 text-orange rating',
-                    {
-                        reactive: !options.props.readonly,
-                    },
-                ],
-            }),
-            item: (options) => ({
-                class: [
-                    {
-                        reactiveStar: !options.props.readonly,
-                    },
-                ],
-            }),
+            root: {
+                class: 'bg-transparent rounded-0 text-orange rating reactive',
+            },
+            item: {
+                class: 'reactiveStar',
+            },
         }"
         @update:model-value="update">
         <template #officon>
@@ -113,7 +129,10 @@ const update = (value: number) => {
 .reactive {
     cursor: pointer !important;
 }
-.reactiveStar:hover {
+
+// TODO: Star should go back to normal size after click
+.reactiveStar:hover,
+.reactiveStar[data-p-focused='true'] {
     transform: scale(1.5);
 }
 </style>
diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
@@ -1,9 +1,18 @@
 <script setup lang="ts">
+// Event will trigger twice when using keyboard to focus due to PrimeVue bug
 const changeEvent = ($event) => {
     // eslint-disable-next-line no-alert
     alert($event.value);
 };
 
+const propTableRows = [
+    ['rating', 'Number', '0', 'Starting rating value 0-5, with .5 values available in read only mode'],
+    ['rounded', 'Boolean', 'true', 'Round rating to nearest .5'],
+    ['read-only', 'Boolean', 'true', 'Disable changing the rating'],
+    ['width', 'String', '20px', 'Icon width'],
+    ['height', 'String', '20px', 'Icon height'],
+];
+
 const { $prism } = useNuxtApp();
 const compCode = ref('');
 const docCode = ref('');
@@ -54,6 +63,11 @@ onMounted(async () => {
             </div>
         </div>
 
+        <div class="my-500">
+            <h2>EsRating props</h2>
+            <ds-prop-table :rows="propTableRows" />
+        </div>
+
         <ds-doc-source
             :comp-code="compCode"
             comp-source="es-ds-components/components/es-rating.vue"