playbook_ui 4.15.1.alpha1 → 4.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1eaec88d82c53a274c0d92dd7d6a69e63ba22589107395a1cdc0935806ceef8
-  data.tar.gz: 68fede97efa40f94dee01360bd6f29f3121969d5e2190c9d80b51b3531951ef1
+  metadata.gz: b41cd850e37c7cfe3d285c2e10a9081d41f2270993492a4482e404bc641dbcba
+  data.tar.gz: 149744dce6a51e1108f8a9e0c9e4d2fef649a5ea09043f16035eb8a61e99ad8d
 SHA512:
-  metadata.gz: a0f5bf6be6bd1160d6fd1eeb54e806348aa3178470574ef4a18327826e40f145d7cc6af01937b2cf612fd5f5d26f3a7c0805ae896490ab1929c2ef581afba46e
-  data.tar.gz: 60a66f8d413244e10d2187c5f7c1465e5310154ddbeb82d630c2fd5b7614fb2a3fd3d4730b501a538f4ad18c26b0a599d2c262cb15410d67cbc712ed33d4e8c9
+  metadata.gz: 43f883594bd8cbad40218bdd50b151974f7e10a7179f55bed7892cb017eee0472c74d59113120aaf88b910f13ef5788810ebf91705e51f8f0bf5735e7068f1b2
+  data.tar.gz: 270c83ea450200f36ca6a04b6c12d65816d812b47079b871b00cf44f4300270dd3b9e061d544e3bccf40c901905b8bffc9bfa24838831366e2c29cd56506ba95

data/README.md

@@ -11,7 +11,6 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 1. Run `yarn && bundle`
 1. Run `make start`
-1. Bootstrap the database: `docker-compose run web bin/rails db:setup`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8080](http://localhost:8080)
 

data/app/pb_kits/playbook/_playbook.scss

@@ -7,6 +7,7 @@
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
+@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
@@ -15,6 +16,7 @@
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
+@import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
@@ -49,10 +51,13 @@
 @import 'pb_popover/popover';
 @import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
+@import 'pb_progress_step/progress_step';
 @import 'pb_radio/radio';
 @import 'pb_section_separator/section_separator';
 @import 'pb_select/select';
 @import 'pb_selectable_card/selectable_card';
+@import 'pb_selectable_card_icon/selectable_card_icon';
+@import 'pb_selectable_icon/selectable_icon';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';
@@ -66,9 +71,9 @@
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
+@import 'pb_tooltip/tooltip';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';

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

@@ -1,5 +1,6 @@
 samples:
   - dashboards
+  - something
 kits:
   - avatar
   - badge
@@ -13,6 +14,8 @@ kits:
     - legend
     - line_graph
     - distribution_bar
+    - circle_chart
+
   - filter
   - fixed_confirmation_toast
   - flex
@@ -23,6 +26,8 @@ kits:
     - radio
     - select
     - selectable_card
+    - selectable_card_icon
+    - selectable_icon
     - text_input
     - textarea
     - typeahead
@@ -45,11 +50,13 @@ kits:
   - popover
   - progress_pills
   - progress_simple
+  - progress_step
   - section_separator
   - source
   - star_rating
   - stat_change
   - table
+  - tooltip
   - typography:
     - body
     - caption

data/app/pb_kits/playbook/index.js

@@ -52,10 +52,13 @@ export PersonContact from './pb_person_contact/_person_contact.jsx'
 export Pill from './pb_pill/_pill.jsx'
 export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
 export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
+export ProgressStep from './pb_progress_step/_progress_step.jsx'
 export Radio from './pb_radio/_radio.jsx'
 export SectionSeparator from './pb_section_separator/_section_separator.jsx'
 export Select from './pb_select/_select.jsx'
 export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
+export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
+export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
 export Source from './pb_source/_source.jsx'
 export StarRating from './pb_star_rating/_star_rating.jsx'
 export StatChange from './pb_stat_change/_stat_change.jsx'
@@ -66,10 +69,11 @@ export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
-export TimeStamp from './pb_timestamp/_timestamp.jsx'
+export Timestamp from './pb_timestamp/_timestamp.jsx'
 export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
+export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
@@ -86,3 +90,4 @@ export pbChart from './plugins/pb_chart.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
+export PbTooltip from './pb_tooltip'

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

@@ -63,10 +63,13 @@ import * as PersonContact from 'pb_person_contact/docs'
 import * as Pill from 'pb_pill/docs'
 import * as ProgressPills from 'pb_progress_pills/docs'
 import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as ProgressStep from 'pb_progress_step/docs'
 import * as Radio from 'pb_radio/docs'
 import * as SectionSeparator from 'pb_section_separator/docs'
 import * as Select from 'pb_select/docs'
 import * as SelectableCard from 'pb_selectable_card/docs'
+import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
+import * as SelectableIcon from 'pb_selectable_icon/docs'
 import * as Source from 'pb_source/docs'
 import * as StarRating from 'pb_star_rating/docs'
 import * as StatChange from 'pb_stat_change/docs'
@@ -137,10 +140,13 @@ WebpackerReact.setup({
   ...Pill,
   ...ProgressPills,
   ...ProgressSimple,
+  ...ProgressStep,
   ...Radio,
   ...SectionSeparator,
   ...Select,
   ...SelectableCard,
+  ...SelectableIcon,
+  ...SelectableCardIcon,
   ...Source,
   ...StarRating,
   ...StatChange,

data/app/pb_kits/playbook/packs/kits/pb_progress_step.js

@@ -0,0 +1,2 @@
+import '../../pb_progress_step/_progress_step.jsx'
+

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -19,6 +19,8 @@ type BarGraphProps = {
   subTitle?: String,
   title: String,
   type?: String,
+  legend?: Boolean,
+  height?: String,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {
@@ -40,6 +42,8 @@ export default class BarGraph extends React.Component {
       subTitle,
       title,
       type,
+      legend,
+      height,
     } = this.props
 
     new pbChart(`.${className}`, {
@@ -53,6 +57,8 @@ export default class BarGraph extends React.Component {
       xAxisCategories: xAxisCategories,
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
+      legend: legend,
+      height: height,
     })
   }
 

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -19,7 +19,9 @@ module Playbook
                                 default:[]
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
-
+      prop :legend, type: Playbook::Props::Boolean,
+                    default: false
+      prop :height
 
       def chart_type
         orientation == "horizontal" ? "bar" : "column"
@@ -37,6 +39,8 @@ module Playbook
           xAxisCategories: x_axis_categories,
           yAxisMin: y_axis_min,
           yAxisMax: y_axis_max,
+          legend: legend,
+          height: height,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -18,9 +18,9 @@
 <%= pb_rails("bar_graph", props: {
     axis_title: 'Number of Employees',
     chart_data: data,
-    id: "bar-test",
+    id: "bar-default",
     y_axis_min: 0,
     x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
     subtitle: 'Source: thesolarfoundation.com',
-    title: 'Solar Employment Growth by Sector, 2010-2016'
+    title: 'Solar Employment Growth by Sector, 2010-2016',
 }) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

@@ -23,10 +23,10 @@ const BarGraphDefault = () => (
     <BarGraph
         axisTitle="Number of Employees"
         chartData={chartData}
-        id="bar-test"
+        id="bar-default"
         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']}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
         yAxisMin={0}
     />
   </div>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-fixed-height",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Fixed Height (300px)',
+    height: '300'
+}) %>
+
+<br /><br />
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-percentage-height",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Percentage Height (50%)',
+    height: '50%'
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { BarGraph } from '../../'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}]
+
+const BarGraphDefault = () => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="300"
+        id="bar-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+
+    <br />
+    <br />
+
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        height="50%"
+        id="bar-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default BarGraphDefault

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb

@@ -0,0 +1,14 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-test-2",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Legend',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { BarGraph } from '../..'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}]
+
+const BarGraphLegend = () => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-test-2"
+        legend
+        title="Bar Graph with Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default BarGraphLegend

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

@@ -1 +1,3 @@
-Bar graphs are used to show data. Bar graphs are not typically used to show percentages. The default height of bar graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+Bar graphs are used to compare data. Bar graphs are not typically used to show percentages. The default height of bar graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

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

@@ -2,8 +2,12 @@ examples:
   
   rails:
   - bar_graph_default: Default
+  - bar_graph_legend: Legend
+  - bar_graph_height: Height
   
   
   react:
   - bar_graph_default: Default
+  - bar_graph_legend: Legend
+  - bar_graph_height: Height
   

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

@@ -1 +1,3 @@
 export { default as BarGraphDefault } from './_bar_graph_default.jsx'
+export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
+export { default as BarGraphHeight } from './_bar_graph_height.jsx'

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

@@ -3,6 +3,8 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import Icon from '../pb_icon/_icon.jsx'
+
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
   aria?: {
@@ -83,7 +85,13 @@ const Button = (props: ButtonPropTypes) => {
   const buttonAria = buttonAriaProps(props)
   const css = classnames(buttonClassName(props), className)
   const loadingIcon = (
-    <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon" />
+    <div className="loading-icon">
+      <Icon
+          fixedWidth
+          icon="spinner"
+          pulse
+      />
+    </div>
   )
 
   const content = (

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

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

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

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

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