playbook_ui_docs 13.22.0 → 13.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7816e281e1433333824ea1879e2cdef51fb005be6e30c0d1884727ae7918961e
-  data.tar.gz: 0f87385e2a060d2501250ff3d79c72fed1ccae96c45c35966065ad9c18ca8a73
+  metadata.gz: e5efc79de663963e76ac9525d08ffb97afdc5a9ca0dcc4c4343d6402b02bcd5f
+  data.tar.gz: 2ae3fc3adba0255a543db54c2a7bba2b7f9bd4564667a70d8b3cd77bb1fd565d
 SHA512:
-  metadata.gz: 8303962599041c59a49fe5ee6f9122676f31ad0d25dde69f437a596462d6e454f39ddf39136e587b3a379c265e4ce4f773605c9eb7eccf1d7f225d4f49722cbd
-  data.tar.gz: 7e32c83cf7493af7caf4822ee163bc7855f494283822a5e4f54ee2e08be9332c62f97a7c1a81616be2d19d4ea809ffee7d65baffbe4ba4fdb663600696ba68d9
+  metadata.gz: 315796eb5d147c63f7c9bb5277245aa2464295b8d04c37309b155beb237e604e238918c8d3f22b5508232bd0d9f91580256f7eaf1a8ad558aa86d3dd497f5b79
+  data.tar.gz: 973beef1e4087acded14520c8417efc695108010479896df48187d58ddc9bce8f36bf5aca6ac6d3b984f18adbd30c376abead0f5b16a8367e51745ccd11d9673

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { AdvancedTable } from "../../"
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {
   const columnDefinitions = [
@@ -44,11 +44,16 @@ const AdvancedTableExpandedControl = (props) => {
     onChange: setExpanded,
   }
 
+  const onRowToggleClick = (row) => {
+    setExpanded({ ...expanded, [row.id]: !expanded[row.id] })
+  }
+
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           expandedControl={expandedControl}
+          onRowToggleClick={onRowToggleClick}
           tableData={MOCK_DATA}
           {...props}
       />

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

@@ -1,3 +1,5 @@
+**NOTE**: If using `expandedControl` the dev is expected to manage the row level expansion state themselves, the kit itself will NOT do it by default.
+
 `expandedControl` is an optional prop that can be used to gain greater control over the expansion state of the Advanced Table. Tanstack handles expansion itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the expansion state so it persists on page reload, set an initial expansion state, etc. 
 
 In this example we are showing that if initial expansion state is set, it will render the table expanded according to that state. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { AdvancedTable } from "../../"
 import { Button } from "../../"
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableLoading = (props) => {
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../.."
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSort = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import { AdvancedTable } from "../.."
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSortControl = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../.."
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSubrowHeaders = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableOptions = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { AdvancedTable } from "../../"
-import { MOCK_DATA } from "./_mock_data"
+import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json

@@ -0,0 +1,278 @@
+[
+  {
+    "year": "2021",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": [
+      {
+        "year": "2021",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "20",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "February",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "February",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2022",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32",
+    "children": [
+      {
+        "year": "2022",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "15",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "25",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "May",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "May",
+                "day": "2",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2023",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29",
+    "children": [
+      {
+        "year": "2023",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2023",
+            "quarter": "Q1",
+            "month": "March",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "11",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2023",
+            "quarter": "Q1",
+            "month": "April",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "April",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]

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

@@ -1,6 +1,6 @@
 examples:
   # rails:
-  #   - advanced_table_default: Default (Required Props)
+  # - advanced_table_default: Default (Required Props)
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State

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

@@ -10,13 +10,6 @@
   picker_id: "date-picker-default-date2"
 }) %>
 
-<%= pb_rails("date_picker", props: {
-  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
-  label: "Default Date Range",
-  mode: "range",
-  picker_id: "date-picker-default-date3"
-}) %>
-
 <%= pb_rails("date_picker", props: {
   label: "Default Behavior",
   picker_id: "date-picker-default-date4"

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

@@ -16,13 +16,6 @@ const DatePickerDefaultDate = (props) => (
         pickerId="date-picker-default-date2"
         {...props}
     />
-    <DatePicker
-        defaultDate={[new Date(), new Date().fp_incr(7)]}
-        label="Default Date Range"
-        mode="range"
-        pickerId="date-picker-default-date3"
-        {...props}
-    />
     <DatePicker
         label="Default Behavior"
         pickerId="date-picker-default-date4"

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

@@ -2,4 +2,11 @@
   default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
   mode: "range",
   picker_id: "date-picker-range"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
+  label: "Default Date Range",
+  mode: "range",
+  picker_id: "date-picker-default-date3"
 }) %>

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

@@ -10,6 +10,13 @@ const DatePickerRange = (props) => (
         pickerId="date-picker-range"
         {...props}
     />
+    <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
+        label="Default Date Range"
+        mode="range"
+        pickerId="date-picker-default-date3"
+        {...props}
+    />
   </div>
 )
 

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

@@ -7,7 +7,7 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
-  - date_picker_range: Range
+  # - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
@@ -37,7 +37,7 @@ examples:
   - date_picker_label: Label
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
-  - date_picker_range: Range
+  # - date_picker_range: Range
   - date_picker_quick_pick_react: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,6 +1,7 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
+  <form>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -12,4 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+  </form>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,6 +1,7 @@
 <div>
+
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("text_input", props: { label: "Artist", placeholder: "Enter Artist Name" }) %>
+    <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
       blank_selection: "Genre",
       options: [
@@ -16,4 +17,19 @@
       ]
     }) %>
   <% end %>
+  <br>
+  <br>
+  <%= pb_rails("form_group") do %>
+    <%= pb_rails("select", props: {
+        blank_selection: "Phone",
+        options: [
+          { value: "Cell" },
+          { value: "Work" },
+          { value: "Home" },
+        ]
+      }) %>
+      <%= pb_rails("phone_number_input", props: {
+        id: "phone"
+    }) %>
+  <% end %>
 </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import FormGroup from '../_form_group'
-
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
@@ -18,11 +18,16 @@ const FormGroupSelect = (props) => {
     { value: 'Other' },
   ]
 
+  const phoneOptions = [
+    { value: 'Cell' },
+    { value: 'Work' },
+    { value: 'Home' },
+  ]
+
   return (
     <div>
       <FormGroup>
         <TextInput
-            label="Artist"
             placeholder="Enter Artist Name"
             {...props}
         />
@@ -32,6 +37,17 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
+      <br />
+      <br />
+      <FormGroup>
+        <Select
+            blankSelection="Phone"
+            options={phoneOptions}
+            />
+        <PhoneNumberInput
+            id='default'
+        />
+    </FormGroup>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -1,3 +1,8 @@
+<%= pb_rails("icon_circle", props: {
+  icon: "rocket",
+  size: "xxs"
+}) %>
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "rocket",
   size: "xs"

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

@@ -4,6 +4,12 @@ import { IconCircle } from '../..'
 const IconCircleSizes = (props) => {
   return (
     <div>
+      <IconCircle
+          icon="rocket"
+          size="xxs"
+          {...props}
+      />
+      <br />
       <IconCircle
           icon="rocket"
           size="xs"

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md

@@ -1,5 +1,5 @@
-`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
+`selected_ids` is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
 
 Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
 
-When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

data/app/pb_kits/playbook/pb_multi_level_select/docs/{_multi_level_select_selected_ids.jsx → _multi_level_select_selected_ids_react.jsx}

@@ -68,7 +68,7 @@ const treeData = [
   },
 ];
 
-const MultiLevelSelectSelectedIds = (props) => {
+const MultiLevelSelectSelectedIdsReact = (props) => {
   return (
     <div>
       <MultiLevelSelect
@@ -85,4 +85,4 @@ const MultiLevelSelectSelectedIds = (props) => {
   );
 };
 
-export default MultiLevelSelectSelectedIds;
+export default MultiLevelSelectSelectedIdsReact;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md

@@ -0,0 +1,5 @@
+`selected_ids` is an optional prop that accepts an array of ids and controls the selected state of the tree nodes that match the values passed. When used within react-hook-form, this prop can be used to manage the selected state of any ids passed to it. 
+
+Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
+
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

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

@@ -12,4 +12,4 @@ examples:
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
+  - multi_level_select_selected_ids_react: Selected Ids

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

@@ -2,4 +2,4 @@ export { default as MultiLevelSelectDefault } from './_multi_level_select_defaul
 export { default as MultiLevelSelectSingle } from './_multi_level_select_single.jsx'
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
+export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb

@@ -1,9 +1,6 @@
-<%= pb_rails("online_status", props: { status: "offline" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "online" }) %>
-
-<br>
-
-<%= pb_rails("online_status", props: { status: "away" }) %>
+<%= pb_rails("online_status", props: { status: "offline", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "online", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "away", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "error", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "info", margin_y: "xs" }) %>
+<%= pb_rails("online_status", props: { status: "primary", margin_y: "xs" }) %>