feat: add showRegion, showCountry props for Address

packages/pages-components/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 ##### Chores
 
-*  swap from prettier to oxlint ([#141](https://github.com/yext/js/pull/141)) ([07f698ad](https://github.com/yext/js/commit/07f698ad55f9464289ea3cc5d0a0e5b8bb0e40d6))
+- swap from prettier to oxlint ([#141](https://github.com/yext/js/pull/141)) ([07f698ad](https://github.com/yext/js/commit/07f698ad55f9464289ea3cc5d0a0e5b8bb0e40d6))
 
 ##### New Features
 
-*  expose optOut and isYextAnalyticsEnabled functions ([#142](https://github.com/yext/js/pull/142)) ([d0c3010a](https://github.com/yext/js/commit/d0c3010a16e84b6f8a4b7959f9cf7aeadcaa6a52))
+- expose optOut and isYextAnalyticsEnabled functions ([#142](https://github.com/yext/js/pull/142)) ([d0c3010a](https://github.com/yext/js/commit/d0c3010a16e84b6f8a4b7959f9cf7aeadcaa6a52))
 
 #### 2.0.0 (2025-12-30)
 

packages/pages-components/src/components/address/address.stories.tsx

@@ -94,3 +94,28 @@ export const Address_SanFrancisco: StoryFn<typeof AddressComponent> = Template.b
 Address_SanFrancisco.args = {
   address: SanFrancisco,
 };
+
+// Address with country hidden (default formatting only)
+export const Address_HideCountry: StoryFn<typeof AddressComponent> = Template.bind({});
+
+Address_HideCountry.args = {
+  address: Arlington,
+  showCountry: false,
+};
+
+// Address with region hidden (default formatting only)
+export const Address_HideRegion: StoryFn<typeof AddressComponent> = Template.bind({});
+
+Address_HideRegion.args = {
+  address: Arlington,
+  showRegion: false,
+};
+
+// Address with both country and region hidden (default formatting only)
+export const Address_HideCountryAndRegion: StoryFn<typeof AddressComponent> = Template.bind({});
+
+Address_HideCountryAndRegion.args = {
+  address: Arlington,
+  showCountry: false,
+  showRegion: false,
+};

packages/pages-components/src/components/address/address.test.tsx

@@ -13,6 +13,16 @@ const address: AddressType = {
   region: "AL",
 };
 
+const argentinianAddress: AddressType = {
+  city: "Buenos Aires",
+  countryCode: "AR",
+  line1: "Av. Corrientes 1234",
+  localizedCountryName: "Argentina",
+  localizedRegionName: "Buenos Aires",
+  postalCode: "C1043",
+  region: "B",
+};
+
 describe("Address", () => {
   it("renders a default US Address", () => {
     render(<Address address={address} />);
@@ -64,4 +74,69 @@ describe("Address", () => {
 
     console.error = originalError;
   });
+
+  it("hides country in default format when showCountry is false", () => {
+    render(<Address address={address} showCountry={false} />);
+
+    const countryEl = screen.queryByText("US");
+
+    expect(countryEl).toBeFalsy();
+  });
+
+  it("hides region in default format when showRegion is false", () => {
+    render(<Address address={address} showRegion={false} />);
+
+    const regionEl = screen.queryByText("AL");
+
+    expect(regionEl).toBeFalsy();
+  });
+
+  it("hides both country and region in default format when both are false", () => {
+    render(<Address address={address} showCountry={false} showRegion={false} />);
+
+    const countryEl = screen.queryByText("US");
+    const regionEl = screen.queryByText("AL");
+
+    expect(countryEl && regionEl).toBeFalsy();
+  });
+
+  it("applies showCountry/showRegion when custom lines are provided", () => {
+    render(
+      <Address
+        address={address}
+        showCountry={false}
+        showRegion={false}
+        lines={[["region"], ["countryCode"]]}
+      />
+    );
+
+    const countryEl = screen.queryByText("US");
+    const regionEl = screen.queryByText("AL");
+
+    expect(countryEl || regionEl).toBeFalsy();
+  });
+
+  it("does not render a trailing comma in AR default format when showRegion is false", () => {
+    render(<Address address={argentinianAddress} showRegion={false} />);
+
+    const separatorEl = screen.queryByText(",");
+
+    expect(separatorEl).toBeFalsy();
+  });
+
+  it("removes commas immediately before hidden fields in custom lines", () => {
+    render(<Address address={address} showRegion={false} lines={[["city", ",", "region"]]} />);
+
+    const separatorEl = screen.queryByText(",");
+
+    expect(separatorEl).toBeFalsy();
+  });
+
+  it("keeps commas after hidden fields in custom lines", () => {
+    render(<Address address={address} showRegion={false} lines={[["region", ",", "city"]]} />);
+
+    const separatorEl = screen.queryByText(",");
+
+    expect(separatorEl).toBeTruthy();
+  });
 });

packages/pages-components/src/components/address/address.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { AddressLine } from "./types.js";
 import { AddressProps, AddressLineProps } from "./types.js";
 import { localeAddressFormat } from "./i18n.js";
 import { getUnabbreviated } from "./methods.js";
@@ -16,12 +17,54 @@ import "./address.css";
  *       US
  * const customAddress = (<Address address={document.address} lines={[['line1', 'city', 'region']]} />);
  *   --> 1101 Wilson Blvd., Arlington, VA
+ * const addressWithoutCountryOrRegion = (<Address address={document.address} showCountry={false} showRegion={false} />);
+ *   --> 1101 Wilson Blvd., Suite 2300,
+ *       Arlington 22201
  * ```
  *
+ * `showCountry` and `showRegion` apply to both locale-based default formatting and custom `lines`.
+ * Only separators immediately before hidden fields are removed.
+ *
  * @public
  */
-export const Address = ({ address, lines, separator = ",", ...props }: AddressProps) => {
-  const renderedLines = (lines || localeAddressFormat(address.countryCode)).map((line) => (
+export const Address = ({
+  address,
+  lines,
+  separator = ",",
+  showCountry = true,
+  showRegion = true,
+  ...props
+}: AddressProps) => {
+  const baseLines = lines || localeAddressFormat(address.countryCode);
+  const isHiddenField = (field: AddressLine[number]): boolean => {
+    if (field === "countryCode") {
+      return !showCountry;
+    }
+
+    if (field === "region") {
+      return !showRegion;
+    }
+
+    return false;
+  };
+
+  const renderedLinesToUse = baseLines
+    .map((line) =>
+      line.filter((field, index) => {
+        if (isHiddenField(field)) {
+          return false;
+        }
+
+        if (field === "," && isHiddenField(line[index + 1])) {
+          return false;
+        }
+
+        return true;
+      })
+    )
+    .filter((line) => line.length > 0);
+
+  const renderedLines = renderedLinesToUse.map((line) => (
     <AddressLine key={line.toString()} address={address} line={line} separator={separator} />
   ));
 

packages/pages-components/src/components/address/types.ts

@@ -28,6 +28,8 @@ export interface AddressProps extends React.HTMLProps<HTMLDivElement> {
   address: AddressType;
   lines?: AddressLine[];
   separator?: string;
+  showCountry?: boolean;
+  showRegion?: boolean;
 }
 
 /**