RubyGems - playbook_ui - Versions diffs - 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1 - Mend

playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

Files changed (322) hide show

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx CHANGED

@@ -3,7 +3,9 @@ import { SectionSeparator } from '../../'
 const SectionSeparatorText = () => {
   return (
-    <SectionSeparator text="Title Separator" />
+    <SectionSeparator
+        text="Title Separator"
+    />
   )
 }

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx CHANGED

@@ -4,7 +4,7 @@ import { Table, TableRow } from '../../'
 const TableSideHighlight = () => {
   return (
     <div>
-      <Table size="md">
+      <Table size="sm">
         <thead>
           <tr>
             <th>{'Product colors'}</th>
@@ -15,22 +15,22 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="windows">
-            <td>{'Windows'}</td>
+          <TableRow sideHighlightColor="solar">
+            <td>{'Solar'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="siding">
-            <td>{'Siding'}</td>
+          <TableRow sideHighlightColor="roofing">
+            <td>{'Roofing'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="doors">
-            <td>{'Doors'}</td>
+          <TableRow sideHighlightColor="gutters">
+            <td>{'Gutters'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
@@ -48,7 +48,7 @@ const TableSideHighlight = () => {
       <br />
-      <Table size="md">
+      <Table size="sm">
         <thead>
           <tr>
             <th>{'Status colors'}</th>
@@ -89,6 +89,50 @@ const TableSideHighlight = () => {
           </TableRow>
         </tbody>
       </Table>
+      <br />
+      <Table size="sm">
+        <thead>
+          <tr>
+            <th>{'Category Colors'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <TableRow sideHighlightColor="category_1">
+            <td>{'Category Color 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="category_2">
+            <td>{'Category Color 2'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="category_3">
+            <td>{'Category Color 3'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="none">
+            <td>{'None'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+        </tbody>
+      </Table>
     </div>
   )
 }