playbook_ui 7.10.0 → 7.11.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2dded8961e6cc6308b1d07c4ddc00b8be69244d92b120ab3d1a370f566a7cd37
-  data.tar.gz: ac06d5ca306f7ba1103a2d68c7e179a8cabd2984e56c73d9a358a25ebb65213f
+  metadata.gz: 875a00d88f5cdc23fcad3e3c3cefff43a6ed592326b17da87f8bd3605f499d69
+  data.tar.gz: 67302126b0b27666a56fc59ec4bcdc22fd523dbab3a8c9fb376d18f9fdcb67fd
 SHA512:
-  metadata.gz: d726cb9073d2bf80830ed397990203f1faf674b7f2e04e8da01d70a7ac3ad590a111a373904d4b756ff964eb55ef7829454a10313f370f0310f690298c15a85a
-  data.tar.gz: d18d68afbb27818521cc240f52d6f05c025f0c23745bf3095a7ec1c848c97e73a784049e4db873ad51f874320b32e5d6dc93e441ce6df62025d23031cf1de5a4
+  metadata.gz: 5e3ed66b3c3866de080032ed635e3b141486b3e7de8ee0b2f8a96dd588937e407ab6a44af189e2ad949aa5bee02c134e07791dd297e2877369a8db99c2ec5570
+  data.tar.gz: 21aaff84c5f705ac6461287a27878dc34c7286f0290b55cb902f66d736633f73652d1a404c3bd36e427010371b7487fcd41e2e7cfd7934c52c548d003aaa6fec

data/app/controllers/playbook/application_controller.rb

@@ -3,11 +3,13 @@
 module Playbook
   class ApplicationController < ActionController::Base
     helper Webpacker::Helper
-    helper Playbook::PbKitHelper
+    helper Playbook::ApplicationHelper
     helper Playbook::PbDocHelper
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
-  end
 
-  
+    def delete_dark_mode_cookie
+      cookies.delete :dark_mode
+    end
+  end
 end

data/app/helpers/playbook/application_helper.rb

@@ -1,36 +1,30 @@
 # frozen_string_literal: true
 
-require "webpacker"
-require "webpacker/react/railtie" if defined?(Rails)
-require "webpacker/react/helpers"
-require "webpacker/react/component"
-
 module Playbook
   module ApplicationHelper
-    include ::Webpacker::Helper
     include ::Webpacker::React::Helpers
+    include ::Playbook::PbKitHelper
 
     def current_webpacker_instance
       Playbook.webpacker
     end
 
-    def dark_mode
-      if cookies[:dark_mode] == "true"
-        true
-      else
-        false
-      end
+    def pb_rails(kit, props: {}, &block)
+      super kit, props: dark_mode_props(props), &block
+    end
+
+    def pb_react(kit, props: {}, options: {})
+      react_component kit.camelize, dark_mode_props(props), options
     end
 
+  private
+
     def dark_mode_props(props)
-      if cookies[:dark_mode] == "true"
-        props.merge(dark: dark_mode)
-      elsif cookies[:dark_mode] == "false"
-        props.merge(dark: dark_mode)
-      else
-        props
-      end
+      (props || {}).merge(dark: dark_mode?)
     end
 
+    def dark_mode?
+      cookies[:dark_mode].eql? "true"
+    end
   end
 end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -17,53 +17,20 @@ module Playbook
       end
     end
 
-    def read_file(filename)
-      if File.file?(filename)
-        File.read(filename)
-      else
-        ""
-      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 = []
-
-      sample_yaml.each do |_category, sample|
-        all_samples.push(sample)
-      end
-
-      output = ""
-      samples_using_kit = []
-      all_samples[0].each do |sample|
-        filepath = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.html.erb"
-        output = `grep -l 'pb_rails(\"#{kit}' #{filepath}`
-        samples_using_kit.push(sample) if output.chomp == filepath
-      end
-      samples_using_kit
-    end
-
     def kit_path(kit)
       "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}"
     end
 
     def get_kit_description(kit)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
     end
 
     def get_per_sample_descriptions(kit, key)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
     end
 
     def get_kit_footer(kit)
-      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
-      read_file(filename)
+      read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
     end
 
     def pb_kit(kit: "", type: "rails", show_code: true, limit_examples: false)
@@ -171,6 +138,11 @@ module Playbook
       (!kit.nil? && @kit == link)
     end
 
+    def read_source_file(*args)
+      path = Playbook::Engine.root.join(*args)
+      path.exist? ? path.read : ""
+    end
+
     def format_search_hash(kit)
       label_value_hash = {
         label: kit.to_s.titleize,

data/app/helpers/playbook/pb_kit_helper.rb

@@ -1,41 +1,17 @@
 # frozen_string_literal: true
 
-require "webpacker/react/railtie" if defined?(Rails)
-require "webpacker/react/helpers"
-require "webpacker/react/component"
-
 module Playbook
   module PbKitHelper
-
     def pb_rails(kit, props: {}, &block)
       previous = prefix_partial_path_with_controller_namespace
       self.prefix_partial_path_with_controller_namespace = false
-      kit = build_view_model(kit.to_s, rails_props(props), &block)
+      kit = build_view_model(kit.to_s, props, &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
-    def pb_react(kit, props:{dark: react_props}, options: {})
-      ::Webpacker::React::Component.new(kit.camelize).render(props, options)
-    end
-
   private
-    def rails_props(props)
-      if @playbook.nil?
-        props
-      else
-        dark_mode_props(props)
-      end
-    end  
-
-    def react_props
-      if @playbook.nil?
-        false
-      else
-        dark_mode
-      end
-    end 
 
     def is_subkit?(kit)
       kit.match(%r{[/\\]})

data/app/helpers/playbook/pb_sample_helper.rb

@@ -2,43 +2,20 @@
 
 module Playbook
   module PbSampleHelper
-    def has_sample_type?(sample, type)
-      type ||= "rails"
-      if type == "rails"
-        Dir["../../views/playbook/samples/#{sample}/*.html.erb"].empty?
-      elsif type == "react"
-        Dir["../../views/playbook/samples/#{sample}/*.jsx"].empty?
-      end
-    end
-
     def kits_used(sample)
       code = get_raw_code(sample, "rails")
       kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
       kits_array.uniq
     end
 
-    def pb_sample(sample: "", type: "rails")
-      @type = type
-      @sample = sample
-    end
-
-    def read_file(filename)
-      if File.file?(filename)
-        File.read(filename)
-      else
-        ""
-      end
-    end
-
     def get_raw_code(sample, type)
       if type == "rails"
         ext = "html.erb"
       elsif type == "react"
         ext = "jsx"
       end
-      filename = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.#{ext}"
-      contents = read_file(filename)
-      contents
+
+      read_source_file "app/views/playbook/samples", sample, "index.#{ext}"
     end
 
     def get_sample_code_content(sample, type)
@@ -51,6 +28,24 @@ module Playbook
       raw rouge(code, rouge_type)
     end
 
+    def get_samples(kit)
+      sample_yaml = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/samples.yml")
+      all_samples = []
+
+      sample_yaml.each do |_category, sample|
+        all_samples.push(sample)
+      end
+
+      output = ""
+      samples_using_kit = []
+      all_samples[0].each do |sample|
+        filepath = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.html.erb"
+        output = `grep -l 'pb_rails(\"#{kit}' #{filepath}`
+        samples_using_kit.push(sample) if output.chomp == filepath
+      end
+      samples_using_kit
+    end
+
     def render_sample_ui(sample, type)
       if type == "rails"
         render template: "playbook/samples/#{sample}/index.html.erb"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("date_picker", props: {
+  label: "Unformatted Date Object",
+  default_date: Date.today,
+  picker_id: "date-picker-anti-pattern1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Date Object Without Time - Displays Yesterday's Date",
+  default_date: Date.today.to_datetime.utc.iso8601,
+  picker_id: "date-picker-anti-pattern2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "Unformatted DateTime Object",
+  default_date: DateTime.current,
+  picker_id: "date-picker-anti-pattern3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  label: "String Conversion Without ISO Formatting",
+  default_date: DateTime.current.utc.to_s,
+  picker_id: "date-picker-anti-pattern5"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb

@@ -1,17 +1,17 @@
 <%= pb_rails("date_picker", props: {
-  default_date: "07/31/2020",
+  default_date: "07/25/2020",
   label: "Default Date String",
   picker_id: "date-picker-default-date1"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: (Date.today + 2).httpdate,
+  default_date: DateTime.current.utc.iso8601,
   label: "Default Date Dynamic",
   picker_id: "date-picker-default-date2"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   label: "Default Date Range",
   mode: "range",
   picker_id: "date-picker-default-date3"
@@ -20,4 +20,4 @@
 <%= pb_rails("date_picker", props: {
   label: "Default Behavior",
   picker_id: "date-picker-default-date4"
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx

@@ -9,12 +9,12 @@ const DatePickerDefaultDate = () => (
         pickerId="date-picker-default-date1"
     />
     <DatePicker
-        defaultDate={new Date().fp_incr(1)}
+        defaultDate={new Date()}
         label="Default Date Dynamic"
         pickerId="date-picker-default-date2"
     />
     <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(6)]}
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
         label="Default Date Range"
         mode="range"
         pickerId="date-picker-default-date3"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -1 +1,3 @@
-The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass a string or date object if you want a default value on page load.
+The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load.  Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.  
+
+If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb

@@ -1,11 +1,11 @@
 <%= pb_rails("date_picker", props: {
-  disable_date: [(Date.today + 1).httpdate],
+  disable_date: [(DateTime.current + 1.day).utc.iso8601],
   label: "Disable Single Date",
   picker_id: "single-disabled-date"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  disable_date: [(Date.today + 1).httpdate, (Date.today + 3).httpdate],
+  disable_date: [(DateTime.current + 1.day).utc.iso8601, (DateTime.current + 2.day).utc.iso8601],
   label: "Disable Multiple Dates",
   picker_id: "multiple-disabled-dates"
 }) %>
@@ -13,8 +13,8 @@
 <%= pb_rails("date_picker", props: {
   disable_range: [
           {
-            from: (Date.today + 1).httpdate,
-            to: (Date.today + 7).httpdate,
+            from: DateTime.current.utc.iso8601,
+            to: (DateTime.current + 7.day).utc.iso8601,
           },
         ],
   label: "Disable Single Range",
@@ -24,12 +24,12 @@
 <%= pb_rails("date_picker", props: {
   disable_range: [
           {
-            from: (Date.today + 1).httpdate,
-            to: (Date.today + 3).httpdate,
+            from: (DateTime.current + 1.day).utc.iso8601,
+            to: (DateTime.current + 2.day).utc.iso8601,
           },
           {
-            from: (Date.today + 7).httpdate,
-            to: (Date.today + 14).httpdate,
+            from: (DateTime.current + 7.day).utc.iso8601,
+            to: (DateTime.current + 14.day).utc.iso8601,
           },
         ],
   label: "Disable Multiple Ranges",

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("button", props: { id: "close-btn", margin_right: "sm", text: "Close" }) %>
+<%= pb_rails("button", props: { id: "clear-btn", margin_right: "sm", text: "Clear" }) %>
+<%= pb_rails("button", props: { id: "today-btn", text: "Today" }) %>
+<%= pb_rails("date_picker", props: {
+  hide_label: true,
+  margin_top: "sm",
+  picker_id: "fp-methods"
+}) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", () => {
+    const fp = document.querySelector("#fp-methods")._flatpickr
+    const closeBtn = document.querySelector("#close-btn")
+    const clearBtn = document.querySelector("#clear-btn")
+    const todayBtn = document.querySelector("#today-btn")
+
+    closeBtn.addEventListener("click", () => {
+      fp.close()
+    })
+    clearBtn.addEventListener("click", () => {
+      fp.clear()
+    })
+    todayBtn.addEventListener("click", () => {
+      fp.setDate(new Date(), true)
+    })
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react'
+import { Button, DatePicker } from '../../'
+
+const DatePickerFlatpickrMethods = () => {
+  let fpInstance
+  useEffect(() => {
+    fpInstance = document.querySelector('#fp-methods')._flatpickr
+  }, [])
+  const clickHandlerClear = () => {
+    fpInstance.clear()
+  }
+  const clickHandlerClose = () => {
+    fpInstance.close()
+  }
+  const clickHandlerToday = () => {
+    fpInstance.setDate(new Date(), true)
+  }
+
+  return (
+    <div>
+      <Button
+          marginRight="sm"
+          onClick={clickHandlerClose}
+          text="Close"
+      />
+      <Button
+          marginRight="sm"
+          onClick={clickHandlerClear}
+          text="Clear"
+      />
+      <Button
+          onClick={clickHandlerToday}
+          text="Today"
+      />
+      <DatePicker
+          hideLabel
+          marginTop="sm"
+          pickerId="fp-methods"
+      />
+    </div>
+  )
+}
+
+export default DatePickerFlatpickrMethods

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb

@@ -1,23 +1,23 @@
 <%= pb_rails("date_picker", props: {
-  default_date: (Date.today).httpdate,
+  default_date: DateTime.current.utc.iso8601,
   format: "m-d-Y",
   picker_id: "date-picker-format1"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: (Date.today).httpdate,
+  default_date: DateTime.current.utc.iso8601,
   format: "m/d/y",
   picker_id: "date-picker-format2"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: (Date.today).httpdate,
+  default_date: DateTime.current.utc.iso8601,
   format: "n-j-y",
   picker_id: "date-picker-format3"
 }) %>
 
 <%= pb_rails("date_picker", props: {
-  default_date: (Date.today).httpdate,
+  default_date: DateTime.current.utc.iso8601,
   format: "Y-d-m",
   picker_id: "date-picker-format4"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("date_picker", props: {
   label: "Dynamic dates",
-  max_date: (Date.today + 3).httpdate,
-  min_date: (Date.today - 3).httpdate,
+  max_date: (DateTime.current + 1.day).utc.iso8601,
+  min_date: (DateTime.current - 1.day).utc.iso8601,
   picker_id: "date-picker-min-max1"
 }) %>
 

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("date_picker", props: {
-  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   mode: "range",
   picker_id: "date-picker-range"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -4,7 +4,7 @@ import { DatePicker } from '../../'
 const DatePickerRange = () => (
   <div>
     <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(6)]}
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
         mode="range"
         pickerId="date-picker-range"
     />

data/app/pb_kits/playbook/pb_date_picker/docs/_description.md

@@ -1,7 +1,9 @@
-Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library.  Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.  You can implement additional features and functionality by accessing a flatpickr instance directly.  This is done with the following code.
+Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library.  Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.  You can implement additional features and functionality by accessing a flatpickr instance directly (demonstrated in the 'flatpickr methods' example below).  This is done with the following code.
 
 `const fpInstance = document.querySelector('#pickerId')._flatpickr`
 
 `pickerId` is a prop passed to the date picker kit.  Flatpickr uses this id to target an input and attach a flatpickr instance to that input.
 
-To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
+To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
+
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.

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

@@ -11,8 +11,10 @@ examples:
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
   - date_picker_error: Error
+  - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
+  - date_picker_anti_patterns: Anti-Patterns
   
   
   react:
@@ -27,6 +29,6 @@ examples:
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
   - date_picker_error: Error
+  - date_picker_flatpickr_methods: Flatpickr Methods
   - date_picker_hooks: Hooks
   - date_picker_year_range: Year Range
-  

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

@@ -10,4 +10,5 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
 export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
 export { default as DatePickerError } from './_date_picker_error.jsx'
 export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
+export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
 export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx

@@ -26,6 +26,7 @@ const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results,
   >
     <Flex
         orientation="row"
+        paddingRight="lg"
         vertical="center"
     >
       <If condition={children}>

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx

@@ -27,7 +27,6 @@ const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button
-            icon={directionIcon(next.dir)}
             onClick={partial(handleChange, next)}
             text={` ${label}`}
             variant="link"
@@ -56,15 +55,16 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
         dark={dark}
         id="sort-button"
         onClick={toggle}
+        paddingRight="none"
         variant="link"
     >
       {map(value, ({ dir, name }) => (
         <span key={`current-sort-${name}-${dir}`}>
+          {` ${options[name]}`}
           <Icon
               dark={dark}
               icon={directionIcon(dir)}
           />
-          {` ${options[name]}`}
         </span>
       ))}
     </Button>

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -36,8 +36,6 @@
   }
 
   .filter-results {
-    margin-left: $space_xs !important;
-    margin-right: $space_xs !important;
     flex-shrink:0 !important;
   }
 

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -11,47 +11,6 @@ const FilterNoBackground = (props) => {
   ]
   return (
     <>
-      <Filter
-          {...props}
-          background={false}
-          filters={{
-          'Full Name': 'John Wick',
-          'City': 'Las Vegas',
-        }}
-          results={3}
-          sortOptions={{
-          popularity: 'Popularity',
-          // eslint-disable-next-line
-          manager_title: 'Manager\'s Title',
-          // eslint-disable-next-line
-          manager_name: 'Manager\'s Name',
-        }}
-          sortValue={[{ name: 'popularity', dir: 'desc' }]}
-      >
-        <TextInput
-            label="Full Name"
-            placeholder="Enter name"
-        />
-
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            name="location"
-            options={options}
-        />
-        <Flex
-            spacing="between"
-        >
-          <Button
-              text="Apply"
-          />
-          <Button
-              text="Clear"
-              variant="secondary"
-          />
-        </Flex>
-      </Filter>
-
       <Filter
           {...props}
           background={false}

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md

@@ -0,0 +1 @@
+To remove the background from a filter, add the prop `background` with a value of `false`.

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb

@@ -0,0 +1,35 @@
+<%=
+  pb_rails("filter", props: {
+    id: "2",
+    filters: [
+      { name: "name", value: "John Wick" }
+    ],
+    results: 546,
+    template: "single"
+  }) do
+%>
+  <%
+    example_collection = [
+      OpenStruct.new(name: "Alabama", value: 1),
+      OpenStruct.new(name: "Alaska", value: 2),
+      OpenStruct.new(name: "Arizona", value: 3),
+      OpenStruct.new(name: "Arkansas", value: 4),
+      OpenStruct.new(name: "California", value: 5),
+      OpenStruct.new(name: "Colorado", value: 6),
+      OpenStruct.new(name: "Connecticut", value: 7),
+      OpenStruct.new(name: "Delaware", value: 8),
+      OpenStruct.new(name: "Florida", value: 9),
+      OpenStruct.new(name: "Georgia", value: 10),
+    ]
+  %>
+
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
+
+const FilterNoSort = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A Galaxy Far Far Away Like Really Far Away' },
+  ]
+  return (
+    <Filter
+        {...props}
+        filters={{
+          'Full Name': 'John Wick',
+        }}
+        results={546}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+      <TextInput
+          label="Full Name"
+          placeholder="Enter name"
+      />
+
+      <Select
+          blankSelection="Select One..."
+          label="Territory"
+          name="location"
+          options={options}
+      />
+      <Flex
+          spacing="between"
+      >
+        <Button
+            text="Apply"
+        />
+        <Button
+            text="Clear"
+            variant="secondary"
+        />
+      </Flex>
+    </Filter>
+  )
+}
+
+export default FilterNoSort

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -37,4 +37,4 @@
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -4,6 +4,7 @@ examples:
   - filter_default: Default
   - filter_no_background: No Background
   - filter_single: Single
+  - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only
 
@@ -11,5 +12,6 @@ examples:
   - filter_default: Default
   - filter_no_background: No Background
   - filter_single: Single
+  - filter_no_sort: No Sort
   - filter_only: Filter Only
   - sort_only: Sort Only

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

@@ -1,5 +1,6 @@
 export { default as FilterDefault } from './_filter_default.jsx'
 export { default as FilterSingle } from './_filter_single.jsx'
+export { default as FilterNoSort } from './_filter_no_sort.jsx'
 export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'

data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb

@@ -1,5 +1,5 @@
 
-<%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
+<%= pb_rails("flex", props: {orientation: "row", padding_right: "lg", vertical: "center"}) do %>
 
     <% if (object.template != "sort_only") %>
       <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
@@ -11,23 +11,24 @@
               <%= pb_rails("caption", props: { text: filter[:name]}) %>
               <%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
             </div>
-          <% end %>   
+          <% end %>
           <div class="right_gradient"></div>
         </div>
       </div>
     <% end %>
 
 
-    
     <% if (object.template == "single" ) || (object.template == "sort_only") %>
-      <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%> 
-      <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}"}) do %>
+      <%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
+      <% unless object.sort_menu == [{}] %>
+        <%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
           <% object.sort_menu.each do |item| %>
             <% if item[:active] == true %>
               <%= item[:item] %>
               <%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
             <% end %>
           <% end %>
+        <% end %>
       <% end %>
     <% end %>
 
@@ -40,7 +41,7 @@
     <%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
       <%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
         <%= pb_rails("caption", props: { text: "sort by:"}) %>
-        <%= pb_rails("button", props: {variant: "link" ,classname: "p-0 ml-3",id: "sort-button#{object.id}"}) do %>
+        <%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
           <% object.sort_menu.each do |item| %>
             <% if item[:active] == true %>
               <%= item[:item] %>
@@ -51,6 +52,3 @@
       <% end %>
   <% end %>
 <% end %>
-  
-
-

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -18,6 +18,7 @@ type NavItemProps = {
   imageUrl: String,
   link: string,
   onClick?: EventHandler,
+  target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
 }
 
@@ -34,6 +35,7 @@ const NavItem = (props: NavItemProps) => {
     imageUrl,
     link,
     onClick = () => {},
+    target = '_self',
     text = '',
   } = props
   const Tag = link ? 'a' : 'div'
@@ -54,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
           className="pb_nav_list_item_link"
           href={link}
           onClick={onClick}
+          target={target}
       >
         <If condition={imageUrl}>
           <div

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

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: {title: "Popular Websites", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { text: "Google", link: "https://www.google.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "YouTube", link: "https://www.youtube.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "Facebook", link: "https://www.facebook.com/", target: "_blank" }) %>
+  <%= pb_rails("nav/item", props: { text: "Amazon", link: "https://www.amazon.com/", target: "_blank" }) %>
+<% end %>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Nav } from '../../'
+import NavItem from '../_item.jsx'
+
+const NewTab = () => (
+  <Nav
+      link="#"
+      orientation="vertical"
+      title="Popular Websites"
+  >
+    <NavItem
+        link="https://www.google.com/"
+        target="_blank"
+        text="Google"
+    />
+    <NavItem
+        link="https://www.youtube.com/"
+        target="_blank"
+        text="YouTube"
+    />
+    <NavItem
+        link="https://www.facebook.com/"
+        target="_blank"
+        text="Facebook"
+    />
+    <NavItem
+        link="https://www.amazon.com/"
+        target="_blank"
+        text="Amazon"
+    />
+  </Nav>
+)
+
+export default NewTab

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

@@ -12,6 +12,7 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
+  - new_tab: Open in a New Tab
 
   react:
   - default_nav: Default
@@ -26,4 +27,4 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - block_nav: Block
   - block_no_title_nav: Without Title
-
+  - new_tab: Open in a New Tab

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

@@ -10,3 +10,4 @@ export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
 export { default as WithIconsNav } from './_with_icons_nav.jsx'
 export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
 export { default as WithImgNav } from './_with_img_nav.jsx'
+export { default as NewTab } from './_new_tab.jsx'

data/app/pb_kits/playbook/pb_nav/item.rb

@@ -13,7 +13,9 @@ module Playbook
       prop :icon_left
       prop :icon_right
       prop :image_url
-
+      prop :target, type: Playbook::Props::Enum,
+                    values: %w[_blank _self _parent _top],
+                    default: "_self"
       def classname
         generate_classname("pb_nav_list_kit_item", active_class)
       end
@@ -30,7 +32,8 @@ module Playbook
 
       def link_options
         options.merge(
-          href: link
+          href: link,
+          target: target
         )
       end
 

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

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

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

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

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

data/lib/playbook.rb

@@ -1,9 +1,14 @@
 # frozen_string_literal: true
 
 require "sassc-rails"
+require "slim-rails"
 require "webpacker"
+require "webpacker/react"
+
 require "playbook/props"
-require "playbook/engine"
+require "playbook/version"
+require "playbook/markdown/template_handler"
+require "playbook/engine" if defined?(Rails)
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
@@ -11,22 +16,6 @@ module Playbook
   class ConflictingPropsError < StandardError; end
   class MissingPropError < StandardError; end
 
-  # @return [Boolean] indication of whether the request is a web view within Nitro Mobile
-  def self.web_page_within_mobile_app?(request)
-    request.user_agent.try(:downcase) =~ /^nitro/
-  end
-
-  # @return [String] the digest value for assets managed by the asset pipeline
-  def self.assets_digest
-    @assets_digest ||= begin
-      if ActionView::Base.respond_to?(:asset_manifest) # Rails 4
-        Digest::MD5.hexdigest(ActionView::Base.assets_manifest.assets.values.sort.join)
-      elsif Rails.configuration.assets.digests.present? # Rails 3
-        Digest::MD5.hexdigest(Rails.configuration.assets.digests.try(:values).sort.join)
-      end
-    end
-  end
-
   class << self
     def webpacker
       @webpacker ||= ::Webpacker::Instance.new(

data/lib/playbook/engine.rb

@@ -1,8 +1,5 @@
 # frozen_string_literal: true
 
-require "sassc-rails"
-require "slim-rails"
-
 module Playbook
   class Engine < ::Rails::Engine
     isolate_namespace Playbook

data/lib/playbook/markdown/template_handler.rb

@@ -0,0 +1,45 @@
+require 'redcarpet'
+
+module Playbook
+  module Markdown
+    class HTMLWithPants < Redcarpet::Render::HTML
+      include Redcarpet::Render::SmartyPants
+    end
+
+    class TemplateHandler
+      class_attribute :default_format
+      self.default_format = Mime[:html]
+
+      class << self
+        def call(template)
+          compiled_source = erb.call(template)
+          "#{name}.render(begin;#{compiled_source};end)"
+        end
+
+        def render(template)
+          markdown.render(template).html_safe
+        end
+
+        private
+
+        def md_options
+          @md_options ||= {
+            autolink: true,
+            no_intra_emphasis: true,
+            fenced_code_blocks: true,
+            strikethrough: true,
+            tables: true,
+          }
+        end
+
+        def markdown
+          @markdown ||= Redcarpet::Markdown.new(::Playbook::Markdown::HTMLWithPants, md_options)
+        end
+
+        def erb
+          @erb ||= ActionView::Template.registered_template_handler(:erb)
+        end
+      end
+    end
+  end
+end

data/lib/playbook/props/base.rb

@@ -5,10 +5,11 @@ module Playbook
     class Error < StandardError; end
 
     class Base
-      attr_reader :default, :required, :name, :kit
+      attr_reader :default, :deprecated, :required, :name, :kit
 
-      def initialize(default: nil, required: false, name:, kit:)
+      def initialize(default: nil, deprecated: false, required: false, name:, kit:)
         @default = default
+        @deprecated = deprecated
         @required = required
         @name = name
         @kit = kit
@@ -19,6 +20,8 @@ module Playbook
       end
 
       def validate!(input_value)
+        warn("#{kit} Kit: The prop '#{name}' is deprecated and will be removed in a future release!") if deprecated #TODO: add some color for pop
+
         raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?
 
         validate(value(input_value)) ||
@@ -28,6 +31,19 @@ module Playbook
       def validate(_value)
         true
       end
+
+    private
+
+      def warn(message)
+        log("Prop Warning: #{message}")
+      end
+
+      def log(message)
+        logger = ActiveSupport::Logger.new(STDOUT)
+        log_formatter = ::Logger::Formatter.new
+        @logger ||= ActiveSupport::TaggedLogging.new(logger)
+        @logger.log(0, message)
+      end
     end
   end
-end
+end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.10.0"
+  VERSION = "7.11.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.10.0
+  version: 7.11.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-11 00:00:00.000000000 Z
+date: 2020-12-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -408,7 +408,6 @@ files:
 - app/assets/images/pb.logo.svg
 - app/controllers/playbook/application_controller.rb
 - app/helpers/playbook/application_helper.rb
-- app/helpers/playbook/layout_helper.rb
 - app/helpers/playbook/pb_doc_helper.rb
 - app/helpers/playbook/pb_kit_helper.rb
 - app/helpers/playbook/pb_sample_helper.rb
@@ -710,6 +709,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
@@ -719,6 +719,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md
@@ -860,6 +862,9 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb
+- app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
@@ -1302,6 +1307,8 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_description.md
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_new_tab.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_new_tab.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
@@ -1878,6 +1885,7 @@ files:
 - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/example.yml
 - app/pb_kits/playbook/pb_tooltip/index.js
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
@@ -1985,6 +1993,7 @@ files:
 - fonts/regular-min.js
 - lib/playbook.rb
 - lib/playbook/engine.rb
+- lib/playbook/markdown/template_handler.rb
 - lib/playbook/props.rb
 - lib/playbook/props/array.rb
 - lib/playbook/props/base.rb
@@ -2016,11 +2025,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project:
+rubygems_version: 2.7.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System

data/app/helpers/playbook/layout_helper.rb

@@ -1,9 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module LayoutHelper
-    def layout(_name)
-      Dir["../*"]
-    end
-  end
-end