playbook_ui 4.15.1.alpha1 → 4.18.1

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_body/_body.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Highlight } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type BodyProps = {
   className?: String,
@@ -44,7 +45,7 @@ const Body = (props: BodyProps) => {
   const Tag = `${tag}`
 
   return (
-    <Tag className={classnames(bodyCSS(props), className)}>
+    <Tag className={classnames(bodyCSS(props), className, spacing(props))}>
       <If condition={highlighting}>
         <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
         <Else />

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -23,6 +23,10 @@ const BodyLight = () => {
           status="positive"
           text="I am a body kit (Status: positive)"
       />
+      <Body
+          status="positive"
+          text="I am a body kit (Status: positive)"
+      />
     </div>
   )
 }

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

@@ -2,6 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
+
+import Icon from '../pb_icon/_icon.jsx'
 
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
@@ -81,9 +84,15 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className)
+  const css = classnames(buttonClassName(props), className, spacing(props))
   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_button/docs/_button_default.jsx

@@ -22,7 +22,13 @@ const ButtonDefault = () => (
         onClick={() => alert('button clicked!')}
         text="Button Disabled"
     />
+    <Button
+        disabled
+        onClick={() => alert('button clicked!')}
+        text="Button Disabled"
+    />
   </div>
+
 )
 
 export default ButtonDefault

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -3,35 +3,37 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type CaptionProps = {
   className?: String,
   children: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag: String,
   text: String,
 }
 
-const Caption = ({
-  className,
-  children,
-  dark = false,
-  size = 'md',
-  tag = 'div',
-  text,
-}: CaptionProps) => {
+const Caption = (props: CaptionProps) => {
+  const {
+    className,
+    children,
+    dark = false,
+    size = 'md',
+    tag = 'div',
+    text,
+  } = props
   const Tag = `${tag}`
 
-  const css = classnames(buildCss('pb_caption_kit', size, {
-    'dark': dark,
-  }), className)
-
-  return (
-    <Tag className={css}>
-      {text || children}
-    </Tag>
+  const css = classnames(
+    buildCss('pb_caption_kit', size, {
+      dark: dark,
+    }),
+    className,
+    spacing(props)
   )
+
+  return <Tag className={css}>{text || children}</Tag>
 }
 
 export default Caption

data/app/pb_kits/playbook/pb_card/_card.html.erb

@@ -5,6 +5,6 @@
     aria: object.aria,
     dark: object.dark) do %>
   <% if object.children %>
-    <%= pb_rails("card/card_body", props: { padding: object.padding, children: object.children }) %>
+    <%= pb_rails("card/card_body", props: { padding: object.body_padding, children: object.children }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -1,99 +1,96 @@
 /* @flow */
 
 import React from 'react'
+import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type CardPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
   highlight?: {
-    position?: 'side' | 'top',
-    color?: String
+    position?: "side" | "top",
+    color?: String,
   },
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   selected?: Boolean,
-  shadow?: 'none' | 'deep' | 'deeper' | 'deepest',
+  shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
 }
 
 type CardHeaderProps = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   categoryColor?: Number,
 }
 
 type CardBodyProps = {
   children: Array<React.ReactNode> | React.ReactNode | String,
   className?: String,
-  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
 }
 
 // Header component
-const Header = ({
-  children,
-  className,
-  padding = 'sm',
-  categoryColor = 1,
-}: CardHeaderProps) => {
-  const headerCSS = buildCss('pb_card_header_kit', padding, `category_${categoryColor}`)
+const Header = (props: CardHeaderProps) => {
+  const { children, className, categoryColor = 1 } = props
+  const headerCSS = buildCss('pb_card_header_kit', `category_${categoryColor}`)
+
+  const headerSpacing = spacing(props) ? spacing(props) : 'p_sm'
   return (
-    <div className={classnames(headerCSS, className)}>
+    <div className={classnames(headerCSS, className, headerSpacing)}>
       {children}
     </div>
   )
 }
 
 // Body component
-const Body = ({
-  children,
-  className,
-  padding = 'sm',
-}: CardBodyProps) => {
-  const bodyCSS = buildCss('pb_card_body_kit', padding)
+const Body = (props: CardBodyProps) => {
+  const { children, className } = props
+  const bodyCSS = buildCss('pb_card_body_kit')
+  const bodySpacing = spacing(props) ? spacing(props) : 'p_md'
   return (
-    <div className={classnames(bodyCSS, className)}>
+    <div className={classnames(bodyCSS, className, bodySpacing)}>
       {children}
     </div>
   )
 }
 
-const Card = ({
-  children,
-  className,
-  dark = false,
-  highlight = {},
-  padding = 'md',
-  selected = false,
-  shadow = 'none',
-}: CardPropTypes) => {
-  const bodyCSS = buildCss('pb_card_body_kit', padding)
+const Card = (props: CardPropTypes) => {
+  const {
+    children,
+    className,
+    dark = false,
+    highlight = {},
+    selected = false,
+    shadow = 'none',
+  } = props
+  const bodyCSS = buildCss('pb_card_body_kit')
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
-    'dark': dark,
+    dark: dark,
     selected,
     deselected: !selected,
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })
+  const cardSpacing = spacing(props) ? spacing(props) : 'p_md'
 
   // coerce to array
-  const cardChildren = typeof(children) === 'object' && children.length ? children : [children]
+  const cardChildren =
+    typeof children === 'object' && children.length ? children : [children]
 
   const subComponentTags = (tagName) => {
-    return cardChildren.filter((c) => {
-      return c.type && c.type.displayName === tagName
-    }).map((child, i) => {
+    return cardChildren.filter((c) => (
+      get(c, 'type.displayName') === tagName
+    )).map((child, i) => {
       return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
     })
   }
 
-  const nonHeaderChildren = cardChildren.filter((child) => !child.type || child.type.displayName !== 'Header')
+  const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
   return (
     <div className={classnames(cardCss, className)}>
       {subComponentTags('Header')}
-      <div className={bodyCSS}>
+      <div className={classnames(bodyCSS, cardSpacing)}>
         {nonHeaderChildren}
       </div>
     </div>

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

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

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

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

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