playbook_ui 15.5.0.pre.alpha.PLAY2503datepickerdefaultdateoutsideminmaxrange12814 → 15.5.0.pre.alpha.PLAY2554homeaddressstreetaccessibility12695

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 026ca4760856cc311f0a81cae95ad27826fba3272fc1988aa8986bf2fe6be7ae
-  data.tar.gz: 40714554838a090775b33e5bb3e734625993b2b5023c3831d4998727b60986a7
+  metadata.gz: b17349abd67079ab8e811b239c8971e2809a0299a6f69e41e247ee2a34a8d7bc
+  data.tar.gz: f0d3ef9cca63f616d580065e9058bc5a6514ddfda74ea028af65191562bf7c9e
 SHA512:
-  metadata.gz: daf82d22d0b7a35934330ed8bd5a38e71a2d1c4e2202a06d5db3babe54ad4e3021860fb07b346950a35688008e019adc03a268831cbab9f80255dea4befc01b6
-  data.tar.gz: 01bcaa6378f6ff3ceb314867862e9e94a82a6cf69006e9b39c0639255bc63cbfea29a12125fc0d269528b9f761ef66afb5ceaec5c551bb17544b3b61533e5d67
+  metadata.gz: 65f48b3ade3d01c25fb8e4f44828db75e64aba0ceba8bcfd7b9f7b17b11750ed7c7ad890e424a33333da0c88e299701094d18fbc8227b20994579cecaa575a2c
+  data.tar.gz: 858d50215f7af0969b58fddf455b162a6109efd4a3854884dcfbf55fbf29658345dd7dcd1faf97f9b5ecaf79a2022637e0f9f869f3ba7159cdf174e9c615bc0d

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -102,16 +102,16 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
-        backgroundSize: getResponsiveValue(backgroundSize),
-        backgroundPosition: getResponsiveValue(backgroundPosition),
-        backgroundRepeat: getResponsiveValue(backgroundRepeat),
-        backgroundColor: getResponsiveValue(backgroundColor),
-        imageUrl: getResponsiveValue(imageUrl),
+        backgroundSize: getResponsiveValue(props.backgroundSize),
+        backgroundPosition: getResponsiveValue(props.backgroundPosition),
+        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
+        backgroundColor: getResponsiveValue(props.backgroundColor),
+        imageUrl: getResponsiveValue(props.imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
+  }, [props]);
 
 
   // Extract currently applicable responsive values.

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -4,6 +4,7 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
+  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -41,8 +42,3 @@ test('applies correct overlay class when imageOverlay prop is provided', () => {
   const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
   expect(kit).toHaveClass('imageoverlay_opacity_6');
 });
-
-test('Sets backgroundColor to light as default when no backgroundColor prop is provided', () => {
-  const kit = renderKit(Background, props);
-  expect(kit).toHaveClass('pb_background_color_light');
-});

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { padding: "xl" }) do %>
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,6 +3,7 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
+      backgroundColor="light"
       padding="xl"
       {...props}
   />

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -251,28 +251,4 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
   })
-
-
-  test('displays defaultDate when it is later than maxDate', async () => {
-    const testId = 'datepicker-out-of-range-after'
-    const futureDateString = '01/15/2020'
-    const maxDateString = '01/10/2020'
-    
-    render(
-      <DatePicker
-          data={{ testid: testId }}
-          defaultDate={futureDateString}
-          format="m/d/Y"
-          maxDate={maxDateString}
-          pickerId="date-picker-out-of-range-after"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    const input = within(kit).getByPlaceholderText('Select Date')
-
-    await waitFor(() => {
-      expect(input).toHaveValue('01/15/2020')
-    }, { timeout: 5000 })
-  })
 })

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -275,80 +275,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   const { setMinDate, setMaxDate } = getMinMaxDates()
 
-  // Default Date + Min/Max Date Initialization Helper Functions section ----/
-  const toDateObject = (dateValue: any): Date | null => {
-    if (!dateValue) return null
-    if (dateValue instanceof Date) return dateValue
-    if (typeof dateValue === 'string') {
-      const parsed = new Date(dateValue)
-      return isNaN(parsed.getTime()) ? null : parsed
-    }
-    if (typeof dateValue === 'number') {
-      return new Date(dateValue)
-    }
-    return null
-  }
-
-  // Formatting Date for Flatpickr
-  const formatDateForFlatpickr = (dateValue: any): string | null => {
-    const dateObj = toDateObject(dateValue)
-    if (!dateObj) return null
-    
-    const year = dateObj.getFullYear()
-    const month = String(dateObj.getMonth() + 1).padStart(2, '0')
-    const day = String(dateObj.getDate()).padStart(2, '0')
-    return `${year}-${month}-${day}`
-  }
-
-  // Helper to check if defaultDate is earlier than minDate
-  const isDefaultDateBeforeMinDate = (defaultDateValue: any, minDateValue: any): boolean => {
-    if (!defaultDateValue || !minDateValue) return false
-    
-    const defaultDateObj = toDateObject(defaultDateValue)
-    const minDateObj = toDateObject(minDateValue)
-    
-    if (!defaultDateObj || !minDateObj) return false
-
-    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
-    const minDateOnly = new Date(minDateObj.getFullYear(), minDateObj.getMonth(), minDateObj.getDate())
-    
-    return defaultDateOnly < minDateOnly
-  }
-
-  // Helper to check if defaultDate is later than maxDate
-  const isDefaultDateAfterMaxDate = (defaultDateValue: any, maxDateValue: any): boolean => {
-    if (!defaultDateValue || !maxDateValue) return false
-    
-    const defaultDateObj = toDateObject(defaultDateValue)
-    const maxDateObj = toDateObject(maxDateValue)
-    
-    if (!defaultDateObj || !maxDateObj) return false
-    
-    const defaultDateOnly = new Date(defaultDateObj.getFullYear(), defaultDateObj.getMonth(), defaultDateObj.getDate())
-    const maxDateOnly = new Date(maxDateObj.getFullYear(), maxDateObj.getMonth(), maxDateObj.getDate())
-    
-    return defaultDateOnly > maxDateOnly
-  }
-
-  const defaultDateValue: any = defaultDateGetter()
-  // Only check for and out-of-range if user actually provided minDate/maxDate constraints
-  const isBeforeMin = minDate && isDefaultDateBeforeMinDate(defaultDateValue, setMinDate)
-  const isAfterMax = maxDate && isDefaultDateAfterMaxDate(defaultDateValue, setMaxDate)
-  
-  // Store these values for use in onClose handler
-  const hasOutOfRangeDefault = (isBeforeMin || isAfterMax) && defaultDateValue
-  
-  // Temporarily adjust minDate/maxDate to allow defaultDate to render if it's out of range via user provided minDate/maxDate constraints
-  const effectiveMinDate = isBeforeMin && defaultDateValue && minDate
-    ? formatDateForFlatpickr(defaultDateValue) || setMinDate
-    : setMinDate
-  
-  const effectiveMaxDate = isAfterMax && defaultDateValue && maxDate
-    ? formatDateForFlatpickr(defaultDateValue) || setMaxDate
-    : setMaxDate
-  
-  // End of Default Date + Min/Max Date Initialization Helper Functions section ----/
-  
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -360,32 +286,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate: effectiveMaxDate,
-    minDate: effectiveMinDate,
+    maxDate: setMaxDate,
+    minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [(_selectedDates, _dateStr, fp) => {
-      // If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
-      if (hasOutOfRangeDefault) {
-        const dateObj = toDateObject(defaultDateValue)
-        if (dateObj) {
-          const inputIsBlank = !fp.input.value || fp.input.value.trim() === ''
-          const noSelection = !fp.selectedDates || fp.selectedDates.length === 0
-          
-          if (inputIsBlank || noSelection) {
-            const formattedDate = fp.formatDate(dateObj, getDateFormat())
-            if (formattedDate) {
-              fp.input.value = formattedDate
-            }
-            fp.selectedDates = [dateObj]
-            fp.jumpToDate(dateObj)
-            setTimeout(() => {
-              yearChangeHook(fp)
-            }, 0)
-          }
-        }
-      }
-      
       calendarResizer()
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
@@ -398,30 +303,12 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
       positionCalendarIfNeeded(fp)
     }],
-    onClose: [(selectedDates, dateStr, fp) => {
+    onClose: [(selectedDates, dateStr) => {
       if (resizeRepositionHandlerRef) {
         window.removeEventListener('resize', resizeRepositionHandlerRef)
         resizeRepositionHandlerRef = null
       }
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
-      
-      // If defaultDate was out of range and no date was selected, preserve the default date
-      if (hasOutOfRangeDefault && (!selectedDates || selectedDates.length === 0)) {
-        const dateObj = toDateObject(defaultDateValue)
-        if (dateObj && fp.input) {
-          const formattedDate = fp.formatDate(dateObj, getDateFormat())
-          if (formattedDate) {
-            setTimeout(() => {
-              if (fp.input && (!fp.selectedDates || fp.selectedDates.length === 0)) {
-                fp.input.value = formattedDate
-                fp.selectedDates = [dateObj]
-                fp.jumpToDate(dateObj)
-              }
-            }, 0)
-          }
-        }
-      }
-      
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
@@ -443,71 +330,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
   picker.innerContainer.parentElement.id = `cal-${pickerId}`
 
-  // If defaultDate was out of range, restore the original minDate/maxDate after initialization (defaultDate displayed, still cannot select dates outside the actual range via user provided minDate/maxDate constraints)
-  if ((isBeforeMin || isAfterMax) && defaultDateValue) {
-    const dateObj = toDateObject(defaultDateValue)
-    const formattedDate = dateObj ? picker.formatDate(dateObj, getDateFormat()) : null
-    
-    setTimeout(() => {
-      if (!dateObj || !picker.input || !formattedDate) return
-
-      picker.setDate(dateObj, false)
-
-      if (isBeforeMin && setMinDate && minDate) {
-        picker.set('minDate', setMinDate)
-      }
-      if (isAfterMax && setMaxDate && maxDate) {
-        picker.set('maxDate', setMaxDate)
-      }
-      picker.input.value = formattedDate
-
-      picker.selectedDates = [dateObj]
-      
-      setTimeout(() => {
-        yearChangeHook(picker)
-      }, 0)
-      
-      // Restore function for out-of-range default dates
-      const restoreOutOfRangeValue = () => {
-        if (!picker.input) return
-        
-        const inputIsBlank = !picker.input.value || picker.input.value.trim() === ''
-        const noSelection = !picker.selectedDates || picker.selectedDates.length === 0
-        
-        if (inputIsBlank || noSelection) {
-          setTimeout(() => {
-            if (picker.input && (!picker.input.value || picker.input.value.trim() === '')) {
-              picker.input.value = formattedDate
-            }
-            if (!picker.selectedDates || picker.selectedDates.length === 0) {
-              picker.selectedDates = [dateObj]
-              if (picker.isOpen) {
-                picker.jumpToDate(dateObj)
-                picker.redraw()
-                setTimeout(() => {
-                  yearChangeHook(picker)
-                }, 0)
-              }
-            }
-          }, 0)
-        }
-      }
-      
-      const originalClear = picker.clear.bind(picker)
-      picker.clear = function(...args: any[]) {
-        const result = originalClear(...args)
-        setTimeout(() => restoreOutOfRangeValue(), 0)
-        return result
-      }
-
-      picker.input.addEventListener('input', restoreOutOfRangeValue)
-      
-      picker.config.onClose.push(() => {
-        restoreOutOfRangeValue()
-      })
-    }, 10)
-  }
-
   // replace year selector with dropdown
   picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
 

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

@@ -11,22 +11,4 @@
   max_date: "10/20/2020",
   min_date: "10/10/2020",
   picker_id: "date-picker-min-max2"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  format: "m/d/Y",
-  label: "Default date earlier than min_date (preserved)",
-  default_date: (DateTime.current - 3.days).utc.iso8601,
-  min_date: (DateTime.current - 1.day).utc.iso8601,
-  max_date: (DateTime.current + 7.days).utc.iso8601,
-  picker_id: "date-picker-min-max-default-before"
-}) %>
-
-<%= pb_rails("date_picker", props: {
-  format: "m/d/Y",
-  label: "Default date later than max_date (preserved)",
-  default_date: (DateTime.current + 10.days).utc.iso8601,
-  min_date: (DateTime.current - 1.day).utc.iso8601,
-  max_date: (DateTime.current + 7.days).utc.iso8601,
-  picker_id: "date-picker-min-max-default-after"
 }) %>

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

@@ -143,25 +143,30 @@ export default class PbDialog extends PbEnhancedElement {
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalMousedownHandler = dialogElement._outsideClickHandler
-      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
+      const originalClickHandler = dialogElement._outsideClickHandler
+      if (originalClickHandler) dialogElement.removeEventListener("click", originalClickHandler)
+      
       dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        const dialogModal = event.target.getBoundingClientRect()
-        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
-          event.clientX > dialogModal.right ||
-          event.clientY < dialogModal.top ||
-          event.clientY > dialogModal.bottom
-
-        if (clickedOutsideDialogModal) {
+        // Get the dialog's bounding box (the actual content area)
+        const rect = dialogElement.getBoundingClientRect()
+        const clickedInDialog = (
+          event.clientX >= rect.left &&
+          event.clientX <= rect.right &&
+          event.clientY >= rect.top &&
+          event.clientY <= rect.bottom
+        )
+
+        // Only close if clicked outside the dialog content (on the backdrop)
+        if (!clickedInDialog) {
           dialogElement.close()
           event.stopPropagation()
         }
       }
 
-      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
+      dialogElement.addEventListener("click", dialogElement._outsideClickHandler);
     })
   }
 }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -112,14 +112,7 @@
     name: "checkbox-name",
     class: "checkbox-class"
   %>
-  <%= form.date_picker :example_date_picker_1, props: { 
-    label: true,
-    # Testing out-of-range default date feature: default_date is earlier than min_date
-    # This should still display the default date even though it's outside the valid range
-    default_date: (DateTime.current - 3.days).utc.iso8601,
-    min_date: (DateTime.current - 1.day).utc.iso8601,
-    max_date: (DateTime.current + 7.days).utc.iso8601
-  } %>
+  <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -113,17 +113,7 @@
   <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox_validation, props: { text: "Example Checkbox Validation", label: true, required: true }, checked_value: "1", unchecked_value: "0" %>
-  <%= form.date_picker :example_date_picker_2, props: { 
-    label: true, 
-    required: true, 
-    validation_message: "Please, select a date.", 
-    allow_input: true,
-    # Testing out-of-range default date feature: default_date is earlier than min_date
-    # This should still display the default date even though it's outside the valid range
-    default_date: (DateTime.current - 3.days).utc.iso8601,
-    min_date: (DateTime.current - 1.day).utc.iso8601,
-    max_date: (DateTime.current + 7.days).utc.iso8601
-  } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
   <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>

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",
@@ -8,4 +9,127 @@
   state: "PA",
   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",
 }) %>