RubyGems - playbook_ui - Versions diffs - 5.5.1 → 6.0.1.pre.alpha5 - Mend

playbook_ui 5.5.1 → 6.0.1.pre.alpha5

Files changed (77) hide show

data/app/pb_kits/playbook/pb_progress_simple/docs/index.js CHANGED

@@ -3,3 +3,5 @@ export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx
 export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
 export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
 export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
+export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb CHANGED

@@ -21,6 +21,9 @@ module Playbook
       # Should we be allowing the user to pass this value at all?
       # could this possibly be [sm, md, lg]?
       prop :width, default: "100%"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default positive negative],
+                     default: "default"
       def number_value
         validate_required_progress_props
@@ -53,7 +56,7 @@ module Playbook
       end
       def classname
-        generate_classname("pb_progress_simple_kit", muted_class, align)
+        generate_classname("pb_progress_simple_kit", muted_class, variant_class, align)
       end
     private
@@ -62,6 +65,10 @@ module Playbook
         muted ? "muted" : nil
       end
+      def variant_class
+        variant == "default" ? nil : variant
+      end
       def validate_required_progress_props
         unless percent || value || max
           raise(

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

@@ -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, 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, 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 }) }) %>
         <% 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, classname:"pb_time_range_inline_dash", text: "—" }) %>
+        <%= 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, 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 CHANGED

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

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

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

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

@@ -53,6 +53,12 @@ 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/pb_title/_title.scss CHANGED

@@ -22,9 +22,8 @@
     @include pb_title_dark;
   }
-  @each $color_name, $color_value in $status_colors {
-    &[class*=_#{$color_name}]  {
-      color: map-get($status_color_text, $color_name);
-    }
+  &[class*=_link]  {
+    color: $primary;
   }
 }

data/app/pb_kits/playbook/pb_title/title.rb CHANGED

@@ -17,8 +17,8 @@ module Playbook
                  default: "h3"
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                    values: [nil, "primary"],
-                    default: nil
+                     values: [nil, "link"],
+                     default: nil
       def classname
         generate_classname("pb_title_kit", size, dark_class, variant)

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

@@ -1,9 +1,45 @@
 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
+}
+// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
+const alignBlockElement = (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)
+  }
+}
 class pbChart {
   defaults = {
     callbackInitializeBefore: () => {},
@@ -30,24 +66,29 @@ 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: (event) => alignBlockElement(event),
+          redraw: (event) => alignBlockElement(event),
+        },
       },
       plotOptions: {
         pie: {
+          colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
           dataLabels: {
             enabled: this.defaults.dataLabels,
             connectorShape: 'straight',
@@ -55,8 +96,10 @@ class pbChart {
             format: this.defaults.dataLabelHtml,
           },
           showInLegend: this.defaults.showInLegend,
         },
       },
       tooltip: {
         headerFormat: this.defaults.headerFormat,
         pointFormat: this.defaults.tooltipHtml,
@@ -65,10 +108,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,
     })

data/lib/playbook/version.rb CHANGED

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "5.5.1"
+  VERSION = "6.0.1.pre.alpha5"
 end

metadata CHANGED

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.5.1
+  version: 6.0.1.pre.alpha5
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-07-24 00:00:00.000000000 Z
+date: 2020-08-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -591,8 +591,11 @@ files:
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
+- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
@@ -826,6 +829,7 @@ files:
 - app/pb_kits/playbook/pb_form/form/simple_form_form.rb
 - app/pb_kits/playbook/pb_form/form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
+- app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
@@ -944,14 +948,6 @@ files:
 - app/pb_kits/playbook/pb_image/docs/example.yml
 - app/pb_kits/playbook/pb_image/docs/index.js
 - app/pb_kits/playbook/pb_image/image.rb
-- app/pb_kits/playbook/pb_installer/_installer.html.erb
-- app/pb_kits/playbook/pb_installer/_installer.jsx
-- app/pb_kits/playbook/pb_installer/_installer.scss
-- app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb
-- app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx
-- app/pb_kits/playbook/pb_installer/docs/example.yml
-- app/pb_kits/playbook/pb_installer/docs/index.js
-- app/pb_kits/playbook/pb_installer/installer.rb
 - app/pb_kits/playbook/pb_kit/base.rb
 - app/pb_kits/playbook/pb_kit/dateTime.js
 - app/pb_kits/playbook/pb_kit/pb_date_time.rb
@@ -976,8 +972,16 @@ files:
 - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.html.erb
 - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx
 - app/pb_kits/playbook/pb_label_value/docs/_label_value_default.md
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.html.erb
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.html.erb
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb
+- app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx
 - app/pb_kits/playbook/pb_label_value/docs/example.yml
-- app/pb_kits/playbook/pb_label_value/docs/index.html.erb
 - app/pb_kits/playbook/pb_label_value/docs/index.js
 - app/pb_kits/playbook/pb_label_value/label_value.rb
 - app/pb_kits/playbook/pb_layout/_body.html.erb
@@ -1094,16 +1098,6 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/docs/example.yml
 - app/pb_kits/playbook/pb_loading_inline/docs/index.js
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
-- app/pb_kits/playbook/pb_logistic/_logistic.html.erb
-- app/pb_kits/playbook/pb_logistic/_logistic.jsx
-- app/pb_kits/playbook/pb_logistic/_logistic.scss
-- app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.html.erb
-- app/pb_kits/playbook/pb_logistic/docs/_logistic_dark.jsx
-- app/pb_kits/playbook/pb_logistic/docs/_logistic_default.html.erb
-- app/pb_kits/playbook/pb_logistic/docs/_logistic_default.jsx
-- app/pb_kits/playbook/pb_logistic/docs/example.yml
-- app/pb_kits/playbook/pb_logistic/docs/index.js
-- app/pb_kits/playbook/pb_logistic/logistic.rb
 - app/pb_kits/playbook/pb_message/_message.html.erb
 - app/pb_kits/playbook/pb_message/_message.jsx
 - app/pb_kits/playbook/pb_message/_message.scss
@@ -1257,6 +1251,9 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.html.erb
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx
+- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb
+- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx
+- app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.html.erb
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx
 - app/pb_kits/playbook/pb_progress_simple/docs/example.yml
@@ -1816,9 +1813,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project:
 rubygems_version: 2.7.3

data/app/pb_kits/playbook/pb_installer/_installer.html.erb DELETED

@@ -1,16 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-    <%= pb_rails("body", props: {color: "light" }) do %>
-      <%= pb_rails("caption", props: { text: "Installer" }) %>
-      <%= pb_rails("icon", props: { icon: "truck", fixed_width: true }) %>
-      <% if object.link %>
-        <%= link_to object.link, class: "pb_installer_kit_links" do %>
-          <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4 }) %>
-        <% end %>
-      <% else %>
-        <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4 }) %>
-      <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_installer/_installer.jsx DELETED

@@ -1,54 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import { Body, Caption, Icon, Title } from '../'
-const renderProjectName = (link, projectName) => {
-  if (link) {
-    return (
-      <a
-          className="pb_installer_kit_links"
-          href={link}
-      >
-        <Title
-            size={4}
-            tag="span"
-            text={projectName}
-        />
-      </a>
-    )
-  }
-  return (
-    <Title
-        size={4}
-        tag="span"
-        text={projectName}
-    />
-  )
-}
-type InstallerProps = {
-  link?: String,
-  projectName: String,
-}
-const Installer = ({
-  link,
-  projectName,
-}: InstallerProps) => (
-  <div className={classnames('pb_installer_kit')}>
-    <Body color="light">
-      <Caption text="Installer" />
-      <Icon
-          fixedwidth
-          icon="truck"
-      />
-      {' '}
-      {renderProjectName(link, projectName)}
-    </Body>
-  </div>
-)
-export default Installer