playbook_ui 5.2.0.pre.alpha15 → 5.2.0

data/app/pb_kits/playbook/pb_legend/_legend.html.erb

@@ -1 +1,10 @@
-<%= react_component('Legend', object.chart_options) %>
+<%= content_tag(:div, object.text,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+  <%= pb_rails("body", props: {color: object.body_color}) do %>
+    <span class="pb_legend_indicator_circle"></span>
+    <%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
+    <%= object.text %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -25,13 +25,6 @@ module Playbook
       def classname
         generate_classname("pb_legend_kit", color, dark ? "dark" : "light")
       end
-
-      def chart_options
-        {
-          color: color,
-          text: text
-        }
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb

@@ -1 +1,13 @@
-<%= react_component('LineGraph', object.chart_options) %>
+<%= content_tag(:div, "",
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname
+    ) %>
+<% content_for :pb_js do %>
+  <%= javascript_tag do %>
+    window.addEventListener('DOMContentLoaded', function() {
+      new pbChart('.selector', <%= object.chart_options %>)
+    })
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }
+        }.to_json.html_safe
       end
 
       def classname

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -73,23 +73,22 @@ const PersonContact = (props: PersonContactProps) => {
             contactDetail={contactObject.contactDetail}
             contactType={contactObject.contactType}
             contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+            key={index}
         />
-      ))}
+            ))}
       {wrongContacts().map((contactObject, index) => (
-        <div key={`wrong-contact-caption-wrapper-${index}`}>
+        <>
           <Caption
               className="wrong_numbers"
-              key={`wrong-contact-caption-${index}`}
               text="wrong number"
           />
           <Contact
               contactType={contactObject.contactType}
               contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+              key={index}
           />
-        </div>
-      ))}
+        </>
+          ))}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -5,7 +5,6 @@ const PersonContactWithWrongNumbers = () => {
   return (
     <>
       <PersonContact
-          key="person-contact-1"
           contacts={[
             {
               contactType: 'email',

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -2,8 +2,8 @@
   id: object.id,
   data: object.data,
   class: object.classname) do %>
-    <div class="popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
-      <div class="popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
+    <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+      <div class="pb_popover_body <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
         <%= capture(&object.children) %>
       </div>
     </div>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -90,12 +90,12 @@ const Popover = (props: PbPopoverProps) => {
           >
             <div
                 className={classnames(
-                `${buildCss('popover_tooltip')} show`
+                `${buildCss('pb_popover_tooltip')} show`
               )}
             >
               <div
                   className={classnames(
-                  'popover_body',
+                  'pb_popover_body',
                   popoverSpacing
                 )}
                   style={widthHeightStyles()}
@@ -128,7 +128,7 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
 
     document.body.addEventListener('click', ({ target }) => {
       const targetIsPopover =
-        target.closest('[class^=popover_tooltip]') !== null
+        target.closest('[class^=pb_popover_tooltip]') !== null
       const targetIsReference =
         target.closest('.pb_popover_reference_wrapper') !== null
 

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -19,34 +19,38 @@
   to {
     opacity: 0;
   }
+  .pb_popover_body {
+    @include pb_card;
+    border: 0;
+    box-shadow: $shadow_deeper;
+    overflow: auto;
+  }
 }
 
-[class^="pb_popover_kit"] {
-  .popover_tooltip {
-    opacity: 0;
-    animation-name: fadeOut;
+.pb_popover_tooltip {
+  opacity: 0;
+  animation-name: fadeOut;
+  animation-duration: 150ms;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  visibility: hidden;
+  pointer-events: none;
+  &.show {
+    animation-name: fadeIn;
     animation-duration: 150ms;
     animation-timing-function: linear;
     animation-fill-mode: forwards;
-    visibility: hidden;
-    pointer-events: none;
-    &.show {
-      animation-name: fadeIn;
-      animation-duration: 150ms;
-      animation-timing-function: linear;
-      animation-fill-mode: forwards;
-      visibility: visible;
-      pointer-events: initial;
-      z-index: $z_9;
-    }
-  }
-  .popover_body {
-    @include pb_card;
-    border: 0;
-    box-shadow: $shadow_deeper;
-    overflow: auto;
+    visibility: visible;
+    pointer-events: initial;
+    z-index: $z_9;
   }
 }
+.pb_popover_body {
+  @include pb_card;
+  border: 0;
+  box-shadow: $shadow_deeper;
+  overflow: auto;
+}
 
 
 .pb_popover_reference_wrapper {

data/app/pb_kits/playbook/pb_popover/index.js

@@ -8,7 +8,12 @@ export default class PbPopover extends PbEnhancedElement {
     return '[data-pb-popover-kit]'
   }
 
+  moveTooltip() {
+    document.querySelector('body').appendChild(this.tooltip)
+  }
+
   connect() {
+    this.moveTooltip()
     this.popper = createPopper(this.triggerElement, this.tooltip, {
       placement: this.position,
       strategy: 'fixed',
@@ -31,7 +36,7 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        // this.popper.scheduleUpdate()
+        this.popper.update()
         this.tooltip.classList.toggle('show')
       }, 0)
     })

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -8,6 +8,7 @@
 
   .pb_radio_button {
     width: 22px;
+    min-width: 22px;
     height: 22px;
     border-radius: 1000px;
     border: 2px solid $border_light;
@@ -29,6 +30,9 @@
     }
   }
   &[class*=_dark] {
+    .pb_radio_button {
+      border-color: $border_dark;
+    }
     input:checked ~ .pb_radio_button {
       border: 6px solid $primary;
     }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -46,6 +46,6 @@
     if (!event.target.dataset.typeaheadExample) return;
 
     document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
-    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").appendChild(event.detail.selected)
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
   })
 <% end %>

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -1,10 +1,10 @@
 @import "./opacity";
 
-/*=====================================
-Base colors should not be documented.
-Only document color use.
+//=====================================
+// Base colors should not be documented.
+// Only document color use.
 
-Colors -----------------------------*/
+// Colors -----------------------------
 $royal:               #0056CF;
 $purple:              #9E64E9;
 $teal:                #00C4D7;
@@ -22,11 +22,11 @@ $colors: (
   orange:             $orange
 );
 
-/* Specialty Gradient -----------------*/
+// Specialty Gradient -----------------
 $gradient_start:      #1C75F2;
 $gradient_end:        $royal;
 
-/* Interface colors -------------------*/
+// Interface colors -------------------
 $white:               #FFFFFF;
 $silver:              #F3F7FB;
 $slate:               #C1CDD6;
@@ -42,7 +42,7 @@ $interface_colors: (
 
 );
 
-/* Main colors ------------------------*/
+// Main colors ------------------------
 $primary:             $royal;
 $secondary:           $yellow;
 $tertiary:            $purple;
@@ -51,9 +51,9 @@ $main_colors: (
   secondary:          $secondary,
   tertiary:           $tertiary
 );
-/*=====================================
+//=====================================
 
-Background colors ------------------*/
+// Background colors ------------------
 $bg_light:            $silver;
 $bg_dark:             #172257;
 $background_colors: (
@@ -61,7 +61,7 @@ $background_colors: (
   bg_dark:            $bg_dark
 );
 
-/* Card colors ------------------*/
+// Card colors ------------------
 $card_light:          $white;
 $card_dark:           rgba($white, $opacity_1);
 $card_colors: (
@@ -74,15 +74,15 @@ $action_colors: (
   primary_action:            $primary-action
 );
 
-/* Active colors ----------------------*/
+// Active colors ----------------------
 $active_light:        lighten(#E5F2FF, 3.5%);
-$active_dark:         #0082ff;
+$active_dark:         #0082ff; 
 $active_colors: (
   active_light:       $active_light,
   active_dark:        $active_dark
 );
 
-/* Hover colors -----------------------*/
+// Hover colors -----------------------
 $hover_light:         darken($silver, 5%);
 $hover_dark:          rgba($white, $opacity_2);
 $hover_colors: (
@@ -90,7 +90,7 @@ $hover_colors: (
   hover_dark:         $hover_dark
 );
 
-/* Focus colors -----------------------*/
+// Focus colors -----------------------
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
@@ -98,7 +98,7 @@ $focus_input_colors: (
   focus_input_dark:         $focus_input_dark
 );
 
-/* Border colors ----------------------*/
+// Border colors ----------------------
 $border_light:        #E4E8F0;
 $border_dark:         rgba($white, $opacity_1);
 $border_colors: (
@@ -106,13 +106,13 @@ $border_colors: (
   border_dark:        $border_dark
 );
 
-/* Shadow colors ----------------------*/
+// Shadow colors ----------------------
 $shadow:        rgba(#3C6AAC, $opacity_2);
 $shadow_colors: (
   shadow:       $shadow,
 );
 
-/* Text colors ------------------------*/
+// Text colors ------------------------
 $text_lt_default:     $charcoal;
 $text_lt_light:       #919EAB;
 $text_lt_lighter:     $slate;
@@ -128,7 +128,7 @@ $text_colors: (
   text_dk_lighter:    $text_dk_lighter
 );
 
-/* Data colors ------------------------*/
+// Data colors ------------------------
 $data_1:              $royal;
 $data_2:              $yellow;
 $data_3:              $purple;
@@ -148,7 +148,7 @@ $data_colors: (
   data_8:             $data_8
 );
 
-/* Status colors ----------------------*/
+// Status colors ----------------------
 $success:             $green;
 $warning:             $yellow;
 $error:               $red;
@@ -174,10 +174,10 @@ $status_color_text: (
   primary:            $primary
 );
 
-/* Link colors ------------------------*/
+// Link colors ------------------------
 $primary_action:      $primary;
 
-/* Product colors ---------------------*/
+// Product colors ---------------------
 $windows:             $royal;
 $siding:              $yellow;
 $doors:               $teal;
@@ -195,7 +195,7 @@ $product_colors: (
   insulation:         $insulation
 );
 
-/* Category colors ---------------------*/
+// Category colors ---------------------
 $category_1:   $royal;
 $category_2:   #0CD2E5;
 $category_3:   $yellow;
@@ -252,6 +252,7 @@ $transparent: transparent;
 }
 
 :export {
+
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
       #{$name}: $color;

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -2,7 +2,7 @@
 $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
 
 
-/* CLEAN UP AND REMOVE */
+// CLEAN UP AND REMOVE
 $font_jumbo:        36px;
 $font_largest:      32px;
 $font_larger:       28px;
@@ -29,7 +29,7 @@ $text_smaller:      $font_smaller;
 $text_smallest:     $font_smallest;
 
 
-/* Headings */
+// Headings
 $heading_1: 48px;
 $heading_2: 34px;
 $heading_3: $font_larger;
@@ -38,7 +38,7 @@ $heading_4: $font_base;
 
 
 
-/* Letter Spacing */
+// Letter Spacing
 $lspace_tightest:         _.1em;
 $lspace_tighter:          _.07em;
 $lspace_tight:            _.03em;
@@ -52,11 +52,11 @@ $lspace_super_loosest:    .2em;
 
 
 
-/* Standard Font Weights */
+// Standard Font Weights
 $bold:          600;
 $regular:       400;
 
-/* Non_Standard Font Weights */
+// Non_Standard Font Weights
 $extrabold:     900;
 $boldest:       800;
 $bolder:        700;

data/app/pb_kits/playbook/vendor.js

@@ -19,19 +19,3 @@ PbTypeahead.start()
 
 import PbTable from './pb_table'
 PbTable.start()
-
-// React-Rendered Rails Kits =====
-
-import WebpackerReact from 'webpacker-react'
-
-import BarGraph from './pb_bar_graph/_bar_graph.jsx'
-import DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
-import Legend from './pb_legend/_legend.jsx'
-import LineGraph from './pb_line_graph/_line_graph.jsx'
-
-WebpackerReact.setup({
-  BarGraph,
-  DistributionBar,
-  Legend,
-  LineGraph,
-})