playbook_ui_docs 14.18.0.pre.alpha.PLAY20787400 → 14.18.0.pre.alpha.dropdownautocomplete7493

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3e7d47a9299088d750906643acac266d30471dfea3e97e02d840a8cc7707f03
-  data.tar.gz: ebcc74afbe19ac073c894c1d73545ab932e36f9f10d850eec84431c20ec4fb24
+  metadata.gz: 0ec07c6bfcd36226929cb0ee3f120e6f9b48b8d2374f6adf555b1cc645ed9bfd
+  data.tar.gz: 374ec7a1bca3a25c8f64e14bfe45b5350cea293d7656df5ed6d69d86d0053a9c
 SHA512:
-  metadata.gz: caaa753b1c2df935c91ed8576f78af9c52f1f30dd64095ab88cb1447b69a576d6f1984ba2a98ce7563d2b095ead8a247b0f6fdbe51795d8f12b00b6fb4a1e7a5
-  data.tar.gz: b933dc82f82e408a2de8abe712cb3bb9b415db080126748c53cacbd31252394b8951104c77ea1e68ad2ce3c039eefa933bac40ef7ff7139558f338b7060e96d2
+  metadata.gz: 70e5879e6a40ac29df0c935a5748ae3f03ebd85833128e32f5a0e6db561b19211316ecd16cc8e07b3873f7e221b51a0e235941f07c56cddf058d3f2447890674
+  data.tar.gz: cb448b898bfae20d42c8b9013ce05b131c2b0a258e22daead8380120e04b65f48b1cf97d3eb1d8b397ee9e182c348254275e4577a28a4e73d4f9f3146764beee

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

@@ -1,9 +1,3 @@
-**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_column_border_color.jsx

@@ -0,0 +1,80 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnBorderColors = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnGroupBorderColor="text_lt_default"
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnBorderColors

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

@@ -0,0 +1,3 @@
+The borders of column groups can be set to a different color using the `columnGroupBorderColor` prop.  In order for these borders to be visible, this prop must be used with `tableProps` and `verticalBorder` set to true.
+
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb

@@ -0,0 +1,58 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>

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

@@ -0,0 +1,3 @@
+The borders of column groups can be set to a different color using the `column_group_border_color` prop. In order for these borders to be visible, this prop must be used with `table_props` and `vertical_border` set to true.
+
+The available colors for the border are Playbook's Text Colors, which can be found [here](https://playbook.powerapp.cloud/visual_guidelines/colors).

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

@@ -1 +1,5 @@
-`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.
+`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. 

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.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 AdvancedTableSelectableRowsNoSubrows = (props) => {
+const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrows = (props) => {
   )
 }
 
-export default AdvancedTableSelectableRowsNoSubrows
+export default AdvancedTableSelectableRowsNoSubrowsReact

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

@@ -2,5 +2,6 @@
 
 When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
 
-__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. 
+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. 

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_selectable_rows: Selectable Rows
-  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
-
+  - 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)
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -39,10 +39,11 @@ 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: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_no_subrows_react: 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 AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.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,4 +26,5 @@ 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 AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.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: "Invalid date. Please pick a valid date.",
+<%= pb_rails("date_picker", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Invalid date. Please pick a valid date."),
   picker_id: "date-picker-error"
 }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
+import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error="Invalid date. Please pick a valid date."
+        error={<>
+          <Icon icon="warning" /> Invalid date. Please pick a valid date.
+        </>}
         pickerId="date-picker-error"
         {...props}
     />

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

@@ -0,0 +1,43 @@
+<% data_shadow = [
+  { id: "51", text: "Task 1" },
+  { id: "52", text: "Task 2" },
+  { id: "53", text: "Task 3" }
+] %>
+
+<% data_outline = [
+  { id: "61", text: "Task 1" },
+  { id: "62", text: "Task 2" },
+  { id: "63", text: "Task 3" }
+] %>
+
+<%= pb_rails("flex", props: { justify: "around" }) do %>
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_shadow.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
+    <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
+      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
+      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
+        <% data_outline.each do |item| %>
+          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
+            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
+              <%= pb_rails("body", props: { text: item[:text] }) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "141",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "142",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "143",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "151",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "152",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "153",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) 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: "outline", drop_zone_color: "purple"}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("flex", props: { gap: "sm" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) 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_colors_rails.md

@@ -0,0 +1 @@
+  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

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

@@ -17,5 +17,6 @@ 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,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_error.jsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react'
 import Dropdown from '../../pb_dropdown/_dropdown'
+import Icon from '../../pb_icon/_icon'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : "Please make a valid selection"
+    const error = selectedOption?.value ? null : (<>
+        <Icon icon="warning" /> Please make a valid selection
+    </>)
     const options = [
         {
             label: "United States",

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 %>