playbook_ui 11.11.0.pre.alpha.renderer1 → 11.12.0

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

@@ -80,7 +80,6 @@
 	animation-duration: $animation-duration;
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
-	margin: auto;
 	
 	&[class*="_status_size"] {
 		width: $status_size;
@@ -178,6 +177,12 @@
 }
 
 .pb_dialog_wrapper_rails {
+	.pb_dialog_rails {
+		top: 0 !important;
+		padding: unset !important;
+		margin: auto;
+	
+	}
 	dialog::backdrop {
 		position: fixed;
 		top: 0;

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

@@ -19,4 +19,10 @@
             <% end %>
             <%= content %>
     <% end %>
-</div>
+</div>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {      
+        dialogHelper()
+    })
+  <% end %>

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

@@ -12,7 +12,7 @@ module Playbook
       prop :cancel_button
 
       def classname
-        generate_classname("pb_dialog pb_dialog_#{size}")
+        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
       end
     end
   end

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

@@ -1,16 +1,21 @@
-document.addEventListener("DOMContentLoaded", function () {
-  const openTrigger = document.querySelectorAll('[data-open-dialog]');
-  const closeTrigger = document.querySelectorAll('[data-close-dialog]');
+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
-      document.getElementById(openTriggerData).showModal()
+      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()
-    })
-  })
-});
+      var closeTriggerData = close.dataset.closeDialog;
+      document.getElementById(closeTriggerData).close();
+    });
+  });
+};
+
+export default dialogHelper;

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

@@ -6,7 +6,7 @@
         <%= 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}) do %>
+        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
             <%= object.cancel_button %>
         <% end %>
     <% end %>

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

@@ -2,7 +2,7 @@
     id: object.id,
     data: object.data,
     aria: object.aria) do %>
-        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm"}) 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 %> >

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -1,2 +1,4 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
-This allows for greater flexibility and more complex dialogs.
+This allows for greater flexibility and more complex dialogs.
+
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md

@@ -0,0 +1,3 @@
+For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a `open-dialog` data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.
+
+Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (`confirm_button_id` and `cancel_button_id`).

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -34,6 +34,7 @@ type IconProps = {
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
   size?: IconSizes,
+  fontStyle?: 'far' | 'fas' | 'fab',
   spin?: boolean,
 } & GlobalProps
 
@@ -61,6 +62,7 @@ const Icon = (props: IconProps) => {
     pulse = false,
     rotation,
     size,
+    fontStyle = 'far',
     spin = false,
   } = props
 
@@ -85,7 +87,7 @@ const Icon = (props: IconProps) => {
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : 'far',
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -32,13 +32,16 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
+      prop :font_style, type: Playbook::Props::Enum,
+                        values: %w[far fas fab],
+                        default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
       def classname
         generate_classname(
           "pb_icon_kit",
-          "far",
+          font_style_class,
           icon_class,
           border_class,
           fixed_width_class,
@@ -131,6 +134,10 @@ module Playbook
         size ? "fa-#{size}" : nil
       end
 
+      def font_style_class
+        font_style ? font_style.to_s : "far"
+      end
+
       def spin_class
         spin ? "fa-spin" : nil
       end