playbook_ui 15.4.0 → 15.5.0.pre.alpha.PLAY2554homeaddressstreetaccessibility12695

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

@@ -0,0 +1,22 @@
+The multiple container functionality also supports customized dropzone styling as shown here. 
+
+In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
+
+With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
+
+The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `droppedContainer` - The container where the item was dropped
+- `originalContainer` - The container where the drag started
+- `item` - The complete item object with all properties (including the updated container)
+- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
+
+The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
+
+- `draggedItemId` - The ID of the item that was dragged
+- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
+- `originalContainer` - The container where the drag started
+- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
+- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

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

@@ -5,11 +5,12 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - 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_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -17,8 +18,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - 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_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
+  - draggable_multiple_containers: Dragging Across Multiple Containers

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

@@ -7,4 +7,5 @@ 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 DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
+export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -255,4 +255,80 @@ test("line dropZone with horizontal direction applies 'line_horizontal' class to
   const container = kit.querySelector(".pb_draggable_container");
   
   expect(container).toHaveClass("line_horizontal");
-});
+});
+
+// Cross-container drag tests
+const multiContainerData = [
+  { id: "1", container: "To Do", text: "Task 1" },
+  { id: "2", container: "To Do", text: "Task 2" },
+  { id: "3", container: "In Progress", text: "Task 3" },
+  { id: "4", container: "Done", text: "Task 4" },
+];
+
+const containers = ["To Do", "In Progress", "Done"];
+
+const DraggableMultipleContainers = () => {
+  const [initialState, setInitialState] = useState(multiContainerData);
+
+  return (
+    <div data-testid={testId}>
+      <DraggableProvider
+          dropZone={{ type: "outline" }}
+          initialItems={multiContainerData}
+          onReorder={(items) => setInitialState(items)}
+      >
+        {containers.map((container) => (
+          <Draggable.Container
+              container={container}
+              data={{testid:`container-${container}`}}
+              key={container}
+          >
+            {initialState
+              .filter((item) => item.container === container)
+              .map(({ id, text }) => (
+                <Draggable.Item
+                    container={container}
+                    data-testid={`item-${id}`}
+                    dragId={id}
+                    key={id}
+                >
+                  {text}
+                </Draggable.Item>
+              ))}
+          </Draggable.Container>
+        ))}
+      </DraggableProvider>
+    </div>
+  );
+};
+
+test("renders multiple containers with correct items", () => {
+  render(<DraggableMultipleContainers />);
+  
+  const kit = screen.getByTestId(testId);
+  expect(kit).toBeInTheDocument();
+  
+  containers.forEach((container) => {
+    const containerEl = kit.querySelector(`[data-testid="container-${container}"]`);
+    expect(containerEl).toBeInTheDocument();
+  });
+  
+  // Check items are in correct containers
+  expect(screen.getByText("Task 1")).toBeInTheDocument();
+  expect(screen.getByText("Task 2")).toBeInTheDocument();
+  expect(screen.getByText("Task 3")).toBeInTheDocument();
+  expect(screen.getByText("Task 4")).toBeInTheDocument();
+});
+
+test("items have correct container association", () => {
+  const { container } = render(<DraggableMultipleContainers />);
+  
+  // items rendered within their respective containers
+  const todoContainer = container.querySelector('[data-testid="container-To Do"]');
+  const inProgressContainer = container.querySelector('[data-testid="container-In Progress"]');
+  const doneContainer = container.querySelector('[data-testid="container-Done"]');
+  
+  expect(todoContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(2);
+  expect(inProgressContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
+  expect(doneContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
+})

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

@@ -33,6 +33,8 @@ export default class PbDropdown extends PbEnhancedElement {
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
+    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
+    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -126,7 +128,7 @@ export default class PbDropdown extends PbEnhancedElement {
         .label.toString()
         .toLowerCase();
 
-      // hide or show option
+    // hide or show option
       const match = label.includes(lcTerm);
       opt.style.display = match ? "" : "none";
       if (match) hasMatch = true
@@ -356,17 +358,6 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   clearFormValidation(input) {
-    if (input.checkValidity()) {
-      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
-      dropdownWrapperElement.classList.remove("error");
-
-      const errorLabelElement = dropdownWrapperElement.querySelector(
-        ".pb_body_kit_negative"
-      );
-      if (errorLabelElement) {
-        errorLabelElement.remove();
-      }
-    }
     if (this.isMultiSelect) {
       if (this.selectedOptions.size > 0) {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
@@ -377,6 +368,19 @@ export default class PbDropdown extends PbEnhancedElement {
         if (errorLabelElement) {
           errorLabelElement.remove();
         }
+        return;
+      }
+    }
+    
+    if (input.checkValidity()) {
+      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+      dropdownWrapperElement.classList.remove("error");
+
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
+      if (errorLabelElement) {
+        errorLabelElement.remove();
       }
     }
   }
@@ -585,7 +589,9 @@ export default class PbDropdown extends PbEnhancedElement {
     // for multi_select, for each selectedOption, create a hidden input
     const name = baseInput.getAttribute("name");
     this.selectedOptions.forEach((raw) => {
-      const id = JSON.parse(raw).id;
+      const optionData = JSON.parse(raw);
+      // Use id if available, otherwise fall back to value
+      const id = optionData.id || optionData.value;
       const inp = document.createElement("input");
       inp.type = "hidden";
       inp.name = name;
@@ -593,7 +599,19 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    baseInput.value = "";
+    
+    // For multi-select, remove required from base input when there are selections
+    // The generated inputs handle the form submission with actual values
+    // Restore required attribute when there are no selections (if it was originally required)
+    if (this.selectedOptions.size > 0) {
+      baseInput.value = "";
+      baseInput.removeAttribute("required");
+    } else {
+      baseInput.value = "";
+      if (this.wasOriginallyRequired) {
+        baseInput.setAttribute("required", "");
+      }
+    }
   }
 
   handleBackspaceClear() {

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
 .pb_file_upload_kit {
-  .pb_card_kit_deselected_border_radius_md {
+  .pb_card_kit {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -11,7 +11,7 @@
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+    .pb_card_kit {
       border-color: $error;
     }
     .pb_body_kit_negative {
@@ -30,12 +30,12 @@
 }
 
 .dark .pb_file_upload_kit {
-  .pb_card_kit_deselected_border_radius_md {
+  .pb_card_kit {
     border: 1px $text_dk_lighter dashed;
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit_deselected_border_radius_md {
+    .pb_card_kit {
       border-color: $error_dark;
     }
   }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import classnames from "classnames";
 
 import { globalProps, GlobalProps } from "../utilities/globalProps";
@@ -36,6 +36,7 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const {
     autoClose = 0,
@@ -67,21 +68,42 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const autoCloseToast = () => {
-    if (autoClose && open) {
-      setTimeout(() => {
+  useEffect(() => {
+    toggleToast(open);
+  }, [open]);
+
+  // Manage auto-close timeout separately
+  useEffect(() => {
+    // Clear any existing timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    // Set new timeout if autoClose is enabled and toast is open
+    if (autoClose && open && showToast) {
+      timeoutRef.current = setTimeout(() => {
         toggleToast(false);
         onClose();
+        timeoutRef.current = null;
       }, autoClose);
     }
-  };
 
-  useEffect(() => {
-    toggleToast(open);
-    autoCloseToast();
-  }, [open]);
+    // Cleanup function to clear timeout on unmount or when dependencies change
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [autoClose, open, showToast, onClose]);
 
   const handleClick = () => {
+    // Clear autoClose timeout when manually closing
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
     toggleToast(!closeable);
     onClose();
   };

data/app/pb_kits/playbook/pb_flex/_flex_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
+
 type FlexItemPropTypes = {
   children: React.ReactNode[] | React.ReactNode,
   fixedSize?: string,
@@ -28,22 +29,28 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
+  
   const growClass = grow === true ? 'pb_flex_item_kit_grow' : ''
   const displayFlexClass = displayFlex === true ? 'pb_flex_item_kit_display_flex' : ''
   const flexClass = flex !== 'none' ? `pb_flex_item_kit_flex_${flex}` : ''
   const shrinkClass = shrink === true ? 'pb_flex_item_kit_shrink' : ''
   const alignSelfClass = alignSelf ? `pb_flex_item_kit_align_self_${alignSelf}` : ''
-  const fixedStyle =
-    fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const fixedStyle = fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
   const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
   const dynamicInlineProps = globalInlineProps(props)
+
+// Extract style from htmlOptions and remove it
+  const { style: htmlStyle, ...htmlOptionsWithoutStyle } = htmlOptions
+  const htmlStyleObj = htmlStyle && typeof htmlStyle === 'object' ? htmlStyle : {}
+  
+  // Merge all styles
   const combinedStyles = {
+    ...htmlStyleObj,
     ...fixedStyle,
     ...dynamicInlineProps
   }
 
-  const htmlProps = buildHtmlProps(htmlOptions)
-
+  const htmlProps = buildHtmlProps(htmlOptionsWithoutStyle)
 
   return (
     <div
@@ -66,4 +73,4 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   )
 }
 
-export default FlexItem
+export default FlexItem

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -15,6 +15,7 @@ const FlexItemExample = (props) => {
         <FlexItem
             displayFlex
             gap="xs"
+            htmlOptions={{style: {padding:"2px"}}}
             {...props}
         >
           <FlexItem>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import FormPill from '../_form_pill'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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

@@ -96,20 +96,24 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {hasAllEmptyProps && '—'}
       {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
-          <Title
-              className="pb_home_address_street_address"
-              dark={dark}
-              size={4}
-          >
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-          </Title>
-          <Title
-              className="pb_home_address_street_address"
-              dark={dark}
-              size={4}
-          >
-            {titleize(addressCont)}
-          </Title>
+          {(address || houseStyle) && (
+            <Title
+                className="pb_home_address_street_address"
+                dark={dark}
+                size={4}
+            >
+              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            </Title>
+          )}
+          {addressCont && (
+            <Title
+                className="pb_home_address_street_address"
+                dark={dark}
+                size={4}
+            >
+              {titleize(addressCont)}
+            </Title>
+          )}
           <Body color="light">
             {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
@@ -117,10 +121,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
-          <Body color="light">
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-          </Body>
-          <Body color="light">{titleize(addressCont)}</Body>
+          {(address || houseStyle) && (
+            <Body color="light">
+              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            </Body>
+          )}
+          {addressCont && (
+            <Body color="light">{titleize(addressCont)}</Body>
+          )}
           <div>
             <Title
                 className="pb_home_address_street_address"
@@ -141,10 +149,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
-          <Body dark={dark}>
-            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-          </Body>
-          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
+          {(address || houseStyle) && (
+            <Body dark={dark}>
+              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+            </Body>
+          )}
+          {addressCont && (
+            <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
+          )}
           <div>
             <Body
                 color="light"

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb

@@ -1,15 +1,19 @@
-<%= pb_rails "body", props: {
-  classname: "pb_home_address_street_address",
-  color: "light",
-  text: object.address_house_style,
-  dark: object.dark
-} %>
-<%= pb_rails "body", props: {
-  classname: "pb_home_address_street_address",
-  color: "light",
-  text: object.address_house_style2,
-  dark: object.dark
-} %>
+<% if object.address_house_style.present? %>
+  <%= pb_rails "body", props: {
+    classname: "pb_home_address_street_address",
+    color: "light",
+    text: object.address_house_style,
+    dark: object.dark
+  } %>
+<% end %>
+<% if object.address_house_style2.present? %>
+  <%= pb_rails "body", props: {
+    classname: "pb_home_address_street_address",
+    color: "light",
+    text: object.address_house_style2,
+    dark: object.dark
+  } %>
+<% end %>
 <div>
   <%= pb_rails "title", props: {
     tag: "span",

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -1,3 +1,4 @@
+<%= pb_rails("caption", props: { text: "with all" }) %>
 <%= pb_rails("home_address_street", props: {
   address: "70 Prospect Ave",
   address_cont: "Apt M18",
@@ -9,3 +10,126 @@
   zipcode: "19382",
   territory: "PHL",
 }) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First two lines blank: without address and address cont and housestyle" }) %>
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line half blank Second line full: with housestyle and without address and address cont" }) %>
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line full Second line blank: with address and housestyle and without address cont" }) %>
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line half blank Second line full: without address and with housestyle and address cont" }) %>
+<%= pb_rails("home_address_street", props: {
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "First line blank Second line full: with address cont and without address and housestyle" }) %>
+<%= pb_rails("home_address_street", props: {
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("caption", props: { margin_top: "sm", text: "Emphasis, Modified, Target and Formatted doc examples below" }) %>
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  emphasis: "none",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  emphasis: "city",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  emphasis: "none",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  city: "West Chester",
+  margin_bottom: "sm",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  margin_bottom: "sm",
+  state: "PA",
+  target: "_blank",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
+
+<%= pb_rails("home_address_street", props: {
+  address: "70 pRoSpEcT ave",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  preserve_case: true,
+  state: "pa",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>