playbook_ui 11.12.1 → 11.13.0.pre.alpha.fontawesome1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3257a43d2c224d202dcfa36f64ae30921ed80d752b8db6927059ebbe7032d6e6
-  data.tar.gz: 573bb60fedf4fc904f3832026d46ac23ee22dc965792801565c9006449dbdcc7
+  metadata.gz: b29be7e95b59bc1c8ddb320a0975aae76de1ea5a8f219fdfd44f9529a5f5e464
+  data.tar.gz: 9f63bcf20ec8c50ac06ed844a2b2effd4b2e3dffcf5d827f8572e2bbe0f9f527
 SHA512:
-  metadata.gz: 38e8c49e2e18ae015912af7ac41da7c6a9fc57b7e201f4ca55c9edb2ea93d0114c917963c98f67972aa4cf50dda11cb4ec40f494e4da260403d63fa9e5920e4a
-  data.tar.gz: 9421ac89e00399825a91ed280324cd1b1a4a43aa8310b88c2143f21724d818c26aeca9af36e82cc9cf55e2e254a059d03d6c356364228631e82a4b8589d0a35e
+  metadata.gz: 400ab28faf00240b47e0ca3193ab9c1f40978a7b34b529244642e5c841788b2b3413765ad146c65ee2c3847de5f96a5992cbdf83be3f0551c35ddbbbe741aa63
+  data.tar.gz: 7482dc52f58913304cbe36a66ad5e0293fa9946953a7ea0286565d212895f8b00b01225a2232beb4669b779ff92e1ce3c62171739ffecfe1d2137d71610995d0

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -108,54 +108,54 @@ describe('DatePicker Kit', () => {
     })
   })
 
-  // test('shows DatePicker meridiem toggle', async () => {
-  //   const testId = 'datepicker-meridiem'
-  //   render(
-  //     <DatePicker
-  //         data={{ testid: testId }}
-  //         defaultDate={DEFAULT_DATE}
-  //         enableTime
-  //         pickerId="date-picker-meridiem"
-  //     />
-  //   )
-
-  //   const kit = screen.getByTestId(testId)
-  //   const input = within(kit).getByPlaceholderText('Select Date')
-
-  //   fireEvent(
-  //     input,
-  //     new MouseEvent('click', {
-  //       bubbles: true,
-  //       cancelable: true,
-  //     }),
-  //   )
-  //   const meridiemToggleAM = within(kit).getByLabelText('AM')
-  //   const meridiemTogglePM = within(kit).getByLabelText('PM')
-  //   await waitFor(() => {
-  //     expect(meridiemToggleAM).toBeInTheDocument()
-  //     expect(meridiemTogglePM).toBeInTheDocument()
-  //   })
-
-  //   fireEvent(
-  //     meridiemToggleAM,
-  //     new MouseEvent('click', {
-  //       bubbles: true,
-  //       cancelable: true,
-  //     }),
-  //   )
-  //   await waitFor(() => {
-  //     expect(input).toHaveValue('01/01/2020 at 12:00 AM')
-  //   })
-
-  //   fireEvent(
-  //     meridiemTogglePM,
-  //     new MouseEvent('click', {
-  //       bubbles: true,
-  //       cancelable: true,
-  //     }),
-  //   )
-  //   await waitFor(() => {
-  //     expect(input).toHaveValue('01/01/2020 at 12:00 PM')
-  //   })
-  // })
+  test('shows DatePicker meridiem toggle', async () => {
+    const testId = 'datepicker-meridiem'
+    render(
+      <DatePicker
+          data={{ testid: testId }}
+          defaultDate={DEFAULT_DATE}
+          enableTime
+          pickerId="date-picker-meridiem"
+      />
+    )
+
+    const kit = screen.getByTestId(testId)
+    const input = within(kit).getByPlaceholderText('Select Date')
+
+    fireEvent(
+      input,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    const meridiemToggleAM = within(kit).getByLabelText('AM')
+    const meridiemTogglePM = within(kit).getByLabelText('PM')
+    await waitFor(() => {
+      expect(meridiemToggleAM).toBeInTheDocument()
+      expect(meridiemTogglePM).toBeInTheDocument()
+    })
+
+    fireEvent(
+      meridiemToggleAM,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    await waitFor(() => {
+      expect(input).toHaveValue('01/01/2020 at 12:00 AM')
+    })
+
+    fireEvent(
+      meridiemTogglePM,
+      new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    await waitFor(() => {
+      expect(input).toHaveValue('01/01/2020 at 12:00 PM')
+    })
+  })
 })

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -9,6 +9,7 @@ const getPositionElement = (element: string | Element) => {
 }
 
 type DatePickerConfig = {
+  closeOnSelect?: boolean,
   disableDate?: number[],
   disableRange?: number[],
   disableWeekdays?: number[],
@@ -29,6 +30,7 @@ type DatePickerConfig = {
 const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
   const {
     allowInput,
+    closeOnSelect = true,
     defaultDate,
     disableDate,
     disableRange,
@@ -110,6 +112,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // ===========================================================
 
   flatpickr(`#${pickerId}`, {
+    closeOnSelect,
     disableMobile: true,
     dateFormat: getDateFormat(),
     defaultDate: defaultDateGetter(),

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb

@@ -3,4 +3,4 @@
   picker_id: "date-picker-time",
   enable_time: true,
   show_timezone: true
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx

@@ -1,22 +1,38 @@
-import React from 'react'
+/* eslint-disable react/no-multi-comp */
+import React, { useMemo, useState } from 'react'
 
 import DatePicker from '../_date_picker'
+import Body from '../../pb_body/_body'
 
 const DEFAULT_DATE = new Date()
 DEFAULT_DATE.setHours(12)
 DEFAULT_DATE.setMinutes(0)
 
-const DatePickerTime = (props) => (
-  <div>
-    <DatePicker
-        defaultDate={DEFAULT_DATE}
-        enableTime
-        pickerId="date-picker-time"
-        showTimezone
-        {...props}
-    />
+const DatePickerTime = (props) => {
+  const [selectedDateTime, setSelectedDateTime] = useState(DEFAULT_DATE)
 
-  </div>
-)
+  const refExample = React.createRef()
+
+  const handleOnInputChanged = (dateTime) => {
+    setSelectedDateTime(dateTime)
+  }
+
+  return (
+    <div ref={refExample}>
+      <Body marginBottom="md">{selectedDateTime.toString()}</Body>
+      {useMemo(() => (
+        <DatePicker
+            closeOnSelect={false}
+            defaultDate={DEFAULT_DATE}
+            enableTime
+            onChange={handleOnInputChanged}
+            pickerId="date-picker-time"
+            showTimezone
+            {...props}
+        />
+      ), [props])}
+    </div>
+  )
+}
 
 export default DatePickerTime

data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts

@@ -40,97 +40,100 @@ export const getTimezoneText = (inputDate: {
 };
 
 function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
-  return function (fp: FpTypes) {
-    // const generateMeridiemCard = (text: string) => {
-    //   const selectableCard = document.createElement("div");
-    //   selectableCard.className = "pb_selectable_card_kit_enabled";
-
-    //   const cardInput = document.createElement("input"),
-    //     cardInputId = `datePicker${text}`;
-
-    //   cardInput.id = cardInputId;
-    //   cardInput.name = "datepicker-ampm";
-    //   cardInput.type = "radio";
-    //   cardInput.value = text;
-
-    //   const cardLabel = document.createElement("label"),
-    //     cardLabelBuffer = document.createElement("div");
-    //   cardLabel.className = `label-${text.toLowerCase()}`;
-    //   cardLabel.setAttribute("for", cardInputId);
-    //   cardLabelBuffer.className = "buffer";
-    //   cardLabelBuffer.innerHTML = text;
-
-    //   cardLabel.append(cardLabelBuffer);
-    //   selectableCard.prepend(cardInput);
-    //   selectableCard.append(cardLabel);
-
-    //   return selectableCard;
-    // };
-
-    // const generateMeridiemToggle = () => {
-    //   fp.amPM.style.display = "none";
-    //   const formGroupKit = document.createElement("div");
-    //   formGroupKit.className = "pb_form_group_kit";
-
-    //   const amCard = generateMeridiemCard("AM");
-    //   amCard.addEventListener("click", () => {
-    //     fp.selectedDates[0].setHours(
-    //       (fp.selectedDates[0].getHours() % 12) + 12 * 0
-    //     );
-    //     fp.setDate(fp.selectedDates[0], true);
-    //   });
-
-    //   const pmCard = generateMeridiemCard("PM");
-    //   pmCard.addEventListener("click", () => {
-    //     fp.selectedDates[0].setHours(
-    //       (fp.selectedDates[0].getHours() % 12) + 12 * 1
-    //     );
-    //     fp.setDate(fp.selectedDates[0], true);
-    //   });
-
-    //   formGroupKit.prepend(amCard);
-    //   formGroupKit.append(pmCard);
-
-    //   const meridiemContainer = document.createElement("div");
-    //   meridiemContainer.className = "meridiem";
-    //   meridiemContainer.append(formGroupKit);
-    //   document.querySelector(".pb_time_selection").append(meridiemContainer);
-    // };
-
-    // const getMeridiem = (dateObj: string | any[]) => {
-    //   return dateObj[0].getHours() < 12 ? "AM" : "PM";
-    // };
-
-    // const updateMeridiemToggle = (forceClick: boolean) => {
-    //   if (!fp.selectedDates.length) return;
-
-    //   const uncheckedClass = "pb_selectable_card_kit_enabled",
-    //     checkedClass = "pb_selectable_card_kit_checked_enabled",
-    //     pickerAM: HTMLElement & { [x: string]: any } =
-    //       document.getElementById("datePickerAM"),
-    //     pickerPM: HTMLElement & { [x: string]: any } =
-    //       document.getElementById("datePickerPM"),
-    //     meridiem = getMeridiem(fp.selectedDates);
-
-    //   if (forceClick) {
-    //     pickerAM.checked = false;
-    //     pickerPM.checked = false;
-    //     pickerPM.checked = meridiem === "PM";
-    //     pickerAM.checked = meridiem === "AM";
-    //   }
-
-    //   if (meridiem === "PM") {
-    //     pickerPM.parentElement.className = checkedClass;
-    //     pickerAM.parentElement.className = uncheckedClass;
-    //   } else if (meridiem === "AM") {
-    //     pickerAM.parentElement.className = checkedClass;
-    //     pickerPM.parentElement.className = uncheckedClass;
-    //   }
-    // };
+    return function (fp: FpTypes & any) {
+      const generateMeridiemCard = (text: string) => {
+        const selectableCard = document.createElement("div");
+        selectableCard.className = "pb_selectable_card_kit_enabled";
+  
+        const cardInput = document.createElement("input"),
+        cardInputId = `datePicker-${fp.element.id}-${text}`;
+        cardInput.className = "datePicker-AMPM"
+        cardInput.id = cardInputId;
+        cardInput.name = "datepicker-ampm";
+        cardInput.type = "radio";
+        cardInput.value = text;
+  
+        const cardLabel = document.createElement("label"),
+          cardLabelBuffer = document.createElement("div");
+        cardLabel.className = `label-${text.toLowerCase()}`;
+        cardLabel.setAttribute("for", cardInputId);
+        cardLabelBuffer.className = "buffer";
+        cardLabelBuffer.innerHTML = text;
+  
+        cardLabel.append(cardLabelBuffer);
+        selectableCard.prepend(cardInput);
+        selectableCard.append(cardLabel);
+  
+        return selectableCard;
+      };
+  
+      const generateMeridiemToggle = () => {
+        fp.amPM.style.display = "none";
+        const formGroupKit = document.createElement("div");
+        formGroupKit.className = "pb_form_group_kit";
+  
+        const amCard = generateMeridiemCard("AM");
+        amCard.addEventListener("click", () => {
+          fp.selectedDates[0].setHours(
+            (fp.selectedDates[0].getHours() % 12) + 12 * 0
+          );
+          fp.setDate(fp.selectedDates[0], true);
+        });
+  
+        const pmCard = generateMeridiemCard("PM");
+        pmCard.addEventListener("click", () => {
+          fp.selectedDates[0].setHours(
+            (fp.selectedDates[0].getHours() % 12) + 12 * 1
+          );
+          fp.setDate(fp.selectedDates[0], true);
+        });
+  
+        formGroupKit.prepend(amCard);
+        formGroupKit.append(pmCard);
+  
+        const meridiemContainer = document.createElement("div");
+        meridiemContainer.className = "meridiem";
+        meridiemContainer.append(formGroupKit);
+        fp.timeContainer.append(meridiemContainer)
+      };
+  
+      const getMeridiem = (dateObj: string | any[]) => {
+        return dateObj[0].getHours() < 12 ? "AM" : "PM";
+      };
+  
+      const updateMeridiemToggle = (forceClick: boolean) => {
+        if (!fp.selectedDates.length) return;
+  
+        const uncheckedClass = "pb_selectable_card_kit_enabled",
+          checkedClass = "pb_selectable_card_kit_checked_enabled",
+          pickerAM: HTMLElement & { [x: string]: any } =
+            document.getElementById(`datePicker-${fp.element.id}-AM`),
+          pickerPM: HTMLElement & { [x: string]: any } =
+            document.getElementById(`datePicker-${fp.element.id}-PM`),
+          meridiem = getMeridiem(fp.selectedDates);
+  
+        if (forceClick) {
+          pickerAM.checked = false;
+          pickerPM.checked = false;
+          pickerPM.checked = meridiem === "PM";
+          pickerAM.checked = meridiem === "AM";
+        }
+  
+        if (meridiem === "PM") {
+          pickerPM.parentElement.className = checkedClass;
+          pickerAM.parentElement.className = uncheckedClass;
+        } else if (meridiem === "AM") {
+          pickerAM.parentElement.className = checkedClass;
+          pickerPM.parentElement.className = uncheckedClass;
+        }
+      };
 
     return {
       onValueUpdate() {
-        // updateMeridiemToggle(true);
+        updateMeridiemToggle(true);
+      },
+      onOpen() {
+        updateMeridiemToggle(true);
       },
       onReady() {
         const id = fp.input.id;
@@ -151,8 +154,8 @@ function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
         }
 
         // add meridiem toggle
-        // generateMeridiemToggle();
-        // updateMeridiemToggle(true);
+        generateMeridiemToggle();
+        updateMeridiemToggle(true);
 
         // add timezone text
         if (props.showTimezone) {

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss

@@ -8,20 +8,6 @@
     text-align: left;
     margin-left: $space_sm;
 
-    span.flatpickr-am-pm {
-      margin-left: $space_sm;
-      border-radius: 5px;
-      color: $primary;
-      &:hover{
-        background-color: rgba($primary, 0.03);
-      }
-      &:focus{
-        background-color: unset;
-        &:hover{
-          background-color: rgba($primary, 0.03);
-        }
-      }
-    }
     .numInputWrapper {
       width: auto;
       input.numInput {
@@ -59,7 +45,7 @@
         margin-left: $space_sm;
       }
 
-      #datePickerAM, #datePickerPM {
+      .datePicker-AMPM {
         display: none;
       }
       &:focus, &:hover {

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -166,17 +166,51 @@
 				}
 			} 
 		}
-	}
-
-	.dialog-button-class {
-		background-color: unset;
-		border: none;
-		cursor: pointer;
-	}
-	
+	}	
 }
 
+//styles specific to rails version of kit
 .pb_dialog_wrapper_rails {
+	$medium: 500px;
+    $large: 800px;
+    $xlarge: 1150px;
+
+	&[class*="full_height"] {
+		&[class*="_left"]{
+			.pb_dialog_rails {
+				margin: unset !important;
+				margin-right: auto !important;
+			}
+		}
+		
+		&[class*="_center"]{
+			justify-content: center;
+		}
+
+		&[class*="_right"]{
+			.pb_dialog_rails {
+				margin: unset !important;
+				margin-left: auto !important;
+			}
+		}
+
+		.pb_dialog {
+			border-radius: 0;
+			height: 100% !important;
+			max-height: 100% !important;
+			max-width: 100%;
+			&[class*="_sm"] {
+				width: $medium;
+			}
+			&[class*="_md"] {
+				width: $large;
+			}
+			&[class*="_lg"] {
+				width: $xlarge;
+			}
+		} 
+	}
+
 	.pb_dialog_rails {
 		top: 0 !important;
 		padding: unset !important;
@@ -196,4 +230,10 @@
 		animation-name: overlayFade;
 		animation-duration: 0.2s;	
 	}
+
+	.dialog-button-class {
+		background-color: unset;
+		border: none;
+		cursor: pointer;
+	}
 }

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,22 +1,36 @@
-<div class="pb_dialog_wrapper_rails">
+<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
     <%= content_tag(:dialog,
         aria: object.aria,
         data: object.data,
         id: object.id,
         class: object.classname) do %>
-            <% if object.title %>
+            <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
             <% end %>
-            <% if object.text %>
+            <% if object.status === "" && object.text %>
                 <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
             <% end %>
+            <% if object.status != "" %>
+                <%= pb_rails("dialog/dialog_body", props: {padding: "md"}) do %>
+                    <%= pb_rails("flex", props: {align: "center", orientation: "column"}) do %>
+                        <%= pb_rails("icon_circle", props: {
+                                icon: object.status_alerts[0],
+                                variant: object.status_alerts[1],
+                                size: "lg"
+                            }) %>
+                        <%= pb_rails("title", props: { text: object.title, tag: "h1", size: 3, margin_top: "sm" }) %>
+                        <%= pb_rails("body", props: {text: object.text, margin_top: "sm"}) %>
+                    <% end %>
+                <% end %>
+            <% end %>
             <% if object.cancel_button && object.confirm_button %>
-                <%= pb_rails("dialog/dialog_footer", props: {
-                    cancel_button: object.cancel_button, 
-                    confirm_button: object.confirm_button,
-                    id: object.id
-                }) %>
+                        <%= pb_rails("dialog/dialog_footer", props: {
+                            cancel_button: object.cancel_button, 
+                            confirm_button: object.confirm_button,
+                            id: object.id
+                        }) %>
             <% end %>
+            
             <%= content %>
     <% end %>
 </div>

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -6,14 +6,46 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md lg xl status_size content],
                   default: "md"
+      prop :full_height, type: Playbook::Props::Boolean, default: false
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[left right center],
+                       default: "center"
+      prop :should_close_on_overlay_click, type: Playbook::Props::Boolean, default: true
       prop :title
       prop :text
       prop :confirm_button
       prop :cancel_button
+      prop :status, type: Playbook::Props::Enum,
+                    values: ["info", "caution", "delete", "error", "success", "default", ""],
+                    default: ""
 
       def classname
         generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
       end
+
+      def full_height_style
+        if full_height && size === "xl"
+          "full_height_center"
+        elsif full_height && size != "xl"
+          "full_height_#{placement}"
+        end
+      end
+
+      def overlay_close
+        !should_close_on_overlay_click ? "overlay_close" : ""
+      end
+
+      def status_alerts
+        alerts = {
+          "info" => %w[info-circle default],
+          "default" => %w[exclamation-circle default],
+          "caution" => %w[exclamation-triangle yellow],
+          "delete" => %w[trash-alt red],
+          "error" => %w[times-circle red],
+          "success" => %w[check-circle green],
+        }
+        alerts[status]
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -5,8 +5,24 @@ const dialogHelper = () => {
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
       var openTriggerData = open.dataset.openDialog;
-      if (document.getElementById(openTriggerData).open) return;
-      document.getElementById(openTriggerData).showModal();
+      var targetDialog = document.getElementById(openTriggerData)
+      if (targetDialog.open) return;
+      targetDialog.showModal();
+
+      //the following allows you to close dialog by clicking on overlay
+      targetDialog.addEventListener('click',((event) => {
+        var dialogContainerData = targetDialog.parentElement.dataset
+         if (dialogContainerData.overlayClick === "overlay_close") return;
+          let rect = event.target.getBoundingClientRect();
+                if (rect.left > event.clientX ||
+              rect.right < event.clientX ||
+              rect.top > event.clientY ||
+              rect.bottom < event.clientY
+          ) {
+              targetDialog.close();
+          }
+        })
+      );
     });
   });
 

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -2,12 +2,16 @@
     id: object.id,
     data: object.data,
     aria: object.aria) do %>
-    <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
-        <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
-            <%= object.confirm_button %>
-        <% end %>
-        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
-            <%= object.cancel_button %>
+    <% if object.confirm_button && object.cancel_button %>
+        <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
+            <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
+                <%= object.confirm_button %>
+            <% end %>
+            <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
+                <%= object.cancel_button %>
+            <% end %>
         <% end %>
+    <% else %>
+        <% content.presence %>
     <% end %>
 <% end %>