playbook_ui 13.0.0 → 13.2.0.pre.alpha.PLAY986dateTimeRounding1150

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68b8019423c98f0b17cb991be96ff5eaf31f5ec127a81e1079f1d30d89bf2f8a
-  data.tar.gz: 266d1ba7ec9735ab40b632b590b448742429e780ef5635f92bd9e74b0e0fc6df
+  metadata.gz: 29507bd994a736c71238be60bea9b2b269b5f1a40ebabac51280e93f20d493b2
+  data.tar.gz: fb81b0db3f2615422f9d827859951373dd50d34b5a94aa06f9bc42324d7942a5
 SHA512:
-  metadata.gz: b2a9a36c332c8f6cf8ced66861d01e6bccaf17d6ace709c3c1e3a180f89a145d8d4d98beecf8ba52cbdde6d41129238df73b0c364e9997ae4f225587a6d85c11
-  data.tar.gz: 4f42ad5ca624705aa6139ebf6b698ede8350fe94dd30fafbce662a433c6a898fd16ee47d22710ca648999c4bbd4ef9457458acc44c9c35f0d22823e84276d2bd
+  metadata.gz: ed2c60ef1307bb8c3ba61cb9d8983a219c6e82568e86ec9e8608ae7efe057094f6307da32f77c4ad5a08d11f9fd5ee5f2b568c1502d3426d2a82416795c846ff
+  data.tar.gz: e96648e381e82365ec5b439cdc3166f08c6c33e7cfc71d42a79415f46a5e3c1f696ccda273952633e858c7802a6746ff45a009ac164e5211ab8af18f7646805d

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -104,7 +104,7 @@ const CollapsibleMain = ({
   }
 
   return (
-    <div className={classnames(mainCSS, className, mainSpacing)}>
+    <div className={classnames(mainCSS, mainSpacing, className)}>
       <div onClick={handleCollapsibleClick}>
         <Flex
             spacing="between"

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -3,4 +3,11 @@
     border: 1px #ccc dashed;
     text-align: center;
   }
+  ::file-selector-button {
+    visibility: hidden;
+    padding: 0;
+    border: none;
+    width: 0;
+  }
 }
+

data/app/pb_kits/playbook/pb_file_upload/docs/_description.md

@@ -1,7 +0,0 @@
-This kit provides a drag and drop interface for file uploads. Currently, the kit leverages [react-dropzone](https://github.com/react-dropzone/react-dropzone).
-
-### Props
-
-`accept: [String]` Use this prop to set the list of valid file types
-`customMessage: [String]` Use this prop to set a custom message, replacing the default text
-`onFilesAccepted: Function` The callback function, providing the list of dropped files

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("file_upload", props: {id: "import_file"}) do %>
+  <input
+    id="import_file"
+    type="file"
+    name="import_file"
+  />
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom.md

@@ -0,0 +1 @@
+The `id` for the File Upload and the existing input you are choosing to wrap with our Kit with must match each other. This will ensure that the click on the button a.k.a, the underlying label's `for`, triggers the File Upload.

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("file_upload") %>
+
+ 

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml

@@ -1,6 +1,8 @@
 examples:
 
   rails:
+  - file_upload_default: File Upload
+  - file_upload_custom: Custom
 
   react:
   - file_upload_default: Default List of files to upload

data/app/pb_kits/playbook/pb_file_upload/docs/test.html

@@ -0,0 +1,25 @@
+
+  <div class="pb_file_upload_kit" id="import_file">
+    <div class="pb_form_group_kit cursor_pointer">
+      <label for="import_file" class="pb_button_kit_secondary_inline_enabled">Upload File</label>
+      <div class="pb_text_input_kit">
+        <div class=" text_input_wrapper">
+          <input placeholder="custom-placeholder" id="import_file" type="file">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h1>not custom</h1>
+
+  <div class="pb_file_upload_kit" id="test">
+    <div class="pb_form_group_kit cursor_pointer">
+      <label for="upload-test" class="pb_button_kit_secondary_inline_enabled">Upload File</label>
+      <div class="pb_text_input_kit">
+        <div class=" text_input_wrapper">
+          <input class="text_input cursor_pointer" id="upload-test" type="file" classname="cursor_pointer">
+        </div>
+      </div>
+    </div>
+  </div>
+ 

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -0,0 +1,17 @@
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
+        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
+        <%= pb_rails("text_input", props: {
+          type: "file",
+          input_options: {
+            id: "upload-#{object.id}", 
+            classname: "cursor_pointer",
+          }.merge(object.input_options)
+        }) %>
+      <% end %>
+    </label>
+<% end %>

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbFileUpload
+    class FileUpload < Playbook::KitBase
+      prop :accept, type: Playbook::Props::String,
+                    default: ""
+
+      prop :files, type: Playbook::Props::Array,
+                   default: []
+
+      prop :label, type: Playbook::Props::String,
+                   default: "Upload File"
+
+      prop :placeholder, type: Playbook::Props::String,
+                         default: "No file"
+
+      prop :full_width, type: Playbook::Props::Boolean,
+                        default: false
+
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
+
+      def classname
+        file_upload_class = generate_classname("pb_file_upload_kit")
+        file_upload_class + full_width_class
+      end
+
+      def full_width_class
+        full_width ? " full_width" : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_kit/dateTime.ts

@@ -17,92 +17,97 @@ const formatDate = (newDate: Date | string) => {
 
 export const toMinute = (newDate: Date | string, timeZone?: string): string => {
   const date = formatDate(newDate)
+
   if (timeZone) {
-    return date.toLocaleTimeString(undefined, { timeZone, hour: "2-digit", minute: "2-digit" }).slice(3, 5);
+    return date.toLocaleTimeString("en-US", { timeZone, hour: "2-digit", minute: "2-digit" }).slice(3, 5);
   } else {
-    return date.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }).slice(3, 5);
+    return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }).slice(3, 5);
   }
 }
 
 export const toHour = (newDate: Date | string, timeZone?: string): string => {
   const date = formatDate(newDate)
+
   if (timeZone) {
-    return date.toLocaleTimeString(undefined, { timeZone, hour: "numeric" }).split(' ')[0];
+    return date.toLocaleTimeString("en-US", { timeZone, hour: "numeric" }).split(' ')[0];
   } else {
-    return date.toLocaleTimeString(undefined, { hour: "numeric" }).split(' ')[0];
+    return date.toLocaleTimeString("en-US", { hour: "numeric" }).split(' ')[0];
   }
 }
 
 export const toDay = (newDate: Date | string, timeZone?: string): number => {
-    if (timeZone) {
-      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-      return date.getDate()
-    } else {
-      const date = formatDate(newDate)
-      return date.getDate()
-    }
+  if (timeZone) {
+    const date = new Date(formatDate(newDate).toLocaleString("en-US", { timeZone }));
+    return date.getDate()
+  } else {
+    const date = formatDate(newDate)
+    return date.getDate()
+  }
 }
 
 export const toDayAbbr = (newDate: Date | string): string => {
   const date = formatDate(newDate)
-  return ABBR_DAYS[date.getUTCDay()]
+  return ABBR_DAYS[date.getDay()]
 }
 
 export const toWeekday = (newDate: Date | string): string => {
-    const date = formatDate(newDate)
-    return days[date.getUTCDay()]
+  const date = formatDate(newDate)
+  return days[date.getDay()]
 }
 
 export const toMonth = (newDate: Date | string, timeZone?: string): string => {
-    if (timeZone) {
-      const date = new Date(formatDate(newDate).toLocaleString(undefined, { timeZone }));
-      return months[date.getUTCMonth()]
-    } else {
-      const date = formatDate(newDate)
-      return months[date.getUTCMonth()]
-    }
+  if (timeZone) {
+    const date = new Date(formatDate(newDate).toLocaleString("en-US", { timeZone }));
+    return months[date.getMonth()]
+  } else {
+    const date = formatDate(newDate)
+    return months[date.getMonth()]
+  }
 }
 
 export const toMonthNum = (newDate: Date | string): number => {
   const date = formatDate(newDate)
-  return date.getUTCMonth() +1
+  return date.getMonth() + 1
 }
 
 export const toYear = (newDate: Date | string, timeZone?: string): number => {
-    if (timeZone) {
-      const date = new Date(newDate.toLocaleString(undefined, { timeZone }));
-      return date.getUTCFullYear()
-    } else {
-      const date = new Date(newDate)
-      return date.getUTCFullYear()
-    }
+  if (timeZone) {
+    const date = new Date(formatDate(newDate).toLocaleString("en-US", { timeZone }));
+    return date.getFullYear()
+  } else {
+    const date = formatDate(newDate)
+    return date.getFullYear()
+  }
 }
 
 export const toTime = (newDate: Date | string, timeZone?: string): string => {
   const date = formatDate(newDate)
+
   if (timeZone) {
-    return date.toLocaleTimeString(undefined, { timeZone, timeStyle: "short" }).split(' ')[0];
+    return date.toLocaleTimeString("en-US", { timeZone, timeStyle: "short" }).split(' ')[0];
   } else {
-    return date.toLocaleTimeString(undefined, { timeStyle: "short" }).split(' ')[0];
+    return date.toLocaleTimeString("en-US", { timeStyle: "short" }).split(' ')[0];
   }
 }
 
 export const toMeridiem = (newDate: Date | string, timeZone?: string): string => {
-    const date = formatDate(newDate)
-    if (timeZone) {
-      return date.toLocaleString(undefined, { timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
-    } else {
-      return date.toLocaleString(undefined, { hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
-    }
+  const date = formatDate(newDate)
+
+  if (timeZone) {
+    return date.toLocaleString("en-US", { timeZone, hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+  } else {
+    return date.toLocaleString("en-US", { hour12: true }).slice(-2).charAt(0).toLocaleLowerCase();
+  }
 }
 
 export const toTimeZone = (newDate: Date | string, timeZone?: string): string => {
-    const date = formatDate(newDate)
-    if (timeZone) {
-      return date.toLocaleString(undefined, { timeZone, timeZoneName: "short" }).split(' ')[3];
-    } else {
-      return date.toLocaleString(undefined, { timeZoneName: "short" }).split(' ')[3];
-    }
+  const date = formatDate(newDate)
+
+  if (timeZone) {
+    return date.toLocaleString("en-US", { timeZone, timeZoneName: "short" }).split(' ')[3];
+  } else {
+    return date.toLocaleString("en-US", { timeZoneName: "short" }).split(' ')[3];
+  }
 }
 
 export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): string => {
@@ -111,33 +116,66 @@ export const toTimeWithMeridiem = (newDate: Date | string, timeZone: string): st
 }
 
 export const toIso = (newDate: Date | string): string => {
-    const date = formatDate(newDate)
-    return date.toISOString()
+  const date = formatDate(newDate)
+  return date.toISOString()
 }
 
 export const fromNow = (newDate: Date | string): string => {
-  const startDate = formatDate(newDate).getTime()
-  const endDate = new Date().getTime()
+  const today = new Date()
+  const formattedDate = formatDate(newDate)
+
+  const startDate = formattedDate.getTime()
+  const endDate = today.getTime()
   const elapsedTime = endDate - startDate
-  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
-
-  const elapsedTimeData = [
-    { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
-    { min: 45000, max: 89999, value: "a minute ago" }, // 45-89 seconds
-    { min: 90000, max: 2649999, value: `${Math.round(elapsedTime / 60000)} minutes ago`}, //  90s-44 minutes
-    { min: 2650000, max: 7299999, value: "an hour ago" }, // 45-120 minutes
-    { min: 7300000, max: 75699999, value: `${Math.round(elapsedTime / 3600000)} hours ago`}, // 2-21 hours
-    { min: 75700000, max: 172899999, value: "a day ago" }, // 22-48 hours
-    { min: 172900000, max: 2169999999, value: `${Math.round(elapsedTime / 86400000)} days ago`}, // 2-25 days
-    { min: 2170000000, max: 5184999999, value: "a month ago"}, // 26-60 days
-    { min: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / 30.44 * 24 * 60 * 60 * 1000)} months ago`}, // 60-319 days
-    { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
-  ];
-
-  for (const timeDate of elapsedTimeData) {
-    if (elapsedTime >= timeDate.min && elapsedTime <= timeDate.max) {
-      elapsedTimeString = timeDate.value;
-      break;
+
+  // For years/months, don't use elapsedTime due to rounding
+  const differenceInYears = today.getFullYear() - formattedDate.getFullYear()
+  const differenceInMonths = () => {
+    let months = differenceInYears * 12
+    months -= formattedDate.getMonth()
+    months += today.getMonth()
+    return months
+  }
+
+  const FOURTY_FIVE_SECONDS = 45000
+  const NINETY_SECONDS = 90000
+
+  const FOURTY_FIVE_MINUTES = 2670000
+  const NINETY_MINUTES = 5400000
+
+  const TWENTY_TWO_HOURS = 77400000
+  const THIRTY_SIX_HOURS = 129600000
+
+  const TWENTY_SIX_DAYS = 2203200000
+  const FOURTY_FIVE_DAYS = 3888000000
+
+  const TEN_AND_A_HALF_MONTHS = 27560000000
+
+  const MILLISECONDS_IN_A_MINUTE = 60000
+  const MILLISECONDS_IN_A_HOUR = 3600000
+  const MILLISECONDS_IN_A_DAY = 86400000
+
+  let elapsedTimeString = differenceInYears === 1 ? `${differenceInYears} year ago` : `${differenceInYears} years ago` // 320 days to 1+ year: "x year(s) ago"
+
+  // Inspiration: https://momentjs.com/docs/#/displaying/fromnow/
+  const intervals = [
+    { min: 0, max: FOURTY_FIVE_SECONDS, value: "a few seconds ago" }, // 0-44.99 seconds
+    { min: FOURTY_FIVE_SECONDS, max: NINETY_SECONDS, value: "a minute ago" }, // 45-89.99 seconds
+    { min: NINETY_SECONDS, max: FOURTY_FIVE_MINUTES, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MINUTE)} minutes ago` }, // 90s-44.49 minutes: "2 minutes ago ... 44 minutes ago"
+    { min: FOURTY_FIVE_MINUTES, max: NINETY_MINUTES, value: "an hour ago" }, // 44.5-89.99 minutes
+    { min: NINETY_MINUTES, max: TWENTY_TWO_HOURS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_HOUR)} hours ago` }, // 90m-21.49 hours: "2 hours ago ... 21 hours ago"
+    { min: TWENTY_TWO_HOURS, max: THIRTY_SIX_HOURS, value: "a day ago" }, // 21.5-35.99 hours
+    { min: THIRTY_SIX_HOURS, max: TWENTY_SIX_DAYS, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_DAY)} days ago` }, // 36h-25.49 days: "2 days ago ... 25 days ago"
+    { min: TWENTY_SIX_DAYS, max: FOURTY_FIVE_DAYS, value: "a month ago" }, // 25.5-44.99 days
+    { min: FOURTY_FIVE_DAYS, max: TEN_AND_A_HALF_MONTHS, value: `${differenceInMonths()} months ago` }, // 45 days to 319 days: "2 months ago ... 10 months ago"
+  ]
+
+  for (const interval of intervals) {
+    const { min, max, value } = interval
+
+    if (elapsedTime >= min && elapsedTime < max) {
+      elapsedTimeString = value
+      break
     }
   }
 
@@ -149,7 +187,7 @@ export const toCustomFormat = (newDate: Date | string, format = 'month_day'): st
   if (format == "month_day") {
     return `${toMonthNum(date)}/${toDay(date)}`
   } else {
-    return `${date.toLocaleString(undefined, { month: "short" })} ${toDay(date)}`
+    return `${date.toLocaleString("en-US", { month: "short" })} ${toDay(date)}`
   }
 }
 

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss

@@ -1,22 +1,24 @@
 @mixin bold {
   @include subtle;
 
-  [class*=pb_nav_list_kit_item] {
-    &[class*=_active] [class*=_link] {
-      background-color: $primary;
-      color: $white;
-      box-shadow: $shadow_deep;
-      @media (hover:hover) {
-        &:hover {
-          background-color: darken($primary, 4%);
-          [class*=_text],[class*=_icon] {
-            color: $white;
+  [class*=pb_nav_list_kit_item][class*=pb_nav_list_item]{
+    &[class*=_link] {
+      &[class*=_active] {
+        background-color: $primary;
+        color: $white;
+        box-shadow: $shadow_deep;
+        @media (hover:hover) {
+          &:hover {
+            background-color: darken($primary, 4%);
+            [class*=_text],[class*=_icon] {
+              color: $white;
+            }
           }
         }
+        [class*=_text],[class*=_icon] {
+          font-weight: $bolder;
+        }
       }
-      [class*=_text],[class*=_icon] {
-        font-weight: $bolder;
-      }
-    }
+   }
   }
 }