playbook_ui 4.14.0 → 4.17.0

data/app/pb_kits/playbook/pb_star_rating/_star_rating.html.erb

@@ -3,12 +3,16 @@
     data: object.data,
     class: object.classname) do %>
     <%# Rating value %>
-    <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
+    <% if object.hide_rating %>
+      <%= content_tag(:div, "", class: "pb_star_rating_number") %>
+    <% else %>
+      <%= content_tag(:div, object.rating, class: "pb_star_rating_number") %>
+    <% end %>
 
     <%= content_tag(:div, class: "pb_star_rating_wrapper") do %>
       <%# Gold stars generated by rating value %>
       <%= content_tag(:div, class: "pb_star_rating_highlight") do %>
-        <% object.star_count.each do %>
+        <% object.star_count.times do %>
           <%= pb_rails("icon", props: { icon: "star", fixed_width: true }) %>
         <% end %>
         <% unless object.star_full %>

data/app/pb_kits/playbook/pb_star_rating/_star_rating.jsx

@@ -1,21 +1,106 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import {
+  buildAriaProps,
+  buildDataProps,
+} from '../utilities/props'
+
+import {
+  Icon,
+} from '../'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
+type StarRatingProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  fixedWidth?: Boolean,
+  hideRating: Boolean,
+  icon?: String,
+  id?: String,
+  rating: Numeric,
 }
 
-class StarRating extends React.Component {
-  render() {
-    return (
-      <div className="pb_star_rating">
-        <span>{'STAR RATING CONTENT'}</span>
+const StarRating = ({
+  aria = {},
+  className,
+  data = {},
+  hideRating = false,
+  id,
+  rating = 0,
+}: StarRatingProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames([
+    'pb_star_rating_kit', className,
+  ])
+
+  const starCount = () => (
+    [...Array(parseInt(rating))]
+  )
+
+  const hasHalfStar = () => (
+    parseFloat(rating) % 1 !== 0
+  )
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <div className="pb_star_rating_number">
+        <If condition={!hideRating}>
+          {rating}
+        </If>
       </div>
-    )
-  }
-}
 
-StarRating.propTypes = propTypes
+      <div className="pb_star_rating_wrapper">
+        <div className="pb_star_rating_highlight">
+          {starCount().map((_, index) => (
+            <Icon
+                fixedWidth
+                icon="star"
+                key={index}
+            />
+          ))}
+
+          <If condition={hasHalfStar()}>
+            <Icon
+                fixedWidth
+                icon="star-half"
+            />
+          </If>
+        </div>
+
+        <div className="pb_star_rating_base">
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+          <Icon
+              fixedWidth
+              icon="star"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
 
 export default StarRating

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { StarRating } from '../../'
+
+const StarRatingDefault = () => (
+  <>
+    <StarRating />
+
+    <br />
+
+    <StarRating
+        rating={3}
+    />
+
+    <br />
+
+    <StarRating
+        rating={1.5}
+    />
+
+    <br />
+
+    <StarRating
+        rating={5}
+    />
+  </>
+)
+
+export default StarRatingDefault

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { StarRating } from '../../'
+
+const StarRatingHide = () => (
+
+  <StarRating
+      hideRating
+      rating={3.5}
+  />
+
+)
+
+export default StarRatingHide

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

@@ -4,5 +4,6 @@ examples:
   - star_rating_default: Default
   - star_rating_hide: Hide Rating Value
 
-
   react:
+  - star_rating_default: Default
+  - star_rating_hide: Hide Rating Value

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

@@ -0,0 +1,3 @@
+export { default as StarRatingDefault } from './_star_rating_default.jsx'
+
+export { default as StarRatingHide } from './_star_rating_hide.jsx'

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -9,11 +9,12 @@ module Playbook
 
       prop :hide_rating, type: Playbook::Props::Boolean,
                          default: false
+
       prop :rating, type: Playbook::Props::Numeric,
                     default: 0
 
       def star_count
-        [*1..rating.to_f]
+        rating.floor
       end
 
       def star_full

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_change/docs/_stat_change_default.html.erb

@@ -14,5 +14,5 @@
 
 <%= pb_rails("stat_change", props: {
   change: "neutral",
-  value: 98
+  value: 102
 }) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -20,7 +20,7 @@ const StatChangeDefault = () => {
 
       <StatChange
           change="neutral"
-          value={98}
+          value={102}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"
-      prop :value, type: Playbook::Props::Percentage
+      prop :value, type: Playbook::Props::Numeric
 
       def status
         case change

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