playbook_ui 14.19.0.pre.alpha.PLAY2033atactionbarrails7730 → 14.19.0.pre.alpha.PLAY2033atactionbarrails7773

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 654590a50901aacde66d35bd4be201e411e132b400b2914cc5e037d3429caded
-  data.tar.gz: 8d0e41a47e517cf306c76815921ff9aa1f994491a7596b3f259fedd4e0d6e865
+  metadata.gz: f209ea18360af263680c28b3a73efdd51bf2bff536bf5dbfd7cf57b841fbfc1b
+  data.tar.gz: 926ffe8be1ae23cc857f6f57799bbc7f51e9ea8d124cee0cb653782ea1231d99
 SHA512:
-  metadata.gz: e2016cd384a81cd7d9f3d4f93e474f4bb5843d3f199b9e1989dfefd41eaa2cd943aee4823e70fde27d2c503f2e4c90e7a3503f176b5d7d5e07f0fa194d866454
-  data.tar.gz: 7be919bf509875aeb4beb91b4f25f6b163c2b2c5a20a7a510df6204216592e33c6d512991c2c73eec9a5c462b40bd29417c335c497269b13b582db3938445a52
+  metadata.gz: 488377e720d5631e3e50a8f285f3a0dda8ac57f7b238bfb6c5e587317ee54418757df986a45d7790de5e8be2a8f52c6ae7e6fc5a715e15f4ac3119731d2fe6f2
+  data.tar.gz: 99032673be39b4964a353e766ddc3605666933d1b7893dcf77595a89d01a3333a693b2c461dbdca3ff528a14c29968262fd72b96afae6a5a6b7941730106e5ad

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,21 +1,18 @@
 <%= pb_content_tag do %>
-  <% table_id = object.id || "table-#{SecureRandom.hex(8)}" %>
-  <div id="<%= table_id %>" class="<%= object.classname %>">
-    <% if object.selectable_rows && object.show_actions_bar %>
-      <%= pb_rails("advanced_table/table_action_bar", props: { 
-        actions: object.actions,
-        is_visible: false,
-        selected_count: 0
-      }) %>
+  <% if object.selectable_rows && object.show_actions_bar %>
+    <%= pb_rails("advanced_table/table_action_bar", props: {
+      actions: object.actions,
+      is_visible: false,
+      selected_count: 0
+    }) %>
+  <% end %>
+
+  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+    <% if content.present? %>
+      <% content.presence %>
+    <% else %>
+      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
+      <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
     <% end %>
-    
-    <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
-      <% if content.present? %>
-        <% content.presence %>
-      <% else %>
-        <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows }) %>
-        <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
-      <% end %>
-    <% end %>
-  </div>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -26,7 +26,7 @@ module Playbook
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
       prop :show_actions_bar, type: Playbook::Props::Boolean,
-                              default: false
+                              default: true
       prop :actions, type: Playbook::Props::Array,
                      default: []
 

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

@@ -1,6 +1,4 @@
-<%
-# Define column definitions
-column_definitions = [
+<% column_definitions = [
   {
     accessor: "year",
     label: "Year",
@@ -32,15 +30,22 @@ column_definitions = [
   }
 ]
 
-# Define actions for the selection bar
 actions = [
   pb_rails("circle_icon_button", props: {
     icon: "file-csv",
-    variant: "link"
+    variant: "link",
+    id: "export-selected-rows-btn",
+    data: {
+      action_type: "export"
+    }
   }),
   pb_rails("circle_icon_button", props: {
     icon: "trash-alt",
-    variant: "link"
+    variant: "link",
+    id: "delete-selected-rows-btn",
+    data: {
+      action_type: "delete"
+    }
   })
 ]
 %>
@@ -54,3 +59,80 @@ actions = [
   actions: actions,
   show_actions_bar: true
 }) %>
+
+<script>
+  // Handle action clicks using the data-selected-rows attribute
+  window.handleActionClick = function(actionType) {
+    const tableContainer = document.getElementById('selectable_rows_with_actions');
+    if (!tableContainer) return;
+
+    // Get selected rows from the data attribute
+    const selectedRowsJSON = tableContainer.getAttribute('data-selected-rows');
+    let selectedRowIds = [];
+
+    try {
+      // Parse the JSON string from the data attribute
+      if (selectedRowsJSON) {
+        selectedRowIds = JSON.parse(selectedRowsJSON);
+      }
+    } catch (e) {
+      // Fallback if JSON parsing fails
+      const checkboxes = tableContainer.querySelectorAll('input[type="checkbox"]:checked');
+      const selectedCheckboxes = Array.from(checkboxes).filter(checkbox =>
+        checkbox.id !== 'select-all-rows' &&
+        !checkbox.closest('#select-all-rows')
+      );
+      selectedRowIds = selectedCheckboxes.map(checkbox => checkbox.id);
+    }
+
+    // Show appropriate message
+    if (!selectedRowIds || selectedRowIds.length === 0) {
+      alert('No Selection Made');
+    } else {
+      if (actionType === 'export') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be exported!`);
+      } else if (actionType === 'delete') {
+        alert(`Row ids ${selectedRowIds.join(', ')} will be deleted!`);
+      }
+    }
+  };
+
+  // Add event listeners when the DOM is ready
+  document.addEventListener('DOMContentLoaded', function() {
+    // Get the buttons
+    const exportBtn = document.getElementById('export-selected-rows-btn');
+    const deleteBtn = document.getElementById('delete-selected-rows-btn');
+
+    // Add click event listeners
+    if (exportBtn) {
+      exportBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('export');
+      });
+    }
+
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.handleActionClick('delete');
+      });
+    }
+
+    // Optional: Event delegation through the action bar
+    const actionBar = document.querySelector('.row-selection-actions-card');
+    if (actionBar) {
+      actionBar.addEventListener('click', function(e) {
+        const exportButton = e.target.closest('#export-selected-rows-btn');
+        const deleteButton = e.target.closest('#delete-selected-rows-btn');
+
+        if (exportButton) {
+          e.preventDefault();
+          window.handleActionClick('export');
+        } else if (deleteButton) {
+          e.preventDefault();
+          window.handleActionClick('delete');
+        }
+      });
+    }
+  });
+</script>

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

@@ -0,0 +1,3 @@
+Custom actions content can be rendered within the Actions Bar as shown in this doc example. The component passed to `actions` will be rendered on the right of the actionsBar.
+
+You can utilize script tags with your actions to provide your buttons with any clickable events needed.

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

@@ -0,0 +1,40 @@
+<% column_definitions = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    accessor: "newEnrollments",
+    label: "New Enrollments",
+  },
+  {
+    accessor: "scheduledMeetings",
+    label: "Scheduled Meetings",
+  },
+  {
+    accessor: "attendanceRate",
+    label: "Attendance Rate",
+  },
+  {
+    accessor: "completedClasses",
+    label: "Completed Classes",
+  },
+  {
+    accessor: "classCompletionRate",
+    label: "Class Completion Rate",
+  },
+  {
+    accessor: "graduatedStudents",
+    label: "Graduated Students",
+  }
+] %>
+
+<%= pb_rails("advanced_table", props: {
+  id: "selectable_rows_with_actions",
+  table_data: @table_data_no_subrows,
+  column_definitions: column_definitions,
+  selectable_rows: true,
+  enable_toggle_expansion: "none",
+  show_actions_bar: false
+}) %>

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

@@ -0,0 +1 @@
+`show_actions_bar` is an optional prop that renders the header at the top showing the row count. This is set to `true` by default but can be toggled off by setting it to `false`

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

@@ -16,6 +16,7 @@ examples:
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
+  - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
 
   react:
   - advanced_table_default: Default (Required Props)

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

@@ -95,6 +95,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     actionBar.style.height = height;
     actionBar.classList.add("is-visible");
     actionBar.classList.add("show-action-card");
+    actionBar.classList.replace("p_none", "p_xs");
+    // This is for keeping the border around the card when showing the action bar
+    actionBar.classList.replace("pb_card_kit_deselected_border_none", "pb_card_kit_deselected");
     actionBar.style.overflow = "hidden";
 
     // Complete animation after delay
@@ -124,10 +127,15 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     window.setTimeout(() => {
       actionBar.classList.remove("is-visible");
       actionBar.classList.remove("show-action-card");
+      actionBar.classList.replace("p_xs", "p_none");
+      // This is for removing the border when hiding the action bar
+      actionBar.classList.replace( "pb_card_kit_deselected", "pb_card_kit_deselected_border_none");
     }, 300);
   }
 
-  // Check if row is expanded
+  // Check if the row is expanded or collapsed
+  // This is used to determine the background color of the row
+  // when the checkbox is checked or unchecked
   isRowExpanded(rowEl) {
     const closeIcon = rowEl.querySelector(UP_ARROW_SELECTOR);
     return closeIcon?.style.display === "none" || !closeIcon;
@@ -355,7 +363,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
       });
 
       // Remove visibility classes
-      actionBar.classList.remove("is-visible", "show-action-card");
+      actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+      actionBar.classList.add("p_none");
 
       // Add CSS rules
       const styleId = `action-bar-styles-${tableId}`;
@@ -388,7 +397,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             actionBar.style.height = 'auto';
             actionBar.style.overflow = 'visible';
             actionBar.style.opacity = '1';
-            actionBar.classList.add("is-visible", "show-action-card");
+            actionBar.classList.remove("p_none");
+            actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
             // Update the count
             const countElement = actionBar.querySelector(".selected-count");
@@ -400,7 +410,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
             actionBar.style.height = '0px';
             actionBar.style.overflow = 'hidden';
             actionBar.style.opacity = '0';
-            actionBar.classList.remove("is-visible", "show-action-card");
+            actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+            actionBar.classList.add("p_none");
           }
         });
       });
@@ -696,21 +707,31 @@ document.addEventListener('DOMContentLoaded', () => {
       });
 
       // Remove any visibility classes
-      actionBar.classList.remove("is-visible", "show-action-card");
+      actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
+      actionBar.classList.add("p_none");
 
-      // Direct DOM manipulation for checkboxes
+      // Direct DOM manipulation for checkboxes - exclude select-all checkbox
       const checkboxes = table.querySelectorAll('input[type="checkbox"]');
       checkboxes.forEach(checkbox => {
         checkbox.addEventListener('change', function() {
-          // Count selected checkboxes
-          const selectedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
+          // Get all checked checkboxes
+          const allCheckedCheckboxes = Array.from(checkboxes).filter(cb => cb.checked);
+
+          // Filter out the select-all checkbox
+          const selectedRowCheckboxes = allCheckedCheckboxes.filter(cb => {
+            return cb.id !== 'select-all-rows' && !cb.closest('#select-all-rows');
+          });
+
+          // Get the selected count (excluding select-all)
+          const selectedCount = selectedRowCheckboxes.length;
 
           if (selectedCount > 0) {
             // Show action bar directly
             actionBar.style.height = 'auto';
             actionBar.style.overflow = 'visible';
             actionBar.style.opacity = '1';
-            actionBar.classList.add("is-visible", "show-action-card");
+            actionBar.classList.remove("p_none");
+            actionBar.classList.add("p_xs", "is-visible", "show-action-card");
 
             // Update the count
             const countElement = actionBar.querySelector(".selected-count");
@@ -722,7 +743,8 @@ document.addEventListener('DOMContentLoaded', () => {
             actionBar.style.height = '0px';
             actionBar.style.overflow = 'hidden';
             actionBar.style.opacity = '0';
-            actionBar.classList.remove("is-visible", "show-action-card");
+            actionBar.classList.add("p_none");
+            actionBar.classList.remove("p_xs", "is-visible", "show-action-card");
           }
         });
       });

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -15,6 +15,8 @@ module Playbook
                         default: "scroll"
       prop :selectable_rows, type: Playbook::Props::Boolean,
                              default: false
+      prop :show_actions_bar, type: Playbook::Props::Boolean,
+                              default: true
 
       def classname
         additional_classes = []
@@ -27,6 +29,7 @@ module Playbook
       def th_classname(is_first_column: false)
         additional_classes = []
         additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
+        additional_classes << "header-cells-with-actions" if selectable_rows && show_actions_bar
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end

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/index.js

@@ -142,9 +142,22 @@ export default class PbDropdown extends PbEnhancedElement {
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
+
     if (triggerElement) {
       const selectedLabel = JSON.parse(value).label;
-      triggerElement.textContent = selectedLabel;
+      if (customDisplayElement) {
+        triggerElement.textContent = ""
+        this.element.setAttribute("data-option-selected", value);
+        const selectedObj = JSON.parse(value);
+        this.element.dispatchEvent(
+          new CustomEvent("pb:dropdown:selected", {
+            detail: selectedObj,
+            bubbles: true,
+          })
+        );
+      } else {
+        triggerElement.textContent = selectedLabel
+      }
       if (customDisplayElement) {
         customDisplayElement.style.display = "block";
         customDisplayElement.style.paddingRight = "8px";

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
   );
 
   const customDisplayPlaceholder = selected?.label ? (
-    <b>{selected.label}</b>
+    ""
   ) : autocomplete ? (
     ""
   ) : placeholder ? (

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -20,9 +20,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
-  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
+  .pb_form_pill_text, .pb_form_pill_tag {
     font-size: $font_small !important;
   }
+  .pb_form_pill_close {
+    font-size: 17px;
+  }
 
   &[class*=wrapped] {
     height: max-content;
@@ -96,7 +99,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         display: flex;
         align-items: center;
         height: 17px;
-        border-radius: calc(50%);
+        width: 17px;
+        justify-content: center;
+        border-radius: 50%;
         cursor: pointer;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
@@ -146,8 +151,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     outline-offset: -1px;
   }
   .pb_form_pill_icon {
-    height: 12px !important;
-    width: 12px !important;
+    height: 0.875em;
     padding-right: $space_xs;
     + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -158,7 +162,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   &.small {
     height: 17px;
     padding: 0 $space-xs;
-    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
+    .pb_form_pill_text, .pb_form_pill_tag {
       font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
@@ -166,17 +170,20 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
       padding: 0 $space_xxs;
     }
     .pb_form_pill_close {
-      height: 10px;
-      border-radius: calc(50%);
+      height: 14px;
+      width: 14px;
+      font-size: 15px;
+      border-radius: 50%;
     }
     [class^=pb_avatar_kit] .avatar_wrapper {
-      flex-basis: 16px;
-      height: 16px;
-      margin-top: 2px;
-      width: 16px;
-      &::before { line-height: 16.5px; }
+      flex-basis: 14px;
+      height: 14px;
+      margin-top: 3px;
+      width: 14px;
+      &::before { line-height: 15px; }
     }
     .pb_form_pill_icon {
+      height: 0.75em;
       padding-right: $space_xxs;
       + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -81,6 +81,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
 
   const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
 
+  const uppercaseState = state?.toUpperCase() ?? ''
+
+  const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
+  const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
+
   return (
     <div
         className={classes(className, dark)}
@@ -88,7 +93,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
         {...dataProps}
         {...htmlProps}
     >
-      {emphasis == 'street' &&
+      {hasAllEmptyProps && '—'}
+      {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
           <Title
               className="pb_home_address_street_address"
@@ -105,11 +111,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
         </div>
       }
-      {emphasis == 'city' &&
+      {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
           <Body color="light">
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -122,18 +128,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}`}
             </Title>
             <Body
                 color="light"
                 tag="span"
             >
-              {` ${zipcode}`}
+              {` ${zipcode ?? ''}`}
             </Body>
           </div>
         </div>
       }
-      {emphasis == 'none' &&
+      {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
           <Body dark={dark}>
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -144,7 +150,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_person/_person.tsx

@@ -41,6 +41,16 @@ const Person = (props: PersonProps): React.ReactElement => {
     className
   )
 
+  const hasAllEmptyProps = [firstName, lastName].every(field => field === undefined || field === null || field === '')
+
+  if (hasAllEmptyProps) {
+    return (
+      <>
+        —
+      </>
+    )
+  }
+
   return (
     <div
         {...ariaProps}
@@ -53,13 +63,13 @@ const Person = (props: PersonProps): React.ReactElement => {
           className="pb_person_first"
           tag="span"
       >
-        {firstName}
+        {firstName ?? ''}
       </Body>
       {lastName && 
         <Title
             className="pb_person_first"
             size={4}
-            text={` ${lastName}`}
+            text={lastName ? ` ${lastName}` : ''}
         />
       }
     </div>