playbook_ui 3.4.0 → 3.5.0

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -17,6 +17,15 @@
     @include pb_textarea_focus_light;
   }
 
+  &.error {
+    [class*=pb_body_kit] {
+      margin-top: $space_xs / 2;
+    }
+    > textarea {
+      border-color: $error;
+    }
+  }
+
   &[class*=_dark] {
     textarea::placeholder {
       @include pb_body_light_dark;
@@ -27,5 +36,10 @@
     textarea:focus {
       @include pb_textarea_focus_dark;
     }
+    &.error {
+      > textarea {
+        border-color: $error_dark;
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("textarea", props: {
+  dark: true,
+  error: "This field has an error!",
+  label: "Label",
+  rows: 4
+}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Textarea } from '../..'
+
+const TextareaDarkError = () => {
+  return (
+    <div>
+      <Textarea
+          dark
+          error="This field has an error!"
+          label="Label"
+          name="comment"
+          placeholder="Placeholder text"
+          value="Default value text"
+      />
+
+    </div>
+  )
+}
+
+export default TextareaDarkError

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Textarea } from '../..'
+
+const TextareaError = () => {
+  return (
+    <div>
+      <Textarea
+          error="This field has an error!"
+          label="Label"
+          name="comment"
+          placeholder="Placeholder text"
+          value="Default value text"
+      />
+
+    </div>
+  )
+}
+
+export default TextareaError

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

@@ -4,6 +4,8 @@ examples:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
   - textarea_dark: Dark
+  - textarea_error: Textarea w/ Error
+  - textarea_dark_error: Textarea w/ Error
 
   
   
@@ -11,5 +13,7 @@ examples:
   - textarea_default: Default
   - textarea_custom: Custom Textarea Input
   - textarea_dark: Dark
+  - textarea_error: Textarea w/ Error
+  - textarea_dark_error: Textarea w/ Error
 
   

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

@@ -1,3 +1,5 @@
 export { default as TextareaDefault } from './_textarea_default.jsx'
 export { default as TextareaCustom } from './_textarea_custom.jsx'
 export { default as TextareaDark } from './_textarea_dark.jsx'
+export { default as TextareaError } from './_textarea_error.jsx'
+export { default as TextareaDarkError } from './_textarea_dark_error.jsx'

data/app/pb_kits/playbook/pb_textarea/textarea.rb

@@ -7,24 +7,31 @@ module Playbook
 
       partial "pb_textarea/textarea"
 
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+      prop :error
       prop :object
-      prop :method
       prop :label
-      prop :placeholder
-      prop :value
+      prop :method
       prop :name
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
+      prop :placeholder
       prop :rows, type: Playbook::Props::Number,
             default: 4
+      prop :value
 
       def classname
-        generate_classname("pb_textarea_kit", dark_class)
+        generate_classname("pb_textarea_kit", dark_class) + error_class
       end
 
+    private
+
       def dark_class
         dark ? "dark" : nil
       end
+
+      def error_class
+        error ? " error" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:div,
+                id: object.id,
+                data: object.data,
+                class: object.classname) do %>
+  <div class="pb_typeahead_wrapper">
+    <%= pb_rails("text_input", props: { type: "search", label: object.label, placeholder: object.placeholder }) %>
+    <%= pb_rails("list", props: { ordered: false, dark: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+    <% end %>
+  </div>
+
+  <template data-pb-typeahead-kit-result-option>
+    <%= pb_rails("list/item") do %>
+      <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
+    <% end %>
+  </template>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -0,0 +1,52 @@
+[class^=pb_typeahead_kit] {
+  .pb_typeahead_wrapper {
+    position: relative;
+  }
+
+  .text_input_wrapper {
+    margin-bottom: 0;
+  }
+
+  .pb_item_kit {
+    padding: ($space_xs + 2) 0;
+
+    &:hover {
+      background-color: $bg_light;
+    }
+  }
+
+  &:focus-within [class^=pb_list_kit] {
+    max-height: 18em;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    position: absolute;
+    left: 0;
+    right: 0;
+    background: white;
+    box-shadow: $shadow_deep;
+    z-index: 100;
+  }
+
+  &:not(:focus-within) [class^=pb_list_kit] {
+    display: none;
+  }
+
+  [class^=pb_list_kit] > [data-pb-typeahead-kit-results] > li {
+    &:focus-within {
+      background: $bg_light;
+    }
+
+    > button {
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      font: inherit;
+      cursor: pointer;
+      outline: inherit;
+      width: 100%;
+      height: 100%;
+      text-align: left;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+<%= pb_rails("typeahead", props: { data: { typeahead_example: true } }) %>
+
+<br><br><br>
+
+<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
+  <%= pb_rails("body") do %>
+    Use the above input to search for users on Github, and see the results as you type.
+  <% end %>
+
+  <%= pb_rails("body") do %>
+    When you make a selection, you will see it apear in the list below
+  <% end %>
+
+  <div data-selected-option></div>
+<% end %>
+
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "placeholder"
+    }) %>
+</template>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset.typeaheadExample) return;
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').setAttribute("src", user.avatar_url)
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample) return;
+
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").appendChild(event.detail.selected)
+  })
+<% end %>

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

@@ -0,0 +1,3 @@
+examples:
+  rails:
+  - typeahead_default: Default

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

@@ -0,0 +1,158 @@
+import PbEnhancedElement from '../pb_enhanced_element'
+import { debounce } from 'lodash'
+
+export default class PbTypeahead extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-typeahead-kit]'
+  }
+
+  connect() {
+    this.element.addEventListener('keydown', (event) => this.handleKeydown(event))
+    this.searchInput.addEventListener('focus', () => this.debouncedSearch())
+    this.searchInput.addEventListener('input', () => this.debouncedSearch())
+    this.resultsElement.addEventListener('click', (event) => this.optionSelected(event))
+  }
+
+  handleKeydown(event) {
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      this.focusPreviousOption()
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      this.focusNextOption()
+    }
+  }
+
+  search() {
+    if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
+    if (this.resultsOptionCache.has(this.searchTerm)) return this.showResults()
+
+    const searchTerm = this.searchTerm
+    const search = {
+      searchingFor: searchTerm,
+      setResults: (results) => {
+        this.resultsCacheUpdate(searchTerm, 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)
+    if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys[0])
+
+    this.resultsOptionCache.set(searchTerm, results)
+    this.showResults()
+  }
+
+  resultsCacheClear() {
+    this.resultsOptionCache.clear()
+  }
+
+  get debouncedSearch() {
+    return this._debouncedSearch = (
+      this._debouncedSearch ||
+        debounce(this.search, this.searchDebounceTimeout).bind(this)
+    )
+  }
+
+  showResults() {
+    if (!this.resultsOptionCache.has(this.searchTerm)) return
+
+    this.clearResults()
+    for (const result of this.resultsOptionCache.get(this.searchTerm)) {
+      this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
+    }
+    for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
+      result.addEventListener('mousedown', (event) => this.optionSelected(event))
+    }
+  }
+
+  optionSelected(event) {
+    const resultOption = event.target.closest('[data-result-option-item]')
+    if (!resultOption) return
+
+    this.resultsCacheClear()
+    this.searchInputClear()
+    this.clearResults()
+
+    this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
+  }
+
+  clearResults() {
+    this.resultsElement.innerHTML = ''
+  }
+
+  newResultOption(content) {
+    const resultOption = this.resultOptionTemplate.content.cloneNode(true)
+    resultOption.querySelector('slot[name="content"]').replaceWith(content)
+    return resultOption
+  }
+
+  focusPreviousOption() {
+    const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem)
+    const previousIndex = currentIndex - 1
+    const previousOptionItem = (
+      this.resultOptionItems[previousIndex] ||
+        this.resultOptionItems[this.resultOptionItems.length - 1]
+    )
+    previousOptionItem.focus()
+  }
+
+  focusNextOption() {
+    const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem)
+    const nextIndex = currentIndex + 1
+    const nextOptionItem = (
+      this.resultOptionItems[nextIndex] ||
+        this.resultOptionItems[0]
+    )
+    nextOptionItem.focus()
+  }
+
+  get resultOptionItems() {
+    return Array.from(this.resultsElement.querySelectorAll('[data-result-option-item]'))
+  }
+
+  get currentSelectedResultOptionItem() {
+    return document.activeElement.closest('[data-result-option-item]')
+  }
+
+  get searchInput() {
+    return this._searchInput = (this._searchInput || this.element.querySelector('input[type="search"]'))
+  }
+
+  get searchTerm() {
+    return this.searchInput.value
+  }
+
+  searchInputClear() {
+    this.searchInput.value = ''
+  }
+
+  get searchTermMinimumLength() {
+    return this.element.dataset.pbTypeaheadKitSearchTermMinimumLength
+  }
+
+  get searchDebounceTimeout() {
+    return this.element.dataset.pbTypeaheadKitSearchDebounceTimeout
+  }
+
+  get resultsElement() {
+    return this._resultsElement = (this._resultsElement || this.element.querySelector('[data-pb-typeahead-kit-results]'))
+  }
+
+  get resultOptionTemplate() {
+    return this._resultOptionTemplate = (
+      this._resultOptionTemplate ||
+      this.element.querySelector('template[data-pb-typeahead-kit-result-option]')
+    )
+  }
+
+  get resultsOptionCache() {
+    return this._resultsOptionCache = (
+      this._resultsOptionCache ||
+      new Map
+    )
+  }
+}

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTypeahead
+    class Typeahead
+      include Playbook::Props
+
+      prop :label
+      prop :placeholder
+      prop :search_term_minimum_length, default: 3
+      prop :search_debounce_timeout, default: 250
+
+      partial "pb_typeahead/typeahead"
+
+      def classname
+        generate_classname("pb_typeahead_kit")
+      end
+
+      def data
+        Hash(values[:data]).merge(
+          pb_typeahead_kit: true,
+          pb_typeahead_kit_search_term_minimum_length: search_term_minimum_length,
+          pb_typeahead_kit_search_debounce_timeout: search_debounce_timeout,
+        )
+      end
+    end
+  end
+end