playbook_ui 7.9.0 → 7.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc6561ca5bb803c60af1b1e5b182b704c5c95e2407ad70794a87e98c00e2f419
-  data.tar.gz: 2415f722f6019ebb3fe19875c18413a06791ef6b8684b36800412872f8fad33f
+  metadata.gz: 2dded8961e6cc6308b1d07c4ddc00b8be69244d92b120ab3d1a370f566a7cd37
+  data.tar.gz: ac06d5ca306f7ba1103a2d68c7e179a8cabd2984e56c73d9a358a25ebb65213f
 SHA512:
-  metadata.gz: c9db1e69e91e3bb2d9fa51227aee7f7268e2eddfc54c40590718b2259140e74c09516cc285ef159fc8d700dc2c2dac8a5e7c36aa8ad154e9082619280654debb
-  data.tar.gz: a18d76a0c7e2e11eae5e2149e3823af3a2ad497812e4d0073f21ea03fb6ff77b4aa587eb0b87beeb09a7771b97b8bbc131e61e7ac03ea30eaa417e41c16ffb81
+  metadata.gz: d726cb9073d2bf80830ed397990203f1faf674b7f2e04e8da01d70a7ac3ad590a111a373904d4b756ff964eb55ef7829454a10313f370f0310f690298c15a85a
+  data.tar.gz: d18d68afbb27818521cc240f52d6f05c025f0c23745bf3095a7ec1c848c97e73a784049e4db873ad51f874320b32e5d6dc93e441ce6df62025d23031cf1de5a4

data/app/helpers/playbook/pb_doc_helper.rb

@@ -25,6 +25,10 @@ module Playbook
       end
     end
 
+    def delete_dark_mode_cookie
+      cookies.delete :dark_mode
+    end
+
     def get_samples(kit)
       sample_yaml = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/samples.yml")
       all_samples = []
@@ -167,6 +171,32 @@ module Playbook
       (!kit.nil? && @kit == link)
     end
 
+    def format_search_hash(kit)
+      label_value_hash = {
+        label: kit.to_s.titleize,
+        value: @type == "react" || @type.nil? ? "/kits/#{kit}/react" : "/kits/#{kit}",
+      }
+      label_value_hash
+    end
+
+    def search_list
+      all_kits = []
+      formatted_kits = []
+      MENU["kits"].each do |kit|
+        if kit.is_a? Hash
+          kit.values[0].each do |sub_kit|
+            all_kits.push(sub_kit)
+          end
+        else
+          all_kits.push(kit)
+        end
+      end
+      all_kits.sort!.each do |sorted_kit|
+        formatted_kits.push(format_search_hash(sorted_kit))
+      end
+      formatted_kits
+    end
+
   private
 
     def get_kit_examples(kit, type)

data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss

@@ -2,6 +2,7 @@
 @import "../tokens/colors";
 @import "../tokens/animation-curves";
 @import "../tokens/typography";
+@import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
 
@@ -71,6 +72,27 @@ $selector: ".pb_nav_list";
       }
     }
   }
+
+  // Subtle Variant
+  &[class*=_subtle] {
+    @include subtle;
+    // Horizontal Overrides
+    [class*=pb_nav_list_kit_item] {
+      margin: 0;
+    }
+    [class*=_active] {
+      background-color: $active_light;
+      &[class*=dark] {
+        background-color: rgba($white, $opacity_1);
+      }
+      [class*=_item_link] {
+        [class*=_item_text]{
+          color: $primary;
+        }
+      }
+    }
+  }
+  
   &[class*=dark]{
     [class*=pb_nav_list_kit_item]{
       [class*=_link]{

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -0,0 +1,47 @@
+@mixin subtle {
+  [class*=pb_nav_list_kit_item] {
+    list-style: none;
+    border-radius: $border_rad_heavier;
+    border-bottom: 0;
+    margin: $space_xs ($space_sm - 2px);
+    [class*=_link] {
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      border: none;
+      padding: $space_xs ($space_sm - 2px);
+      transition-property: color, background-color;
+      transition-duration: 0.15s;
+      transition-timing-function: $bezier;
+      border-radius: $border_rad_heavier;
+      @include pb_body($text_lt_default);
+      [class*=_icon_left] {
+        margin-right: ($space_xs + 2px);
+        color: $text_lt_lighter;
+      }
+      [class*=_icon_right] {
+        margin-left: ($space_xs + 2px);
+        color: $text_lt_default;
+      }
+      [class*=_text] {
+        flex: 1;
+        font-weight: $regular;
+      }
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($primary, 0.03);
+          [class*=_icon] {
+            color: $primary;
+          }
+          [class*=_text] {
+            color: $primary;
+          }
+        }
+      }
+    }
+    &[class*=_active] [class*=_link] {
+      @include pb_title_4;
+      color: $primary;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -5,6 +5,7 @@
 @import "../tokens/typography";
 @import "../pb_body/body_mixins";
 @import "../pb_title/title_mixin";
+@import "./subtle_mixin";
 
 $selector: ".pb_nav_list";
 
@@ -85,54 +86,9 @@ $selector: ".pb_nav_list";
 
   }
 
-
   // Subtle Variant
   &[class*=_subtle]  {
-    [class*=pb_nav_list_kit_item] {
-      list-style: none;
-      border-radius: $border_rad_heavier;
-      border-bottom: 0;
-      margin: $space_xs ($space_sm - 2px);
-      [class*=_link] {
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        border: none;
-        padding: $space_xs ($space_sm - 2px);
-        transition-property: color, background-color;
-        transition-duration: 0.15s;
-        transition-timing-function: $bezier;
-        border-radius: $border_rad_heavier;
-        @include pb_body($text_lt_default);
-        [class*=_icon_left] {
-          margin-right: ($space_xs + 2px);
-          color: $text_lt_lighter;
-        }
-        [class*=_icon_right] {
-          margin-left: ($space_xs + 2px);
-          color: $text_lt_default;
-        }
-        [class*=_text] {
-          flex: 1;
-          font-weight: $regular;
-        }
-        @media (hover:hover) {
-          &:hover {
-            background-color: rgba($primary, 0.03);
-            [class*=_icon] {
-              color: $primary;
-            }
-            [class*=_text] {
-              color: $primary;
-            }
-          }
-        }
-      }
-      &[class*=_active] [class*=_link] {
-        @include pb_title_4;
-        color: $primary;
-      }
-    }
+    @include subtle;
   }
 
   // Show Highlight

data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const SubtleHorizontalNav = () => {
+  return (
+    <Nav
+        link="#"
+        orientation="horizontal"
+        variant="subtle"
+    >
+      <NavItem
+          link="#"
+          text="About"
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+      />
+      <NavItem
+          link="#"
+          text="Service"
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+      />
+    </Nav>
+  )
+}
+
+export default SubtleHorizontalNav

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

@@ -9,6 +9,7 @@ examples:
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
 
@@ -22,6 +23,7 @@ examples:
   - subtle_with_icons_nav: Subtle With Icons
   - subtle_no_highlight_nav: Subtle No Highlight
   - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
 

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

@@ -1,5 +1,6 @@
 export { default as DefaultNav } from './_default_nav.jsx'
 export { default as HorizontalNav } from './_horizontal_nav.jsx'
+export { default as SubtleHorizontalNav } from './_subtle_horizontal_nav.jsx'
 export { default as BlockNav } from './_block_nav.jsx'
 export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
 export { default as NoHighlightNav } from './_no_highlight_nav.jsx'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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_typeahead/_typeahead.jsx

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

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb

@@ -1,4 +1,13 @@
-<%= pb_rails("typeahead", props: { async: true, load_options: 'asyncPillsPromiseOptions', label: "Github Users", name: :foo, pills: true, placeholder: "type the name of a Github user" }) %>
+<%= pb_rails("typeahead", props: {
+  async: true,
+  get_option_label: 'getOptionLabel',
+  get_option_value: 'getOptionValue',
+  load_options: 'asyncPillsPromiseOptions',
+  label: "Github Users",
+  name: :foo,
+  pills: true,
+  placeholder: "type the name of a Github user"
+}) %>
 
 <!-- This section is an example of how to provide load_options prop for using dynamic options -->
 <%= javascript_tag defer: "defer" do %>
@@ -7,8 +16,8 @@
   const filterResults = function(results) {
     return results.items.map(function(result) {
       return {
-        label: result.login,
-        value: result.id,
+        name: result.login,
+        id: result.id,
       }
     })
   }
@@ -27,4 +36,11 @@
       }
     })
   }
+
+  window.getOptionLabel = function(option) {
+    return option.name;
+  }
+  window.getOptionValue = function(option) {
+    return option.id;
+  }
 <% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -20,8 +20,8 @@ import {
 const filterResults = (results) =>
   results.items.map((result) => {
     return {
-      label: result.login,
-      value: result.id,
+      name: result.login,
+      id: result.id,
     }
   })
 
@@ -71,6 +71,8 @@ const TypeaheadWithPillsAsync = () => {
       </If>
       <Typeahead
           async
+          getOptionLabel={(option) => option.name}
+          getOptionValue={(option) => option.id}
           isMulti
           label="Github Users"
           loadOptions={promiseOptions}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md

@@ -4,8 +4,16 @@
 
 The prop `load_options`, when used in conjunction with `async: true` and `pills: true`, points to a JavaScript function located within the global window namespace. This function should return a `Promise` which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.
 
-#### React: `loadOptions`
+#### React
+
+##### `loadOptions`
 
 **Additional required props: ** `async: true`
 
-[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
+[As outlined in the react-select Async docs](https://react-select.com/async), `loadOptions` expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.
+
+##### `getOptionLabel` + `getOptionValue`
+
+If your server returns data that requires differing field names other than `label` and `value`
+
+See `react-select` docs for more information: https://react-select.com/advanced#replacing-builtins

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :async, type: Playbook::Props::Boolean,
                     default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
+      prop :get_option_label
+      prop :get_option_value
       prop :id
       prop :label
       prop :load_options
@@ -45,6 +47,9 @@ module Playbook
           placeholder: placeholder
         }
 
+        base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?
+        base_options.merge!({getOptionValue: get_option_value}) if get_option_value.present?
+
         base_options.merge!({
           async: true,
           loadOptions: load_options,

data/app/pb_kits/playbook/react_rails_kits.js

@@ -5,3 +5,4 @@ export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
 export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
 export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
+export { KitSearch, SnippetToggle, DarkModeToggle } from './docs_components'

data/lib/playbook.rb

@@ -2,6 +2,7 @@
 
 require "sassc-rails"
 require "webpacker"
+require "playbook/props"
 require "playbook/engine"
 
 module Playbook

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.9.0"
+  VERSION = "7.10.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.9.0
+  version: 7.10.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-04 00:00:00.000000000 Z
+date: 2020-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1289,6 +1289,7 @@ files:
 - app/pb_kits/playbook/pb_nav/_nav.html.erb
 - app/pb_kits/playbook/pb_nav/_nav.jsx
 - app/pb_kits/playbook/pb_nav/_nav.scss
+- app/pb_kits/playbook/pb_nav/_subtle_mixin.scss
 - app/pb_kits/playbook/pb_nav/_vertical_nav.scss
 - app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx
@@ -1303,6 +1304,8 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_subtle_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.html.erb
@@ -1608,6 +1611,11 @@ files:
 - app/pb_kits/playbook/pb_stat_change/docs/_description.md
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx
+- app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.html.erb
+- app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx
+- app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.html.erb
+- app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx
+- app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.md
 - app/pb_kits/playbook/pb_stat_change/docs/example.yml
 - app/pb_kits/playbook/pb_stat_change/docs/index.js
 - app/pb_kits/playbook/pb_stat_change/stat_change.rb
@@ -1683,14 +1691,15 @@ files:
 - app/pb_kits/playbook/pb_table/docs/example.yml
 - app/pb_kits/playbook/pb_table/docs/index.js
 - app/pb_kits/playbook/pb_table/index.js
+- app/pb_kits/playbook/pb_table/styles/_alignment.scss
 - app/pb_kits/playbook/pb_table/styles/_all.scss
 - app/pb_kits/playbook/pb_table/styles/_as-cards.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
 - app/pb_kits/playbook/pb_table/styles/_headers.scss
 - app/pb_kits/playbook/pb_table/styles/_hover.scss
-- app/pb_kits/playbook/pb_table/styles/_mixins.scss
 - app/pb_kits/playbook/pb_table/styles/_mobile.scss
 - app/pb_kits/playbook/pb_table/styles/_reset.scss
+- app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
 - app/pb_kits/playbook/pb_table/styles/_single-line.scss
 - app/pb_kits/playbook/pb_table/styles/_structure.scss
 - app/pb_kits/playbook/pb_table/styles/_table-card.scss
@@ -1949,20 +1958,6 @@ files:
 - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb
 - app/pb_kits/playbook/plugins/pb_chart.js
-- app/pb_kits/playbook/props.rb
-- app/pb_kits/playbook/props/array.rb
-- app/pb_kits/playbook/props/base.rb
-- app/pb_kits/playbook/props/boolean.rb
-- app/pb_kits/playbook/props/date.rb
-- app/pb_kits/playbook/props/enum.rb
-- app/pb_kits/playbook/props/hash.rb
-- app/pb_kits/playbook/props/hash_array.rb
-- app/pb_kits/playbook/props/number.rb
-- app/pb_kits/playbook/props/number_array.rb
-- app/pb_kits/playbook/props/numeric.rb
-- app/pb_kits/playbook/props/percentage.rb
-- app/pb_kits/playbook/props/proc.rb
-- app/pb_kits/playbook/props/string.rb
 - app/pb_kits/playbook/react_rails_kits.js
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
@@ -1990,13 +1985,27 @@ files:
 - fonts/regular-min.js
 - lib/playbook.rb
 - lib/playbook/engine.rb
+- lib/playbook/props.rb
+- lib/playbook/props/array.rb
+- lib/playbook/props/base.rb
+- lib/playbook/props/boolean.rb
+- lib/playbook/props/date.rb
+- lib/playbook/props/enum.rb
+- lib/playbook/props/hash.rb
+- lib/playbook/props/hash_array.rb
+- lib/playbook/props/number.rb
+- lib/playbook/props/number_array.rb
+- lib/playbook/props/numeric.rb
+- lib/playbook/props/percentage.rb
+- lib/playbook/props/proc.rb
+- lib/playbook/props/string.rb
 - lib/playbook/version.rb
 - lib/playbook_ui.rb
 homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2011,9 +2020,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.3
-signing_key: 
+rubygems_version: 3.1.4
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []