playbook_ui 4.7.1 → 4.8.1

data/app/pb_kits/playbook/pb_currency/docs/_currency_small.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("currency", props: {
   label: "Caption",
   amount: "2,000.50",
-  size: "sm",
+  size: "sm",  
 }) %>
 
 <%= pb_rails("currency", props: {

data/app/pb_kits/playbook/pb_currency/docs/{_currency_default.jsx → _currency_small.jsx}

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyDefault = () => {
+const CurrencySmall = () => {
   return (
     <div>
       <Currency
@@ -24,4 +24,4 @@ const CurrencyDefault = () => {
   )
 }
 
-export default CurrencyDefault
+export default CurrencySmall

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

@@ -2,7 +2,11 @@ examples:
 
   rails:
   - currency_small: Small
+  - currency_medium: Medium
   - currency_large: Large
+  - currency_dark: Dark
   react:
-  - currency_default: Small
+  - currency_small: Small
+  - currency_medium: Medium
   - currency_large: Large
+  - currency_dark: Dark

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

@@ -1,2 +1,4 @@
-export { default as CurrencyDefault } from './_currency_default.jsx'
+export { default as CurrencySmall } from './_currency_small.jsx'
 export { default as CurrencyLarge } from './_currency_large.jsx'
+export { default as CurrencyMedium } from './_currency_medium.jsx'
+export { default as CurrencyDark } from './_currency_dark.jsx'

data/app/pb_kits/playbook/pb_filter/_filter.html.erb

@@ -2,5 +2,5 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= render partial: "pb_filter/templates/#{object.template}", locals: {object: object}%>
+    <%= render partial: "pb_filter/templates/default", locals: {object: object}%>
 <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -8,7 +8,7 @@
     {name: "name", value: "John Wick"}
     ],
   sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"des"},
+    {item:"Popularity", link:"#", active: true, direction:"desc"},
     {item:"Title", link:"#", active: false},
     {item:"Name", link:"#", active: false},
   ],

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -0,0 +1,88 @@
+
+<%= pb_rails("filter", props: {
+  id:"3",
+  background: false,
+  filters: [
+    {name: "name", value: "John Wick"}
+    ],
+  sort_menu: [
+    {item:"Popularity", link:"#", active: true, direction:"desc"},
+    {item:"Title", link:"#", active: false},
+    {item:"Name", link:"#", active: false},
+  ],
+  results: 546,
+  template: "single"
+  }) do%>
+  <%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
+<%= 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.actions do |action| %>
+    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<% end %>
+
+<% 2.times do%>
+<br>
+<%end%>
+
+
+<%= pb_rails("filter", props: {
+  id:"4",
+  background: false,
+  filters: [
+    {name: "name", value: "John Wick"}
+    ],
+  sort_menu: [
+    {item:"Popularity", link:"#", active: true, direction:"desc"},
+    {item:"Title", link:"#", active: false},
+    {item:"Name", link:"#", active: false},
+  ],
+  results: 546,
+
+  }) do%>
+  <%
+  example_collection = [
+    OpenStruct.new(name: "Alabama", value: 1),
+    OpenStruct.new(name: "Alaska", value: 2),
+    OpenStruct.new(name: "Arizona", value: 3),
+    OpenStruct.new(name: "Arkansas", value: 4),
+    OpenStruct.new(name: "California", value: 5),
+    OpenStruct.new(name: "Colorado", value: 6),
+    OpenStruct.new(name: "Connecticut", value: 7),
+    OpenStruct.new(name: "Delaware", value: 8),
+    OpenStruct.new(name: "Florida", value: 9),
+    OpenStruct.new(name: "Georgia", value: 10),
+  ]
+%>
+
+<%= 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.actions do |action| %>
+    <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+    <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+  <% end %>
+<% end %>
+
+<% end %>
+

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -8,7 +8,7 @@
     {name: "name", value: "John Wick"}
     ],
   sort_menu: [
-    {item:"Popularity", link:"#", active: true, direction:"des"},
+    {item:"Popularity", link:"#", active: true, direction:"desc"},
     {item:"Title", link:"#", active: false},
     {item:"Name", link:"#", active: false},
   ],

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - filter_default: Default
   - filter_single: Single
+  - filter_no_background: No Background
   
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -13,7 +13,7 @@ module Playbook
       prop :template, type: Playbook::Props::Enum,
                       values: %w[default single],
                       default: "default"
-
+      prop :background, type: Playbook::Props::Boolean, default: true
 
       def classname
         generate_classname("pb_filter_kit")
@@ -23,7 +23,7 @@ module Playbook
         case direction
         when "asc"
           "sort-amount-up"
-        when "des"
+        when "desc"
           "sort-amount-down"
         else
           ""

data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb

@@ -0,0 +1,45 @@
+
+  <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+    <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
+
+    <div class="maskContainer">
+        <div class="filters">
+            <div class="left_gradient"></div>
+                  <% object.filters.each do |filter| %>
+                  <div class="filter">
+                    <%= pb_rails("caption", props: { text: filter[:name]}) %>
+                    <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
+                    </div>
+                  <% end %>   
+            <div class="right_gradient"></div>
+        </div>
+    </div>
+    <% if object.template == "single" %>
+      <%= pb_rails("caption", props: {text: "#{object.results} Results", size:"xs", classname:"filter-results"}) %>  
+      <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}"}) do %>
+        <% object.sort_menu.each do |item| %>
+            <% if item[:active] == true %>
+              <%= item[:item] %>
+              <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+            <%end%>
+            <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% if object.template == "default"%>
+    <%= pb_rails("section_separator") %>
+    <%= pb_rails("flex", props: {orientation: "row", vertical: "center", spacing: "between", classname: "filter-bottom"}) do %>
+      <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
+        <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+          <%= pb_rails("caption", props: { text: "sort by:"}) %>
+          <%= pb_rails("button", props: {variant: "link" ,classname: "p-0 ml-3",id: "sort-button#{object.id}"}) do %>
+          <% object.sort_menu.each do |item| %>
+            <% if item[:active] == true %>
+              <%= item[:item] %>
+              <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
+            <%end%>
+            <% end %>
+          <% end %>
+        <% end %>
+    <% end %>
+  <% end %>

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -1,43 +1,19 @@
-<%= pb_rails("card",props: {padding:"none"}) do%>
-  <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
-    <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter"}) %>
-    <div class="maskContainer">
-      <div class="filters">
-        <div class="left_gradient"></div> <% object.filters.each do |filter| %>
-              <div class="filter">
-                <%= pb_rails("caption", props: { text: filter[:name]}) %>
-                <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
-              </div>
-            <% end %> 
-        <div class="right_gradient"></div>
-      </div>
-    </div>
-  <% end %>
-  <%= pb_rails("section_separator") %>
-  <%= pb_rails("flex", props: {orientation: "row", vertical: "center", spacing: "between", classname: "filter-bottom"}) do %>
-    <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
-      <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
-        <%= pb_rails("caption", props: { text: "sort by:"}) %>
-        <%= pb_rails("button", props: {variant: "link" ,classname: "p-0 ml-3",id: "sort-button"}) do %>
-         <% object.sort_menu.each do |item| %>
-          <% if item[:active] == true %>
-            <%= item[:item] %>
-            <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
-          <%end%>
-          <% end %>
-        <% end %>
-      <% end %>
-  <% end %>
+<% if object.background %>
+  <%= pb_rails("card",props: {padding:"none"}) do%>
+    <%= render partial: 'pb_filter/templates/core', locals: {object: object} %>
+  <% end %> 
+<% else %>
+ <%= render partial: 'pb_filter/templates/core', locals: { object: object} %>
 <% end %>
 
-<%= pb_rails("popover", props: {trigger_element_id: "filter", tooltip_id: "filter-form", position: 'bottom'}) do %>
+<%= pb_rails("popover", props: {trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
   <%= capture(&object.children) %>
 <% end %>
 
-<%= pb_rails("popover", props: { trigger_element_id: "sort-button", tooltip_id: "sort-filter-btn-tooltip", position: 'bottom'}) do %>
-  <%= pb_rails("list") do %>
-    <% object.sort_menu.each do |item| %>
-      <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
-    <% end %> 
-  <% end %>
+<%= pb_rails("popover", props: { trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
+    <%= pb_rails("list") do %>
+      <% object.sort_menu.each do |item| %>
+        <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
+      <% end %> 
+    <% end %>
 <% end %>

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

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

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -6,6 +6,9 @@ import { pbChart } from '../'
 
 type LineGraphProps = {
   axisTitle?: String,
+  xAxisCategories: Array,
+  yAxisMin: Number,
+  yAxisMax: Number,
   className?: String,
   chartData: Array<{
       name: String,
@@ -29,6 +32,9 @@ export default class LineGraph extends React.Component<LineGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      xAxisCategories,
+      yAxisMin,
+      yAxisMax,
       className,
       chartData,
       id,
@@ -46,6 +52,9 @@ export default class LineGraph extends React.Component<LineGraphProps> {
       subtitle: subTitle,
       type,
       title: title,
+      xAxisCategories: xAxisCategories,
+      yAxisMin: yAxisMin,
+      yAxisMax: yAxisMax,
     })
   }
 

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb

@@ -15,4 +15,12 @@
     data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
 }] %>
 
-<%= pb_rails("line_graph", props: { id: "line-test", gradient: false, chart_data: data, point_start: 1, title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>
+<%= pb_rails("line_graph", props: { 
+        id: "line-test", 
+        gradient: false, 
+        chart_data: data, 
+        x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+        title: 'Solar Employment Growth by Sector, 2010-2016', 
+        subtitle: 'Source: thesolarfoundation.com', 
+        axis_title: 'Number of Employees' 
+    }) %>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx

@@ -23,10 +23,11 @@ const LineGraphDefault = () => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
-        id="line-test"
-        pointStart={1}
+        id="bar-test"
         subTitle="Source: thesolarfoundation.com"
         title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -15,7 +15,10 @@ module Playbook
       prop :point_start, type: Playbook::Props::Numeric
       prop :subtitle
       prop :title
-
+      prop :x_axis_categories, type: Playbook::Props::Array,
+                                default:[]
+      prop :y_axis_min, type: Playbook::Props::Numeric
+      prop :y_axis_max, type: Playbook::Props::Numeric
       def chart_type
         gradient ? "area" : "line"
       end
@@ -26,9 +29,12 @@ module Playbook
           chartData: chart_data,
           type: chart_type,
           title: title,
-          subTitle: subtitle,
+          subtitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
+          xAxisCategories: x_axis_categories,
+          yAxisMin: y_axis_min,
+          yAxisMax: y_axis_max,
         }.to_json.html_safe
       end
 

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

@@ -1,21 +1,63 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
+type ProgressSimpleProps = {
+  align?: "left" | "center" | "right",
+  className?: String | Array<String>,
+  dark?: Boolean,
+  data?: String,
+  id?: String,
+  max?: String,
+  muted: Boolean,
+  percent: String,
+  value: Number,
+  width: String
 }
 
-class ProgressSimple extends React.Component {
-  render() {
-    return (
-      <div className="pb_progress_simple">
-        <span>{'PROGRESS SIMPLE CONTENT'}</span>
-      </div>
-    )
+const ProgressSimple = ({
+  align,
+  className,
+  dark = false,
+  max,
+  muted = false,
+  percent = '',
+  value,
+  width = '100%',
+}: ProgressSimpleProps) => {
+  const styles = {
+    width: width,
+  }
+
+  const valueStyles = {
+    width: percent ? `${percent}%` : `${(value * 100) / max}%`,
   }
-}
 
-ProgressSimple.propTypes = propTypes
+  const wrapperClass = classnames(
+    className,
+    buildCss('pb_progress_simple_wrapper', align, { dark: dark })
+  )
+
+  const kitClass = classnames(
+    className,
+    buildCss('pb_progress_simple_kit', align, { muted: muted })
+  )
+
+  return (
+    <div className={wrapperClass}>
+      <div
+          className={kitClass}
+          data-value={value}
+          style={styles}
+      >
+        <div
+            className="progress_simple_value"
+            style={valueStyles}
+        />
+      </div>
+    </div>
+  )
+}
 
 export default ProgressSimple