playbook_ui 5.5.1.pre.alpha3 → 5.5.1.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31dff4bfa638b81a994e4ceac1efcab5d6125f9978a00355de496dce4f0353e8
-  data.tar.gz: 3e600ee35141d5a5338b8944c76caf17e437556703348c29a45a156ca99848b3
+  metadata.gz: 18201295f38354edf0963e8a536728d406ba695521666e46bb8d9db0b1a51dac
+  data.tar.gz: '09be62b41d9777ac1f6269ce77a0955f06921ef8b4e1abdde30b9bfaee1dd435'
 SHA512:
-  metadata.gz: 1552e2015fb8dc9bfd47105e6e4fd8999cf7464b39b1cbfb03f799516a0e57431086343f666b8e2ab006805de9bbaa28c9e5dcab739e2e1bb9b3b9f5617cd058
-  data.tar.gz: c6fa49ddef9e87c9f59cc6e681337188ec22907dea394bdd4dc82edfed29f7a3505de4c71656df879d76c62875072955148ae1906f95e96b15cdf09792b1bb60
+  metadata.gz: 281294533bb71d290eba1a93ab8dbe820074e727eb3c468383cadbcbd19be223056c537717fa4be2b090a70a197a9fdf2ae55a9366d19039c34a3446e0540101
+  data.tar.gz: ebfbddf2c64330f83ffd3c6eb949b8b745a1a4740431d6fcf93734bb6b63721131978ab6f45ceb78d6d927e89823be642255387e1fa4a479ea554c26f46aadef

data/app/pb_kits/playbook/_playbook.scss

@@ -14,7 +14,6 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
-@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

data/app/pb_kits/playbook/data/menu.yml

@@ -24,7 +24,6 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
-    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -13,7 +13,6 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
-export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -91,7 +90,6 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
-export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/examples.js

@@ -27,7 +27,6 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
-import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -108,7 +107,6 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
-  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -72,7 +72,6 @@ const Button = (props: ButtonPropTypes) => {
   const {
     children,
     className,
-    disabled,
     icon = null,
     id,
     loading = false,
@@ -121,7 +120,6 @@ const Button = (props: ButtonPropTypes) => {
       <button
           {...buttonAria}
           className={css}
-          disabled={disabled}
           id={id}
           onClick={onClick}
           type={htmlType}

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb

@@ -1,12 +1,22 @@
-<%= 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 %>)
-    })
+<div id="wrapper-circle-chart-<%= object.id %>">
+  <%= content_tag(:div, "",
+      aria: object.aria,
+      id: object.id,
+      data: object.data,
+      class: object.classname) do %>
+    <% content_for :pb_js do %>
+      <%= javascript_tag do %>
+        window.addEventListener('DOMContentLoaded', function() {
+          new pbChart('.selector', <%= object.chart_options %>)
+      
+        });
+      <% end %>
+    <% end %>
   <% end %>
-<% end %>
+
+  <% if object.children %>
+    <div class="pb_circle_chart_block">
+      <%= capture(&object.children) %>
+    </div>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss

@@ -4,3 +4,13 @@
 .pb_circle_chart {
 
 }
+
+.pb_circle_chart_block {
+    position:absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    text-align: center;
+    pointer-events: none;
+}

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -29,6 +29,10 @@ module Playbook
       prop :use_html, type: Playbook::Props::Boolean, default: false
       prop :legend, type: Playbook::Props::Boolean, default: false
       prop :title, default: ''
+      prop :rounded, type: Playbook::Props::Boolean, default: false
+      prop :colors, type: Playbook::Props::Array,
+                    default: []
+
 
       def chart_type
         style == "variablepie" ? "variablepie" : "pie"
@@ -50,12 +54,22 @@ module Playbook
         when "md"
           "50%"
         end
+      end
+
+      def rounded_border_width
+        rounded ? 20 : nil
+      end
 
+      def rounded_border_color
+        rounded == true ? 'null' : nil
       end
 
       def chart_options
         {
           id: id,
+          colors: colors,
+          borderColor: rounded_border_color,
+          borderWidth: rounded_border_width,
           chartData: chart_data_formatted,
           title: title,
           type: chart_type,

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb

@@ -0,0 +1,26 @@
+<% data_51 = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+<br><br>
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_51,
+    id: "with-a-block-2",
+    rounded: true,
+}) do %> 
+    <%= pb_rails('title', props: {text: "83", size: 1, tag: 'div'}) %>
+<% end %>
+
+
+

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb

@@ -0,0 +1,20 @@
+<% data_set = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_set,
+    id: "default-test-colors",
+    colors: ['data-6', 'data-4', 'data-2']
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb

@@ -0,0 +1,22 @@
+<% data_rounded = [{
+    name: 'Waiting for Calls',
+    value: 20,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+
+<%= pb_rails("circle_chart", props: {
+    chart_data: data_rounded,
+    id: "default-test-rounded",
+    inner_size: "lg",
+    rounded: true,
+
+}) %>

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

@@ -2,8 +2,12 @@ examples:
 
   rails:
   - circle_chart_default: Default Style
+  - circle_chart_rounded: Rounded Corners
+  - circle_chart_block: Accepts Any Block
+  - circle_chart_colors: Color Overrides
   - circle_chart_with_labels: Data Labels
   - circle_chart_with_legend_kit: Legend
   - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options
+  - circle_chart_inner_sizes: Inner Circle Size Options  
+
 

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -30,7 +30,6 @@
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-    <%= form.date_picker :example_date_picker %>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,7 +24,6 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.date_picker :example_date_picker, props: { picker_id: 'date-picker', default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -13,8 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_date_picker
+    :example_collection_select_field
 
 
     def self.model_name
@@ -50,7 +49,6 @@
   <%= form.input :example_text_area, as: :text %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
-  <%= form.date_picker :example_date_picker, props: { picker_id: 'date-picker', default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -17,7 +17,6 @@ module Playbook
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
-        prepend(DatePickerField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.html.erb

@@ -4,10 +4,10 @@
     class: object.classname) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
-          <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
+          <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
         <% end %>
         <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.format_start_time_string }) %>
-        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, classname:"pb_time_range_inline_arrow", text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, classname:"pb_time_range_inline_arrow"}) }) %>
+        <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, classname:"pb_time_range_inline_dash", text: "—" }) %>
         <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.format_end_time_string }) %>
         <% if object.timezone == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -45,33 +45,19 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
     startTime,
     endTime,
   } = props
-  const separator = (
-    <Body color="light">
-      <Icon
-          className="pb_time_range_inline_arrow"
-          dark={dark}
-          fixedWidth
-          icon="long-arrow-right"
-      />
-    </Body>
-  )
+  const separator = `${'—'}`
 
   const iconContent = () => {
     return (
       <If condition={icon}>
-        <Body
-            color="light"
+        <Icon
+            className="pb_time_range_inline_icon"
+            dark={dark}
+            fixedWidth
+            icon="clock"
+            size={size}
             tag="span"
-        >
-          <Icon
-              className="pb_time_range_inline_icon"
-              dark={dark}
-              fixedWidth
-              icon="clock"
-              size={size}
-              tag="span"
-          />
-        </Body>
+        />
       </If>
     )
   }
@@ -94,7 +80,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
             </time>
           </Caption>
           <Caption
-              className="pb_time_range_inline_arrow"
+              className="pb_time_range_inline_dash"
               dark={dark}
               tag="span"
           >
@@ -133,7 +119,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
             </time>
           </Body>
           <Body
-              className="pb_time_range_inline_arrow"
+              className="pb_time_range_inline_dash"
               dark={dark}
               tag="span"
           >

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,4 +1,3 @@
-
 [class^=pb_time_range_inline_kit] {
   &[class*=_center]  {
     & > [class^=pb_caption],
@@ -20,8 +19,7 @@
   }
   [class^=pb_time_range_inline_wrapper] {
     display: flex;
-    align-items: center;
-    [class*=pb_time_range_inline_arrow] {
+    [class*=pb_time_range_inline_dash] {
       margin-left: 4px;
       margin-right: 4px;
     }

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb

@@ -53,12 +53,6 @@ module Playbook
         nil
       end
 
-      def icon_color
-        return "light" if size == "sm"
-
-        nil
-      end
-
       def text_kit
         case size
         when "xs"

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,9 +1,34 @@
 import Highcharts from 'highcharts'
 
 import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme.js'
+import colors from '../tokens/_colors.scss'
 
 require('highcharts/modules/variable-pie')(Highcharts)
 
+// Map Data Color String Props to our SCSS Variables
+const mapColors = (array) => {
+  const newArray = array.map((item) => {
+    return item == 'data-1'
+      ? `${colors.data_1}`
+      : item == 'data-2'
+        ? `${colors.data_2}`
+        : item == 'data-3'
+          ? `${colors.data_3}`
+          : item == 'data-4'
+            ? `${colors.data_4}`
+            : item == 'data-5'
+              ? `${colors.data_5}`
+              : item == 'data-6'
+                ? `${colors.data_6}`
+                : item == 'data-7'
+                  ? `${colors.data_7}`
+                  : item == 'data-8'
+                    ? `${colors.data_8}`
+                    : ''
+  })
+  return newArray
+}
+
 class pbChart {
   defaults = {
     callbackInitializeBefore: () => {},
@@ -30,24 +55,46 @@ class pbChart {
     this.settings = this.extendDefaults(this.defaults, options)
 
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
-      this.setupPieChart()
+      this.setupPieChart(options)
     } else {
       this.setupChart()
     }
   }
 
-  setupPieChart() {
+  setupPieChart(options) {
     Highcharts.setOptions(highchartsTheme)
-
     Highcharts.chart(this.defaults.id, {
       title: {
         text: this.defaults.title,
       },
       chart: {
         type: this.defaults.type,
+        events: {
+          render: function(event) {
+            const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
+            const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
+            if (itemToMove !== null) {
+              itemToMove.style.height = `${event.target.chartHeight}px`
+              itemToMove.style.width = `${event.target.chartWidth}px`;
+              (chartContainer.firstChild).before(itemToMove)
+            }
+          },
+
+          redraw: function(event){
+            const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
+            const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
+            if (itemToMove !== null) {
+              itemToMove.style.height = `${event.target.chartHeight}px`
+              itemToMove.style.width = `${event.target.chartWidth}px`;
+              (chartContainer.firstChild).before(itemToMove)
+            }
+          },
+        },
       },
+
       plotOptions: {
         pie: {
+          colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
           dataLabels: {
             enabled: this.defaults.dataLabels,
             connectorShape: 'straight',
@@ -55,8 +102,10 @@ class pbChart {
             format: this.defaults.dataLabelHtml,
           },
           showInLegend: this.defaults.showInLegend,
+
         },
       },
+
       tooltip: {
         headerFormat: this.defaults.headerFormat,
         pointFormat: this.defaults.tooltipHtml,
@@ -65,10 +114,12 @@ class pbChart {
       series: [{
         minPointSize: this.defaults.minPointSize,
         maxPointSize: this.defaults.maxPointSize,
-        innerSize: this.defaults.innerSize,
+        innerSize: options.borderWidth == 20 ? '100%' : this.defaults.innerSize,
         data: this.defaults.chartData,
         zMin: this.defaults.zMin,
         startAngle: this.defaults.startAngle,
+        borderWidth: this.defaults.borderWidth,
+        borderColor: options.borderWidth == 20 ? null : this.defaults.innerSize,
       }],
       credits: false,
     })