playbook_ui 11.11.0 → 11.12.1.pre.alpha.charts1

data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.js → pbChartsLightTheme.ts}

@@ -1,9 +1,11 @@
 import colors from '../tokens/exports/_colors.scss'
 import typography from '../tokens/exports/_typography.scss'
 
+import { ThemeProps } from './themeTypes'
+
 import Highcharts from 'highcharts'
 
-const highchartsTheme = {
+const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
   },
@@ -150,26 +152,6 @@ const highchartsTheme = {
       },
       threshold: null,
     },
-
-    // GAUGE STYLES
-    solidgauge: {
-      borderColor: colors.primary,
-      borderWidth: 20,
-      radius: 90,
-      innerRadius: '90%',
-      dataLabels: {
-        borderWidth: 0,
-        color: colors.text_lt_default,
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_2,
-        },
-        y: -26,
-      },
-    },
-
     // PIE STYLES
     pie: {
       colors: [
@@ -247,6 +229,9 @@ const highchartsTheme = {
       }
     },
   },
+  credits: {
+    enabled: false
+  },
 }
 
 export { highchartsTheme }

data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts

@@ -0,0 +1,16 @@
+export type ThemeProps = {
+    lang?: {[key: string]: string}
+    credits?: {[key: string]: boolean}
+    colors?: string[]
+    chart?: {[key: string]: any}
+    title?: {[key: string]: string | {}}
+    subtitle?: {[key: string]: string | {};}
+    xAxis?: {[key: string]: any;}
+    yAxis?: {[key: string]: any;}
+    legend?: {[key: string]: string | {};}
+    labels?: {[key: string]: {};}
+    tooltip?: {[key: string]: any;}
+    pane?: {[key: string]: {};}
+    plotOptions?: {[key: string]: any;}
+    colorKey?: string
+    }

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/docs/_date_picker_time.jsx

@@ -15,6 +15,7 @@ const DatePickerTime = (props) => (
         showTimezone
         {...props}
     />
+
   </div>
 )
 

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

@@ -41,96 +41,96 @@ 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;
-      }
-    };
+    // 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 {
       onValueUpdate() {
-        updateMeridiemToggle(true);
+        // updateMeridiemToggle(true);
       },
       onReady() {
         const id = fp.input.id;
@@ -151,8 +151,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

@@ -7,6 +7,21 @@
     color: inherit;
     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 {

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

@@ -68,7 +68,7 @@
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
 
-	@include pb_card;
+	// @include pb_card;
 	background-color: $white;
 	box-shadow: $shadow_deepest;
 	border: 0;
@@ -167,4 +167,33 @@
 			} 
 		}
 	}
+
+	.dialog-button-class {
+		background-color: unset;
+		border: none;
+		cursor: pointer;
+	}
+	
+}
+
+.pb_dialog_wrapper_rails {
+	.pb_dialog_rails {
+		top: 0 !important;
+		padding: unset !important;
+		margin: auto;
+	
+	}
+	dialog::backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba($bg_dark, $opacity_4);
+		animation-name: overlayFade;
+		animation-duration: 0.2s;	
+	}
 }

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

@@ -0,0 +1,28 @@
+<div class="pb_dialog_wrapper_rails">
+    <%= content_tag(:dialog,
+        aria: object.aria,
+        data: object.data,
+        id: object.id,
+        class: object.classname) do %>
+            <% if object.title %>
+                <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
+            <% end %>
+            <% if object.text %>
+                <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
+            <% 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
+                }) %>
+            <% end %>
+            <%= content %>
+    <% end %>
+</div>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {      
+        dialogHelper()
+    })
+  <% end %>

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

@@ -2,45 +2,17 @@
 
 module Playbook
   module PbDialog
-    class Dialog
-      include Playbook::Props
-
-      partial "pb_dialog/dialog"
-
-      prop :ref
-      prop :cancel_button
-      prop :closeable, type: Playbook::Props::Boolean, default: true
-      prop :confirm_button
-      prop :oncancel
-      prop :onchange
-      prop :onclose
-      prop :onconfirm
-      prop :opened, type: Playbook::Props::Boolean, default: false
+    class Dialog < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg content],
+                  values: %w[sm md lg xl status_size content],
                   default: "md"
-      prop :text
       prop :title
-      prop :trigger
+      prop :text
+      prop :confirm_button
+      prop :cancel_button
 
-      def dialog_options
-        {
-          id: id,
-          ref: ref,
-          trigger: trigger,
-          className: classname,
-          cancelButton: cancel_button,
-          closeable: closeable,
-          confirmButton: confirm_button,
-          onCancel: oncancel,
-          onChange: onchange,
-          onClose: onclose,
-          onConfirm: onconfirm,
-          opened: opened,
-          size: size,
-          text: text,
-          title: title,
-        }
+      def classname
+        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
       end
     end
   end

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

@@ -0,0 +1,21 @@
+const dialogHelper = () => {
+  const openTrigger = document.querySelectorAll("[data-open-dialog]");
+  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+
+  openTrigger.forEach((open) => {
+    open.addEventListener("click", () => {
+      var openTriggerData = open.dataset.openDialog;
+      if (document.getElementById(openTriggerData).open) return;
+      document.getElementById(openTriggerData).showModal();
+    });
+  });
+
+  closeTrigger.forEach((close) => {
+    close.addEventListener("click", () => {
+      var closeTriggerData = close.dataset.closeDialog;
+      document.getElementById(closeTriggerData).close();
+    });
+  });
+};
+
+export default dialogHelper;

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

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria) do %>
+        <%= content.presence || object.text %>
+<% end %>

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDialog
+    class DialogBody < Playbook::KitBase
+      prop :text
+
+      def classname
+        generate_classname("dialog_body p_sm")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    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 %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDialog
+    class DialogFooter < Playbook::KitBase
+      prop :cancel_button
+      prop :confirm_button
+      prop :confirm_button_id
+      prop :cancel_button_id
+
+      def classname
+        generate_classname("dialog_footer")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria) do %>
+        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
+            <%= content.presence || object.title %>
+            
+            <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
+                <%= pb_rails("icon", props:{icon: "times"}) %>
+            </button>
+        <% end %>
+        <%= pb_rails("section_separator") %>
+<% end %>

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

@@ -2,28 +2,11 @@
 
 module Playbook
   module PbDialog
-    class DialogHeader
-      include Playbook::Props
-
-      partial "pb_dialog/child_kits/dialog_header"
-
-      prop :closeable, type: Playbook::Props::Boolean, default: true
-      prop :padding
-      prop :separator, type: Playbook::Props::Boolean, default: true
-      prop :spacing
-      prop :text
+    class DialogHeader < Playbook::KitBase
       prop :title
 
-      def dialog_header_options
-        {
-          id: id,
-          closeable: closeable,
-          padding: padding,
-          separator: separator,
-          spacing: spacing,
-          text: text,
-          title: title,
-        }
+      def classname
+        generate_classname("dialog_header")
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
+
+<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
+        <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+<% end %>