playbook_ui 14.0.0.pre.alpha.PA1477timestampkit3509 → 14.0.0.pre.alpha.PBNTR415starratingform3492

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 64bb0eb6e10b03c6da52750083b6ed0e6570f7f5f2c8508d3a4092d62b44fd06
-  data.tar.gz: 72460b9e7e460e1b19e538677c53da1f0fa2351a04219fd9ffc482fdfdc54a6b
+  metadata.gz: 4ea9088edfef4d9e59db2c6597b4f476e37bd6edefb8a76eea7f76d1818910c7
+  data.tar.gz: e101c98a4cb0e480619b4b5f55dbcf2349a32b26d9028f4e80fd701d875887ef
 SHA512:
-  metadata.gz: 6b29c1e6a6c2c73774d2d2d29fd610a21d40c2981f2247bd7e285a729dec087a8244d6a1b436c4e572d6fe0789c5fb681079c4188bf8fbf7d7d3951b5ffeb11e
-  data.tar.gz: 3cd778aabe79ab0c3bc2b5e53d7d4cb5787207a96cac99a929a64af88d51a5ecd1c4d8c336e62aaa81210f92072002fa4fee8ef4ef15dee2917b20ac17cc5d5f
+  metadata.gz: 0eb4fc44d37ace56aef7b511255e2a62013e60c32213bd096a0b67a5a28f49aa6e7c484d631571914ee97fd3ae78a985cbae8f648b1ab8398816297a7787d4b3
+  data.tar.gz: a2755e31f02392e6116f561337663769a5f358e0b576994197f0aa63ece93faf7398fe5d865bb44d99c5cc745ca368eee7debfe0795526718052a6b2c0565d68

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -35,6 +35,7 @@
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_star_rating/index.js

@@ -1,119 +1,156 @@
-import PbEnhancedElement from "../pb_enhanced_element";
+import PbEnhancedElement from "../pb_enhanced_element"
 
-const STAR_RATING_SELECTOR = "[data-pb-star-rating]";
-const STAR_RATING_INPUT_ID = "star-rating-input";
+const STAR_RATING_WRAPPER_SELECTOR = "[data-pb-star-rating-wrapper]"
+const STAR_RATING_SELECTOR = "[data-pb-star-rating]"
+const STAR_RATING_INPUT_DATA_SELECTOR = "[data-pb-star-rating-input]"
 
 export default class PbStarRating extends PbEnhancedElement {
   static get selector() {
-    return STAR_RATING_SELECTOR;
+    return STAR_RATING_WRAPPER_SELECTOR
   }
 
   connect() {
-    this.element.addEventListener("click", (event) => {
-      const clickedStarId = event.currentTarget.id;
-      this.updateStarColors(clickedStarId);
-      this.updateHiddenInputValue(clickedStarId);
-    });
+    this.addEventListeners()
+    this.handleFormReset()
+  }
+
+  addEventListeners() {
+    this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
+      star.addEventListener("click", (event) => {
+        const clickedStarId = event.currentTarget.id
+        this.updateStarColors(clickedStarId)
+        this.updateHiddenInputValue(clickedStarId)
+        this.clearFormValidation()
+      })
 
-    document.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
       star.addEventListener("mouseenter", (event) => {
         const hoveredStarId = event.currentTarget.id
-        this.updateStarHoverColors(hoveredStarId);
+        this.updateStarHoverColors(hoveredStarId)
       })
 
       star.addEventListener("mouseleave", () => {
-        this.removeStarHoverColors();
+        this.removeStarHoverColors()
       })
 
       star.addEventListener("keydown", (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          this.handleStarClick(star.id);
+          event.preventDefault()
+          this.handleStarClick(star.id)
         }
       })
     })
   }
 
   handleStarClick(starId) {
-    this.updateStarColors(starId);
-    this.updateHiddenInputValue(starId);
+    this.updateStarColors(starId)
+    this.updateHiddenInputValue(starId)
   }
 
   updateStarColors(clickedStarId) {
-    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
 
     allStars.forEach(star => {
-      const starId = star.id;
-      const icon = star.querySelector(".interactive-star-icon");
+      const starId = star.id
+      const icon = star.querySelector(".interactive-star-icon")
 
       if (icon) {
         if (starId <= clickedStarId) {
           if (star.classList.contains("yellow_star")) {
-            icon.classList.add("yellow-star-selected");
+            icon.classList.add("yellow-star-selected")
           } else if (star.classList.contains("primary_star_light")) {
-            icon.classList.add("primary-star-selected");
+            icon.classList.add("primary-star-selected")
           } else if (star.classList.contains("primary_star_dark")) {
-            icon.classList.add("primary-star-selected");
+            icon.classList.add("primary-star-selected")
           } else if (star.classList.contains("subtle_star_light")) {
-            icon.classList.add("subtle-star-selected");
+            icon.classList.add("subtle-star-selected")
           } else if (star.classList.contains("subtle_star_dark")) {
-            icon.classList.add("subtle-star-selected");
+            icon.classList.add("subtle-star-selected")
           } else {
-            icon.classList.add("yellow-star-selected");
+            icon.classList.add("yellow-star-selected")
           }
         } else {
-          icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected");
+          icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
         }
-        icon.classList.remove("star-hovered");
+        icon.classList.remove("star-hovered")
       }
-    });
+    })
   }
 
   updateHiddenInputValue(value) {
-    const hiddenInput = document.getElementById(STAR_RATING_INPUT_ID);
+    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
     if (hiddenInput) {
-      hiddenInput.value = value;
+      hiddenInput.value = value
     }
   }
 
   updateStarHoverColors(hoveredStarId) {
-    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
   
     allStars.forEach(star => {
-      const starId = star.id;
-      const icon = star.querySelector(".interactive-star-icon");
+      const starId = star.id
+      const icon = star.querySelector(".interactive-star-icon")
   
       if (icon) {
         if (starId <= hoveredStarId) {
           if (!icon.classList.contains("yellow-star-selected") && 
               !icon.classList.contains("primary-star-selected") && 
               !icon.classList.contains("subtle-star-selected")) {
-            icon.classList.add("star-hovered");
+            icon.classList.add("star-hovered")
           }
         } else {
-          icon.classList.remove("star-hovered");
+          icon.classList.remove("star-hovered")
         }
       }
-    });
+    })
   }
 
 
   removeStarHoverColors() {
-    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
   
     allStars.forEach(star => {
-      const icon = star.querySelector(".interactive-star-icon");
+      const icon = star.querySelector(".interactive-star-icon")
       if (icon) {
         if (!icon.classList.contains("yellow-star-selected") &&
             !icon.classList.contains("primary-star-selected") &&
             !icon.classList.contains("subtle-star-selected")) {
-          icon.classList.remove("star-hovered");
+          icon.classList.remove("star-hovered")
         }
       }
-    });
+    })
   }
 
   isStarSelected() {
-    return document.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0;
+    return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0
+  }
+
+  handleFormReset() {
+    const form = this.element.closest("form")
+    if (form) {
+      form.addEventListener("reset", () => {
+        this.updateHiddenInputValue("")
+        this.resetStarRatingValues()
+      })
+    }
+  }
+
+  resetStarRatingValues() {
+    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    allStars.forEach(star => {
+      const icon = star.querySelector(".interactive-star-icon")
+      if (icon) {
+        icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
+      }
+    })
+  }
+
+  clearFormValidation() {
+    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
+    if (hiddenInput.checkValidity()) {
+      const errorLabelElement = this.element.querySelector(".pb_body_kit_negative")
+      if (errorLabelElement) {
+        errorLabelElement.remove()
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -39,11 +39,13 @@
       <% end %>
   
     <% else %>
-      <%= pb_rails("flex", props: { orientation: "column" }) do %>
+      <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
         <% if object.label.present? %>
           <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
         <% end %>
-        <input type="hidden" id="star-rating-input" value="" name="<%= object.name %>"/>
+
+        <%= hidden_input_tag %>
+
         <%= pb_rails("flex", props: { orientation: "row" }) do %>
           <% object.denominator.times do |index| %>
             <div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -30,6 +30,10 @@ module Playbook
                      default: "display"
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :input_options, type: Playbook::Props::HashProp,
+                           default: {}
 
       def one_decimal_rating
         rating.to_f.round(1)
@@ -106,6 +110,19 @@ module Playbook
       def classname
         generate_classname("pb_star_rating_kit")
       end
+
+      def hidden_input_tag
+        tag(:input, all_input_options)
+      end
+
+      def all_input_options
+        input_options.merge(
+          data: { "pb-star-rating-input": true },
+          name: name,
+          required: required,
+          style: "display: none"
+        )
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -27,15 +27,6 @@ module Playbook
                      values: %w[default elapsed updated],
                      default: "default"
 
-      # Variables to use with pb_time_ago method
-      SECS_PER_MIN  = 60
-      SECS_PER_HOUR = 60 * SECS_PER_MIN
-      SECS_PER_DAY  = 24 * SECS_PER_HOUR
-      SECS_PER_WEEK = 7 * SECS_PER_DAY
-      SECS_PER_MONTH = 4 * SECS_PER_WEEK
-      SECS_PER_YEAR = 12 * SECS_PER_MONTH
-      SECS_PER_CENT = 100 * SECS_PER_YEAR
-
       def classname
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
@@ -82,38 +73,12 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
+        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
         updated_string = hide_updated ? "" : "Last updated"
 
         "#{updated_string}#{user_string}#{datetime_string}"
       end
 
-      def pb_time_ago(value)
-        time_ago = DateTime.now.to_i - value.to_i
-        case time_ago
-        when (0...SECS_PER_MIN)
-          time_ago == 1 ? "1 second" : "#{time_ago} seconds"
-        when (SECS_PER_MIN...SECS_PER_HOUR)
-          time = time_ago / SECS_PER_MIN
-          time == 1 ? "1 minute" : "#{time_ago / SECS_PER_MIN} minutes"
-        when (SECS_PER_HOUR...SECS_PER_DAY)
-          time = time_ago / SECS_PER_HOUR
-          time == 1 ? "1 hour" : "#{time_ago / SECS_PER_HOUR} hours"
-        when (SECS_PER_DAY...SECS_PER_WEEK)
-          time = time_ago / SECS_PER_DAY
-          time == 1 ? "1 day" : "#{time_ago / SECS_PER_DAY} days"
-        when (SECS_PER_WEEK...SECS_PER_MONTH)
-          time = time_ago / SECS_PER_WEEK
-          time == 1 ? "1 week" : "#{time_ago / SECS_PER_WEEK} weeks"
-        when (SECS_PER_MONTH...SECS_PER_YEAR)
-          time = time_ago / SECS_PER_MONTH
-          time == 1 ? "1 month" : "#{time_ago / SECS_PER_MONTH} months"
-        when (SECS_PER_YEAR...SECS_PER_CENT)
-          time = time_ago / SECS_PER_YEAR
-          time == 1 ? "1 year" : "#{time_ago / SECS_PER_YEAR} years"
-        end
-      end
-
       def datetime_or_text
         timestamp ? format_datetime_string : text
       end