playbook_ui 5.5.1 → 6.0.1.pre.alpha5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7f4ee46775d0d56664c1a9aca3fe5524b0956af82b1067d79104529064855fae
-  data.tar.gz: 0e36fa5454385af4d344c9cde205c4f9392695f0dbb6e3721eb4447b90871fcd
+  metadata.gz: 3758eaffd739857c6d3a7b4f9abb12ab11ea815d798c17f2bbb3a6e6c0f0a6dd
+  data.tar.gz: 8b3904ea1cf701bfc759d3d18b3a822530bb25ebf9a30f73ca70f813415e2c10
 SHA512:
-  metadata.gz: c490cc3202290171c33bff9a68062bf888f0110c02189550eaeafa1f9b3f9e07c3e04ae9bad665aa78095cd5f8f8a9b2564b4dabb0d6b549b0ad11bd12d0c587
-  data.tar.gz: 5ca5802c390a462833194cb94aaaeaf7dccd10e72174a1abc826b17f19b7c028dab3bb0c7c23c2038e458574f942f826e37a1b742949c376135723196309b565
+  metadata.gz: 9a9ea53ae1f6d6bb8af300e24828775554c77bb58a43612fc4faa0d00a48325ed8b6d74cae83e449207861051601e5d0926f98a03f317b89d917c574e563e85a
+  data.tar.gz: e3dcec185a93b6a9bb803cde9ec24f55b388e33d74e37d8da26d9fe606b4f3ab83b98294c17560747cd785eac9eff00729d20021446aeb88ad25e04909ce5d7d

data/app/pb_kits/playbook/_playbook.scss

@@ -33,7 +33,6 @@
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
-@import 'pb_installer/installer';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
@@ -41,7 +40,6 @@
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
-@import 'pb_logistic/logistic';
 @import 'pb_message/message';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';

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

@@ -42,11 +42,9 @@ kits:
   - icon_circle
   - icon_value
   - image
-  - installer
   - layout
   - list
   - loading_inline
-  - logistic
   - multiple_users
   - multiple_users_stacked
   - nav

data/app/pb_kits/playbook/index.js

@@ -40,7 +40,6 @@ export LineGraph from './pb_line_graph/_line_graph.jsx'
 export List from './pb_list/_list.jsx'
 export ListItem from './pb_list/_list_item.jsx'
 export LoadingInline from './pb_loading_inline/_loading_inline.jsx'
-export Logistic from './pb_logistic/_logistic.jsx'
 export Message from './pb_message/_message.jsx'
 export MultipleUsers from './pb_multiple_users/_multiple_users.jsx'
 export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked.jsx'

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

@@ -45,7 +45,6 @@ import * as Icon from 'pb_icon/docs'
 import * as IconCircle from 'pb_icon_circle/docs'
 import * as IconValue from 'pb_icon_value/docs'
 import * as Image from 'pb_image/docs'
-import * as Installer from 'pb_installer/docs'
 import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
@@ -53,7 +52,6 @@ import * as Legend from 'pb_legend/docs'
 import * as LineGraph from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
-import * as Logistic from 'pb_logistic/docs'
 import * as Message from 'pb_message/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
@@ -125,7 +123,6 @@ WebpackerReact.setup({
   ...IconCircle,
   ...IconValue,
   ...Image,
-  ...Installer,
   ...LabelPill,
   ...LabelValue,
   ...Layout,
@@ -133,7 +130,6 @@ WebpackerReact.setup({
   ...LineGraph,
   ...List,
   ...LoadingInline,
-  ...Logistic,
   ...Message,
   ...MultipleUsers,
   ...MultipleUsersStacked,

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

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

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -18,6 +18,9 @@ module Playbook
       prop :value
       prop :name
 
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+
       def checked_html
         checked ? "checked='true'" : nil
       end

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

@@ -28,8 +28,12 @@
     ]
   %>
   <%= 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.text_field :example_text_field, props: { label: true } %>
+    <%# <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+    <%= pb_rails("caption", props: { text: "Status", margin_bottom: "sm" }) %>
+    <%= form.check_box :example_checkbox, props: { text: "Delivered", margin_right: "md" } %>
+    <%= form.check_box :example_checkbox, props: { text: "Unsubscribed", margin_right: "md" } %>
+    <%= form.check_box :example_checkbox, props: { text: "Failed", margin_right: "md" } %>
 
     <%= 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,6 +24,7 @@
   <%= 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.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true, value: "test-val" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -27,6 +27,7 @@
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_checkbox_field
 
 
     def self.model_name
@@ -49,6 +50,7 @@
   <%= 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.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_checkbox_field
 
 
     def self.model_name
@@ -49,6 +50,7 @@
   <%= form.input :example_text_area, {as: :text, input_html: {props: {required: true}}} %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
+  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,9 +14,11 @@ module Playbook
         prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
+        # prepend(FormFieldBuilder.new(:check_box, kit_name: "checkbox"))
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
+        prepend(CheckboxField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      module CheckboxField
+        def check_box(name, data: {}, props: {})
+          value = props[:value] ||= 1
+          input = super(name, { required: props[:required], data: data }, value)
+          label_text = name.to_s.gsub("_", " ")
+
+          if props[:label]
+            @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +
+              @template.pb_rails("checkbox", props: props) do
+                input
+              end
+          else
+            @template.pb_rails("checkbox", props: props) do
+              input
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -12,6 +12,7 @@ module Playbook
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
+            options[:value] = props[:value]
 
             if props.key?(:validation)
               validation = props[:validation]

data/app/pb_kits/playbook/pb_image/_image.html.erb

@@ -3,4 +3,5 @@
     data: object.data.merge(src: object.url),
     class: object.classname,
     aria: object.aria,
-    alt: object.alt) %>
+    src: object.url,
+    alt: object.alt) %>

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -2,21 +2,44 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type ImageProps = {
-  url: string,
-  alt?: string,
+  alt?: String,
+  aria?: object,
+  className?: String,
+  data?: object,
+  id?: String,
+  url: String,
 }
 
 const Image = (props: ImageProps) => {
-  const { alt = '', url = '' } = props
+  const {
+    alt = '',
+    aria = {},
+    className,
+    data = {},
+    id,
+    url = '',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, spacing(props))
+  const dataProps = buildDataProps(data)
+
   return (
-    <img
-        alt={alt}
-        className={classnames('pb_image_kit lazyload blur_up', spacing(props))}
-        data-src={url}
-    />
+    <div>
+      <img
+          {...ariaProps}
+          {...dataProps}
+          alt={alt}
+          className={classes}
+          data-src={url}
+          id={id}
+          src={url}
+      />
+    </div>
   )
 }