playbook_ui 11.11.0 → 11.12.1.pre.alpha.passphrase1

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -0,0 +1,114 @@
+import React from 'react'
+
+import CircleChart from '../_circle_chart'
+
+import {Title} from '../..'
+
+const data = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const dataFirst = [{
+  name: 'Bugs',
+  value: 8,
+
+},
+{
+  name: 'Chores',
+  value: 1,
+
+},
+{
+  name: 'Stories',
+  value: 12,
+},
+]
+
+const dataSecond = [
+  {
+    name: 'Queued',
+    value: 7,
+  },
+  {
+    name: 'In Progress',
+    value: 6,
+  },
+  {
+    name: 'Validation',
+    value: 3,
+  },
+  {
+    name: 'Done',
+    value: 6,
+  },
+]
+
+
+const CircleChartLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <CircleChart
+        align='right'
+        chartData={data}
+        id="legend-position-circle"
+        legend
+        paddingBottom="sm"
+        title="Alignment of Legend"
+        verticalAlign="top"
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <CircleChart
+        chartData={dataFirst}
+        id="legend-position-circle-1"
+        layout="vertical"
+        legend
+        paddingBottom="sm"
+        paddingTop="sm"
+        title="Layout of Legend"
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <CircleChart
+        chartData={dataSecond}
+        id="legend-position-circle-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        y={10}
+        {...props}
+    />
+  </div>
+)
+
+export default CircleChartLegendPosition

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -0,0 +1,17 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+- 
+
+- `layout` determines the position of the legend items
+`layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
+
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

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

@@ -7,6 +7,7 @@ examples:
   - circle_chart_colors: Color Overrides
   - circle_chart_with_labels: Data Labels
   - circle_chart_with_legend_kit: Legend
+  - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
 
@@ -18,6 +19,7 @@ examples:
   - circle_chart_colors: Color Overrides
   - circle_chart_with_labels: Data Labels
   - circle_chart_with_legend_kit: Legend
+  - circle_chart_legend_position: Legend Position
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
 

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

@@ -5,5 +5,6 @@ export { default as CircleChartBlock } from './_circle_chart_block.jsx'
 export { default as CircleChartColors } from './_circle_chart_colors.jsx'
 export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
 export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
+export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'

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