playbook_ui 13.0.0 → 13.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68b8019423c98f0b17cb991be96ff5eaf31f5ec127a81e1079f1d30d89bf2f8a
-  data.tar.gz: 266d1ba7ec9735ab40b632b590b448742429e780ef5635f92bd9e74b0e0fc6df
+  metadata.gz: ebfbb350f5457ca825d0c7991f1e2fff2dd63e1a925523715b154af8f9b3b233
+  data.tar.gz: 96c352b2239aa01b2b30446b23520322494ca2d72cd62c456b6835f9f1a6656e
 SHA512:
-  metadata.gz: b2a9a36c332c8f6cf8ced66861d01e6bccaf17d6ace709c3c1e3a180f89a145d8d4d98beecf8ba52cbdde6d41129238df73b0c364e9997ae4f225587a6d85c11
-  data.tar.gz: 4f42ad5ca624705aa6139ebf6b698ede8350fe94dd30fafbce662a433c6a898fd16ee47d22710ca648999c4bbd4ef9457458acc44c9c35f0d22823e84276d2bd
+  metadata.gz: 681a3e6dc4fd90450765d3fd35d34b7dd08b67c67ae79f529b6f18498a8fe986b73360cb06c310eac254307139a2405b51b67d7488ed5983a8cc3daf0130c26f
+  data.tar.gz: af4a5c732a179ca234c04c2dad6835fb3201687233cc49353f0e73f1cf49ddc408b5570b9846d297d109c2a012b62534ba8f669dba5c6a5f006aeaa5f80a7c44

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,15 +116,17 @@ 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 elapsedTime = endDate - startDate
-  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago.`; // 730+ days
+  let elapsedTimeString = `${Math.round(elapsedTime / (365.25 * 24 * 60 * 60 * 1000))} years ago`; // 730+ days
+
+  const MILLISECONDS_IN_A_MONTH = 30.44 * 24 * 60 * 60 * 1000
 
   const elapsedTimeData = [
     { min: 0, max: 44999, value: "a few seconds ago" }, // 0-44 seconds
@@ -130,7 +137,7 @@ export const fromNow = (newDate: Date | string): string => {
     { 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: 5185000000, max: 27561699999, value: `${Math.round(elapsedTime / MILLISECONDS_IN_A_MONTH)} months ago`}, // 60-319 days
     { min: 27561700000, max: 63072999999, value: "a year ago"}, // 320-730 days
   ];
 
@@ -149,7 +156,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_passphrase/_passphrase.scss

@@ -70,7 +70,6 @@
   @-moz-document url-prefix() {
     .passphrase-popover {
       position: relative;
-      top: $space_sm;
       left: -($space_xs * 1.5);
     }
   }

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -68,7 +68,7 @@ const Time = (props: TimeProps) => {
             )
       )}
 
-      <time dateTime={date.toString()}>
+      <time dateTime={date.toLocaleString()}>
         <span>
           {unstyled
             ? (