playbook_ui 14.3.0.pre.rc.3 → 14.3.0.pre.rc.5

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,7 +1,7 @@
 
 <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
-  <%= pb_rails("card", props: { margin_top: "md" }) do %>
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
    <div id="content-preview" class="trix-content">
    </div>
   <% end %>
@@ -11,15 +11,25 @@
 <% end %>
 
 <script>
-  // Button event handler
-  const button = document.getElementById('preview-button');
-  button.addEventListener('click', function() {
-    const content = document.getElementById('content-preview-editor');
-    const previewArea = document.getElementById('content-preview');
-    const cardDiv = document.getElementById('card-obfuscation');
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleButtonClick() {
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
-    previewArea.innerHTML = content.value;
-    cardDiv.classList.add('mt_md');
-    cardDiv.style.display = 'block';
-  });
+      const editorElement = editorContainer?.querySelector('trix-editor')
+      const inputId = editorElement?.getAttribute('input')
+      const inputElement = inputId && document.getElementById(inputId)
+      
+      const editorContent = inputElement?.value || '' 
+      const previewArea = document.getElementById('content-preview')
+      const cardDiv = document.getElementById('card-obfuscation')
+
+      if (previewArea && cardDiv) {
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      }
+    }
+
+    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
+  })
 </script>

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       > select:first-child {
         border-color: $error;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
+      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -(calc($pb_selectable_card_indicator_size/2));
-      right: -(calc($pb_selectable_card_indicator_size/2));
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
     }
   }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -101,7 +101,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       input,
       .text_input {

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -60,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: calc($space_xs / 2);
+      margin-top: $space_xs / 2;
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: calc($space_xs/2);
-      margin-right: calc($space_xs/2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: calc($space_xs/2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: calc($space_xs/2);
+      margin-right: $space_xs/2;
     }
   }
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -4,9 +4,9 @@
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: calc($space_xs/2);
+$icon_margin: $space_xs/2;
 $icon_height: 28px;
-$height_from_top: calc($icon_height/2) - calc($connector_width/2);
+$height_from_top: $icon_height/2 - $connector_width/2;
 
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb

@@ -8,7 +8,7 @@
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
+  timestamp: DateTime.now - 3.months,
   variant: "elapsed",
   show_user: false
 }) %>
@@ -16,7 +16,7 @@
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now,
+  timestamp: DateTime.now - 320.days,
   variant: "elapsed",
   show_user: false,
   hide_updated: true

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

@@ -27,6 +27,18 @@ module Playbook
                      values: %w[default elapsed updated],
                      default: "default"
 
+      # Variables to use with pb_time_ago method
+      SECS_FORTY_FIVE = 45
+      SECS_PER_MIN  = 60
+      SECS_PER_HOUR = 60 * SECS_PER_MIN # 3,600 seconds
+      SECS_PER_DAY  = 24 * SECS_PER_HOUR # 86,400 seconds
+      SECS_PER_WEEK = 7 * SECS_PER_DAY # 604,800 seconds
+      SECS_PER_26 = 26 * SECS_PER_DAY # 26 days = 2,246,400 seconds
+      SECS_PER_MONTH = 4 * SECS_PER_WEEK # 2,419,200 seconds
+      SECS_PER_YEAR = 12 * SECS_PER_MONTH # 29,030,400 seconds
+      SECS_PER_320 = 320 * SECS_PER_DAY # 320 days = 27,648,000 seconds
+      SECS_PER_CENT = 100 * SECS_PER_YEAR # 3,153,600,000 seconds
+
       def classname
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
@@ -73,12 +85,44 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
+        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
+        datetime_string[1] = hide_updated ? datetime_string[1].upcase : datetime_string[1]
         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_FORTY_FIVE)
+          "a few seconds"
+        when (SECS_FORTY_FIVE...SECS_PER_MIN)
+          "a minute"
+        when (SECS_PER_MIN...SECS_PER_HOUR)
+          time = time_ago / SECS_PER_MIN
+          time == 1 ? "a minute" : "#{time_ago / SECS_PER_MIN} minutes"
+        when (SECS_PER_HOUR...SECS_PER_DAY)
+          time = time_ago / SECS_PER_HOUR
+          time == 1 ? "an hour" : "#{time_ago / SECS_PER_HOUR} hours"
+        when (SECS_PER_DAY...SECS_PER_WEEK)
+          time = time_ago / SECS_PER_DAY
+          time == 1 ? "a day" : "#{time_ago / SECS_PER_DAY} days"
+        when (SECS_PER_WEEK...SECS_PER_26)
+          time = time_ago / SECS_PER_WEEK
+          time == 1 ? "a week" : "#{time_ago / SECS_PER_WEEK} weeks"
+        when (SECS_PER_26...SECS_PER_MONTH)
+          "a month"
+        when (SECS_PER_MONTH...SECS_PER_320)
+          time = time_ago / SECS_PER_MONTH
+          time == 1 ? "a month" : "#{time_ago / SECS_PER_MONTH} months"
+        when (SECS_PER_320...SECS_PER_YEAR)
+          "a year"
+        when (SECS_PER_YEAR...SECS_PER_CENT)
+          time = time_ago / SECS_PER_YEAR
+          time == 1 ? "a year" : "#{time_ago / SECS_PER_YEAR} years"
+        end
+      end
+
       def datetime_or_text
         timestamp ? format_datetime_string : text
       end

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: calc($width / 2);
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: calc($width / 2) - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -68,7 +68,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: calc($width / 2) + 2px;
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }