RubyGems - playbook_ui - Versions diffs - 7.8.2 → 7.11.0.pre.alpha1 - Mend

playbook_ui 7.8.2 → 7.11.0.pre.alpha1

Files changed (110) hide show

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_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,28 @@
+import React from 'react'
+import { StatChange } from '../../'
+const StatChangeUnit = () => {
+  return (
+    <div>
+      <StatChange
+          icon="chart-line"
+          value="28.4"
+      />
+      <br />
+      <StatChange
+          icon="chart-line-down"
+          value={6.1}
+      />
+      <br />
+      <StatChange
+          value={102}
+      />
+    </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,31 @@
+import React from 'react'
+import { StatChange } from '../../'
+const StatChangeUnitTwo = () => {
+  return (
+    <div>
+      <StatChange
+          change="increase"
+          icon="level-up"
+          value="28.4"
+      />
+      <br />
+      <StatChange
+          change="decrease"
+          icon="level-down"
+          value={6.1}
+      />
+      <br />
+      <StatChange
+          change="neutral"
+          value={102}
+      />
+    </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_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_alignment_shift_row.html.erb CHANGED

@@ -22,7 +22,7 @@
       <td>Value 4a</td>
       <td>Value 5a</td>
     </tr>
-    <tr shift="up">
+    <tr shift="middle">
       <td>
         Value 1b
         <br/>

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

@@ -27,7 +27,7 @@ const TableAlignmentShiftRow = () => {
           <td>{'Value 4a'}</td>
           <td>{'Value 5a'}</td>
         </tr>
-        <tr shift="up">
+        <tr shift="middle">
           <td>
             {'Value 1b'}
             <br />

data/app/pb_kits/playbook/pb_table/styles/_alignment.scss ADDED

@@ -0,0 +1,32 @@
+[class^=pb_table] {
+    tr {
+        vertical-align: top;
+    }
+    // Text Align
+    tr[align=center] th,
+    tr th[align=center] {
+      text-align: center !important;
+    }
+    tr[align=right] th,
+    tr th[align=right] {
+      text-align: right !important;
+    }
+    // Column Align
+    tr[shift=up],
+    td[shift=up],
+    th[shift=up] {
+        vertical-align: top;
+      }
+    tr[shift=middle],
+    td[shift=middle],
+    th[shift=middle] {
+      vertical-align: middle;
+    }
+    tr[shift=down],
+    td[shift=down],
+    th[shift=down] {
+      vertical-align: bottom;
+    }
+}

data/app/pb_kits/playbook/pb_table/styles/_all.scss CHANGED

@@ -1,12 +1,13 @@
-@import "variables";
-@import "mixins";
+@import "../../tokens/colors";
+@import "variables";
 @import "reset";
 @import "structure";
 @import "table-card";
 @import "content";
 @import "headers";
+@import "side_highlight";
+@import "alignment";
 @import "hover";
 @import "as-cards";
 @import "single-line";

data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss ADDED

@@ -0,0 +1,24 @@
+@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);
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss CHANGED

@@ -49,7 +49,6 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       border-style: solid;
       border-width: 10px;
       margin-bottom: 50px;
-      margin-left: -10px;
     }
     &.show {
       opacity: 1;

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb CHANGED

@@ -6,4 +6,4 @@
   position: 'top'
 }) do %>
     Whoa. I'm a white tooltip.
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb ADDED

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

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

@@ -3,3 +3,4 @@ examples:
   rails:
   - tooltip_default: Default
   - tooltip_white: White
+  - tooltip_with_icon_circle: Icon Circle Tooptip

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx CHANGED

@@ -27,6 +27,8 @@ type Props = {
   async?: boolean,
   label?: string,
   loadOptions?: noop | string,
+  getOptionLabel?: () => any,
+  getOptionValue?: () => any,
   name?: string,
 }
@@ -38,7 +40,6 @@ type Props = {
 const Typeahead = (props: Props) => {
   const selectProps = {
     cacheOptions: true,
-    defaultOptions: true,
     components: {
       Control,
       ClearIndicator,
@@ -50,6 +51,7 @@ const Typeahead = (props: Props) => {
       Placeholder,
       ValueContainer,
     },
+    defaultOptions: true,
     id: 'react-select-input',
     isClearable: true,
     isSearchable: true,
@@ -58,6 +60,8 @@ const Typeahead = (props: Props) => {
   }
   if (typeof(props.loadOptions) === 'string') selectProps.loadOptions = get(window, props.loadOptions)
+  if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
+  if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
   const Tag = props.async ? AsyncSelect : Select

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx CHANGED

@@ -10,7 +10,6 @@ import {
 const Option = (props: any) => {
   const {
     imageUrl,
-    label,
   } = props.data
   return (
@@ -21,12 +20,12 @@ const Option = (props: any) => {
             <User
                 align="left"
                 avatarUrl={imageUrl}
-                name={label}
+                name={props.label}
                 orientation="horizontal"
             />
           </When>
           <When condition={!imageUrl}>
-            {label}
+            {props.label}
           </When>
         </Choose>
       </div>