playbook_ui 9.10.0 → 9.14.1

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx

@@ -1,13 +1,26 @@
 /* @flow */
 
 import React from 'react'
+import { Flex, Icon } from '../../'
 import { components } from 'react-select'
 
 const Placeholder = (props: any) => (
-  <components.IndicatorsContainer
-      className="placeholder"
-      {...props}
-  />
+  <>
+    <Flex
+        align="center"
+        className="placeholder"
+    >
+      <components.IndicatorsContainer
+          {...props}
+      />
+      <If condition={props.selectProps.plusIcon}>
+        <Icon
+            className="typeahead-plus-icon"
+            icon="plus"
+        />
+      </If>
+    </Flex>
+  </>
 )
 
 export default Placeholder

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

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../..'
+
+const options = [
+  { label: 'Jardim', value: 'Portuguese' },
+  { label: 'Garten', value: 'German' },
+  { label: 'Giardino', value: 'Italian' },
+  { label: 'Jardín', value: 'Spanish' },
+]
+
+const TypeaheadCreateable = (props) => {
+  return (
+    <Typeahead
+        createable
+        isMulti
+        label="User Created Options"
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCreateable

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

@@ -0,0 +1,36 @@
+<%
+  synths = [
+    { label: 'Oberheim', value: 'OBXa' },
+    { label: 'Moog', value: 'Minimoog' },
+    { label: 'Roland', value: 'Juno' },
+    { label: 'Korg', value: 'MS-20' },
+  ]
+%>
+<%
+  cities = [
+    { label: 'Budapest', value: 'Hungary' },
+    { label: 'Singapore', value: 'Singapore' },
+    { label: 'Oslo', value: 'Norway' },
+    { label: 'Lagos', value: 'Nigeria' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [synths.first],
+  id: "typeahead-inline-example1",
+  inline: true,
+  options: synths,
+  label: "Synths",
+  placeholder: "Add synths",
+  pills: true
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-inline-example2",
+  inline: true,
+  options: cities,
+  label: "Cities",
+  pills: true,
+  placeholder: "Add cities",
+  plus_icon: true
+}) %>

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

@@ -0,0 +1,43 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../../'
+
+const synths = [
+  { label: 'Oberheim', value: 'OBXa' },
+  { label: 'Moog', value: 'Minimoog' },
+  { label: 'Roland', value: 'Juno' },
+  { label: 'Korg', value: 'MS-20' },
+]
+
+const cities = [
+  { label: 'Budapest', value: 'Hungary' },
+  { label: 'Singapore', value: 'Singapore' },
+  { label: 'Oslo', value: 'Norway' },
+  { label: 'Lagos', value: 'Nigeria' },
+]
+
+const TypeaheadInline = (props) => {
+  return (
+    <>
+      <Typeahead
+          inline
+          isMulti
+          label="Synths"
+          options={synths}
+          {...props}
+      />
+      <Typeahead
+          inline
+          isMulti
+          label="Placeholder Plus Icon"
+          options={cities}
+          placeholder="Add cities"
+          plusIcon
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadInline

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

@@ -0,0 +1,35 @@
+<%
+  labels = [
+    { label: 'Verve', value: '1956' },
+    { label: 'Stax', value: '1957' },
+    { label: 'Motown', value: '1959' },
+    { label: 'Kudu', value: '1971' },
+    { label: 'Stones Throw', value: '1996' },
+  ]
+%>
+<%
+  expressionists = [
+    { label: 'Kandinsky', value: 'Russia' },
+    { label: 'Klee', value: 'Switzerland' },
+    { label: 'Kokoschka', value: 'Austria' },
+    { label: 'Kirchner', value: 'Germany' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [labels.first],
+  id: "typeahead-multi-kit-example1",
+  options: labels,
+  label: "Badges",
+  multi_kit: "badge",
+  pills: true
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  default_options: [expressionists.first],
+  id: "typeahead-multi-kit-example2",
+  options: expressionists,
+  label: "Small Pills",
+  multi_kit: "smallPill",
+  pills: true,
+}) %>

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

@@ -0,0 +1,44 @@
+// @flow
+
+import React from 'react'
+import { Typeahead } from '../../'
+
+const labels = [
+  { label: 'Verve', value: '1956' },
+  { label: 'Stax', value: '1957' },
+  { label: 'Motown', value: '1959' },
+  { label: 'Kudu', value: '1971' },
+  { label: 'Stones Throw', value: '1996' },
+]
+
+const expressionists = [
+  { label: 'Kandinsky', value: 'Russia' },
+  { label: 'Klee', value: 'Switzerland' },
+  { label: 'Kokoschka', value: 'Austria' },
+  { label: 'Kirchner', value: 'Germany' },
+]
+
+const TypeaheadMultiKit = (props) => {
+  return (
+    <>
+      <Typeahead
+          defaultValue={[labels[0]]}
+          isMulti
+          label="Badges"
+          multiKit="badge"
+          options={labels}
+          {...props}
+      />
+      <Typeahead
+          defaultValue={[expressionists[0]]}
+          isMulti
+          label="Small Pills"
+          multiKit="smallPill"
+          options={expressionists}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadMultiKit

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

@@ -5,6 +5,8 @@ examples:
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_inline: Inline
+    - typeahead_multi_kit: Multi Kit Options
 
   react:
     - typeahead_default: Default
@@ -12,3 +14,6 @@ examples:
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)
+    - typeahead_inline: Inline
+    - typeahead_multi_kit: Multi Kit Options
+    - typeahead_createable: Createable

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

@@ -1,5 +1,8 @@
-export { default as TypeaheadDefault } from './_typeahead_default'
-export { default as TypeaheadWithPills } from './_typeahead_with_pills'
-export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
-export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'
-export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options'
+export { default as TypeaheadDefault } from './_typeahead_default.jsx'
+export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
+export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
+export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
+export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options.jsx'
+export { default as TypeaheadInline } from './_typeahead_inline.jsx'
+export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
+export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'

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

@@ -4,7 +4,7 @@
   <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
-                class: object.classname) do %>
+                class: object.classname + object.inline_class) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

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

@@ -8,12 +8,21 @@ module Playbook
       prop :get_option_label
       prop :get_option_value
       prop :id
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
       prop :label
       prop :load_options
+      prop :multi_kit, type: Playbook::Props::String,
+                       default: ""
       prop :name
-      prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean, default: false
+      prop :options, type: Playbook::Props::HashArray,
+                     default: []
+      prop :pills, type: Playbook::Props::Boolean,
+                   default: false
+
       prop :placeholder
+      prop :plus_icon, type: Playbook::Props::Boolean,
+                       default: false
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
       prop :value
@@ -22,6 +31,10 @@ module Playbook
         generate_classname("pb_typeahead_kit")
       end
 
+      def inline_class
+        inline ? " inline" : ""
+      end
+
       def data
         Hash(values[:data]).merge(
           pb_typeahead_kit: true,
@@ -35,11 +48,14 @@ module Playbook
           dark: dark,
           defaultValue: default_options,
           id: id,
+          inline: inline,
           isMulti: true,
           label: label,
+          multiKit: multi_kit,
           name: name,
           options: options,
           placeholder: placeholder,
+          plusIcon: plus_icon,
         }
 
         base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?

data/app/pb_kits/playbook/pb_user_badge/user_badge.rb

@@ -15,7 +15,7 @@ module Playbook
       end
 
       def display_badge
-        @badge ||= begin
+        @display_badge ||= begin
           badge_path = File.join(
             File.dirname(self.class.source_location),
             "badges",

data/lib/playbook/forms/builder/action_area.rb

@@ -16,7 +16,7 @@ module Playbook
           button(value, props: props)
         end
 
-        def button(value = nil, props:)
+        def button(_value = nil, props:)
           view_context.content_tag(:li) do
             view_context.pb_rails("button", props: props)
           end
@@ -28,4 +28,4 @@ module Playbook
       end
     end
   end
-end
+end

data/lib/playbook/forms/builder/collection_select_field.rb

@@ -3,9 +3,9 @@
 module Playbook
   module Forms
     class Builder
-      def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {} )
+      def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {})
         props[:label] = @template.label(@object_name, name) if props[:label] == true
-        options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+        options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
         input = super(name, collection, value_method, text_method, options, html_options)

data/lib/playbook/forms/builder/select_field.rb

@@ -5,7 +5,7 @@ module Playbook
     class Builder
       def select(name, choices = nil, options = {}, html_options = {}, props: {}, &block)
         props[:label] = @template.label(@object_name, name) if props[:label] == true
-        options[:skip_default_ids] = false unless options.has_key?(:skip_default_ids)
+        options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
         input = super(name, choices, options, html_options, &block)

data/lib/playbook/kit_resolver.rb

@@ -8,7 +8,7 @@ module Playbook
     end
 
     def initialize
-      @cache = Hash.new do |cache, kit_name|
+      @cache = Hash.new do |_cache, kit_name|
         is_subkit = kit_name.match(%r{[/\\]})
         folder = is_subkit ? kit_name.split("/")[0] : kit_name
         item = is_subkit ? kit_name.split("/")[-1] : kit_name

data/lib/playbook/markdown/template_handler.rb

@@ -1,4 +1,6 @@
-require 'redcarpet'
+# frozen_string_literal: true
+
+require "redcarpet"
 
 module Playbook
   module Markdown
@@ -20,7 +22,7 @@ module Playbook
           markdown.render(template).html_safe
         end
 
-        private
+      private
 
         def md_options
           @md_options ||= {

data/lib/playbook/pb_doc_helper.rb

@@ -16,7 +16,7 @@ module Playbook
           example_key: example.keys.first,
           show_code: show_code,
           type: type,
-          dark: dark_mode
+          dark: dark_mode,
         }
       end.join.yield_self(&method(:raw))
     end
@@ -41,10 +41,12 @@ module Playbook
       raw("<div class='pb--docItem'>" + display_kits.join("</div><div class='pb--docItem'>") + "</div>")
     end
 
+    # rubocop:disable Naming/AccessorMethodName
     def get_kits
       menu = YAML.load_file(Playbook::Engine.root.join("app/pb_kits/playbook/data/menu.yml"))
       menu["kits"]
     end
+    # rubocop:enable Naming/AccessorMethodName
 
     def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
       title = pb_doc_render_clickable_title(kit, type)
@@ -78,7 +80,7 @@ module Playbook
               else
                 kit_show_path(kit)
               end
-      # FIXME this is here because this helper generates a link for playbook website,
+      # FIXME: this is here because this helper generates a link for playbook website,
       #       but shouldn't do anything when used elsewhere
       rescue
         puts "Kit Path Not Avaliable"

data/lib/playbook/props.rb

@@ -17,6 +17,7 @@ require_relative "./props/numeric"
 require_relative "./props/percentage"
 require_relative "./props/proc"
 require_relative "./props/string"
+require_relative "./props/nested_props"
 
 module Playbook
   module Props
@@ -36,9 +37,6 @@ module Playbook
       self.class.props[name].value values[name]
     end
 
-    attr_accessor :values
-    private :values, :values=
-
     included do
       class_attribute :props, default: {}
     end
@@ -50,7 +48,7 @@ module Playbook
       end
 
       def prop(name, type: Playbook::Props::String, **options)
-        self.props = self.props.merge(name => type.new(options.merge(name: name, kit: self)))
+        self.props = props.merge(name => type.new(options.merge(name: name, kit: self)))
 
         define_method(name) { prop(name) }
       end