diff --git a/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-country-and-region.png b/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-country-and-region.png new file mode 100644 index 00000000..e13509ce Binary files /dev/null and b/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-country-and-region.png differ diff --git a/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-country.png b/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-country.png new file mode 100644 index 00000000..7ae68b0c Binary files /dev/null and b/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-country.png differ diff --git a/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-region.png b/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-region.png new file mode 100644 index 00000000..b919c492 Binary files /dev/null and b/packages/pages-components/.storybook/snapshots/__snapshots__/components-address--address-hide-region.png differ diff --git a/packages/pages-components/CHANGELOG.md b/packages/pages-components/CHANGELOG.md index 5b39389c..6bc5a1f4 100644 --- a/packages/pages-components/CHANGELOG.md +++ b/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) diff --git a/packages/pages-components/src/components/address/address.stories.tsx b/packages/pages-components/src/components/address/address.stories.tsx index 4f79a475..61525b11 100644 --- a/packages/pages-components/src/components/address/address.stories.tsx +++ b/packages/pages-components/src/components/address/address.stories.tsx @@ -94,3 +94,28 @@ export const Address_SanFrancisco: StoryFn = Template.b Address_SanFrancisco.args = { address: SanFrancisco, }; + +// Address with country hidden (default formatting only) +export const Address_HideCountry: StoryFn = Template.bind({}); + +Address_HideCountry.args = { + address: Arlington, + showCountry: false, +}; + +// Address with region hidden (default formatting only) +export const Address_HideRegion: StoryFn = Template.bind({}); + +Address_HideRegion.args = { + address: Arlington, + showRegion: false, +}; + +// Address with both country and region hidden (default formatting only) +export const Address_HideCountryAndRegion: StoryFn = Template.bind({}); + +Address_HideCountryAndRegion.args = { + address: Arlington, + showCountry: false, + showRegion: false, +}; diff --git a/packages/pages-components/src/components/address/address.test.tsx b/packages/pages-components/src/components/address/address.test.tsx index 507ce606..53ce6564 100644 --- a/packages/pages-components/src/components/address/address.test.tsx +++ b/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(
); @@ -64,4 +74,69 @@ describe("Address", () => { console.error = originalError; }); + + it("hides country in default format when showCountry is false", () => { + render(
); + + const countryEl = screen.queryByText("US"); + + expect(countryEl).toBeFalsy(); + }); + + it("hides region in default format when showRegion is false", () => { + render(
); + + const regionEl = screen.queryByText("AL"); + + expect(regionEl).toBeFalsy(); + }); + + it("hides both country and region in default format when both are false", () => { + render(
); + + const countryEl = screen.queryByText("US"); + const regionEl = screen.queryByText("AL"); + + expect(countryEl && regionEl).toBeFalsy(); + }); + + it("applies showCountry/showRegion when custom lines are provided", () => { + render( +
+ ); + + 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(
); + + const separatorEl = screen.queryByText(","); + + expect(separatorEl).toBeFalsy(); + }); + + it("removes commas immediately before hidden fields in custom lines", () => { + render(
); + + const separatorEl = screen.queryByText(","); + + expect(separatorEl).toBeFalsy(); + }); + + it("keeps commas after hidden fields in custom lines", () => { + render(
); + + const separatorEl = screen.queryByText(","); + + expect(separatorEl).toBeTruthy(); + }); }); diff --git a/packages/pages-components/src/components/address/address.tsx b/packages/pages-components/src/components/address/address.tsx index 7ec899f1..e876d111 100644 --- a/packages/pages-components/src/components/address/address.tsx +++ b/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 = (
); * --> 1101 Wilson Blvd., Arlington, VA + * const addressWithoutCountryOrRegion = (
); + * --> 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) => ( )); diff --git a/packages/pages-components/src/components/address/types.ts b/packages/pages-components/src/components/address/types.ts index 9d044c86..43813d23 100644 --- a/packages/pages-components/src/components/address/types.ts +++ b/packages/pages-components/src/components/address/types.ts @@ -28,6 +28,8 @@ export interface AddressProps extends React.HTMLProps { address: AddressType; lines?: AddressLine[]; separator?: string; + showCountry?: boolean; + showRegion?: boolean; } /**