playbook_ui_docs 13.32.0.pre.alpha.PLAY14143288 → 13.32.0.pre.alpha.PLAY14143297

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f14033d25185093809f123b76f10a331721f6c6ae3b564a285b341f1a212d74e
-  data.tar.gz: 4a6c994851f19a665da30da7d03969c75045f26c15c361e6342695f1b0911f9d
+  metadata.gz: cb66af7bb33430b393d446ddce76cb97cf7e2499083d93c58335b783eb2c6bc6
+  data.tar.gz: 239afdc41fd0b4bbdb389825ad9965f45dbe56002dcc7b3d75df03c0f92f08ae
 SHA512:
-  metadata.gz: 98f445b0f9eac6dd815510a92cb3e9e403056557a4ad86aef576fb456670227fd61725845cf67cdc221b17375a15fce77d985d16ae4798e8b8790b3594244ba4
-  data.tar.gz: 5775b0804049b39e46c9d02f915835966d71b14661f1c7ad0dacb08697b3fd7cce0353b8e83909fb7e4f89ab9ddaa6e65b67e00c92d1f6181b843b9bdb3322f2
+  metadata.gz: 31ecbc455fb6d0fd330d8e6794e9e237822a00803714263d447ec69bc7917ee5a3ee0b876d1edbca1d9bdc6d36f05713e2269dd0bc69f51ae8c804eb1affe06f
+  data.tar.gz: 76f32a1d8ddb1b736b7ff3420f86648dbcde2960946f4281683b3a8bf9ef69a46ed913bebf6ba651a48ed39c464a7dd8c21ff8ecef3ce18a51a075c237adc678

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1,2 +1,6 @@
 The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
  It's important to note that certain options may require specific script imports to function properly.
+
+Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
+
+You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: { blank_selection: "Select One...", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+
+const DropdownBlankSelection = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+
+  return (
+  <>
+    <Dropdown
+        blankSelection="Select one..."
+        options={options}
+        {...props}
+    />
+  </>
+  )
+}
+
+export default DropdownBlankSelection

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

@@ -9,6 +9,7 @@ examples:
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
 
   react:
   - dropdown_default: Default
@@ -20,6 +21,7 @@ examples:
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
+  - dropdown_blank_selection: Blank Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -10,4 +10,5 @@ export { default as DropdownWithExternalControl } from './_dropdown_with_externa
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
 export { default as DropdownError } from './_dropdown_error.jsx'
-export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
+export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
+export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>
+<%= pb_rails("form_pill", props: {
+    text_transform: "lowercase" ,
+    text: "THIS IS A TAG",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx

@@ -6,6 +6,7 @@ const FormPillExample = (props) => {
     <div>
       <FormPill
           onClick={() => alert('Click!')}
+          tabIndex={0}
           text="THIS IS A TAG"
           textTransform="lowercase"
           {...props}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -2,6 +2,7 @@
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    size: "small",
+   tabindex: 0,
 }) %>
 
 <br />
@@ -10,4 +11,5 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    size: "small",
+   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -9,6 +9,7 @@ const FormPillSize = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
       <br />
@@ -16,6 +17,7 @@ const FormPillSize = (props) => {
       <FormPill
           name="Anna Black"
           size="small"
+          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb

@@ -1 +1,4 @@
-<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>
+<%= pb_rails("form_pill", props: {
+    text: "this is a tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx

@@ -6,8 +6,9 @@ const FormPillDefault = (props) => {
     <div>
       <FormPill
           onClick={() => {
-alert('Click!')
-}}
+            alert('Click!')
+          }}
+          tabIndex={0}
           text="this is a tag"
           {...props}
       />

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+   tabindex: 0,
 }) %>
 
 <br />
@@ -8,4 +9,5 @@
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
+   tabindex: 0,
 }) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -9,6 +9,7 @@ const FormPillDefault = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => alert('Click!')}
+          tabIndex={0}
           {...props}
       />
       <br />
@@ -16,6 +17,7 @@ const FormPillDefault = (props) => {
       <FormPill
           name="Anna Black"
           onClick={() => alert('Click!')}
+          tabIndex={0}
           {...props}
       />
     </div>

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

@@ -0,0 +1,48 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", tabbing: true, padding_bottom: "sm" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", active: true, data: { pb_tab_target: "about" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", data: { pb_tab_target: "case_studies" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Service", data: { pb_tab_target: "service" }, cursor: "pointer" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", data: { pb_tab_target: "contacts" }, cursor: "pointer" }) %>
+<% end %>
+
+<div id="about">
+  <%= pb_rails("body", props: { text: "This is about!" }) %>
+</div>
+
+<div id="case_studies">
+  <%= pb_rails("body", props: { text: "This is case studies!" }) %>
+</div>
+
+<div id="service">
+  <%= pb_rails("body", props: { text: "This is service!" }) %>
+</div>
+
+<div id="contacts">
+  <%= pb_rails("body", props: { text: "This is contacts!" }) %>
+</div>
+
+<script>
+  // The script in the code snippet below is for demonstrating the active state and NOT needed for the kit to function.
+  // The active prop can be used to highlight this active state.
+  const navItemClass = "pb_nav_list_kit_item"
+  const navItemActiveClass = "pb_nav_list_kit_item_active"
+  const dataNavItems = "[data-pb-tab-target]"
+
+  const navItemTabs = document.querySelectorAll(dataNavItems)
+  navItemTabs.forEach(navItemTab => {
+    navItemTab.addEventListener("click", event => {
+      const navItemTabs = document.querySelectorAll(dataNavItems)
+      navItemTabs.forEach(navItemTab => {
+        if (navItemTab === event.target.closest(dataNavItems)) {
+          navItemTab.classList.add(navItemActiveClass)
+          navItemTab.classList.remove(navItemClass)
+        } else {
+          if (navItemTab.classList.contains(navItemActiveClass)) {
+            navItemTab.classList.remove(navItemActiveClass)
+            navItemTab.classList.add(navItemClass)
+          }
+        }
+      })
+    })
+  })
+</script>

data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md

@@ -0,0 +1,3 @@
+The Nav kit can also be used to create dynamic tabbing. To do so, use the boolean `tabbing` prop as shown here. 
+
+All divs you want to use as tabs MUST have an id attached to them. To link the tab to the nav, use the required data attribute `pb_tab_target` on each nav/item and pass it the id of the tab you want linked to that specific nav/item. See code example below to see this in action.

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

@@ -19,6 +19,7 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+  - tab_nav: Tab Nav
 
   react:
   - default_nav: Default

data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("star_rating", props: { padding_bottom: "xs", variant: "interactive" }) %>

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

@@ -13,4 +13,4 @@ examples:
     - star_rating_background_options: Background Options
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
-    - star_rating_size_options: Size Options
+    - star_rating_size_options: Size Options

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
+  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
-  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',

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

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React, { useState } from 'react'
 
 import {

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

@@ -1,63 +1,28 @@
-<%= pb_rails("typeahead", props: {
-  label: "user",
-  name: :foo,
-  data: { typeahead_example: true },
-  input_options: {
-    classname: "my-typeahead-class",
-    data: {
-      typeahead_testing: "data field test"
-    },
-    id: "typeahead-input-id-test",
-  },
-})%>
-
-<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 appear in the list below
-  <% end %>
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
 
-  <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: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
-    avatar: true
-    }) %>
-</template>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>
 
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-search", function(event) {
-    if (!event.target.dataset || !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').dataset.src = user.avatar_url
-          return wrapper
-        }))
-      })
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
   })
-
-
-  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]").innerHTML = event.detail.selected.innerHTML
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
+    console.log('All options cleared')
   })
 <% end %>

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

@@ -45,8 +45,6 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,6 +55,8 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
 
   return (
     <>