rating component sample

blocks/form/components/rating.js

@@ -0,0 +1,33 @@
+export default function decorate(fieldDiv, field, htmlForm) {
+  // extract a input type number from fieldDiv
+  const input = fieldDiv.querySelector('input[type="number"]');
+  // convert the input to a rating component
+  // the component will have max value of max attribute set in the input element
+  // and the value of the input element will be set to the value of the component
+  const rating = document.createElement('div');
+  rating.classList.add('rating');
+  for (let i = 1; i <= input.getAttribute('max'); i += 1) {
+    const star = document.createElement('span');
+    // add class to the star element
+    star.classList.add('star');
+    star.textContent = '★';
+    star.addEventListener('click', () => {
+      input.value = i;
+      const event = new Event('change', { bubbles: true });
+      input.dispatchEvent(event);
+      // add selected class to the star elements till index i
+      for (let j = 0; j < i; j += 1) {
+        rating.children[j].classList.add('selected');
+      }
+      // remove selected class from star elements after index i
+      for (let j = i; j < rating.children.length; j += 1) {
+        rating.children[j].classList.remove('selected');
+      }
+    });
+    rating.appendChild(star);
+  }
+  fieldDiv.appendChild(rating);
+  // hide the input element
+  input.style.display = 'none';
+  return fieldDiv;
+}

blocks/form/form.css

@@ -545,4 +545,21 @@ main .form .form-image-wrapper  img {
 main form .wizard > .current-wizard-step.panel-wrapper:first-of-type ~ .wizard-button-wrapper > .wizard-button-prev,
 main form .wizard > .current-wizard-step.panel-wrapper:last-of-type ~ .wizard-button-wrapper > .wizard-button-next {
     display: none;
-}
+}
+
+/** rating.css **/
+main .form .rating {
+    display: flex;
+    gap: 5px;
+    margin: 0;
+}
+
+/** add cursor pointer to the star in rating component */
+main .form .rating .star {
+    cursor: pointer;
+}
+
+/** add yellow color to the start with selected class in rating component */
+main .form .rating .star.selected {
+    color: #f8d053;
+}

blocks/form/mappings.js

@@ -3,7 +3,7 @@
  *
  * */
 export default async function componentDecorator(fd) {
-  const { ':type': type = '', fieldType } = fd;
+  const { ':type': type = '', fieldType, name } = fd;
   if (fieldType === 'file-input') {
     const module = await import('./components/file.js');
     return module.default;
@@ -12,5 +12,10 @@ export default async function componentDecorator(fd) {
     const module = await import('./components/wizard.js');
     return module.default;
   }
+  // if field type is rating return rating js copmonent
+  if (name === 'rating') {
+    const module = await import('./components/rating.js');
+    return module.default;
+  }
   return null;
 }