playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_typeahead/{index.js → index.ts}

@@ -2,18 +2,26 @@ import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from 'lodash'
 
 export default class PbTypeahead extends PbEnhancedElement {
+  _searchInput: HTMLInputElement
+  _resultsElement: HTMLElement
+  _debouncedSearch: Function
+  _resultsLoadingIndicator: HTMLElement
+  _resultOptionTemplate: HTMLElement
+  _resultsOptionCache: Map<string, Array<DocumentFragment>>
+  _searchContext: string
+
   static get selector() {
     return '[data-pb-typeahead-kit]'
   }
 
   connect() {
-    this.element.addEventListener('keydown', (event) => this.handleKeydown(event))
+    this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event))
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
-    this.resultsElement.addEventListener('click', (event) => this.optionSelected(event))
+    this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
   }
 
-  handleKeydown(event) {
+  handleKeydown(event: KeyboardEvent) {
     if (event.key === 'ArrowUp') {
       event.preventDefault()
       this.focusPreviousOption()
@@ -24,7 +32,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   search() {
-    if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
+    if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) return this.clearResults()
 
     this.toggleResultsLoadingIndicator(true)
     this.showResults()
@@ -34,17 +42,17 @@ export default class PbTypeahead extends PbEnhancedElement {
     const search = {
       searchingFor: searchTerm,
       searchingContext: searchContext,
-      setResults: (results) => {
+      setResults: (results: Array<DocumentFragment>) => {
         this.resultsCacheUpdate(searchTerm, searchContext, results)
       },
     }
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }))
   }
 
-  resultsCacheUpdate(searchTerm, searchContext, results) {
+  resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
     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])
+    if (this.resultsOptionCache.size > 32) this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value)
 
     this.resultsOptionCache.set(searchTermAndContext, results)
     this.showResults()
@@ -57,7 +65,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   get debouncedSearch() {
     return this._debouncedSearch = (
       this._debouncedSearch ||
-        debounce(this.search, this.searchDebounceTimeout).bind(this)
+      debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
     )
   }
 
@@ -70,12 +78,12 @@ export default class PbTypeahead extends PbEnhancedElement {
       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))
+      result.addEventListener('mousedown', (event: MouseEvent) => this.optionSelected(event))
     }
   }
 
-  optionSelected(event) {
-    const resultOption = event.target.closest('[data-result-option-item]')
+  optionSelected(event: MouseEvent) {
+    const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
     this.resultsCacheClear()
@@ -89,8 +97,8 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.resultsElement.innerHTML = ''
   }
 
-  newResultOption(content) {
-    const resultOption = this.resultOptionTemplate.content.cloneNode(true)
+  newResultOption(content: DocumentFragment) {
+    const resultOption = (this.resultOptionTemplate as HTMLTemplateElement).content.cloneNode(true) as Element
     resultOption.querySelector('slot[name="content"]').replaceWith(content)
     return resultOption
   }
@@ -100,9 +108,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const previousIndex = currentIndex - 1
     const previousOptionItem = (
       this.resultOptionItems[previousIndex] ||
-        this.resultOptionItems[this.resultOptionItems.length - 1]
-    )
-    previousOptionItem.focus()
+      this.resultOptionItems[this.resultOptionItems.length - 1]
+    );
+    (previousOptionItem as HTMLElement).focus()
   }
 
   focusNextOption() {
@@ -110,9 +118,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     const nextIndex = currentIndex + 1
     const nextOptionItem = (
       this.resultOptionItems[nextIndex] ||
-        this.resultOptionItems[0]
-    )
-    nextOptionItem.focus()
+      this.resultOptionItems[0]
+    );
+    (nextOptionItem as HTMLElement).focus()
   }
 
   get resultOptionItems() {
@@ -134,11 +142,11 @@ export default class PbTypeahead extends PbEnhancedElement {
   get searchContext() {
     if (this._searchContext) return this._searchContext
 
-    const selector = this.element.dataset.searchContextValueSelector
-    if (selector) return (
+    const selector = (this.element as HTMLElement).dataset.searchContextValueSelector
+    if (selector) return ((
       this.element.parentNode.querySelector(selector) ||
-        this.element.closest(selector)
-    ).value
+      this.element.closest(selector)
+    ) as HTMLInputElement).value
 
     return null
   }
@@ -151,7 +159,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     return this.cacheKeyFor(this.searchTerm, this.searchContext)
   }
 
-  cacheKeyFor(searchTerm, searchContext) {
+  cacheKeyFor(searchTerm: string, searchContext: string) {
     return [searchTerm, JSON.stringify(searchContext)].join()
   }
 
@@ -160,11 +168,11 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   get searchTermMinimumLength() {
-    return this.element.dataset.pbTypeaheadKitSearchTermMinimumLength
+    return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength
   }
 
   get searchDebounceTimeout() {
-    return this.element.dataset.pbTypeaheadKitSearchDebounceTimeout
+    return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout
   }
 
   get resultsElement() {
@@ -192,9 +200,9 @@ export default class PbTypeahead extends PbEnhancedElement {
     )
   }
 
-  toggleResultsLoadingIndicator(visible) {
-    var visibilityProperty = 0
-    if (visible) visibilityProperty = 1
+  toggleResultsLoadingIndicator(visible: boolean) {
+    var visibilityProperty = '0'
+    if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
 }

data/app/pb_kits/playbook/pb_typeahead/types.d.ts

@@ -0,0 +1,2 @@
+declare module 'react-select'
+declare module 'react-select/*'

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -18,7 +18,7 @@ type UserProps = {
   data?: {[key: string]: string},
   id?: string,
   name?: string,
-  orientation?: "horiztonal" | "vertical",
+  orientation?: "horizontal" | "vertical",
   size?: "sm" | "md" | "lg",
   subtitle?: string | Array<Node> | Node,
   territory?: string,

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

@@ -0,0 +1 @@
+This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb

@@ -0,0 +1,36 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) do %>
+    <%= pb_rails("flex", props: { align: "center" }) do %>
+      <%= pb_rails("icon", props: { icon: "users" }) %>
+      <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+  }) do %>
+    <%= pb_rails("contact", props: {
+      contact_type: "cell",
+      contact_value: "349-185-9988"
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_value: 5555555555
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md

@@ -0,0 +1 @@
+The kit accepts block content and whatever is passed as block content will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { Caption, Contact, Flex, Icon, User } from "../.."
+
+const MentorSubtitle = (
+  <Flex>
+    <Icon icon="users" />
+    <Caption
+        paddingLeft="xs"
+        text="Admin"
+    />
+  </Flex>
+)
+
+const ContactSubtitle = (
+  <>
+    <Contact
+        contactType="cell"
+        contactValue="349-185-9988"
+    />
+    <Contact
+        contactValue="5555555555"
+    />
+    <Contact
+        contactType="email"
+        contactValue="email@example.com"
+    />
+  </>
+)
+
+const UserBlockContentSubtitleReact = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={MentorSubtitle}
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={ContactSubtitle}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserBlockContentSubtitleReact

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md

@@ -0,0 +1 @@
+The `subtitle` prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_default.html.erb

@@ -0,0 +1,38 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+
+     <br>
+
+     <%= pb_rails("user", props: {
+       name: "Anna Black",
+       orientation: "horizontal",
+       align: "left",
+       avatar: true
+     }) %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserDefault = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+
+      <div>
+        <User
+            align="center"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="vertical"
+            size="lg"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            {...props}
+        />
+
+        <br />
+
+        <User
+            align="left"
+            avatar
+            name="Anna Black"
+            orientation="horizontal"
+            {...props}
+        />
+      </div>
+
+    </div>
+  )
+}
+
+export default UserDefault

data/app/pb_kits/playbook/pb_user/docs/_user_size.html.erb

@@ -0,0 +1,32 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      size: "sm",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      size: "md",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserDefault = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="sm"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="md"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="lg"
+          title="Remodeling Consultant"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserDefault

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb

@@ -0,0 +1,23 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "center",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "vertical",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { User } from "../../"
+
+const UserSubtitle = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="lg"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserSubtitle

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb

@@ -0,0 +1,17 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "center",
+      size: "lg"}) %>
+  </div>
+  <div class="">
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left"}) %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserTextOnly = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="center"
+          name="Anna Black"
+          orientation="horizontal"
+          size="lg"
+          title="Remodeling Consultant"
+          {...props}
+      />
+      <User
+          align="left"
+          name="Anna Black"
+          orientation="horizontal"
+          title="Remodeling Consultant"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserTextOnly

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  orientation: "vertical",
+  align: "center",
+  size: "sm",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+  }) %>
+
+<br><br>
+
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  orientation: "vertical",
+  align: "center",
+  size: "md",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+  }) %>
+
+<br><br>
+
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  orientation: "vertical",
+  align: "center",
+  size: "lg",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+  }) %>

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { User } from '../../'
+
+const UserVerticalSize = (props) => {
+  return (
+    <div>
+      <User
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="sm"
+          title="Remodeling Consultant"
+          {...props}
+      />
+      <br />
+      <br />
+      <User
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="md"
+          title="Remodeling Consultant"
+          {...props}
+      />
+      <br />
+      <br />
+      <User
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="lg"
+          title="Remodeling Consultant"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserVerticalSize

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.html.erb

@@ -0,0 +1,40 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+  </div>
+  <div>
+  <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "center",
+      size: "sm"}) %>
+      <br>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "center",
+      size: "lg"}) %>
+  </div>
+</div>