playbook_ui 4.17.0.pre.alpha1 → 4.17.0

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

@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -13,19 +14,20 @@ type ProgressSimpleProps = {
   muted: Boolean,
   percent: String,
   value: Number,
-  width: String
+  width: String,
 }
 
-const ProgressSimple = ({
-  align,
-  className,
-  dark = false,
-  max,
-  muted = false,
-  percent = '',
-  value,
-  width = '100%',
-}: ProgressSimpleProps) => {
+const ProgressSimple = (props: ProgressSimpleProps) => {
+  const {
+    align,
+    className,
+    dark = false,
+    max,
+    muted = false,
+    percent = '',
+    value,
+    width = '100%',
+  } = props
   const styles = {
     width: width,
   }
@@ -36,7 +38,8 @@ const ProgressSimple = ({
 
   const wrapperClass = classnames(
     className,
-    buildCss('pb_progress_simple_wrapper', align, { dark: dark })
+    buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
+    spacing(props)
   )
 
   const kitClass = classnames(

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -3,30 +3,37 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressStepProps = {
   className?: String,
   data?: String,
   id?: String,
   children?: Array<React.ReactChild>,
-  orientation?: 'horizontal' | 'vertical',
+  orientation?: "horizontal" | "vertical",
   icon?: Boolean,
   dark?: Boolean,
 }
 
-const ProgressStep = ({
-  className,
-  children,
-  orientation = 'horizontal',
-  icon = false,
-  dark = false,
-}: ProgressStepProps) => {
+const ProgressStep = (props: ProgressStepProps) => {
+  const {
+    className,
+    children,
+    orientation = 'horizontal',
+    icon = false,
+    dark = false,
+  } = props
   const iconStyle = icon === true ? 'icon' : ''
   const darkStyle = dark === true ? 'dark' : ''
-  const progressStepCss = buildCss('pb_progress_step_kit', orientation, iconStyle, darkStyle)
+  const progressStepCss = buildCss(
+    'pb_progress_step_kit',
+    orientation,
+    iconStyle,
+    darkStyle
+  )
 
   return (
-    <div className={classnames(progressStepCss, className)}>
+    <div className={classnames(progressStepCss, className, spacing(props))}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -3,6 +3,8 @@
 
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type RadioProps = {
   className?: String,
@@ -38,7 +40,7 @@ const Radio = ({
 
   return (
     <label
-        className={'pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className}
+        className={classnames('pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className, spacing(props))}
         htmlFor={id}
     >
       <If condition={children}>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -2,26 +2,32 @@
 import React from 'react'
 import classnames from 'classnames'
 import Caption from '../pb_caption/_caption.jsx'
+import { spacing } from '../utilities/spacing.js'
 
 type SectionSeparatorProps = {
   className: String,
   text: String,
-  orientation?: 'horizontal' | 'vertical',
-  variant?: 'card' | 'background',
-  dark?: Boolean
+  orientation?: "horizontal" | "vertical",
+  variant?: "card" | "background",
+  dark?: Boolean,
 }
 
-const SectionSeparator = ({
-  className,
-  text,
-  orientation = 'horizontal',
-  variant = 'card',
-  dark = false,
-}: SectionSeparatorProps) => {
+const SectionSeparator = (props: SectionSeparatorProps) => {
+  const {
+    className,
+    text,
+    orientation = 'horizontal',
+    variant = 'card',
+    dark = false,
+  } = props
   const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames([
-    `pb_section_separator_kit_${variant}_${orientation}` + themeStyle,
-    className])
+  const css = classnames(
+    [
+      `pb_section_separator_kit_${variant}_${orientation}` + themeStyle,
+      className,
+    ],
+    spacing(props)
+  )
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react'
-
+import classnames from 'classnames'
 import {
   Body,
   Caption,
@@ -14,6 +14,8 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
+import { spacing } from '../utilities/spacing.js'
+
 import type { InputCallback } from '../types'
 
 type SelectOption = {
@@ -70,7 +72,7 @@ const Select = ({
   ...props
 }: SelectProps) => {
   const errorClass = error ? ' error' : ''
-  const css = buildCss('pb_select', { dark }) + errorClass
+  const css = classnames(buildCss('pb_select', { dark }) + errorClass, spacing(props))
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -13,6 +13,8 @@ import {
   noop,
 } from '../utilities/props'
 
+import { spacing } from '../utilities/spacing.js'
+
 type Props = {
   aria: Object,
   checked: Boolean,
@@ -28,7 +30,7 @@ type Props = {
   name?: String,
   onChange: InputCallback<HTMLInputElement>,
   text?: String,
-  value?: String
+  value?: String,
 }
 
 const SelectableCard = ({
@@ -53,10 +55,10 @@ const SelectableCard = ({
 
   const css = buildCss({
     'pb_selectable_card_kit': true,
-    'checked': checked,
-    'dark': dark,
-    'disabled': disabled,
-    'enabled': !disabled,
+    checked: checked,
+    dark: dark,
+    disabled: disabled,
+    enabled: !disabled,
   })
 
   const displayIcon = () => {
@@ -92,8 +94,11 @@ const SelectableCard = ({
           type={inputType}
           value={value}
       />
-      <label htmlFor={inputIdPresent}>
-        { text || children }
+      <label
+          className={spacing(props)}
+          htmlFor={inputIdPresent}
+      >
+        {text || children}
         {displayIcon()}
       </label>
     </div>

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -5,37 +5,38 @@ import classnames from 'classnames'
 
 import { buildCss } from '../utilities/props'
 import { Body, Icon } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 const statusMap = {
-  'increase': 'positive',
-  'decrease': 'negative',
+  increase: 'positive',
+  decrease: 'negative',
 }
 
 const iconMap = {
-  'increase': 'arrow-up',
-  'decrease': 'arrow-down',
+  increase: 'arrow-up',
+  decrease: 'arrow-down',
 }
 
 type StatChangeProps = {
-  change?: 'increase' | 'decrease' | 'neutral',
+  change?: "increase" | "decrease" | "neutral",
   className?: String,
   id?: String,
-  value?: String | Number
+  value?: String | Number,
 }
 
-const StatChange = ({
-  change = 'neutral',
-  className,
-  id,
-  value,
-}: StatChangeProps) => {
+const StatChange = (props: StatChangeProps) => {
+  const { change = 'neutral', className, id, value } = props
   const status = statusMap[change] || 'neutral'
   const icon = iconMap[change]
 
   return (
     <If condition={value}>
       <div
-          className={classnames(className, buildCss('pb_stat_change_kit', status))}
+          className={classnames(
+          className,
+          buildCss('pb_stat_change_kit', status),
+          spacing(props)
+        )}
           id={id}
       >
         <Body status={status}>

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type StatValueProps = {
   className?: String,
@@ -43,7 +44,7 @@ const StatValue = (props: StatValueProps) => {
 
   return (
     <div
-        className={classnames('pb_stat_value_kit', className)}
+        className={classnames('pb_stat_value_kit', className, spacing(props))}
         id={id}
     >
       <div className="pb_stat_value_wrapper">

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -2,6 +2,7 @@
 
 import React, { type Node } from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type TableProps = {
   children: Array<Node> | Node,
@@ -9,42 +10,42 @@ type TableProps = {
   container: boolean,
   dark: boolean,
   dataTable: boolean,
-  // @deprecated disable_hover since version 3.2.0, please use `disableHover`
-  disable_hover: boolean, // eslint-disable-line camelcase
   disableHover: boolean,
   responsive: "collapse" | "scroll" | "none",
-  // @deprecated single_line since version 3.2.0, please use `singleLine`
-  single_line: boolean, // eslint-disable-line camelcase
   singleLine: boolean,
   size: "sm" | "md" | "lg",
 }
 
-const Table = ({
-  children,
-  className,
-  container = true,
-  dark = false,
-  dataTable = false,
-  disable_hover = false, // eslint-disable-line camelcase
-  disableHover = false,
-  responsive = 'collapse',
-  single_line = false, // eslint-disable-line camelcase
-  singleLine = false,
-  size = 'sm',
-}: TableProps) => {
-  disableHover = disableHover || disable_hover // eslint-disable-line camelcase
-  singleLine = singleLine || single_line // eslint-disable-line camelcase
-
-  const classes = classnames(className, 'pb_table', `table-${size}`, `table-responsive-${responsive}`, {
-    'table-card': container,
-    'table-dark': dark,
-    'data_table': dataTable,
-    'single-line': singleLine,
-    'no-hover': disableHover,
-  })
+const Table = (props: TableProps) => {
+  const {
+    children,
+    className,
+    container = true,
+    dark = false,
+    dataTable = false,
+    disableHover = false,
+    responsive = 'collapse',
+    singleLine = false,
+    size = 'sm',
+  } = props
 
   return (
-    <table className={classes}>
+    <table
+        className={classnames(
+        className,
+        'pb_table',
+        `table-${size}`,
+        `table-responsive-${responsive}`,
+        {
+          'table-card': container,
+          'table-dark': dark,
+          'data_table': dataTable,
+          'single-line': singleLine,
+          'no-hover': disableHover,
+        },
+        spacing(props)
+      )}
+    >
       {children}
     </table>
   )

data/app/pb_kits/playbook/pb_table/_table.scss

@@ -1,7 +1,7 @@
 @import "styles/all";
 @import "../tokens/colors";
 
-$pb_table_row_kit_side_highlight_colors: map-merge($status_colors, $product_colors);
+$pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
 
 @mixin pb_table_row_kit_side_highlight($background) {
     box-shadow: inset 4px 0 0 0 $background;

data/app/pb_kits/playbook/pb_table/_table_row.jsx

@@ -2,6 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type TableRowPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
@@ -9,16 +10,14 @@ type TableRowPropTypes = {
   sideHighlightColor: String,
 }
 
-const TableRow = ({
-  children,
-  className,
-  sideHighlightColor = 'windows',
-}: TableRowPropTypes) => {
-  const sideHighlightClass = sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
+const TableRow = (props: TableRowPropTypes) => {
+  const { children, className, sideHighlightColor = 'windows' } = props
+  const sideHighlightClass =
+    sideHighlightColor != '' ? `side_highlight_${sideHighlightColor}` : null
   const tableRowCss = buildCss('pb_table_row_kit', sideHighlightClass)
 
   return (
-    <tr className={classnames(tableRowCss, className)}>
+    <tr className={classnames(tableRowCss, className, spacing(props))}>
       {children}
     </tr>
   )

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("table", props: { size: "md" }) do %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
   <thead>
     <tr>
       <th>Product Colors</th>
@@ -9,22 +9,22 @@
     </tr>
   </thead>
   <tbody>
-    <%= pb_rails("table/table_row", props: { side_highlight_color: "windows" }) do %>
-			<td>Windows</td>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "solar" }) do %>
+			<td>Solar</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>
 			<td>Value 5</td>
     <% end %>
-		<%= pb_rails("table/table_row", props: { side_highlight_color: "siding" }) do %>
-			<td>Siding</td>
+		<%= pb_rails("table/table_row", props: { side_highlight_color: "roofing" }) do %>
+			<td>Roofing</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>
 			<td>Value 5</td>
     <% end %>
-    <%= pb_rails("table/table_row", props: { side_highlight_color: "doors" }) do %>
-			<td>Doors</td>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "gutters" }) do %>
+			<td>Gutters</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>
@@ -42,7 +42,7 @@
 
 <br/>
 
-<%= pb_rails("table", props: { size: "md" }) do %>
+<%= pb_rails("table", props: { size: "sm" }) do %>
   <thead>
     <tr>
       <th>Status Colors</th>
@@ -83,3 +83,47 @@
     <% end %>
   </tbody>
 <% end %>
+
+<br/>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Cateogry Colors</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "category_1" }) do %>
+			<td>Category Color 1</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+		<%= pb_rails("table/table_row", props: { side_highlight_color: "category_2" }) do %>
+			<td>Category Color 2</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "category_3" }) do %>
+			<td>Category Color 3</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "none" }) do %>
+			<td>None</td>
+			<td>Value 2</td>
+			<td>Value 3</td>
+			<td>Value 4</td>
+			<td>Value 5</td>
+    <% end %>
+  </tbody>
+<% end %>