playbook_ui 9.10.0 → 9.14.1

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb

@@ -0,0 +1,17 @@
+
+<div>
+  <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" } }) do%>
+    <%= pb_rails("icon", props: { icon: "home"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Home", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: 'users'}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/users" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Users", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: "user"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+      <%= pb_rails("title", props: { size: 4, text: "User", tag: "span" }) %>
+     <%end%>
+    <%end%>
+</div>

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import BreadCrumbs from '../_bread_crumbs.jsx'
+import { Icon, Title } from '../../'
+import BreadCrumbItem from '../_bread_crumb_item'
+
+const Link = (props) => <BreadCrumbItem {...props} />
+const BreadCrumbsDefault = (props) => {
+  return (
+    <BreadCrumbs
+        text="+1"
+        {...props}
+    >
+      <Icon
+          icon="home"
+          size="1x"
+      />
+      <BreadCrumbItem
+          {...props}
+          href="/home"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Home"
+        />
+      </BreadCrumbItem>
+      <Icon
+          icon="users"
+          size="1x"
+      />
+      <Link
+          {...props}
+          href="/users"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Users"
+        />
+      </Link>
+      <Icon
+          icon="user"
+          size="1x"
+      />
+      <Link {...props}>
+        <Title
+            size="4"
+            tag="span"
+            text="User"
+        />
+      </Link>
+    </BreadCrumbs>
+  )
+}
+
+export default BreadCrumbsDefault

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md

@@ -0,0 +1 @@
+BreadCrumbs can be used for keeping a user aware of there route location.

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

@@ -0,0 +1,7 @@
+examples:
+  rails:
+  - bread_crumbs_default: Default
+ 
+  react:
+  - bread_crumbs_default: Default
+ 

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

@@ -0,0 +1 @@
+export { default as BreadCrumbsDefault } from './_bread_crumbs_default.jsx'

data/app/pb_kits/playbook/pb_button/button.rb

@@ -36,7 +36,7 @@ module Playbook
         options.merge(
           href: link,
           role: "link",
-          target: new_window ? "_blank" : "_self",
+          target: new_window ? "_blank" : "_self"
         )
       end
 

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

@@ -6,37 +6,36 @@ module Playbook
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :style, type: Playbook::Props::Enum,
-                         values: %w[pie],
-                         default: "pie"
+                   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"
+                        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 :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: ''
+      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"
       end
 
       def chart_data_formatted
-        chart_data.map{ |hash| hash[:y] = hash.delete :value}
-        return chart_data
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
       end
 
       def inner_size_format
@@ -57,7 +56,7 @@ module Playbook
       end
 
       def rounded_border_color
-        rounded == true ? 'null' : nil
+        rounded == true ? "null" : nil
       end
 
       def chart_options

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

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Playbook
   module PbCircleIconButton
     class CircleIconButton < Playbook::KitBase
@@ -8,11 +10,11 @@ module Playbook
                      values: %w[primary secondary link],
                      default: "primary"
       prop :disabled, type: Playbook::Props::Boolean,
-                     default: false
+                      default: false
       prop :icon, required: true
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
-                     default: false
+                        default: false
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,6 +25,8 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
+  inputOnChange?: (String) => void,
+  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
+    inputOnChange,
+    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -114,7 +118,6 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
-      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -126,7 +129,9 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
+            onChange={inputOnChange}
             placeholder={placeholder}
+            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -166,6 +166,9 @@ const datePickerHelper = (config) => {
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }
+
+  // Fix event bubbling bug on wrapper
+  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
 }
 
 export default datePickerHelper

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -9,6 +9,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",
+  bold?: boolean,
   className?: string | array<string>,
   dark?: boolean,
   data?: string,
@@ -26,6 +27,7 @@ const sizes = {
 const DateStacked = (props: DateStackedProps) => {
   const {
     align = 'left',
+    bold = false,
     reverse = false,
     className,
     dark = false,
@@ -46,19 +48,51 @@ const DateStacked = (props: DateStackedProps) => {
   const inputYear = dateTimestamp.toYear().toString()
 
   return (
-    <div className={classes}>
-      <div className="pb_date_stacked_day_month">
-        <Caption text={dateTimestamp.toMonth().toUpperCase()} />
-        <Title
-            dark={dark}
-            size={sizes[size]}
-            text={dateTimestamp.toDay()}
-        />
-      </div>
-      <If condition={currentYear != inputYear}>
-        <Caption size="xs">{inputYear}</Caption>
+
+    <div>
+      <If condition={bold == false}>
+
+        <div className={classes}>
+          <div className="pb_date_stacked_day_month">
+            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Title
+                dark={dark}
+                size={sizes[size]}
+                text={dateTimestamp.toDay()}
+            />
+          </div>
+          <If condition={currentYear != inputYear}>
+            <Caption size="xs">{inputYear}</Caption>
+          </If>
+        </div>
+        <Else />
+        <>
+          <div className={classes}>
+            <div className="pb_date_stacked_day_month">
+
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={dateTimestamp.toMonth()}
+              />
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={dateTimestamp.toDay()}
+              />
+              <If condition={currentYear != inputYear}>
+                <Title size="4">{inputYear}</Title>
+              </If>
+            </div>
+
+          </div>
+
+        </>
       </If>
     </div>
+
   )
 }
 

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -3,11 +3,22 @@
     data: object.data,
     class: object.classname) do %>
 
-    <div class="pb_date_stacked_day_month">
-      <%= pb_rails("caption", props: { text: object.month }) %>
-      <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %>
-      <% end %>
-    </div>
-    <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
+    <% if object.bold == false %>
+
+      <div class="pb_date_stacked_day_month">
+        <%= pb_rails("caption", props: { text: object.month }) %>
+        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
+        <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
+      </div>
+
+    <% else %>
+      <div class="pb_date_stacked_day_month">
+        <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
+        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
+        <%= pb_rails("title", props: { text: object.year, size:4 }) %>
+
+      </div>
+
+    <% end %>
 
 <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -5,36 +5,35 @@ module Playbook
     class DateStacked < Playbook::KitBase
       prop :date, type: Playbook::Props::Date, required: true
       prop :align, type: Playbook::Props::Enum,
-                  values: %w[left center right],
-                  default: "left"
+                   values: %w[left center right],
+                   default: "left"
       prop :size, type: Playbook::Props::Enum,
                   values: %w[sm md],
                   default: "sm"
       prop :reverse, type: Playbook::Props::Boolean,
-                  default: false
+                     default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :bold, type: Playbook::Props::Boolean,
+                  default: false
 
       def classname
-        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
+        generate_classname("pb_date_stacked_kit", align, size, bold, reverse_class, dark_class)
       end
 
       def title_size
-        size == "md" ? 3: 4
+        size == "md" ? 3 : 4
       end
 
       def day
         day = Playbook::PbKit::PbDateTime.new(date)
         content_tag(:time, datetime: day.to_iso) do
-          "#{day.to_day}"
+          day.to_day.to_s
         end
       end
 
       def month
-        month = Playbook::PbKit::PbDateTime.new(date)
-        content_tag(:time, datetime: month.to_iso) do
-          "#{month.to_month}"
-        end
+        pb_date_time.to_month.capitalize
       end
 
       def year
@@ -42,14 +41,21 @@ module Playbook
         year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
         if current_year != year
           content_tag(:time, datetime: year) do
-            "#{year}"
+            year.to_s
           end
-        else
         end
       end
 
+      def bold_class
+        bold ? "bold" : nil
+      end
+
     private
 
+      def pb_date_time
+        Playbook::PbKit::PbDateTime.new(date)
+      end
+
       def reverse_class
         reverse ? "reverse" : nil
       end
@@ -57,7 +63,6 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
-
     end
   end
 end

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
+<br>
+<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
+
+const DateStackedBold = (props) => {
+  return (
+    <div>
+      <DateStacked
+          align="left"
+          bold
+          date={new Date()}
+          {...props}
+      />
+
+      <br />
+
+      <DateStacked
+          align="center"
+          bold
+          date={new Date('20 Mar 2018')}
+          {...props}
+      />
+
+      <br />
+
+      <DateStacked
+          align="right"
+          bold
+          date={new Date()}
+          {...props}
+      />
+
+      <br />
+
+    </div>
+  )
+}
+
+export default DateStackedBold