[PLAY-1821] Home Address Casing (#4176)

yuriyivanenko · web-flow · commit db175e566648 · 2025-01-31T13:58:03.000-05:00
**What does this PR do?** A clear and concise description with your runway ticket url. This PR updates the `state` prop to always display capitalized states. It also adds a new `preserve_case` or `preserveCase` prop that will either titleize the address line based on true/false. [Story](https://runway.powerhrg.com/backlog_items/PLAY-1821) **Screenshots:** Screenshots to visualize your addition/change ![Screenshot 2025-01-27 at 2 04 06 PM](https://github.com/user-attachments/assets/675b8839-df17-4ccc-bb5a-acde9874c469) **How to test?** Steps to confirm the desired behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See addition/change #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code.
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx b/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx
@@ -18,6 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
+  preserveCase?: boolean,
   emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
@@ -43,6 +44,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     htmlOptions = {},
     homeId,
     homeUrl,
+    preserveCase = false,
     target,
     newWindow,
     houseStyle,
@@ -77,6 +79,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
     return null
   }
 
+  const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
+
   return (
     <div
         className={classes(className, dark)}
@@ -91,7 +95,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
               dark={dark}
               size={4}
           >
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Title>
           <Title
               className="pb_home_address_street_address"
@@ -101,14 +105,14 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
         </div>
       }
       {emphasis == 'city' &&
         <div>
           <Body color="light">
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
           <Body color="light">{titleize(addressCont)}</Body>
           <div>
@@ -118,7 +122,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state}`}
+              {`${titleize(city)}, ${state.toUpperCase()}`}
             </Title>
             <Body
                 color="light"
@@ -132,15 +136,15 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {emphasis == 'none' &&
         <div>
           <Body dark={dark}>
-            {joinPresent([titleize(address), houseStyle], ' · ')}
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
           </Body>
-          <Body dark={dark}>{titleize(addressCont)}</Body>
+          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
           <div>
             <Body
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state} ${zipcode}`}
+            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
           </Body>
           </div>
         </div>
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
@@ -0,0 +1,11 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 pRoSpEcT ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  preserve_case: true,
+  state: "pa",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetFormatting = (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 pRoSpEcT ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId="8250263"
+        homeUrl="https://powerhrg.com/"
+        preserveCase
+        state="pa"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetFormatting
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
@@ -0,0 +1 @@
+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/example.yml b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/example.yml
@@ -5,12 +5,14 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/index.js b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/index.js
@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
+export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'
diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb b/playbook/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb
@@ -18,6 +18,7 @@ class HomeAddressStreet < Playbook::KitBase
       prop :state
       prop :zipcode
       prop :territory
+      prop :preserve_case, default: false
       prop :dark, type: Playbook::Props::Boolean, default: false
 
       def classname
@@ -29,15 +30,15 @@ def city_state_zip
       end
 
       def city_state
-        [city&.titleize, state].join(", ")
+        [city&.titleize, state&.upcase].join(", ")
       end
 
       def zip
         zipcode.to_s
       end
 
       def address_house_style
-        [address&.titleize, house_style].join(separator)
+        [format_street_address, house_style].join(separator)
       end
 
       def address_house_style2
@@ -48,6 +49,14 @@ def separator
         house_style ? " \u00b7 " : ""
       end
 
+      def format_street_address
+        preserve_case ? address : custom_titleize(address)
+      end
+
+      def custom_titleize(str)
+        str.split(" ").map(&:capitalize).join(" ")
+      end
+
       def city_emphasis_props
         {
           address_house_style: address_house_style,

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.