RubyGems - playbook_ui - Versions diffs - 7.9.0 → 7.12.0 - Mend

playbook_ui 7.9.0 → 7.12.0

Files changed (395) hide show

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StarRating } from '../../'
-const StarRatingDefault = () => (
+const StarRatingDefault = (props) => (
   <>
     <StarRating />
@@ -9,18 +9,21 @@ const StarRatingDefault = () => (
     <StarRating
         rating={3}
+        {...props}
     />
     <br />
     <StarRating
         rating={1.5}
+        {...props}
     />
     <br />
     <StarRating
         rating={5}
+        {...props}
     />
   </>
 )

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

@@ -1,11 +1,12 @@
 import React from 'react'
 import { StarRating } from '../../'
-const StarRatingHide = () => (
+const StarRatingHide = (props) => (
   <StarRating
       hideRating
       rating={3.5}
+      {...props}
   />
 )

data/app/pb_kits/playbook/pb_stat_change/_stat_change.html.erb CHANGED

@@ -3,7 +3,7 @@
     data: object.data,
     class: object.classname) do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
-        <%= pb_rails("icon", props: { fixed_width: true, icon: object.icon }) if object.icon %>
+        <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>
       <% end %>
 <% end %>

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

@@ -20,14 +20,18 @@ const iconMap = {
 type StatChangeProps = {
   change?: "increase" | "decrease" | "neutral",
   className?: string,
+  icon?: string,
   id?: string,
   value?: string | number,
 }
 const StatChange = (props: StatChangeProps) => {
-  const { change = 'neutral', className, id, value } = props
+  const { change = 'neutral', className, icon, id, value } = props
   const status = statusMap[change] || 'neutral'
-  const icon = iconMap[change]
+  let returnedIcon = iconMap[change]
+  if (icon) {
+    returnedIcon = icon
+  }
   return (
     <If condition={value}>
@@ -40,10 +44,10 @@ const StatChange = (props: StatChangeProps) => {
           id={id}
       >
         <Body status={status}>
-          <If condition={icon}>
+          <If condition={returnedIcon}>
             <Icon
                 fixed_width
-                icon={icon}
+                icon={returnedIcon}
             />
             {' '}
           </If>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb CHANGED

@@ -1,6 +1,6 @@
 <%= pb_rails("stat_change", props: {
   change: "increase",
-  value: 28.4
+  value: 28.4,
 }) %>
 <br>

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

@@ -1,12 +1,13 @@
 import React from 'react'
 import { StatChange } from '../../'
-const StatChangeDefault = () => {
+const StatChangeDefault = (props) => {
   return (
     <div>
       <StatChange
           change="increase"
           value="28.4"
+          {...props}
       />
       <br />
@@ -14,6 +15,7 @@ const StatChangeDefault = () => {
       <StatChange
           change="decrease"
           value={6.1}
+          {...props}
       />
       <br />
@@ -21,6 +23,7 @@ const StatChangeDefault = () => {
       <StatChange
           change="neutral"
           value={102}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.html.erb ADDED

@@ -0,0 +1,17 @@
+<%= pb_rails("stat_change", props: {
+  value: 28.4,
+  icon: "chart-line",
+}) %>
+<br>
+<%= pb_rails("stat_change", props: {
+  value: 6.1,
+  icon: "chart-line-down",
+}) %>
+<br>
+<%= pb_rails("stat_change", props: {
+  value: 102,
+}) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx ADDED

@@ -0,0 +1,31 @@
+import React from 'react'
+import { StatChange } from '../../'
+const StatChangeUnit = (props) => {
+  return (
+    <div>
+      <StatChange
+          icon="chart-line"
+          value="28.4"
+          {...props}
+      />
+      <br />
+      <StatChange
+          icon="chart-line-down"
+          value={6.1}
+          {...props}
+      />
+      <br />
+      <StatChange
+          value={102}
+          {...props}
+      />
+    </div>
+  )
+}
+export default StatChangeUnit

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.html.erb ADDED

@@ -0,0 +1,20 @@
+<%= pb_rails("stat_change", props: {
+  change: "increase",
+  value: 28.4,
+  icon: "level-up",
+}) %>
+<br>
+<%= pb_rails("stat_change", props: {
+  change: "decrease",
+  value: 6.1,
+  icon: "level-down",
+}) %>
+<br>
+<%= pb_rails("stat_change", props: {
+  change: "neutral",
+  value: 102,
+}) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx ADDED

@@ -0,0 +1,34 @@
+import React from 'react'
+import { StatChange } from '../../'
+const StatChangeUnitTwo = (props) => {
+  return (
+    <div>
+      <StatChange
+          change="increase"
+          icon="level-up"
+          value="28.4"
+          {...props}
+      />
+      <br />
+      <StatChange
+          change="decrease"
+          icon="level-down"
+          value={6.1}
+          {...props}
+      />
+      <br />
+      <StatChange
+          change="neutral"
+          value={102}
+          {...props}
+      />
+    </div>
+  )
+}
+export default StatChangeUnitTwo

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.md ADDED

	@@ -0,0 +1 @@
1	+ Increase colors your icon GREEN & Decrease colors your icon RED.

data/app/pb_kits/playbook/pb_stat_change/docs/example.yml CHANGED

@@ -1,9 +1,11 @@
 examples:
   rails:
   - stat_change_default: Default
+  - stat_change_unit: Icon
+  - stat_change_unit_two: Colors
   react:
   - stat_change_default: Default
+  - stat_change_unit: Icon
+  - stat_change_unit_two: Colors

data/app/pb_kits/playbook/pb_stat_change/docs/index.js CHANGED

@@ -1 +1,3 @@
 export { default as StatChangeDefault } from './_stat_change_default.jsx'
+export { default as StatChangeUnit } from './_stat_change_unit.jsx'
+export { default as StatChangeUnitTwo } from './_stat_change_unit_two.jsx'

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

@@ -10,6 +10,7 @@ module Playbook
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"
+      prop :icon, type: Playbook::Props::String
       prop :value, type: Playbook::Props::Numeric
       def status
@@ -23,14 +24,18 @@ module Playbook
         end
       end
-      def icon
-        case change
-        when "increase"
-          "arrow-up"
-        when "decrease"
-          "arrow-down"
+      def returned_icon
+        if icon
+          icon
         else
-          false
+          case change
+          when "increase"
+            "arrow-up"
+          when "decrease"
+            "arrow-down"
+          else
+            false
+          end
         end
       end

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx CHANGED

@@ -1,13 +1,19 @@
 import React from 'react'
 import { StatValue } from '../../'
-const StatValueDefault = () => {
+const StatValueDefault = (props) => {
   return (
     <>
-      <StatValue value={1048} />
+      <StatValue
+          value={1048}
+          {...props}
+      />
       <br />
       <br />
-      <StatValue value={0} />
+      <StatValue
+          value={0}
+          {...props}
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx CHANGED

@@ -1,11 +1,12 @@
 import React from 'react'
 import StatValue from '../_stat_value.jsx'
-const StatValueUnit = () => {
+const StatValueUnit = (props) => {
   return (
     <StatValue
         unit="appt"
         value="5,294"
+        {...props}
     />
   )
 }

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

@@ -1,57 +1 @@
-@import "styles/all";
-@import "../tokens/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;
-  border-top: 0px;
-}
-[class^=pb_table] {
-  tbody {
-    [class^=pb_table_row_kit] {
-      @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
-        &[class*=_side_highlight_#{$color_name}] {
-          td {
-            &:first-child {
-              @include pb_table_row_kit_side_highlight($color_value);
-            }
-          }
-        }
-      }
-    }
-  }
-  tr[align=center] th,
-  tr th[align=center] {
-    text-align: center !important;
-  }
-  tr[align=right] th,
-  tr th[align=right] {
-    text-align: right !important;
-  }
-  tr[shift=up] {
-    vertical-align: top;
-  }
-  tr[shift=down] {
-    vertical-align: bottom;
-  }
-  td[shift=up] {
-    vertical-align: top;
-  }
-  td[shift=down] {
-    vertical-align: bottom;
-  }
-  th[shift=up] {
-    vertical-align: top;
-  }
-  th[shift=down] {
-    vertical-align: bottom;
-  }
-}
+@import "styles/all";

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

@@ -2,9 +2,12 @@ import React from 'react'
 import { Table } from '../../'
 import { Button } from '../../'
-const TableActionMiddle = () => {
+const TableActionMiddle = (props) => {
   return (
-    <Table size="sm">
+    <Table
+        size="sm"
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>
@@ -25,6 +28,7 @@ const TableActionMiddle = () => {
                 paddingLeft="none"
                 text="Action"
                 variant="link"
+                {...props}
             />
           </td>
           <td>{'Value 4'}</td>
@@ -40,6 +44,7 @@ const TableActionMiddle = () => {
                 paddingLeft="none"
                 text="Action"
                 variant="link"
+                {...props}
             />
           </td>
           <td>{'Value 4'}</td>
@@ -55,6 +60,7 @@ const TableActionMiddle = () => {
                 paddingLeft="none"
                 text="Action"
                 variant="link"
+                {...props}
             />
           </td>
           <td>{'Value 4'}</td>

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

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Table } from '../../'
-const TableAlignmentColumn = () => {
+const TableAlignmentColumn = (props) => {
   return (
-    <Table>
+    <Table
+        {...props}
+    >
       <thead>
         <tr>
           <th>{'Column 1'}</th>