playbook_ui_docs 14.18.0.pre.alpha.dropdownautocomplete7493 → 14.18.0.pre.alpha.play1736highchartslinegraphdefaultrebuild7431

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ec07c6bfcd36226929cb0ee3f120e6f9b48b8d2374f6adf555b1cc645ed9bfd
-  data.tar.gz: 374ec7a1bca3a25c8f64e14bfe45b5350cea293d7656df5ed6d69d86d0053a9c
+  metadata.gz: 1ed5ded613687e87d5e85bd61aca50a0a3b1d91f6e4fd0d420862f4f9bb6d93c
+  data.tar.gz: 41ed9ff7483a19513c769071966b209abf6c63bcfef11417b1a0ece1c294cfde
 SHA512:
-  metadata.gz: 70e5879e6a40ac29df0c935a5748ae3f03ebd85833128e32f5a0e6db561b19211316ecd16cc8e07b3873f7e221b51a0e235941f07c56cddf058d3f2447890674
-  data.tar.gz: cb448b898bfae20d42c8b9013ce05b131c2b0a258e22daead8380120e04b65f48b1cf97d3eb1d8b397ee9e182c348254275e4577a28a4e73d4f9f3146764beee
+  metadata.gz: 5c6de7619f72b736a1ed4a995bdd66aaa5ec8710465db9e42886b0f7ff5c24152b936c326bd2a71b7ce0e599fae458d065764f7b5892143255993ab7062460f2
+  data.tar.gz: b849fdf0f8ec633ca35e23922957d3e08113bf5723b9c67a02fd5c6a0b8bab9258a4c9b9afeaf610f15cbe3a1cb8583fb28ee45d125c50ab95fb74d57d3a022e

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -1,3 +1,9 @@
+**BETA VERSION**
+This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
+<br />
+<br />
+<br />
+
 The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### table_data

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows_react.jsx → _advanced_table_selectable_rows_no_subrows.jsx}

@@ -2,7 +2,7 @@ import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
-const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
+const AdvancedTableSelectableRowsNoSubrows = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
   )
 }
 
-export default AdvancedTableSelectableRowsNoSubrowsReact
+export default AdvancedTableSelectableRowsNoSubrows

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md

@@ -1,5 +1 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
-
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md

@@ -2,6 +2,5 @@
 
 When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
 
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -12,9 +12,9 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_border_color_rails: Column Group Border Color
-  - advanced_table_selectable_rows_rails: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
+
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -39,11 +39,10 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
-  - advanced_table_column_border_color: Column Group Border Color
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
+  - advanced_table_fullscreen: Fullscreen

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

@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
@@ -26,5 +26,4 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
-export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
-export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
+export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("date_picker", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
+<%= pb_rails("date_picker", props: { 
+  error: "Invalid date. Please pick a valid date.",
   picker_id: "date-picker-error"
 }) %>

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

@@ -17,6 +17,5 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_event_listeners: Draggable Event Listeners
+

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

@@ -1,4 +1,4 @@
-<%
+<% 
   options = [
     { label: 'United States', value: 'United States', id: 'us' },
     { label: 'Canada', value: 'Canada', id: 'ca' },
@@ -6,7 +6,4 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
-  options: options
-}) %>
+<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>

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

@@ -1,39 +1,86 @@
 import React from 'react'
 
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 
   const options = [
     {
-      label: "United States",
-      value: "United States",
-      areaCode: "+1",
-      icon: "🇺🇸",
-      id: "us"
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
     },
     {
-      label: "United Kingdom",
-      value: "United Kingdom",
-      areaCode: "+44",
-      icon: "🇬🇧", 
-      id: "gb"
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Away"
     },
     {
-      label: "Pakistan",
-      value: "Pakistan",
-      areaCode: "+92",
-      icon: "🇵🇰",
-      id: "pk"
+      label: "Carlos Lima",
+      value: "Carlos Lima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
     }
-  ]
+  ];
+
 
   return (
   <div>
     <Dropdown autocomplete
         options={options}
         {...props}
-    /> 
+    >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
   </div>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_with_subcomponents.jsx → _dropdown_with_autocomplete_and_custom_display.jsx}

@@ -1,13 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-import Dropdown from '../_dropdown'
+import Dropdown from '../../pb_dropdown/_dropdown'
 import Badge from '../../pb_badge/_badge'
-import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
 import User from '../../pb_user/_user'
 
 
-const DropdownWithAutocompleteWithSubcomponents = (props) => {
+const DropdownWithAutocompleteAndCustomDisplay = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
   const options = [
     {
       label: "Jasper Furniss",
@@ -43,21 +45,34 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
     }
   ];
 
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+        )
+      }
+    </>
+    )
+  };
 
   return (
   <div>
     <Dropdown autocomplete
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >
+        <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
         {options.map((option) => (
           <Dropdown.Option key={option.id} 
               option={option}
           >
-            <Flex
-                align="center"
-                justify="between"
-            >
+            <>
               <FlexItem>
                 <User
                     align="left"
@@ -70,7 +85,6 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
               </FlexItem>
               <FlexItem>
                 <Badge
-                    dark
                     rounded
                     text={option.status}
                     variant={`${
@@ -82,7 +96,7 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
                     }`}
                 />
               </FlexItem>
-            </Flex>
+            </>
           </Dropdown.Option>
         ))}
     </Dropdown>
@@ -90,4 +104,4 @@ const DropdownWithAutocompleteWithSubcomponents = (props) => {
   )
 }
 
-export default  DropdownWithAutocompleteWithSubcomponents
+export default  DropdownWithAutocompleteAndCustomDisplay

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md

@@ -0,0 +1 @@
+`autocomplete` prop can also be used in conjunction with the `customDisplay` prop.

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

@@ -0,0 +1,79 @@
+import React, { useRef } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+
+const DropdownWithHook = (props) => {
+const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
+const buttonRef = useRef(null);
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];  
+
+  return (
+  <div>
+      <CircleIconButton
+          htmlOptions={{ref: buttonRef}}
+          icon={"flag"}
+          onClick={() => setIsDropdownClosed(!isDropDownClosed)}
+          variant="secondary"
+      />
+    <Dropdown
+        isClosed={isDropDownClosed}
+        options={options}
+        triggerRef={buttonRef}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id} 
+            option={option}
+        > 
+        <>
+          <FlexItem>
+              <Flex paddingRight='md'>
+                <Icon icon={option.icon} 
+                    paddingRight="xs"
+                />
+                <Body text={option.label} />
+              </Flex>
+          </FlexItem>
+              <FlexItem>
+                <Body color="light" 
+                    text={option.areaCode} 
+                />
+              </FlexItem>
+            </>
+        </Dropdown.Option>
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownWithHook

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

@@ -1,15 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
-  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_with_custom_display_rails: Custom Display
   - dropdown_with_custom_trigger_rails: Custom Trigger
-  - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
@@ -18,20 +15,20 @@ examples:
 
   react:
   - dropdown_default: Default
-  - dropdown_with_autocomplete: Autocomplete
   - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
   - dropdown_clear_selection: Clear Selection
   - dropdown_separators_hidden: Separators Hidden
-  - dropdown_with_external_control: useDropdown Hook
+  # - dropdown_with_autocomplete: Autocomplete
+  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
+  # - dropdown_with_external_control: useDropdown Hook
+  # - dropdown_with_hook: useDropdown Hook with Any Trigger
 

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

@@ -3,10 +3,11 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
 export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
+export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
 export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
 export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
+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'
@@ -14,4 +15,3 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
-export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'

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

@@ -11,7 +11,6 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
-  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx

@@ -37,7 +37,7 @@ const baseOptions = {
 }
 
 const LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions )
 
   return(
     <div>

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

@@ -9,7 +9,6 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
-  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -19,5 +18,4 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
-  - phone_number_input_country_search: Country Search
   

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

@@ -6,4 +6,3 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
-export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

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

@@ -6,7 +6,6 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
-    - popover_append_to: Append To
 
   react:
     - popover_default: Default

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  error: "Please make a valid selection",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
+  error: "Please enter a valid email address",
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

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

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

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

@@ -8,14 +8,7 @@
 
 %>
 
-<%= pb_rails("typeahead", props: {
-  id: "typeahead-error-example",
-  options: options,
-  error: "Please make a valid selection",
-  label: "Products",
-  name: :foo,
-  is_multi: false
-}) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>