playbook_ui 13.0.0 → 13.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 68b8019423c98f0b17cb991be96ff5eaf31f5ec127a81e1079f1d30d89bf2f8a
-  data.tar.gz: 266d1ba7ec9735ab40b632b590b448742429e780ef5635f92bd9e74b0e0fc6df
+  metadata.gz: 6c03b530a4b2b16b5dcf7ea348a4aa6a66db48f68359fed8469e47746c6fad2c
+  data.tar.gz: 5695a441ba55870888683da55c49814c94de842a952614d711325bfd1813fe35
 SHA512:
-  metadata.gz: b2a9a36c332c8f6cf8ced66861d01e6bccaf17d6ace709c3c1e3a180f89a145d8d4d98beecf8ba52cbdde6d41129238df73b0c364e9997ae4f225587a6d85c11
-  data.tar.gz: 4f42ad5ca624705aa6139ebf6b698ede8350fe94dd30fafbce662a433c6a898fd16ee47d22710ca648999c4bbd4ef9457458acc44c9c35f0d22823e84276d2bd
+  metadata.gz: cb2dd83ad7e0030f750adb29cab24f33d979922ac9763e35de399c8df427053ae501e0b24a168116c6fccf876885bf7fc9e7e0356b94bae6ef7ccb14cf7bf45c
+  data.tar.gz: 51fa2673e72139fdfce189b16a2364430eb8518fb9480d5b8c203bd66956478654506a20e358fbd6e6de955c97270503ed69f92857fe51789ddc30595daff9b3

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,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_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;
-      }
-    }
+   }
   }
 }