playbook_ui 14.4.0 → 14.5.0.pre.alpha.PLAY1486highchartscssdrivenPOC3931

data/app/pb_kits/playbook/pb_dashboard/_highcharts_theme.scss

@@ -0,0 +1,52 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/highcharts.css");
+// @import "highcharts/css/highcharts";
+// @import "highcharts/highcharts.css";
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}

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

@@ -3,11 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
+import { PlotTreemapOptions } from "highcharts";
 
 const highchartsDarkTheme: ThemeProps = {
   lang: {
@@ -206,7 +202,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

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

@@ -3,12 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
-
+import { PlotTreemapOptions } from "highcharts";
 
 const highchartsTheme: ThemeProps = {
   lang: {
@@ -206,7 +201,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    } as PlotTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -161,7 +162,7 @@ useEffect(() => {
     }
     return base
   }
-
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
     <div
@@ -231,8 +232,8 @@ useEffect(() => {
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon
-                      className="angle_down_icon"
-                      icon="angle-down"
+                      className="angle_down_icon svg-inline--fa"
+                      customIcon={angleDown}
                   />
                 </div>
               </div>

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

@@ -61,7 +61,7 @@
       >
         <%= pb_rails("icon", props: {
           classname: "angle_down_icon",
-          icon: "angle-down"
+          custom_icon: Playbook::Engine::root.join(angle_down_path)
         }) %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -118,6 +118,10 @@ module Playbook
         class_string += error_class
         class_string
       end
+
+      def angle_down_path
+        "app/pb_kits/playbook/utilities/icons/angle-down.svg"
+      end
     end
   end
 end

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

@@ -5,6 +5,9 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
+import { getAllIcons } from '../utilities/icons/allicons';
+
+const angleDown = getAllIcons().angleDown.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -256,10 +259,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // Adding dropdown icons to year and month selects
-  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
+  // Adding dropdown icons to year and month select
+  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
+    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
   // if (picker.weekElements[0].parentElement){
   //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   // }

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

@@ -14,4 +14,4 @@
     }
     fpInline.config.onChange.push(showAngleDownHandler)
   })
-<% end %>
+<% end %>

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

@@ -76,7 +76,11 @@
   pointer-events: none;
   color: $text_lt_light;
 }
-
+.year-dropdown-icon svg, .month-dropdown-icon svg {
+  width: 16px;
+  margin-top: 6px;
+  margin-left: -2px;
+}
 // Left - Right Arrow Styling
 .flatpickr-prev-month {
   display: flex;
@@ -113,4 +117,4 @@
       }
     }
   }
-}
+}

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

@@ -187,6 +187,8 @@
 
   &_close_icon {
     cursor: pointer;
+    font-size: $font_base;
+    line-height: $lh_normal;
   }
 
   &_overlay {

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

@@ -2,7 +2,7 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
                 <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
             </button>
         <% end %>

data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Icon from '../pb_icon/_icon'
+
+import { getAllIcons } from "../utilities/icons/allicons"
+
+type CloseIconProps = {
+  onClose: () => void,
+}
+
+export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
+  const { onClose } = props
+  const timesIcon = getAllIcons()["times"]
+  return (
+    <div
+        className="pb_dialog_close_icon"
+        onClick={onClose}
+    >
+      <Icon
+          className="svg-inline--fa"
+          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
+          fixedWidth
+      />
+    </div>
+  )
+}

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -0,0 +1,465 @@
+@import "../tokens/positioning";
+@import "../tokens/colors";
+@import "../pb_card/card_mixin";
+@import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/animation-curves";
+@import "../tokens/positioning";
+
+// Drawer animations
+// Drawer animations for fading in and out from the center
+@keyframes modalFadeIn {
+  from {
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes modalFadeOut {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
+  }
+}
+
+// Drawer animations for fading in and out from the right side
+
+@keyframes overlayFade {
+  from {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes overlayFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+body.ReactModal__Body--open {
+  transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
+}
+
+.pb_drawer_lg_left.pb_drawer {
+  transform: translateX(-100%);
+}
+
+.pb_drawer_lg_right.pb_drawer {
+  transform: translateX(100%);
+}
+
+.pb_drawer.pb_drawer_after_open {
+  transform: translateX(0); /* Slide in */
+}
+// Drawer Styles
+.pb_drawer {
+
+  // Local Variables
+  $gutter: $space_lg;
+  $xsmall: 64px;
+  $small: 200px;
+  $medium: 250px;
+  $large: 300px;
+  $xlarge: 365px;
+  $animation-duration: .2s;
+  $z-index: 100;
+  $opacity_visible: 1;
+  $opacity_hidden: 0;
+
+  .drawer {
+    position: sticky;
+    top: 0;
+    background-color: $white;
+    z-index: $z_8;
+  }
+
+  // @include pb_card;
+  background-color: $white;
+  border: 0;
+  box-shadow: $shadow_deepest; // border class here
+  max-height: calc(100vh - #{$gutter * 2});
+  max-width: calc(100vw - #{$gutter * 2});
+  overflow: auto;
+  animation-name: modalFadeIn;
+  animation-duration: $animation-duration;
+  outline: none;
+  animation-timing-function: $easeInOutQuint;
+  transition: transform 0.3s ease-in-out;
+
+  &.drawer_border_full {
+    box-shadow: none;
+    border: 2px solid #f3f7fb;
+  }
+
+  &.drawer_border_right {
+    border-right: 2px solid #f3f7fb;
+  }
+
+  &.drawer_border_left {
+    border-left: 2px solid #f3f7fb;
+  }
+
+  &[class*="_left"] {
+    animation-name: modalFadeInLeft;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutLeft;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+  }
+
+  &[class*="_right"] {
+    animation-name: modalFadeInRight;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutRight;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+  }
+
+  &[class*="_xs_"] {
+    width: $xsmall;
+    max-width: $xsmall;
+  }
+
+  &[class*="_sm_"] {
+    width: $small;
+    max-width: $small;
+  }
+
+  &[class*="_md_"] {
+    width: $medium;
+    max-width: $medium;
+  }
+
+  &[class*="_lg_"] {
+    width: $large;
+    max-width: $large; 
+  }
+
+  &[class*="_xl_"] {
+    width: $xlarge;
+    max-width: $xlarge; 
+  }
+
+  &_body_open {
+    overflow: hidden;
+  }
+
+  &_after_open {
+    opacity: $opacity_visible;
+  }
+
+  &.no-background {
+    background-color: transparent; 
+  }
+
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
+    opacity: $opacity_hidden;
+  }
+
+  &_close_icon {
+    cursor: pointer;
+  }
+
+  &_overlay {
+    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);
+    z-index: $z-index;
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
+
+    &_after_open {
+      opacity: $opacity_visible;
+    }
+    &_before_close {
+      animation-name: overlayFadeOut;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+    &[class*="full_height"] {
+      &[class*="_left"]{
+        justify-content: flex-start;
+      }
+
+      &[class*="_center"]{
+        justify-content: center;
+      }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
+      }
+
+      .pb_drawer {
+        height: 100%;
+        max-height: 100%;
+        max-width: none;
+        // This empty div only has height when drawer is full height
+        // Fix for drawer body content disappearing behind sticky footer
+        .drawer-pseudo-footer {
+          height: $space_xl * 2;
+        }
+        .drawer_footer {
+          position: fixed;
+          bottom: 0;
+          background-color: $white;
+          max-width: 100%;
+        }
+        &[class*="_xs_"] {
+          width: $xsmall;
+          .dialog_footer {
+            width: $xsmall;
+          }
+        }
+        &[class*="_sm_"] {
+          width: $small;
+          .dialog_footer {
+            width: $small;
+          }
+        }
+        &[class*="_md_"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
+        }
+        &[class*="_lg_"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
+        }
+        &[class*="_xl_"] {
+          width: $xlarge;
+          .dialog_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+}
+
+  &_no_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $z-index;
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
+    overflow: none; /* Ensure body remains scrollable */
+    pointer-events: none; /* Allow interaction inside the drawer itself */
+
+    body.ReactModal__Body--open {
+      overflow: none; /* Ensure body remains scrollable */
+      pointer-events: none; /* Allow interaction inside the drawer itself */
+    }
+
+    &_after_open {
+      opacity: $opacity_visible;
+      overflow: none; /* Ensure body remains scrollable */
+      pointer-events: none; /* Allow interaction inside the drawer itself */
+    }
+    &_before_close {
+      animation-name: overlayFadeOut;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+    &[class*="full_height"] {
+      &[class*="_left"]{
+        justify-content: flex-start;
+      }
+
+      &[class*="_center"]{
+        justify-content: center;
+      }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
+      }
+
+      .pb_drawer {
+        height: 100%;
+        max-height: 100%;
+        max-width: none;
+        // This empty div only has height when drawer is full height
+        // Fix for drawer body content disappearing behind sticky footer
+        .drawer-pseudo-footer {
+          height: $space_xl * 2;
+        }
+        .drawer_footer {
+          position: fixed;
+          bottom: 0;
+          background-color: $white;
+          max-width: 100%;
+        }
+        &[class*="_xs_"] {
+          width: $xsmall;
+          .dialog_footer {
+            width: $xsmall;
+          }
+        }
+        &[class*="_sm_"] {
+          width: $small;
+          .dialog_footer {
+            width: $small;
+          }
+        }
+        &[class*="_md_"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
+        }
+        &[class*="_lg_"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
+        }
+        &[class*="_xl_"] {
+          width: $xlarge;
+          .dialog_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+}
+
+[class*="drawer_body"] {
+  padding: $space_sm;
+}
+
+[class*="drawer_header"] {
+  padding: $space_sm;
+}
+
+[class*="drawer_footer"] {
+  padding: $space_sm;
+}
+
+//styles specific to rails version of kit
+// rails version has own wrapper because of the way the overlay functions for the HTML drawer used to create this
+.pb_drawer_wrapper_rails {
+  $medium: 500px;
+  $large: 800px;
+  $xlarge: 1150px;
+
+  &[class*="full_height"] {
+    &[class*="_left"]{
+      .pb_drawer_rails {
+        margin: unset !important;
+        margin-right: auto !important;
+      }
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
+    }
+
+    &[class*="_right"]{
+      .pb_drawer_rails {
+        margin: unset !important;
+        margin-left: auto !important;
+      }
+    }
+
+    .pb_drawer {
+      height: 100% !important;
+      max-height: 100% !important;
+      max-width: 100%;
+      // This empty div only has height when drawer is full height.
+      // Fix for drawer body content disappearing behind sticky footer
+      .drawer-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .drawer_footer {
+        position:fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
+      }
+      &[class*="_sm"] {
+        width: $medium;
+        .drawer_footer {
+          width: $medium;
+        }
+      }
+      &[class*="_md"] {
+        width: $large;
+        .drawer_footer {
+          width: $large;
+        }
+      }
+      &[class*="_lg"] {
+        width: $xlarge;
+        .drawer_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+
+  // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
+  // Conflicts were only apparent in nitro, not in playbook local env
+  .pb_drawer_rails {
+    position: fixed !important;
+    top: 0 !important;
+    padding: unset !important;
+    margin: auto;
+
+  }
+
+  // Overlay for rails kit
+  drawer::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;
+  }
+
+  .drawer-button-class {
+    background-color: unset;
+    border: none;
+    cursor: pointer;
+  }
+}
+}