playbook_ui 5.5.1.pre.alpha4 → 6.0.1.pre.alpha4

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

@@ -2,9 +2,18 @@ examples:
   
   rails:
   - label_value_default: Default
+  - label_value_details: Details
+  - label_value_details_examples: Other Examples
   - label_value_dark: Dark
+  - label_value_details_dark: Details Dark
+  - label_value_details_examples_dark: Other Examples Dark
   
   
   react:
   - label_value_default: Default
+  - label_value_details: Details
+  - label_value_details_examples: Other Examples
   - label_value_dark: Dark
+  - label_value_details_dark: Details Dark
+  - label_value_details_examples_dark: Other Examples Dark
+

data/app/pb_kits/playbook/pb_label_value/docs/index.js

@@ -1,2 +1,7 @@
 export { default as LabelValueDefault } from './_label_value_default.jsx'
+export { default as LabelValueDetails } from './_label_value_details.jsx'
+export { default as LabelValueDetailsExamples } from './_label_value_details_examples.jsx'
+
 export { default as LabelValueDark } from './_label_value_dark.jsx'
+export { default as LabelValueDetailsDark } from './_label_value_details_dark.jsx'
+export { default as LabelValueDetailsExamplesDark } from './_label_value_details_examples_dark.jsx'

data/app/pb_kits/playbook/pb_label_value/label_value.rb

@@ -8,11 +8,24 @@ module Playbook
       partial "pb_label_value/label_value"
 
       prop :label, required: true
-      prop :value, required: true
+      prop :value
       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default details],
+                     default: "default"
+      prop :icon
+      prop :description
+      prop :title
+      prop :date
+      prop :active, type: Playbook::Props::Boolean, default: false
+
 
       def classname
-        generate_classname("pb_label_value_kit", dark_class)
+        generate_classname("pb_label_value_kit", variant_class, dark_class)
+      end
+
+      def date_element
+        "· #{date.strftime('%m/%d')}".html_safe
       end
 
     private
@@ -20,6 +33,10 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
+      def variant_class
+        variant == "details" ? "details" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -14,6 +14,7 @@ type ProgressSimpleProps = {
   muted: Boolean,
   percent: String,
   value: Number,
+  variant?: "default" | "positive" | "negative",
   width: String,
 }
 
@@ -26,12 +27,15 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
     muted = false,
     percent = '',
     value,
+    variant = 'default',
     width = '100%',
   } = props
   const styles = {
     width: width,
   }
 
+  const variantStyle = variant == 'default' ? '' : variant
+
   const valueStyles = {
     width: percent ? `${percent}%` : `${(value * 100) / max}%`,
   }
@@ -44,7 +48,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
 
   const kitClass = classnames(
     className,
-    buildCss('pb_progress_simple_kit', align, { muted: muted })
+    buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
   )
 
   return (

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
+@import "../tokens/colors";
 
 $pb_progress_simple_height: 4px;
 
@@ -22,8 +23,18 @@ $pb_progress_simple_height: 4px;
   height: $pb_progress_simple_height;
   border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
+    &[class*=_positive] {
+      .progress_simple_value {
+        background: $success;
+      }
+    }
+    &[class*=_negative] {
+      .progress_simple_value {
+        background: $error;
+      }
+    }
 
-  .progress_simple_value {
+  [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
     border-radius: $pb_progress_simple_height/2;

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("progress_simple", props: { percent: 64.9, variant: "default" }) %>
+
+<br>
+
+<%= pb_rails("progress_simple", props: { percent: 90, variant: "positive" }) %>
+
+<br>
+
+<%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { ProgressSimple } from '../..'
+
+const ProgressSimpleVariants = () => {
+  return (
+    <div>
+      <ProgressSimple percent={64.5} />
+
+      <br />
+
+      <ProgressSimple
+          percent={90}
+          variant="positive"
+      />
+
+      <br />
+
+      <ProgressSimple
+          percent={10}
+          variant="negative"
+      />
+    </div>
+  )
+}
+
+export default ProgressSimpleVariants

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md

@@ -0,0 +1 @@
+Progress Simple can pass colors - primary, green and red. Variants names are `default`, `positive`, and `negative` respectively.

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

@@ -4,6 +4,7 @@ examples:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
   - progress_simple_width: Progress Bar Width
+  - progress_simple_variants: Variants
   - progress_simple_muted: Muted
   - progress_simple_align: Align
 
@@ -12,6 +13,7 @@ examples:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
   - progress_simple_width: Progress Bar Width
+  - progress_simple_variants: Variants
   - progress_simple_muted: Muted
   - progress_simple_align: Align
 

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -29,6 +29,17 @@ const mapColors = (array) => {
   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: () => {},
@@ -70,25 +81,8 @@ class pbChart {
       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)
-            }
-          },
+          render: (event) => alignBlockElement(event),
+          redraw: (event) => alignBlockElement(event),
         },
       },
 

data/app/pb_kits/playbook/vendor.js

@@ -5,6 +5,10 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
 
+// Date Picker
+import datePickerHelper from './pb_date_picker/date_picker_helper.js'
+window.datePickerHelper = datePickerHelper
+
 // Lazy image loading
 import 'lazysizes'
 
@@ -19,3 +23,5 @@ PbTypeahead.start()
 
 import PbTable from './pb_table'
 PbTable.start()
+
+import 'flatpickr'

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.5.1.pre.alpha4
+  version: 6.0.1.pre.alpha4
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-30 00:00:00.000000000 Z
+date: 2020-08-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -665,6 +665,29 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
+- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
+- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
+- app/pb_kits/playbook/pb_date_picker/date_picker.rb
+- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/example.yml
+- app/pb_kits/playbook/pb_date_picker/docs/index.js
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -830,6 +853,7 @@ files:
 - 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/collection_select_field.rb
+- app/pb_kits/playbook/pb_form/form_builder/date_picker_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
 - app/pb_kits/playbook/pb_form/form_builder/select_field.rb
@@ -947,14 +971,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
@@ -979,8 +995,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
@@ -1097,16 +1121,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
@@ -1260,6 +1274,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