playbook_ui 15.4.0 → 15.5.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f000abc583cece5823eebcb15113e1e1627c41bf69af15537d63502aa27dd812
-  data.tar.gz: '059507ff8521a46d3ba78685e5ba1fd66e4ba68bd233783861a68056236ece53'
+  metadata.gz: 1908d580a733d2f740d4764449b6a29a4da28df8569d05c6986bde253714b026
+  data.tar.gz: aab898d2e6a575ed7cb75bb23596e0f6d10fdc41e1b1b849cf7fa18ba4fcc374
 SHA512:
-  metadata.gz: fa5849767fc5e43a45c586ca19f3e3f6a1c18e70656ed02e66c2f70a66b100a59797ef11f466faa269cec041f1b76da04fe76987dd929b6d3b9d3dfc03b4dbe5
-  data.tar.gz: 94b3d9ece5cd3a6f8244ea3379ad07addf95d2742adbd095c7a49055fb0be2bbaa77ffd7c4c3b741d13354cd033e4c341de2e2704f065d28a8e235f9d5a6875b
+  metadata.gz: 9fdcef54c8ee3e0c25c7b37ddbc3c36125a51ebdfd87e3bbe87e4390fb74faa5282775b823041d8583abe15e50bf77cd68cf6c80fa1258d53bdcad787ceb48d2
+  data.tar.gz: e8da8e5b2fb73da7e16056b90e752c522df3d5bd9afacf19a27fd41586c3620b0567be99214b0763a051d852a105a170277adf0a91b7c63f2b7dee4ac0aa2115

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -70,22 +70,36 @@
   <%= javascript_tag do %>
     (function() {
       const loadDatePicker = () => {
-        datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        const input = document.getElementById("<%= object.picker_id %>");
+        if (input && !input._flatpickr) {
+          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
-        if (<%= object.selection_type == "quickpick" %>) {
-          document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-            const startDate = document.getElementById("<%= object.start_date_id %>")
-            const endDate = document.getElementById("<%= object.end_date_id %>")
-            const splittedValue = target.value.split(" to ")
-            startDate.value = splittedValue[0]
-            endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-          })
+          if (<%= object.selection_type == "quickpick" %>) {
+            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
+              const startDate = document.getElementById("<%= object.start_date_id %>")
+              const endDate = document.getElementById("<%= object.end_date_id %>")
+              const splittedValue = target.value.split(" to ")
+              startDate.value = splittedValue[0]
+              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+            })
+          }
         }
       }
 
-      window.addEventListener("DOMContentLoaded", () => {
+      // Try to initialize immediately if DOM is ready
+      if (document.readyState === "loading") {
+        window.addEventListener("DOMContentLoaded", loadDatePicker)
+      } else {
         loadDatePicker()
-      })
+      }
+
+      // For dynamically added content (modals, etc.), check again after a brief delay
+      setTimeout(() => {
+        const input = document.getElementById("<%= object.picker_id %>");
+        if (input && !input._flatpickr) {
+          loadDatePicker();
+        }
+      }, 100);
 
       if (<%= !object.custom_event_type.empty? %>) {
         window.addEventListener("<%= object.custom_event_type %>", () => {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -19,6 +19,7 @@ type DateRangeInlineProps = {
   icon?: boolean;
   id?: string;
   size?: "sm" | "xs";
+  showCurrentYear?: boolean;
   startDate?: Date;
 };
 
@@ -45,6 +46,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
     icon = false,
     size = "sm",
     startDate,
+    showCurrentYear = false,
   } = props;
 
   const dateInCurrentYear = () => {
@@ -60,13 +62,10 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   
   const renderTime = (date: Date) => {
+    const includeYear = showCurrentYear || !dateInCurrentYear();
     return (
       <time dateTime={dateTimeIso(date)}>
-        {dateInCurrentYear() ? (
-          ` ${dateTimestamp(date, false)} `
-        ) : (
-          ` ${dateTimestamp(date, true)} `
-        )}
+        {` ${dateTimestamp(date, includeYear)} `}
       </time>
     );
   };
@@ -83,7 +82,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             {icon && (
               <Caption 
                   dark={dark} 
-                  tag="span">
+                  tag="span"
+              >
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -96,12 +96,14 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -112,7 +114,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Caption>
             <Caption 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -124,7 +127,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
               <Body 
                   color={"light"} 
                   dark={dark}
-                  tag="span">
+                  tag="span"
+              >
                 <Icon
                     className="pb_date_range_inline_icon"
                     dark={dark}
@@ -137,13 +141,15 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             )}
             <Body 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
             <Body 
                 color={"light"} 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
@@ -154,7 +160,8 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
             </Body>
             <Body 
                 dark={dark} 
-                tag="span">
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb

@@ -14,7 +14,8 @@ module Playbook
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
       def classname
         generate_classname("pb_date_range_inline_kit", dark_class, align)
       end
@@ -38,11 +39,12 @@ module Playbook
       end
 
       def time_display(time)
+        include_year = show_current_year || !dates_in_current_year?
         content_tag(:time, datetime: time.to_iso) do
-          if dates_in_current_year?
-            "#{time.to_month_downcase} #{time.to_day}"
-          else
+          if include_year
             "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
+          else
+            "#{time.to_month_downcase} #{time.to_day}"
           end
         end
       end

data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js

@@ -111,6 +111,23 @@ describe("DateRangeInline Kit", () => {
         const text = kit.querySelector('.pb_caption_kit_md:first-child')
         expect(text.textContent).toEqual(" Jan 15 ")
     })
+
+    test("renders DateRangeInline with year when showCurrentYear is true", () => {
+        const currentYear = new Date().getFullYear()
+        render(
+            <DateRangeInline
+                data={{ testid: testId }}
+                endDate={new Date((`15 Aug ${currentYear}`))}
+                showCurrentYear
+                size="xs"
+                startDate={new Date(`15 Jan ${currentYear}`)}
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector('.pb_caption_kit_md:first-child')
+        expect(text.textContent).toEqual(` Jan 15, ${currentYear} `)
+    })
     
 
 })

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, show_current_year: true }) %>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import DateRangeInline from '../_date_range_inline'
+
+const DateRangeInlineShowCurrentYear = (props) => {
+  return (
+    <div>
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateRangeInlineShowCurrentYear

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Range Inline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -1 +1 @@
-Use to display a date range. Year will not show if it is the current year.
+Use to display a date range.

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

@@ -2,11 +2,12 @@ examples:
   
   rails:
   - date_range_inline_default: Default
-  
+  - date_range_inline_show_current_year: Show Current Year
   
   react:
   - date_range_inline_default: Default
-
+  - date_range_inline_show_current_year: Show Current Year
+  
   swift:
   - date_range_inline_default_swift: Default
   - date_range_inline_props_swift: ""

data/app/pb_kits/playbook/pb_date_range_inline/docs/index.js

@@ -1 +1,2 @@
 export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'
+export { default as DateRangeInlineShowCurrentYear } from './_date_range_inline_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -19,6 +19,7 @@ type DateStackedProps = {
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
+  showCurrentYear?: boolean;
 };
 
 const sizes: {sm: 4, md: 3} = {
@@ -37,6 +38,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
     data={},
     htmlOptions={},
     size = "sm",
+    showCurrentYear = false,
   } = props;
   const classes = classnames(
     buildCss("pb_date_stacked_kit", align, size, {
@@ -55,7 +57,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
   return (
     <>
       {bold == false ? (
-        <div 
+        <div
             {...dataProps}
             {...htmlProps}
             className={classes}
@@ -68,10 +70,10 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                 text={DateTime.toDay(date).toString()}
             />
           </div>
-          {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
+          {(currentYear != inputYear || showCurrentYear) && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div 
+          <div
               {...dataProps}
               {...htmlProps}
               className={classes}
@@ -89,7 +91,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
                   size="4"
                   text={DateTime.toDay(date).toString()}
               />
-              {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
+              {(currentYear != inputYear || showCurrentYear) && <Title size="4">{inputYear}</Title>}
             </div>
           </div>
       )}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -4,16 +4,15 @@
 
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("caption", props: { text: object.month }) %>
-        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) %>
         <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
       </div>
 
     <% else %>
       <div class="pb_date_stacked_day_month">
         <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
-        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) %>
         <%= pb_rails("title", props: { text: object.year, size:4 }) %>
-
       </div>
 
     <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -16,6 +16,8 @@ module Playbook
                   default: false
       prop :bold, type: Playbook::Props::Boolean,
                   default: false
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       def classname
         generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
@@ -37,11 +39,15 @@ module Playbook
       end
 
       def year
-        current_year = DateTime.now.year.to_i
-        year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
-        if current_year != year
-          content_tag(:time, datetime: year) do
-            year.to_s
+        if show_current_year
+          Playbook::PbKit::PbDateTime.new(date).to_year.to_s
+        else
+          current_year = DateTime.now.year.to_i
+          year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
+          if current_year != year
+            content_tag(:time, datetime: year) do
+              year.to_s
+            end
           end
         end
       end

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -22,7 +22,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -36,7 +36,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -51,7 +51,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -66,7 +66,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={new Date()}
-                size="md"      
+                size="md"
             />
         )
 
@@ -80,7 +80,7 @@ describe("DateStacked Kit", () => {
                 align="left"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="sm"      
+                size="sm"
             />
         )
 
@@ -89,6 +89,23 @@ describe("DateStacked Kit", () => {
         expect(text.textContent).toEqual("2016")
     })
 
+    test("renders current year when showCurrentYear is true", () => {
+        render(
+            <DateStacked
+                align="left"
+                data={{ testid: testId }}
+                date={new Date()}
+                showCurrentYear
+                size="sm"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        const text = kit.querySelector(".pb_caption_kit_xs")
+        const currentYear = new Date().getFullYear()
+        expect(text.textContent).toEqual(`${currentYear}`)
+    })
+
     test("renders correct className when order reversed", () => {
         render(
             <DateStacked
@@ -96,7 +113,7 @@ describe("DateStacked Kit", () => {
                 data={{ testid: testId }}
                 date={futureDate}
                 reverse
-                size="sm"      
+                size="sm"
             />
         )
         const kit = screen.getByTestId(testId)
@@ -110,7 +127,7 @@ describe("DateStacked Kit", () => {
                 bold
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"      
+                size="md"
             />
         )
 
@@ -125,7 +142,7 @@ describe("DateStacked Kit", () => {
                 align="center"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"      
+                size="md"
             />
         )
 
@@ -139,7 +156,7 @@ describe("DateStacked Kit", () => {
                 align="right"
                 data={{ testid: testId }}
                 date={futureDate}
-                size="md"      
+                size="md"
             />
         )
 

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_stacked", props: {
+  date: DateTime.now,
+  show_current_year: true
+}) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: {
+  date: DateTime.now,
+  show_current_year: true,
+  size: "md"
+}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/{_date_stacked_not_current_year.jsx → _date_stacked_current_year.jsx}

@@ -1,12 +1,13 @@
 import React from 'react'
 import DateStacked from '../_date_stacked'
 
-const DateStackedNotCurrentYear = (props) => {
+const DateStackedCurrentYear = (props) => {
   return (
     <div>
 
       <DateStacked
-          date={new Date('20 Mar 2018')}
+          date={new Date()}
+          showCurrentYear
           size="sm"
           {...props}
       />
@@ -14,13 +15,13 @@ const DateStackedNotCurrentYear = (props) => {
       <br />
 
       <DateStacked
-          date={new Date('20 Mar 2018')}
+          date={new Date()}
+          showCurrentYear
           size="md"
           {...props}
       />
-
     </div>
   )
 }
 
-export default DateStackedNotCurrentYear
+export default DateStackedCurrentYear

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md

@@ -0,0 +1 @@
+By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb

@@ -2,4 +2,4 @@
 
 <br>
 
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -15,7 +15,7 @@ const DateStackedDefault = (props) => {
       <br />
 
       <DateStacked
-          date={new Date()}
+          date={new Date('20 Mar 2018')}
           size="md"
           {...props}
       />

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

@@ -1 +1 @@
-Use to display the date, stacking month and day. Year will not show if it is the current year.
+Use to display the date, stacking month and day.

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

@@ -2,7 +2,7 @@ examples:
 
   rails:
   - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
@@ -11,7 +11,7 @@ examples:
 
   react:
   - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold

data/app/pb_kits/playbook/pb_date_stacked/docs/index.js

@@ -1,6 +1,6 @@
 export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
-export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
+export { default as DateStackedCurrentYear } from './_date_stacked_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'

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

@@ -126,7 +126,7 @@ export default class PbDropdown extends PbEnhancedElement {
         .label.toString()
         .toLowerCase();
 
-      // hide or show option
+    // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
       if (match) hasMatch = true