playbook_ui 4.15.1.alpha1 → 4.16.0

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

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

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

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

@@ -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",
+}) %>

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

@@ -0,0 +1,38 @@
+ <% data_5 = [{
+      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",
+    title: "Active Users on Social Media",
+    chart_data: data_5,
+    id: "with-caption-example",
+}) %>

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

@@ -0,0 +1,9 @@
+examples:
+
+  rails:
+  - circle_chart_default: Default Style
+  - 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
+

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb

@@ -3,7 +3,7 @@
   data: object.data,
   class: object.classname) do %>
 
-  <%= pb_rails("button", props: {type: object.type, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -15,7 +15,9 @@ type CircleIconButtonProps = {
   disabled?: Boolean,
   icon: String,
   id?: String,
+  link?: String,
   onClick?: Callback,
+  newWindow?: Boolean,
   type?: 'button' | 'submit' | 'reset',
   variant?: 'primary' | 'secondary' | 'link',
 }
@@ -27,6 +29,8 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
     icon,
     onClick = noop,
     type,
+    link,
+    newWindow,
     variant,
   } = props
 
@@ -35,6 +39,8 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
       <Button
           dark={dark}
           disabled={disabled}
+          link={link}
+          newWindow={newWindow}
           onClick={onClick}
           text={null}
           type={type}

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -16,7 +16,9 @@ module Playbook
       prop :icon, required: true
       prop :dark, type: Playbook::Props::Boolean,
                      default: false
-
+      prop :link
+      prop :new_window, type: Playbook::Props::Boolean,
+                     default: false
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("circle_icon_button", props: {
+  variant: "primary",
+  icon: "search",
+  link: "https://google.com"
+}) %>
+<%= pb_rails("circle_icon_button", props: {
+  variant: "primary",
+  icon: "window",
+  link: "https://google.com",
+  new_window: true
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { CircleIconButton } from '../../'
+
+const CircleIconButtonLink = () => (
+  <div>
+    <CircleIconButton
+        icon="search"
+        link="https://google.com"
+        variant="primary"
+
+    />
+
+    <br />
+
+    <CircleIconButton
+        icon="window"
+        link="https://google.com"
+        newWindow
+        variant="secondary"
+    />
+
+  </div>
+)
+
+export default CircleIconButtonLink

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

@@ -3,8 +3,10 @@ examples:
   rails:
   - circle_icon_button_default: Default
   - circle_icon_button_dark: Dark
+  - circle_icon_button_link: Link
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
-  - circle_icon_button_dark: Dark
+  - circle_icon_button_dark: Dark
+  - circle_icon_button_link: Link

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

@@ -1,3 +1,4 @@
 export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonDark } from './_circle_icon_button_dark.jsx'
+export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -9,6 +9,7 @@ const contactTypeMap = {
   'cell': 'mobile',
   'home': 'phone',
   'work': 'phone-office',
+  'work-cell': 'phone-laptop',
   'email': 'envelope',
   'wrong number': 'slash-phone',
 }

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -28,6 +28,8 @@ module Playbook
           "phone-office"
         when "email"
           "envelope"
+        when "work-cell"
+          "phone-laptop"
         when "wrong-phone"
           "phone-slash"
         else # "unknown" || "other"

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -16,3 +16,8 @@
   contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "work-cell",
+  contact_value: "349-185-9988",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -19,6 +19,10 @@ const ContactDefault = () => {
           contactType="work"
           contactValue="3245627482"
       />
+      <Contact
+          contactType="work-cell"
+          contactValue="3245627482"
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -14,3 +14,9 @@
   contact_value: "3245627482",
   contact_detail: "Work",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "work-cell",
+  contact_value: "3245627482",
+  contact_detail: "Work-Cell",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -18,6 +18,11 @@ const ContactDefault = () => {
           contactType="work"
           contactValue="3245627482"
       />
+      <Contact
+          contactDetail="Work-Cell"
+          contactType="work-cell"
+          contactValue="3245627482"
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_currency/_currency.html.erb

@@ -3,16 +3,13 @@
     data: object.data,
     class: object.classname) do %>
 
-  <%= object.label_element %>
+  <%= pb_rails("caption", props: { text: object.label }) %>
 
   <div class="pb_currency_wrapper">
-    <%= object.currency_symbol_element %>
-    <%= object.amount_element %>
-    <%= pb_rails("body", props: {
-      text: object.units_element,
-      color: "light",
-      classname: "unit",
-      dark: object.dark
-    }) %>
+    <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+      <%= object.symbol %>
+    <% end %>
+    <%= pb_rails("title", props: object.title_props) %>
+    <%= pb_rails("body", props: object.body_props) %>
   </div>
 <% end %>