RubyGems - playbook_ui - Versions diffs - 4.15.0 → 4.18.0 - Mend

playbook_ui 4.15.0 → 4.18.0

Files changed (254) hide show

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 import Icon from '../pb_icon/_icon.jsx'
@@ -83,7 +84,7 @@ 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 = (
     <div className="loading-icon">
       <Icon

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx CHANGED

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb CHANGED

@@ -1,3 +1,4 @@
-<%= pb_rails("card") do %>
+<%= pb_rails("card", props: {
+})  do %>
   Card content
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx CHANGED

@@ -3,6 +3,8 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type CheckboxProps = {
   checked?: Boolean,
@@ -15,27 +17,24 @@ type CheckboxProps = {
   onChange: (Boolean) => void,
 }
-const Checkbox = ({
-  checked = false,
-  dark = false,
-  error = false,
-  name = '',
-  text = '',
-  value = '',
-  children = null,
-  onChange = () => {},
-}: CheckboxProps) => {
-  const bodyClassName = {
-    'pb_checkbox_label': true,
-  }
+const Checkbox = (props: CheckboxProps) => {
+  const {
+    checked = false,
+    dark = false,
+    error = false,
+    name = '',
+    text = '',
+    value = '',
+    children = null,
+    onChange = () => {},
+  } = props
   return (
     <label
-        className={
-        'pb_checkbox_kit' +
+        className={classnames('pb_checkbox_kit' +
         (dark === true ? '_dark' : '') +
-        (error === true ? ' error' : '')
+        (error === true ? ' error' : ''), spacing(props))
       }
     >
       <If condition={children}>
@@ -58,7 +57,7 @@ const Checkbox = ({
         />
       </span>
       <Body
-          className={bodyClassName}
+          className="pb_checkbox_label"
           dark={dark}
           status={error ? 'negative' : null}
       >