playbook_ui_docs 14.18.1.pre.rc.0 → 14.19.0.pre.alpha.PLAY1968typeaheadpreservesearchreact7796

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "211",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "212",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "213",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "2111",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2112",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "2113",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md

@@ -0,0 +1,5 @@
+When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
+
+The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
+
+Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md

@@ -0,0 +1,5 @@
+The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+
+When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+const data = [
+  {
+    id: "100",
+    url: "https://unsplash.it/500/400/?image=638",
+  },
+  {
+    id: "200",
+    url: "https://unsplash.it/500/400/?image=639",
+  },
+  {
+    id: "300",
+    url: "https://unsplash.it/500/400/?image=640",
+  },
+];
+
+const DraggableDefault = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialState.map(({ id, url }) => (
+              <Draggable.Item dragId={id} 
+                  key={id}
+                  onDrag={() => console.log(`${id} drag!`)}
+                  onDragEnd={() => console.log(`${id} drag end!`)}
+                  onDragEnter={() => console.log(`${id} drag enter!`)}
+                  onDragLeave={() => console.log(`${id} drag leave!`)}
+                  onDragOver={() => console.log(`${id} drag over!`)}
+                  onDragStart={() => console.log(`${id} drag start!`)}
+                  onDrop={() => console.log(`${id} drop!`)}
+              >
+                <Image alt={id} 
+                    margin="xs"
+                    size="md" 
+                    url={url} 
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md

@@ -0,0 +1 @@
+You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.

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

@@ -9,6 +9,7 @@ examples:
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
+  - draggable_event_listeners: Draggable Event Listeners
 
   rails:
   - draggable_default: Default
@@ -19,4 +20,5 @@ examples:
   - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
+  - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners

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

@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
 export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
-export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

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,4 +6,7 @@
   ]
 %>
 
-<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>
+<%= pb_rails("dropdown", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  options: options
+}) %>

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

@@ -0,0 +1,28 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧", 
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

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

@@ -1,86 +1,39 @@
 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: "Jasper Furniss",
-      value: "Jasper Furniss",
-      territory: "PHL",
-      title: "Lead UX Engineer",
-      id: "jasper-furniss",
-      status: "Offline"
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
     },
     {
-      label: "Ramon Ruiz",
-      value: "Ramon Ruiz",
-      territory: "PHL",
-      title: "Senior UX Designer",
-      id: "ramon-ruiz",
-      status: "Away"
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧", 
+      id: "gb"
     },
     {
-      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"
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
     }
-  ];
-
+  ]
 
   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.html.erb

@@ -0,0 +1,58 @@
+<% 
+   options = [
+    {
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Away"
+    },
+    {
+      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"
+    }
+  ];
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                  <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -1,15 +1,13 @@
-import React, { useState } from 'react'
+import React from 'react'
 
-import Dropdown from '../../pb_dropdown/_dropdown'
+import Dropdown from '../_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 DropdownWithAutocompleteAndCustomDisplay = (props) => {
-  const [selectedOption, setSelectedOption] = useState();
-
+const DropdownWithAutocompleteWithSubcomponents = (props) => {
   const options = [
     {
       label: "Jasper Furniss",
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (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"
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
               </FlexItem>
               <FlexItem>
                 <Badge
+                    dark
                     rounded
                     text={option.status}
                     variant={`${
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
                     }`}
                 />
               </FlexItem>
-            </>
+            </Flex>
           </Dropdown.Option>
         ))}
     </Dropdown>
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   )
 }
 
-export default  DropdownWithAutocompleteAndCustomDisplay
+export default  DropdownWithAutocompleteWithSubcomponents

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

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

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

@@ -6,6 +6,7 @@ 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'
+import Body from '../../pb_body/_body'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();
@@ -50,10 +51,20 @@ const DropdownWithCustomDisplay = (props) => {
       <>
       {
         selectedOption && (
+          <Flex align="center">
             <Avatar
                 name={selectedOption.label}
                 size="xs"
             />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
         )
       }
     </>

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

@@ -1,4 +1,4 @@
-Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 

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

@@ -38,7 +38,11 @@
 
 <%
   custom_display = capture do
-    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
   end
 %>
 
@@ -62,4 +66,31 @@
             <% end %>
         <% end %>
     <% end %>
-<% end %>
+<% end %>
+
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    const option   = e.detail;
+    const dropdown = e.target;
+
+    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
+    const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+    if (avatarEl) {
+      avatarEl.dataset.name = option.label;
+      avatarEl.setAttribute("data-initials", initials);
+    }
+    const badgeEl   = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online"  ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = 'pb_badge_kit_' + variant;
+    }
+  });
+</script>

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

@@ -1,4 +1,6 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
+
+Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
 
 The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
 

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

@@ -0,0 +1 @@
+The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown. 

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

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import IconCircle from '../../pb_icon_circle/_icon_circle';
+
+const DropdownWithSearch = (props) => {
+const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      icon: "🇺🇸",
+      id: "United-states"
+
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      icon: "🇬🇧",
+      id: "united-kingdom"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger>
+        <div key={selectedOption ? selectedOption.icon : "flag"}>
+            <IconCircle
+                cursor="pointer"
+                icon={selectedOption ? selectedOption.icon : "flag"}
+                variant="royal"
+            />
+        </div>
+      </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs"
+          searchbar
+      >
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          />
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+
+export default  DropdownWithSearch

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

@@ -0,0 +1,2 @@
+The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
+`searchbar` is set to false by default. 

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

@@ -0,0 +1,52 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "United Kingdom",
+      areaCode: "+44",
+      icon: "🇬🇧",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") do %>
+        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
+    <% end %>
+    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+              <%= pb_rails("flex", props: {
+                align: "center",
+                justify: "between",
+                }) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("flex") do %>
+                          <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                          <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                      <% end %>
+                  <% end %>
+                  <%= pb_rails("flex/flex_item") do %>
+                      <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                  <% end %>
+              <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>