playbook_ui 4.3.1 → 4.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2511d44a10345d1827a31ca450fbc31170726b201a87de90ec7ecf005826cbb7
-  data.tar.gz: d14f6540f660c158d3722f38614e1efc9489906034323584a34801c7a359c7db
+  metadata.gz: e9e67b7c641a97dec35678810ee27d5b1d81d107387628f195e22c0cd1c8b85a
+  data.tar.gz: bf29ef64507bbf6c46cf63589ef0756a9c136041f62dbe981f8d7265365d415f
 SHA512:
-  metadata.gz: 31b86ad405494ebbe3a19923a41b48af7227617416f41690602761b7a762096c77853f4ef9ebce3e2c72b9f40e802c1b90529025cb23632d27bc83176cad2e8d
-  data.tar.gz: d1e5c82bc28edcfcf1b6b738260f62e3a07480f76eab3229047188bcfaff67c5544da8ae5309dc4e084aa3fc14d7024a5b8631c8b1506ceb36502624025eec90
+  metadata.gz: c0e229990f55c9d8f9d2d63f2a35033585cdcba14e6cdb547a55319565fe6b9f492ac0bbd8cd48c8b7e2400247ee77f6cc2036737c6950e4f539094bb5b802ae
+  data.tar.gz: 7909e078c4de087285d5c36165b467812814952c1cc1aa5b336da1926f79cd2b898f71bdeb27cbe9e31894db4fadc5531bf999f0f835ece642611560df03214d

data/app/helpers/playbook/pb_doc_helper.rb

@@ -15,6 +15,29 @@ module Playbook
       end
     end
 
+    def read_file(filename)
+      if File.file?(filename)
+        File.read(filename)
+      else
+        ""
+      end
+    end
+
+    def get_kit_description(kit)
+      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit}/docs/_description.md"
+      read_file(filename)
+    end
+
+    def get_per_sample_descriptions(kit, key)
+      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
+      read_file(filename)
+    end
+
+    def get_kit_footer(kit)
+      filename = "#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
+      read_file(filename)
+    end
+
     def pb_kit(kit: "", type: "rails", show_code: true)
       @type = type
       @kit_examples = get_kit_examples(kit, type)

data/app/pb_kits/playbook/_playbook.scss

@@ -13,6 +13,7 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_range_inline/date_range_inline';
+@import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
 @import 'pb_distribution_bar/distribution_bar';

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -0,0 +1,40 @@
+
+<% type ||= "rails" %>
+
+<% if type == "react" %>
+  <% contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.jsx") %>
+<% else %>
+  <% contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.html.erb") %>
+<% end %>
+
+<div class="pb--kit-example">
+  <%= pb_rails("caption", props: { text: item }) %>
+  <br>
+  <% if type == "rails" %>
+    <%= render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}" %>
+  <% elsif type == "react" %>
+    <%= pb_react(key.camelize) %> 
+  <% end %>
+  <br>
+</div>
+
+  <% if @show_code%>
+    <div class="markdown pb--kit-example-markdown">
+      <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
+    </div>
+    <div class="pb--codeControls">
+      <ul>
+        <li>
+          <a href="#" data-toggle="code_example">Code Example</a>
+        </li>
+      </ul>
+    </div>
+    <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example">
+      <a href="#" data-toggle="false" class="pb--close-toggle">Close</a>
+      <% if type == "rails" %>
+        <pre class="highlight"><%= raw rouge(contents, "erb") %></pre>
+      <% elsif type == "react" %>
+        <pre class="highlight"><%= raw rouge(contents, "react")%></pre>
+      <% end %>
+    </div>  
+  <% end %>

data/app/pb_kits/playbook/data/menu.yml

@@ -44,7 +44,7 @@ kits:
   - section_separator
   - source
   - star_rating
-  - stat_changea
+  - stat_change
   - table
   - typography:
     - body
@@ -56,6 +56,7 @@ kits:
     - dashboard_value
     - date
     - date_range_inline
+    - date_range_stacked
     - date_stacked
     - date_year_stacked
     - home_address_street

data/app/pb_kits/playbook/index.js

@@ -13,6 +13,7 @@ export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
+export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
@@ -73,3 +74,4 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
 export PbTypeahead from './pb_typeahead'
+export PbPopover from './pb_popover'

data/app/pb_kits/playbook/packs/examples.js

@@ -27,6 +27,7 @@ import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
+import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
 import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as DistributionBar from 'pb_distribution_bar/docs'
@@ -80,6 +81,9 @@ import * as UserBadge from 'pb_user_badge/docs'
 import PbTypeahead from 'pb_typeahead'
 PbTypeahead.start()
 
+import PbPopover from 'pb_popover'
+PbPopover.start()
+
 WebpackerReact.setup({
   ...Avatar,
   ...Badge,
@@ -95,6 +99,7 @@ WebpackerReact.setup({
   ...DashboardValue,
   ...Date,
   ...DateRangeInline,
+  ...DateRangeStacked,
   ...DateStacked,
   ...DateYearStacked,
   ...DistributionBar,

data/app/pb_kits/playbook/packs/kits/pb_date_range_stacked.js

@@ -0,0 +1 @@
+import '../../pb_date_range_stacked/_date_range_stacked.jsx'

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -36,9 +36,12 @@
     font-weight: 600;
     z-index: 100;
   }
+  
+  .pb--kit-example, .pb--kit-example-markdown {
+    padding: calc(2rem + 4px) 2rem 1rem;
+  }
 
   .pb--kit-example {
-    padding: calc(2rem + 4px) 2rem 1rem;
     position: relative;
 
     &::after {

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -36,12 +36,12 @@
   code {
     background: #122b3b;
     color: #faf6e4;
-    padding: 0.5rem 1.5rem;
-    margin: 1rem 0;
+    padding: 0.1rem 0.3rem;
+    margin: 1rem 5px;
     box-shadow: 0 2px 10px $shadow;
     border-radius: 0.25rem;
     overflow: hidden;
-    font-size: 1rem;
+    font-size: 14px;
   }
 
   body {

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.html.erb

@@ -0,0 +1,24 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <%= pb_rails("flex", props: {vertical: "center"}) do %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("date_year_stacked", props: { align: 'right',
+                                                   date: object.start_date,
+                                                   dark: object.dark }) %>
+      <% end %>
+      <%= pb_rails("flex/flex_item") do %>
+        <div>
+          <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
+            <%= pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, classname: "pb_date_range_stacked_arrow" }) %>
+          <% end %>
+        </div>
+      <% end %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("date_year_stacked", props: { date: object.end_date,
+                                                   dark: object.dark }) %>
+      <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -0,0 +1,68 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildCss } from '../utilities/props'
+
+import {
+  Body,
+  DateYearStacked,
+  Flex,
+  FlexItem,
+  Icon,
+} from '../'
+
+type DateRangeStackedProps = {
+  className?: String | Array<String>,
+  data?: String,
+  dark?: Boolean,
+  endDate: String,
+  id?: String,
+  startDate: String
+}
+
+const DateRangeStacked = ({
+  className,
+  dark = false,
+  endDate,
+  startDate,
+}: DateRangeStackedProps) => {
+  const css = classnames(className, buildCss('pb_date_range_stacked'))
+
+  return (
+    <div className={css}>
+      <Flex vertical="center">
+        <FlexItem>
+          <DateYearStacked
+              align="right"
+              dark={dark}
+              date={startDate}
+          />
+        </FlexItem>
+        <FlexItem>
+          <div>
+            <Body
+                color="light"
+                tag="span"
+            >
+              <Icon
+                  className="pb_date_range_stacked_arrow"
+                  fixedWidth
+                  icon="long-arrow-right"
+              />
+            </Body>
+          </div>
+        </FlexItem>
+        <FlexItem>
+          <DateYearStacked
+              dark={dark}
+              date={endDate}
+          />
+        </FlexItem>
+      </Flex>
+    </div>
+  )
+}
+
+export default DateRangeStacked

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss

@@ -0,0 +1,7 @@
+@import "../tokens/spacing";
+
+[class^=pb_date_range_stacked] {
+  .pb_date_range_stacked_arrow {
+    margin: 0 ($space_sm - 3) 0;
+  }
+}

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDateRangeStacked
+    class DateRangeStacked
+      include Playbook::Props
+
+      partial "pb_date_range_stacked/date_range_stacked"
+
+      prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :end_date, type: Playbook::Props::Date, required: true
+      prop :start_date, type: Playbook::Props::Date, required: true
+
+      def classname
+        generate_classname("pb_date_range_stacked")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), dark: true }) %>

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { DateRangeStacked } from '../../'
+
+const DateRangeStackedDark = () => (
+  <div>
+    <DateRangeStacked
+        dark
+        endDate={new Date('20 Mar 2020')}
+        startDate={new Date('18 Jun 2019')}
+    />
+  </div>
+)
+
+export default DateRangeStackedDark

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DateRangeStacked } from '../../'
+
+const DateRangeStackedDefault = () => (
+  <div>
+    <DateRangeStacked
+        endDate={new Date('20 Mar 2020')}
+        startDate={new Date('18 Jun 2019')}
+    />
+  </div>
+)
+
+export default DateRangeStackedDefault

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

@@ -0,0 +1,11 @@
+examples:
+  
+  rails:
+  - date_range_stacked_default: Default
+  - date_range_stacked_dark: Dark
+  
+  
+  react:
+  - date_range_stacked_default: Default
+  - date_range_stacked_dark: Dark
+  

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

@@ -0,0 +1,2 @@
+export { default as DateRangeStackedDefault } from './_date_range_stacked_default.jsx'
+export { default as DateRangeStackedDark } from './_date_range_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_popover/_popover.html.erb

@@ -8,20 +8,3 @@
       <% end %>
     </div>
 <% end %>
-
-
-<%# Javascript for the Popover Instance %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new PbPopover(
-        "#<%= object.trigger_element_id %>",
-        "#<%= object.tooltip_id %>",
-         "<%= object.position %>",
-          <%= object.popover_offset %>,
-      )
-    })
-  <% end %>
-<% end %>
-
-

data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx

@@ -24,6 +24,7 @@ export default class PopoverWithButton extends React.Component {
 
     return (
       <PbReactPopover
+          offset
           placement="bottom"
           reference={popoverReference}
           show={this.state.showPopover}

data/app/pb_kits/playbook/pb_popover/index.js

@@ -0,0 +1,50 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+import Popper from 'popper.js'
+
+const POPOVER_OFFSET_Y = '0,8'
+
+export default class PbPopover extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-popover-kit]'
+  }
+
+  connect() {
+    this.popper = new Popper(this.triggerElement, this.tooltip, {
+      placement: this.position,
+      modifiers: {
+        offset: {
+          offset: this.offset,
+        },
+      },
+    })
+
+    this.triggerElement.addEventListener('click', () => {
+      this.tooltip.classList.toggle('show')
+      this.popper.scheduleUpdate()
+    })
+  }
+
+  get triggerElement() {
+    return this._triggerElement = (this._triggerElement || document.querySelector(`#${this.triggerElementId}`))
+  }
+
+  get tooltip() {
+    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+  }
+
+  get position() {
+    return this.element.dataset.pbPopoverPosition
+  }
+
+  get triggerElementId() {
+    return this.element.dataset.pbPopoverTriggerElementId
+  }
+
+  get tooltipId() {
+    return this.element.dataset.pbPopoverTooltipId
+  }
+
+  get offset() {
+    return this.element.dataset.pbPopoverOffset === 'true' ? POPOVER_OFFSET_Y : '0,0'
+  }
+}

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -11,13 +11,19 @@ module Playbook
       prop :tooltip_id
       prop :offset, type: Playbook::Props::Boolean, default: false
 
-      def popover_offset
-        offset ? "0, 8" : "0, 0"
-      end
-
       def classname
         generate_classname("pb_popover_kit")
       end
+
+      def data
+        Hash(values[:data]).merge(
+          pb_popover_kit: true,
+          pb_popover_position: position,
+          pb_popover_trigger_element_id: trigger_element_id,
+          pb_popover_tooltip_id: tooltip_id,
+          pb_popover_offset: offset,
+        )
+      end
     end
   end
 end

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

@@ -0,0 +1,3 @@
+Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
+
+

data/app/pb_kits/playbook/pb_section_separator/docs/_footer.md

@@ -0,0 +1,2 @@
+### Things to Avoid
+Do not use section separators to handle lists. Use List Kit. 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.md

@@ -0,0 +1 @@
+This should only be use on white backgrounds. This adds a white background that will be very noticeable on other background colors. 

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.md

@@ -0,0 +1 @@
+This should only be use on light backgrounds (with our variable `$bg_light`). 

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

@@ -0,0 +1,51 @@
+<%= pb_rails("select", props: {
+  label: "Colors",
+  name: "foo",
+  data: { context_select: true },
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "orange", value_text: "Orange" },
+    { value: "yellow", value_text: "Yellow" },
+    { value: "green", value_text: "Green" },
+    { value: "blue", value_text: "Blue" },
+    { value: "purple", value_text: "Purple" },
+  ]
+  }) %>
+<%= pb_rails("typeahead", props: { label: "Crayola Crayons", name: :foo, data: { typeahead_example2: true, search_context_value_selector: "[data-context-select] select" } }) %>
+
+<br><br><br>
+
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset.typeaheadExample2) return;
+
+    const fuzzyMatch = function(string, term) {
+      const ratio = 0.5;
+      string = string.toLowerCase();
+      const compare = term.toLowerCase();
+      let matches = 0;
+
+      if (string.indexOf(compare) > -1) return true;
+
+      for (let index = 0; index < compare.length; index++) {
+        if (string.indexOf(compare[index]) > -1) {
+          matches += 1
+        } else {
+          matches -=1;
+        }
+      }
+
+      return (matches / string.length >= ratio || term == "")
+    };
+
+    const colors = { red: ["Red", "Scarlet", "Chestnut", "Mahogany"],
+                     orange: ["Orange", "Apricot", "Peach", "Melon", "Burnt Sienna", "Macaroni and Cheese"],
+                     yellow: ["Yellow", "Gold", "Goldenrod", "Canary", "Laser Lemon"],
+                     green: ["Green", "Olive Green", "Granny Smith Apple", "Spring Green", "Sea Green"],
+                     blue: ["Blue", "Cerulean", "Bluetiful", "Sky Blue", "Cadet Blue", "Cornflower"],
+                     purple: ["Violet", "Indigo", "Wisteria", "Purple Mountain Majesty", "Lavender"] };
+
+    event.detail.setResults(colors[event.detail.searchingContext].filter((color) => fuzzyMatch(color, event.detail.searchingFor)).map((color) => document.createTextNode(color)));
+  })
+<% end %>

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

@@ -1,3 +1,4 @@
 examples:
   rails:
   - typeahead_default: Default
+  - typeahead_with_context: With Context

data/app/pb_kits/playbook/pb_typeahead/index.js

@@ -25,24 +25,27 @@ export default class PbTypeahead extends PbEnhancedElement {
 
   search() {
     if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
-    if (this.resultsOptionCache.has(this.searchTerm)) return this.showResults()
+
+    this.showResults()
 
     const searchTerm = this.searchTerm
+    const searchContext = this.searchContext
     const search = {
       searchingFor: searchTerm,
+      searchingContext: searchContext,
       setResults: (results) => {
-        this.resultsCacheUpdate(searchTerm, results)
+        this.resultsCacheUpdate(searchTerm, searchContext, results)
       },
     }
-
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
-  resultsCacheUpdate(searchTerm, results) {
-    if (this.resultsOptionCache.has(searchTerm)) this.resultsOptionCache.delete(searchTerm)
+  resultsCacheUpdate(searchTerm, searchContext, results) {
+    const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext)
+    if (this.resultsOptionCache.has(searchTermAndContext)) this.resultsOptionCache.delete(searchTermAndContext)
     if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys[0])
 
-    this.resultsOptionCache.set(searchTerm, results)
+    this.resultsOptionCache.set(searchTermAndContext, results)
     this.showResults()
   }
 
@@ -58,10 +61,10 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   showResults() {
-    if (!this.resultsOptionCache.has(this.searchTerm)) return
+    if (!this.resultsOptionCache.has(this.searchTermAndContext)) return
 
     this.clearResults()
-    for (const result of this.resultsOptionCache.get(this.searchTerm)) {
+    for (const result of this.resultsOptionCache.get(this.searchTermAndContext)) {
       this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
     }
     for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
@@ -126,6 +129,30 @@ export default class PbTypeahead extends PbEnhancedElement {
     return this.searchInput.value
   }
 
+  get searchContext() {
+    if (this._searchContext) return this._searchContext
+
+    const selector = this.element.dataset.searchContextValueSelector
+    if (selector) return (
+      this.element.parentNode.querySelector(selector) ||
+        this.element.closest(selector)
+    ).value
+
+    return null
+  }
+
+  set searchContext(value) {
+    this._searchContext = value
+  }
+
+  get searchTermAndContext() {
+    return this.cacheKeyFor(this.searchTerm, this.searchContext)
+  }
+
+  cacheKeyFor(searchTerm, searchContext) {
+    return [searchTerm, JSON.stringify(searchContext)].join()
+  }
+
   searchInputClear() {
     this.searchInput.value = ''
   }

data/app/pb_kits/playbook/vendor.js

@@ -7,7 +7,3 @@ import './pb_form/pb_form_validation'
 
 // Lazy image loading
 import 'lazysizes'
-
-// Popovers
-import PbPopover from './pb_popover/_popover.js'
-window.PbPopover = PbPopover

data/app/views/playbook/pages/kit_show.html.slim

@@ -1,6 +1,9 @@
 div class="pb--kit-show #{@kit}-kit"
   = pb_rails("title", props: { text: pb_kit_title(@kit), tag: "h1", size: 1 })
+  div class="markdown"
+    = markdown(get_kit_description(@kit))
 
+div        
   .pb--kit-type-nav
     - if has_kit_type?(@kit, "rails")
       a href="#{kit_show_rails_path(@kit)}" class="#{'active' if action_name == 'kit_show_rails'}" Rails
@@ -9,6 +12,12 @@ div class="pb--kit-show #{@kit}-kit"
 
   - if(action_name == "kit_show_rails")
     = pb_kit(kit: @kit)
+    .markdown
+      br
+      = markdown(get_kit_footer(@kit))
     = pb_kit_api(@kit)
   - else
     = pb_kit(kit: @kit, type: "react")
+    .markdown
+      br
+      = markdown(get_kit_footer(@kit))

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.3.1
+  version: 4.4.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-14 00:00:00.000000000 Z
+date: 2020-02-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -413,7 +413,7 @@ files:
 - app/pb_kits/playbook/_playbook.scss
 - app/pb_kits/playbook/config/_kit_example.html.erb
 - app/pb_kits/playbook/config/_kit_samples_list.html.erb
-- app/pb_kits/playbook/config/_kit_ui.html.slim
+- app/pb_kits/playbook/config/_kit_ui.html.erb
 - app/pb_kits/playbook/config/_pb_kit_api.html.erb
 - app/pb_kits/playbook/data/menu.yml
 - app/pb_kits/playbook/index.js
@@ -435,6 +435,7 @@ files:
 - app/pb_kits/playbook/packs/kits/pb_dashboard_value.js
 - app/pb_kits/playbook/packs/kits/pb_date.js
 - app/pb_kits/playbook/packs/kits/pb_date_range_inline.js
+- app/pb_kits/playbook/packs/kits/pb_date_range_stacked.js
 - app/pb_kits/playbook/packs/kits/pb_date_stacked.js
 - app/pb_kits/playbook/packs/kits/pb_date_year_stacked.js
 - app/pb_kits/playbook/packs/kits/pb_distribution_bar.js
@@ -678,6 +679,16 @@ files:
 - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx
 - app/pb_kits/playbook/pb_date_range_inline/docs/example.yml
 - app/pb_kits/playbook/pb_date_range_inline/docs/index.js
+- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.html.erb
+- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
+- app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss
+- app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb
+- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb
+- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx
+- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb
+- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx
+- app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml
+- app/pb_kits/playbook/pb_date_range_stacked/docs/index.js
 - app/pb_kits/playbook/pb_date_stacked/_date_stacked.html.erb
 - app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx
 - app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss
@@ -1039,7 +1050,6 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/index.js
 - app/pb_kits/playbook/pb_pill/pill.rb
 - app/pb_kits/playbook/pb_popover/_popover.html.erb
-- app/pb_kits/playbook/pb_popover/_popover.js
 - app/pb_kits/playbook/pb_popover/_popover.jsx
 - app/pb_kits/playbook/pb_popover/_popover.scss
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -1052,6 +1062,7 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb
 - app/pb_kits/playbook/pb_popover/docs/example.yml
 - app/pb_kits/playbook/pb_popover/docs/index.js
+- app/pb_kits/playbook/pb_popover/index.js
 - app/pb_kits/playbook/pb_popover/popover.rb
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
@@ -1096,12 +1107,16 @@ files:
 - app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
+- app/pb_kits/playbook/pb_section_separator/docs/_description.md
+- app/pb_kits/playbook/pb_section_separator/docs/_footer.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.html.erb
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx
+- app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.md
 - app/pb_kits/playbook/pb_section_separator/docs/example.yml
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
 - app/pb_kits/playbook/pb_section_separator/section_separator.rb
@@ -1317,6 +1332,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/example.yml
 - app/pb_kits/playbook/pb_typeahead/index.js
 - app/pb_kits/playbook/pb_typeahead/typeahead.rb

data/app/pb_kits/playbook/config/_kit_ui.html.slim

@@ -1,34 +0,0 @@
-- type ||= "rails"
-
-- if type == "react"
-  - contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.jsx")
-- else
-  - contents = File.read("#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{@kit_examples[:kit]}/docs/_#{key}.html.erb")
-
-.pb--kit-example
-  = pb_rails("caption", props: { text: item })
-  br
-  - if type == "rails"
-    = render partial: "pb_#{@kit_examples[:kit]}/docs/#{key}"
-  - elsif type == "react"
-    = pb_react(key.camelize)
-  br
-
-- if @samples
-  = render partial: "kit_samples_list"
-
-- if defined?(rouge)
-  - if @show_code
-    .pb--codeControls
-      ul
-        li
-          a href="#" data-toggle="code_example" Code Example
-
-    .pb--codeCopy data-action="toggle" data-togglable="code_example"
-      a.pb--close-toggle href="#" data-toggle="false" Close
-      pre.highlight
-        - if type == "rails"
-          = raw rouge(contents, "erb")
-        - elsif type == "react"
-          = raw rouge(contents, "react")
-        

data/app/pb_kits/playbook/pb_popover/_popover.js

@@ -1,46 +0,0 @@
-import Popper from 'popper.js'
-
-class PbPopover {
-  constructor(
-    triggerElement = '#triggerElement',
-    tooltip = '#tooltip',
-    placement = 'left',
-    offset,
-  ) {
-    this.triggerElement = triggerElement
-    this.tooltip = tooltip
-    this.placement = placement
-    this.offset = offset
-    this.setupPopper()
-  }
-
-  //getters
-  get referenceElement() {
-    return document.querySelector(this.triggerElement)
-  }
-  get popoverTooltip() {
-    return document.querySelector(this.tooltip)
-  }
-
-  attachEvents() {
-    this.referenceElement.addEventListener('click', () => {
-      this.popoverTooltip.classList.toggle('show')
-      this.popper.scheduleUpdate()
-    })
-  }
-
-  setupPopper() {
-    this.popper = new Popper(this.referenceElement, this.popoverTooltip, {
-      placement: this.placement,
-      modifiers: {
-        offset: {
-          offset: this.offset,
-        },
-      },
-    })
-
-    this.attachEvents()
-  }
-}
-
-export default PbPopover