@windstream/react-shared-components 0.2.48 → 0.2.49

package/src/components/precisely-address-autocomplete/index.test.tsx

@@ -0,0 +1,159 @@
+import "@testing-library/jest-dom";
+
+import { AddressAutocomplete } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+const suggestions = [
+  {
+    address: {
+      addressLine1: "123 Dale Springs",
+      addressLine2: "Apt B",
+      city: "Binsport",
+      state: "NC",
+      postalCode: "17032",
+      providerId: "candidate-1",
+    },
+    mainText: "123 Dale Springs",
+    placeId: "place-1",
+    provider: "precisely",
+  },
+];
+
+describe("AddressAutocomplete", () => {
+  it("requests suggestions and displays results at the minimum query length", () => {
+    const onChange = jest.fn();
+    render(
+      <AddressAutocomplete suggestions={suggestions} onChange={onChange} />
+    );
+
+    const input = screen.getByRole("combobox");
+    fireEvent.change(input, { target: { value: "12" } });
+    expect(
+      screen.queryByTestId("address-autocomplete-suggestions")
+    ).not.toBeInTheDocument();
+
+    fireEvent.change(input, { target: { value: "123" } });
+    expect(onChange).toHaveBeenLastCalledWith("123");
+    expect(
+      screen.getByTestId("address-autocomplete-suggestions")
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("address-autocomplete-suggestions")).toHaveClass(
+      "max-h-[220px]",
+      "overflow-y-auto",
+      "p-0",
+      "border",
+      "border-input-border",
+      "bg-bg-surface",
+      "shadow-dark-drop"
+    );
+    expect(
+      screen.getByRole("button", { name: /123 Dale Springs/i })
+    ).toHaveClass("px-4");
+    expect(screen.getByRole("combobox").parentElement).toHaveClass("pl-4");
+    expect(screen.getAllByText("location_on")[0]).toHaveClass(
+      "text-icon-brand"
+    );
+  });
+
+  it("uses the input pin color for each suggestion pin", () => {
+    render(
+      <AddressAutocomplete
+        defaultValue="123"
+        suggestions={suggestions}
+        prefixIconClassName="text-input-icon-placeholder"
+      />
+    );
+
+    fireEvent.focus(screen.getByRole("combobox"));
+    const pins = screen.getAllByText("location_on");
+    expect(pins).toHaveLength(2);
+    pins.forEach(pin => {
+      expect(pin).toHaveClass("text-input-icon-placeholder");
+      expect(pin).toHaveClass(
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "leading-none"
+      );
+    });
+  });
+
+  it("returns the selected provider address without requesting again", () => {
+    const onChange = jest.fn();
+    const onSelectAddress = jest.fn();
+    render(
+      <AddressAutocomplete
+        defaultValue="123"
+        suggestions={suggestions}
+        onChange={onChange}
+        onSelectAddress={onSelectAddress}
+      />
+    );
+
+    fireEvent.focus(screen.getByRole("combobox"));
+    fireEvent.click(screen.getByRole("button", { name: /123 Dale Springs/i }));
+
+    expect(onSelectAddress).toHaveBeenCalledWith({
+      address: "123 Dale Springs, Apt B, Binsport, NC, 17032",
+      unit: "Apt B",
+      addressToSend: suggestions[0].address,
+      placeId: "place-1",
+    });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(screen.getByRole("combobox")).toHaveValue(
+      "123 Dale Springs, Apt B, Binsport, NC, 17032"
+    );
+  });
+
+  it("clears the selected address when the input is emptied", () => {
+    const onSelectAddress = jest.fn();
+    render(
+      <AddressAutocomplete
+        defaultValue="123"
+        onSelectAddress={onSelectAddress}
+      />
+    );
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "" },
+    });
+    expect(onSelectAddress).toHaveBeenCalledWith();
+  });
+
+  it("focuses and reports load when its provider becomes ready", () => {
+    const onLoadProvider = jest.fn();
+    const { rerender } = render(
+      <AddressAutocomplete isReady={false} onLoadProvider={onLoadProvider} />
+    );
+    const input = screen.getByRole("combobox");
+
+    expect(input).toBeDisabled();
+    expect(onLoadProvider).not.toHaveBeenCalled();
+
+    rerender(
+      <AddressAutocomplete isReady={true} onLoadProvider={onLoadProvider} />
+    );
+    expect(input).toHaveFocus();
+    expect(onLoadProvider).toHaveBeenCalledTimes(1);
+  });
+
+  it("dismisses suggestions after an outside click", () => {
+    render(
+      <div>
+        <AddressAutocomplete defaultValue="123" suggestions={suggestions} />
+        <button type="button">Outside</button>
+      </div>
+    );
+
+    fireEvent.focus(screen.getByRole("combobox"));
+    expect(
+      screen.getByTestId("address-autocomplete-suggestions")
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Outside" }));
+    expect(
+      screen.queryByTestId("address-autocomplete-suggestions")
+    ).not.toBeInTheDocument();
+  });
+});

package/src/components/precisely-address-autocomplete/index.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import type {
+  AddressAutocompleteAddress,
+  AddressAutocompleteProps,
+  AddressAutocompleteSuggestion,
+} from "./types";
+
+import { Input } from "@shared/components/input";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { useOutsideClick } from "@shared/hooks/use-outside-click";
+import { cx } from "@shared/utils";
+
+const formatSuggestion = <TAddress extends AddressAutocompleteAddress>(
+  suggestion: AddressAutocompleteSuggestion<TAddress>
+) => {
+  const { address, mainText, postalCode: suggestionPostalCode } = suggestion;
+  if (!address) {
+    return { primaryText: mainText, secondaryText: "", value: mainText };
+  }
+
+  const primaryText = [address.addressLine1, address.addressLine2]
+    .filter(Boolean)
+    .join(", ");
+  const secondaryText = [
+    address.city,
+    address.state,
+    address.postalCode || suggestionPostalCode,
+  ]
+    .filter(Boolean)
+    .join(", ");
+
+  return {
+    primaryText: primaryText || mainText,
+    secondaryText,
+    value: [primaryText, secondaryText].filter(Boolean).join(", ") || mainText,
+  };
+};
+
+export const AddressAutocomplete = <
+  TAddress extends AddressAutocompleteAddress = AddressAutocompleteAddress,
+>({
+  className,
+  containerClassName,
+  defaultValue = "",
+  errorText,
+  fixedPositionedSuggestions = false,
+  focusOnLoad = true,
+  hasError,
+  inputContainerClassName,
+  isIframe = false,
+  isLoading = false,
+  isReady = true,
+  mapPinIcon = true,
+  minQueryLength = 3,
+  onChange,
+  onFocus,
+  onLoadProvider,
+  onSelectAddress,
+  onSuggestionsChange,
+  optionsContainerClassName,
+  prefixIconClassName = "text-icon-brand",
+  suggestions = [],
+  value: controlledValue,
+  ...inputProps
+}: AddressAutocompleteProps<TAddress>) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const suggestionsId = useId();
+  const [value, setValue] = useState(controlledValue ?? defaultValue);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const pinIconClassName = cx(
+    "inline-flex items-center justify-center leading-none",
+    prefixIconClassName
+  );
+
+  useEffect(() => {
+    if (controlledValue !== undefined) setValue(controlledValue);
+  }, [controlledValue]);
+
+  useEffect(() => {
+    if (isReady && focusOnLoad) inputRef.current?.focus();
+  }, [focusOnLoad, isReady]);
+
+  useEffect(() => {
+    if (isReady) onLoadProvider?.();
+  }, [isReady, onLoadProvider]);
+
+  useEffect(() => {
+    onSuggestionsChange?.(suggestions);
+  }, [onSuggestionsChange, suggestions]);
+
+  useOutsideClick(rootRef, () => setShowSuggestions(false));
+
+  const selectSuggestion = useCallback(
+    (suggestion: AddressAutocompleteSuggestion<TAddress>) => {
+      if (!suggestion.address) return;
+
+      const formatted = formatSuggestion(suggestion);
+      setValue(formatted.value);
+      setShowSuggestions(false);
+      onSelectAddress?.({
+        address: formatted.value,
+        unit: suggestion.address.addressLine2 || "",
+        addressToSend: suggestion.address,
+        placeId: suggestion.placeId || "",
+      });
+    },
+    [onSelectAddress]
+  );
+
+  const hasSuggestions =
+    showSuggestions &&
+    value.length >= minQueryLength &&
+    !isLoading &&
+    suggestions.length > 0;
+
+  return (
+    <div
+      ref={rootRef}
+      className={cx("relative min-w-[300px] text-text", containerClassName)}
+    >
+      <Input
+        {...inputProps}
+        ref={inputRef}
+        size="medium"
+        value={value}
+        className={cx(
+          "mx-auto w-full bg-transparent pl-2 placeholder:text-input-text-placeholder",
+          "body2",
+          className
+        )}
+        containerClassName={cx("pl-4", inputContainerClassName)}
+        loading={!isReady}
+        onChange={event => {
+          const nextValue = event.target.value;
+          setValue(nextValue);
+          setShowSuggestions(nextValue.length >= minQueryLength);
+          if (!nextValue) onSelectAddress?.();
+          onChange?.(nextValue);
+        }}
+        onFocus={event => {
+          setShowSuggestions(true);
+          onFocus?.(event);
+        }}
+        autoComplete="off"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-controls={suggestionsId}
+        aria-expanded={hasSuggestions}
+        data-cy="address-autocomplete-input"
+        data-testid="address-autocomplete-input"
+        prefixIconName={mapPinIcon ? "location_on" : undefined}
+        prefixIconFill={true}
+        prefixIconClassName={pinIconClassName}
+        errorText={errorText}
+        state={errorText || hasError ? "error" : inputProps.state}
+        hasError={hasError}
+      />
+
+      {hasSuggestions && (
+        <ul
+          id={suggestionsId}
+          role="listbox"
+          data-cy="address-autocomplete-suggestions"
+          data-testid="address-autocomplete-suggestions"
+          className={cx(
+            "shadow-dark-drop absolute top-full z-20 m-0 mt-1 w-full list-none overflow-y-auto overscroll-contain rounded-lg border border-input-border bg-bg-surface p-0",
+            isIframe ? "max-h-[117px]" : "max-h-[220px]",
+            fixedPositionedSuggestions &&
+              (isIframe
+                ? "fixed z-50 max-h-[117px]"
+                : "fixed z-50 max-h-[220px]"),
+            optionsContainerClassName
+          )}
+        >
+          {suggestions.map((suggestion, index) => {
+            const { primaryText, secondaryText } = formatSuggestion(suggestion);
+            return (
+              <li
+                role="option"
+                aria-selected="false"
+                key={suggestion.placeId || `${suggestion.mainText}-${index}`}
+              >
+                <button
+                  type="button"
+                  className="flex w-full items-center px-4 py-4 text-left hover:bg-bg-surface-secondary"
+                  onClick={() => selectSuggestion(suggestion)}
+                >
+                  <MaterialIcon
+                    fill={1}
+                    name="location_on"
+                    size={24}
+                    weight="200"
+                    className={cx("mr-4 min-w-[24px]", pinIconClassName)}
+                  />
+                  <span>
+                    <span>{primaryText}</span>
+                    {secondaryText && (
+                      <small className="ml-1">{secondaryText}</small>
+                    )}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export type {
+  AddressAutocompleteAddress,
+  AddressAutocompleteProps,
+  AddressAutocompleteResult,
+  AddressAutocompleteSuggestion,
+} from "./types";

package/src/components/precisely-address-autocomplete/types.ts

@@ -0,0 +1,54 @@
+import type { InputFieldProps } from "@shared/components/input";
+
+export type AddressAutocompleteAddress = {
+  addressLine1?: string;
+  addressLine2?: string | null;
+  city?: string;
+  state?: string;
+  postalCode?: string;
+};
+
+export type AddressAutocompleteSuggestion<
+  TAddress extends AddressAutocompleteAddress = AddressAutocompleteAddress,
+> = {
+  address?: TAddress;
+  mainText: string;
+  placeId?: string;
+  postalCode?: string;
+  provider?: string;
+};
+
+export type AddressAutocompleteResult<
+  TAddress extends AddressAutocompleteAddress = AddressAutocompleteAddress,
+> = {
+  address: string;
+  unit: string;
+  addressToSend: TAddress;
+  placeId: string;
+};
+
+export type AddressAutocompleteProps<
+  TAddress extends AddressAutocompleteAddress = AddressAutocompleteAddress,
+> = Omit<
+  InputFieldProps,
+  "defaultValue" | "loading" | "onChange" | "size" | "value"
+> & {
+  value?: string;
+  defaultValue?: string;
+  suggestions?: AddressAutocompleteSuggestion<TAddress>[];
+  isLoading?: boolean;
+  isReady?: boolean;
+  focusOnLoad?: boolean;
+  minQueryLength?: number;
+  mapPinIcon?: boolean;
+  fixedPositionedSuggestions?: boolean;
+  isIframe?: boolean;
+  inputContainerClassName?: string;
+  optionsContainerClassName?: string;
+  onChange?: (value: string) => void;
+  onSelectAddress?: (result?: AddressAutocompleteResult<TAddress>) => void;
+  onSuggestionsChange?: (
+    suggestions: AddressAutocompleteSuggestion<TAddress>[]
+  ) => void;
+  onLoadProvider?: () => void;
+};

package/src/contentful/blocks/cards/floating-image-card/index.tsx

@@ -7,10 +7,11 @@ import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
 import { cx } from "@shared/utils";
 
+// Block (full-width) on mobile so the button fills the card; flex alignment only on desktop.
 const alignmentClasses: Record<string, string> = {
-  left: "flex w-full justify-start",
-  right: "flex w-full justify-end",
-  center: "flex w-full justify-center",
+  left: "w-full lg:flex lg:justify-start",
+  right: "w-full lg:flex lg:justify-end",
+  center: "w-full lg:flex lg:justify-center",
 };
 
 export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({

package/src/contentful/blocks/cards/simple-card/index.tsx

@@ -331,7 +331,8 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
               fullWidth={true}
               buttonClassName={cx(
                 card.cta.buttonClassName,
-                isCtaOnly && "w-[342px] max-w-full lg:w-[342px]"
+                // Narrower padding so long labels still fit the fixed width.
+                isCtaOnly && "w-[342px] max-w-full px-4 lg:w-[342px]"
               )}
             />
           </div>

package/src/index.ts

@@ -8,6 +8,14 @@ export type { ButtonProps } from "./components/button";
 export { Input, InputField, Input as TextInput } from "./components/input";
 export type { InputProps, InputFieldProps } from "./components/input";
 
+export { AddressAutocomplete } from "./components/precisely-address-autocomplete";
+export type {
+  AddressAutocompleteAddress,
+  AddressAutocompleteProps,
+  AddressAutocompleteResult,
+  AddressAutocompleteSuggestion,
+} from "./components/precisely-address-autocomplete";
+
 export { Image } from "./components/image";
 export type { ImageProps, ImageComponentProps } from "./components/image";