RubyGems - playbook_ui - Versions diffs - 4.15.1.alpha1 → 4.18.1.pre.alpha1 - Mend

playbook_ui 4.15.1.alpha1 → 4.18.1.pre.alpha1

Files changed (406) hide show

data/app/pb_kits/playbook/pb_card/_card.scss CHANGED

@@ -99,11 +99,6 @@ $pb_card_padding:(
         @include pb_card_header_color($color_value);
       }
     }
-    @each $padding_name, $padding_value in $pb_card_padding {
-      &[class*=_#{$padding_name}] {
-          padding: $padding_value;
-      }
-    }
   }
   [class^=pb_card_body_kit] {
@@ -112,11 +107,6 @@ $pb_card_padding:(
     flex-basis: auto;
     min-height: 1px;
     border: 0;
-    @each $name, $padding_size in $pb_card_padding {
-      &[class*=_#{$name}] {
-        padding: $padding_size;
-      }
-    }
   }
   @each $name, $shadow in $box_shadows {

data/app/pb_kits/playbook/pb_card/card.rb CHANGED

@@ -8,9 +8,6 @@ module Playbook
       partial "pb_card/card"
       prop :selected, type: Playbook::Props::Boolean, default: false
-      prop :padding, type: Playbook::Props::Enum,
-                     values: %w[none xs sm md lg xl],
-                     default: "md"
       prop :shadow, type: Playbook::Props::Enum,
                     values: %w[none deep deeper deepest],
                     default: "none"
@@ -28,8 +25,17 @@ module Playbook
                            dark_class)
       end
+      def body_padding
+        if padding.present?
+           ""
+        else
+          "p_md"
+        end
+      end
     private
       def selected_class
         selected ? "selected" : "deselected"
       end

data/app/pb_kits/playbook/pb_card/card_body.rb CHANGED

@@ -7,12 +7,8 @@ module Playbook
       partial "pb_card/child_kits/card_body"
-      prop :padding, type: Playbook::Props::Enum,
-                     values: %w[none xs sm md lg xl],
-                     default: "md"
       def classname
-        generate_classname("pb_card_body_kit", padding)
+        generate_classname("pb_card_body_kit", padding, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_card/card_header.rb CHANGED

@@ -7,9 +7,6 @@ module Playbook
         partial "pb_card/child_kits/card_header"
-        prop :padding, type: Playbook::Props::Enum,
-                       values: %w[none xs sm md lg xl],
-                       default: "none"
         prop :category_color, type: Playbook::Props::Numeric,
                               default: 1

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb CHANGED

@@ -1,3 +1,4 @@
-<%= pb_rails("card") do %>
+<%= pb_rails("card", props: {
+})  do %>
   Card content
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx CHANGED

@@ -3,6 +3,8 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type CheckboxProps = {
   checked?: Boolean,
@@ -15,27 +17,24 @@ type CheckboxProps = {
   onChange: (Boolean) => void,
 }
-const Checkbox = ({
-  checked = false,
-  dark = false,
-  error = false,
-  name = '',
-  text = '',
-  value = '',
-  children = null,
-  onChange = () => {},
-}: CheckboxProps) => {
-  const bodyClassName = {
-    'pb_checkbox_label': true,
-  }
+const Checkbox = (props: CheckboxProps) => {
+  const {
+    checked = false,
+    dark = false,
+    error = false,
+    name = '',
+    text = '',
+    value = '',
+    children = null,
+    onChange = () => {},
+  } = props
   return (
     <label
-        className={
-        'pb_checkbox_kit' +
+        className={classnames('pb_checkbox_kit' +
         (dark === true ? '_dark' : '') +
-        (error === true ? ' error' : '')
+        (error === true ? ' error' : ''), spacing(props))
       }
     >
       <If condition={children}>
@@ -58,7 +57,7 @@ const Checkbox = ({
         />
       </span>
       <Body
-          className={bodyClassName}
+          className="pb_checkbox_label"
           dark={dark}
           status={error ? 'negative' : null}
       >

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

@@ -0,0 +1,12 @@
+<%= 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_circle_chart/_circle_chart.scss ADDED

@@ -0,0 +1,6 @@
+@import "../pb_caption/caption";
+.pb_circle_chart {
+}

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

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+module Playbook
+  module PbCircleChart
+    class CircleChart
+      include Playbook::Props
+      partial "pb_circle_chart/circle_chart"
+      prop :chart_data, type: Playbook::Props::Array,
+                        default: []
+      prop :style, type: Playbook::Props::Enum,
+                         values: %w[pie],
+                         default: "pie"
+      prop :data_labels, type: Playbook::Props::Boolean, default: false
+      prop :min_point_size, type: Playbook::Props::Numeric
+      prop :max_point_size, type: Playbook::Props::Numeric
+      prop :inner_size, type: Playbook::Props::Enum,
+                              values: %w[sm md lg none],
+                              default: "md"
+      prop :z_min, type: Playbook::Props::Numeric
+      prop :start_angle, type: Playbook::Props::Numeric
+      prop :header_format
+      prop :data_label_html, default: '<div>{point.name}</div>'
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
+      prop :use_html, type: Playbook::Props::Boolean, default: false
+      prop :legend, type: Playbook::Props::Boolean, default: false
+      prop :title, default: ''
+      def chart_type
+        style == "variablepie" ? "variablepie" : "pie"
+      end
+      def chart_data_formatted
+        chart_data.map{ |hash| hash[:y] = hash.delete :value}
+        return chart_data
+      end
+      def inner_size_format
+        case inner_size
+        when "lg"
+          "85%"
+        when "sm"
+          "35%"
+        when "none"
+          "0%"
+        when "md"
+          "50%"
+        end
+      end
+      def chart_options
+        {
+          id: id,
+          chartData: chart_data_formatted,
+          title: title,
+          type: chart_type,
+          showInLegend: legend,
+          dataLabelHtml: data_label_html,
+          dataLabels: data_labels,
+          headerFormat: header_format,
+          tooltipHtml: tooltip_html,
+          useHTML: use_html,
+          minPointSize: min_point_size,
+          maxPointSize: max_point_size,
+          innerSize: inner_size_format,
+          zMin: z_min,
+          startAngle: start_angle,
+        }.to_json.html_safe
+      end
+      def classname
+        generate_classname("pb_circle_chart")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb ADDED

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

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb ADDED

@@ -0,0 +1,136 @@
+<% data_1 = [{
+      name: 'Bugs',
+      value: 8,
+    },
+    {
+      name: 'Chores',
+      value: 1,
+    },
+    {
+      name: 'Stories',
+      value: 12,
+    }
+  ] %>
+  <% data_2 = [{
+      name: 'Queued',
+      value: 7,
+    },
+    {
+      name: 'In Progress',
+      value: 6,
+    },
+    {
+      name: 'Validation',
+      value: 3,
+    },
+    {
+      name: 'Done',
+      value: 6,
+    },
+  ] %>
+<% data_3 = [{
+      name: '1 Point Tickets',
+      value: 2,
+    },
+    {
+      name: '3 Point Tickets',
+      value: 5,
+    },
+    {
+      name: '5 Point Tickets',
+      value: 6,
+    },
+    {
+      name: '8 Point Tickets',
+      value: 3,
+    },
+    {
+      name: '13 Point Tickets',
+      value: 1,
+    },
+  ] %>
+  <% data_4 = [{
+      name: 'Facebook',
+      value: 2498,
+    },
+    {
+      name: 'YouTube',
+      value: 2000,
+    },
+    {
+      name: 'WhatsApp',
+      value: 2000,
+    },
+    {
+      name: 'Facebook Messenger',
+      value: 1300,
+    },
+    {
+      name: 'WeChat',
+      value: 1165,
+    },
+    {
+      name: 'Instagram',
+      value: 1000,
+    },
+    {
+      name: 'Tik Tok',
+      value: 800,
+    },
+  ] %>
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_1,
+        id: "size-test-1",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "sm",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_2,
+        id: "size-test-2",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "md",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_3,
+        id: "size-test-3",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "lg",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>
+    <%= pb_rails("circle_chart", props: {
+        chart_data: data_4,
+        id: "size-test-4",
+        min_point_size: 2,
+        max_point_size: 200,
+        inner_size: "none",
+        z_min: 0,
+        start_angle: 0,
+        header_format: '',
+    }) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb ADDED

@@ -0,0 +1,37 @@
+ <% data = [{
+      name: 'Facebook',
+      value: 2498,
+    },
+    {
+      name: 'YouTube',
+      value: 2000,
+    },
+    {
+      name: 'WhatsApp',
+      value: 2000,
+    },
+    {
+      name: 'Facebook Messenger',
+      value: 1300,
+    },
+    {
+      name: 'WeChat',
+      value: 1165,
+    },
+    {
+      name: 'Instagram',
+      value: 1000,
+    },
+    {
+      name: 'Tik Tok',
+      value: 800,
+    },
+  ] %>
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data,
+    id: "with-labels-example",
+    data_labels: true
+}) %>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb ADDED

@@ -0,0 +1,22 @@
+<% data_1 = [{
+      name: 'Bugs',
+      value: 8,
+    },
+    {
+      name: 'Chores',
+      value: 1,
+    },
+    {
+      name: 'Stories',
+      value: 12,
+    }
+  ] %>
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_1,
+    legend: true,
+    id: "with-legend-example",
+}) %>