@phillips/seldon 1.34.0 → 1.36.0

package/dist/components/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariants } from './types';
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Button contents
@@ -14,7 +15,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * Is this the principal call to action on the page?
      */
-    buttonType?: 'primary' | 'secondary' | 'ghost';
+    variant?: ButtonVariants;
     /**
      * How large should the button be?
      */

package/dist/components/Button/Button.js

@@ -1,42 +1,43 @@
 import { jsx as c } from "react/jsx-runtime";
 import p from "../../node_modules/classnames/index.js";
 import { getCommonProps as u } from "../../utils/index.js";
-import { forwardRef as d } from "react";
-const $ = d(
+import { ButtonVariants as d } from "./types.js";
+import { forwardRef as $ } from "react";
+const b = $(
   ({
-    buttonType: t = "primary",
+    variant: s = d.primary,
     size: a = "md",
     children: m,
     className: r,
-    isIconLast: e = !1,
-    type: n = "button",
-    isDisabled: l = !1,
-    ...s
+    isIconLast: n = !1,
+    type: e = "button",
+    isDisabled: i = !1,
+    ...t
   }, f) => {
-    const { className: o, ...i } = u(s, "Button");
+    const { className: o, ...l } = u(t, "Button");
     return /* @__PURE__ */ c(
       "button",
       {
-        ...i,
+        ...l,
         ref: f,
-        type: n,
+        type: e,
         className: p(
           `${o}`,
           `${o}--${a}`,
-          `${o}--${t}`,
+          `${o}--${s}`,
           {
-            [`${o}--icon-last`]: e
+            [`${o}--icon-last`]: n
           },
           r
         ),
-        disabled: l,
-        ...s,
+        disabled: i,
+        ...t,
         children: m
       }
     );
   }
 );
-$.displayName = "Button";
+b.displayName = "Button";
 export {
-  $ as default
+  b as default
 };

package/dist/components/Button/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum ButtonVariants {
+    primary = "primary",
+    secondary = "secondary",
+    ghost = "ghost"
+}

package/dist/components/Button/types.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.primary = "primary", r.secondary = "secondary", r.ghost = "ghost", r))(e || {});
+export {
+  e as ButtonVariants
+};

package/dist/components/Header/Header.js

@@ -1,10 +1,10 @@
-import { jsxs as I, jsx as e } from "react/jsx-runtime";
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
 import r from "../../node_modules/classnames/index.js";
-import * as c from "react";
-import { px as a } from "../../utils/index.js";
-import y from "../Search/Search.js";
-import E from "../../assets/PhillipsLogo.svg.js";
-const N = c.createContext({
+import * as i from "react";
+import { findChildrenOfType as _, px as a } from "../../utils/index.js";
+import x from "../Search/Search.js";
+import P from "../../assets/PhillipsLogo.svg.js";
+const j = i.createContext({
   defaultMobileMenuLabel: "",
   expandedItem: "",
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
@@ -14,28 +14,28 @@ const N = c.createContext({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
   onSelect: (t) => {
   }
-}), k = ({
+}), R = ({
   defaultMobileMenuLabel: t = "Main Menu",
-  logo: d = /* @__PURE__ */ e(E, {}),
-  className: g,
-  children: _,
-  toggleOpenText: l = "Open Menu",
-  toggleCloseText: m = "Close Menu",
-  logoText: x = "Home Page",
-  ...v
+  logo: s = /* @__PURE__ */ e(P, {}),
+  className: v,
+  children: l,
+  toggleOpenText: m = "Open Menu",
+  toggleCloseText: h = "Close Menu",
+  logoText: f = "Home Page",
+  ...S
 }) => {
-  const [s, f] = c.useState(!1), [h, i] = c.useState(t), o = s ? m : l, S = h !== t, p = function() {
-    f((n) => !n), i(t);
-  }, $ = function(n) {
-    i((u) => u === t ? n : t);
+  const $ = _(l, x), u = _(l, x, !0), [d, E] = i.useState(!1), [p, c] = i.useState(t), o = d ? h : m, y = p !== t, g = function() {
+    E((n) => !n), c(t);
+  }, I = function(n) {
+    c((C) => C === t ? n : t);
   };
-  return /* @__PURE__ */ I("header", { ...v, className: r(`${a}-header`, g), children: [
+  return /* @__PURE__ */ N("header", { ...S, className: r(`${a}-header`, v), children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: r(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: s }),
+        className: r(`${a}-header__overlay`, { [`${a}-header__overlay--active`]: d }),
         "data-testid": "header-overlay",
-        onClick: p
+        onClick: g
       }
     ),
     /* @__PURE__ */ e(
@@ -44,31 +44,31 @@ const N = c.createContext({
         "aria-label": o,
         "data-testid": "mobile-menu-toggle",
         type: "button",
-        onClick: p,
+        onClick: g,
         className: r(`${a}-header__toggle-btn`, {
-          [`${a}-header__toggle-btn--open`]: o === m
+          [`${a}-header__toggle-btn--open`]: o === h
         }),
         children: /* @__PURE__ */ e("span", { children: o })
       }
     ),
-    /* @__PURE__ */ e("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, tabIndex: o === l ? 0 : -1, children: /* @__PURE__ */ e("a", { href: "/", "aria-label": x, children: typeof d == "object" ? d : /* @__PURE__ */ e("img", { alt: "Phillips", "data-testid": "header-logo-img", src: d, height: "14" }) }) }),
-    /* @__PURE__ */ e("div", { className: r(`${a}-header__nav`, { [`${a}-header__nav--open`]: s }), children: /* @__PURE__ */ e(
-      N.Provider,
+    /* @__PURE__ */ e("h1", { "data-testid": "header-logo", className: `${a}-header__logo`, tabIndex: o === m ? 0 : -1, children: /* @__PURE__ */ e("a", { href: "/", "aria-label": f, children: typeof s == "object" ? s : /* @__PURE__ */ e("img", { alt: "Phillips", "data-testid": "header-logo-img", src: s, height: "14" }) }) }),
+    /* @__PURE__ */ e("div", { className: r(`${a}-header__nav`, { [`${a}-header__nav--open`]: d }), children: /* @__PURE__ */ e(
+      j.Provider,
       {
         value: {
           defaultMobileMenuLabel: t,
-          expandedItem: h,
-          setExpandedItem: (n) => i(n),
-          isExpanded: S,
-          onSelect: (n) => $(n)
+          expandedItem: p,
+          setExpandedItem: (n) => c(n),
+          isExpanded: y,
+          onSelect: (n) => I(n)
         },
-        children: _
+        children: u
       }
     ) }),
-    /* @__PURE__ */ e(y, {})
+    $
   ] });
 };
 export {
-  N as HeaderContext,
-  k as default
+  j as HeaderContext,
+  R as default
 };

package/dist/components/IconButton/IconButton.js

@@ -1,20 +1,21 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "../../node_modules/classnames/index.js";
-import c from "../Button/Button.js";
-import { getCommonProps as p } from "../../utils/index.js";
-const B = ({ children: m, size: s = "md", className: r, ...o }) => {
-  const { className: t, ...n } = p(o, "IconButton");
-  return /* @__PURE__ */ a(
-    c,
+import { jsx as n } from "react/jsx-runtime";
+import c from "../../node_modules/classnames/index.js";
+import e from "../Button/Button.js";
+import { getCommonProps as i } from "../../utils/index.js";
+import { ButtonVariants as p } from "../Button/types.js";
+const x = ({ children: m, size: r = "md", className: s, ...o }) => {
+  const { className: t, ...a } = i(o, "IconButton");
+  return /* @__PURE__ */ n(
+    e,
     {
-      ...n,
-      buttonType: "primary",
-      className: e(t, `${t}--${s}`, r),
+      ...a,
+      variant: p.primary,
+      className: c(t, `${t}--${r}`, s),
       ...o,
       children: m
     }
   );
 };
 export {
-  B as default
+  x as default
 };

package/dist/components/Input/Input.js

@@ -1,14 +1,14 @@
 import { jsxs as P, jsx as l } from "react/jsx-runtime";
 import * as R from "react";
-import d from "../../node_modules/classnames/index.js";
+import t from "../../node_modules/classnames/index.js";
 import { px as i, useNormalizedInputProps as y } from "../../utils/index.js";
 const z = R.forwardRef(
   ({
-    className: a,
+    className: p,
     defaultValue: r,
     disabled: u,
     hideLabel: o,
-    id: t,
+    id: a,
     inline: m,
     invalid: $,
     invalidText: c,
@@ -16,45 +16,45 @@ const z = R.forwardRef(
     onChange: b,
     onClick: f,
     placeholder: h,
-    readOnly: p,
-    size: w = "md",
+    readOnly: e,
+    size: v = "md",
     type: s = "text",
-    value: x,
-    warn: v,
-    warnText: I,
-    ...e
-  }, N) => {
-    const n = y({ disabled: u, id: t, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: I }), j = d(`${i}-${s}-input`, `${i}-input`, `${i}-input--${w}`, {
+    value: w,
+    warn: x,
+    warnText: N,
+    ...d
+  }, I) => {
+    const n = y({ disabled: u, id: a, invalid: $, invalidText: c, readOnly: e, type: s, warn: x, warnText: N }), j = t(`${i}-${s}-input`, `${i}-input`, `${i}-input--${v}`, {
       [`${i}-input--inline`]: m,
-      [`${i}-input--readonly`]: p,
+      [`${i}-input--readonly`]: e,
       [`${i}-input--disabled`]: n.disabled,
       [`${i}-input--invalid`]: n.invalid,
       [`${i}-input--warn`]: n.warn,
-      [`${a}__wrapper`]: a,
-      [`${i}-input--hidden`]: e.hidden
+      [`${p}__wrapper`]: p,
+      [`${i}-input--hidden`]: d.hidden
     });
     return /* @__PURE__ */ P("div", { className: j, children: [
-      /* @__PURE__ */ l("label", { htmlFor: t, className: d(`${i}-input__label`, { [`${i}-input__label--hidden`]: o }), children: _ }),
+      /* @__PURE__ */ l("label", { htmlFor: a, className: t(`${i}-input__label`, { [`${i}-input__label--hidden`]: o }), children: _ }),
       /* @__PURE__ */ l(
         "input",
         {
-          className: d(`${i}-input__input`, { className: a }),
-          "data-testid": t,
+          className: t(`${i}-input__input`, { className: p }),
+          "data-testid": a,
           defaultValue: r,
           disabled: n.disabled,
-          id: t,
-          name: e.name,
+          id: a,
+          name: d.name,
           onChange: b,
           onClick: f,
           placeholder: h,
-          readOnly: p,
-          ref: N,
+          readOnly: e,
+          ref: I,
           type: n.type,
-          value: x,
-          ...e
+          value: w,
+          ...d
         }
       ),
-      n.validation
+      n.validation ? n.validation : /* @__PURE__ */ l("p", { className: t(`${i}-input__validation`), children: " " })
     ] });
   }
 );

package/dist/components/Search/Search.d.ts

@@ -1,7 +1,48 @@
 import * as React from 'react';
-export interface SearchProps extends React.HTMLAttributes<HTMLElement> {
-    altText?: string;
+import { type SearchResultsProps } from './SearchResults/SearchResults';
+export interface SearchProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true will show an icon instead of text in the button
+     */
     useIcon?: boolean;
+    /**
+     *
+     * @param searchQuery called when the search input changes
+     * @returns void
+     */
+    onSearch?: (searchQuery: string) => void;
+    /**
+     * The search results to display
+     */
+    searchResults?: SearchResultsProps['autoCompleteResults'];
+    /**
+     * additional state information
+     */
+    state?: 'loading' | 'invalid' | 'idle';
+    /**
+     * allows override of the default placeholder (i.e. for internationalization)
+     */
+    placeholder?: string;
+    /**
+     * allows override of the search button label (i.e. for internationalization)
+     */
+    searchButtonText?: string;
+    /**
+     * allows override of the default loading text (i.e. for internationalization)
+     */
+    loadingText?: string;
+    /**
+     * allows override of the default allResults text (i.e. for internationalization)
+     */
+    getAllResultsText?: (searchQuery: string) => string;
+    /**
+     * allows override of the default allResults link in case this component should not launch not the default all results landing point
+     */
+    getAllResultsLink?: (searchQuery: string) => string;
+    /**
+     * allows override of the default invalid text (i.e. for internationalization)
+     */
+    invalidText?: string;
 }
-declare const Search: ({ altText, useIcon }: React.PropsWithChildren<SearchProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Search: ({ useIcon, onSearch, searchResults, state, defaultValue, className, placeholder, searchButtonText, loadingText, invalidText, getAllResultsText, getAllResultsLink, ...props }: React.PropsWithChildren<SearchProps>) => import("react/jsx-runtime").JSX.Element;
 export default Search;

package/dist/components/Search/Search.js

@@ -1,49 +1,119 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import * as n from "react";
-import { px as a } from "../../utils/index.js";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import * as v from "react";
+import { getCommonProps as L, encodeURLSearchParams as k } from "../../utils/index.js";
 import o from "../../node_modules/classnames/index.js";
-import p from "../Input/Input.js";
-import i from "../../assets/search.svg.js";
-const v = ({ altText: h = "Search", useIcon: r = !0 }) => {
-  const [t, l] = n.useState(!1), s = () => {
-    l(!t);
+import E from "../Input/Input.js";
+import $ from "../../assets/search.svg.js";
+import P from "../Link/Link.js";
+import j from "./SearchResults/SearchResults.js";
+const V = ({
+  useIcon: i = !0,
+  onSearch: d,
+  searchResults: b = [],
+  state: m = "idle",
+  defaultValue: N = "",
+  className: S,
+  placeholder: y = "Type to search",
+  searchButtonText: n = "Search",
+  loadingText: g = "Loading...",
+  invalidText: w = "Invalid search",
+  getAllResultsText: R = (e) => `View all results for ${e}`,
+  getAllResultsLink: C = (e) => `/Search?Search=${e}`,
+  ...u
+}) => {
+  var _;
+  const { className: e, "data-testid": t, ...x } = L(u, "Search"), [s, p] = v.useState(!1), c = v.useRef(null), l = (_ = c.current) == null ? void 0 : _.value, h = () => {
+    var r;
+    p(!s), s || (r = c.current) == null || r.focus();
   };
-  return /* @__PURE__ */ c("div", { "data-testid": "header-search", className: `${a}-search`, role: "search", children: [
-    /* @__PURE__ */ e(
-      "div",
-      {
-        "data-testid": "search-overlay",
-        className: o(`${a}-search__overlay`, { [`${a}-search__overlay--active`]: t }),
-        onClick: s
-      }
-    ),
-    /* @__PURE__ */ e("button", { "data-testid": "search-button", className: `${a}-search__button`, onClick: s, children: r ? /* @__PURE__ */ e(i, { "data-testid": "search-button-icon", className: `${a}-search__button__icon` }) : "Search" }),
-    /* @__PURE__ */ c(
-      "form",
-      {
-        "data-testid": "search-form",
-        className: o(
-          `${a}-search__input-wrapper`,
-          { [`${a}-search__input-wrapper--active`]: t },
-          { [`${a}-search__input-wrapper--use-icon`]: r }
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ...x,
+      className: o(e, S),
+      "data-testid": t,
+      role: "search",
+      ...u,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "data-testid": `${t}-overlay`,
+            className: o(`${e}__overlay`, { [`${e}__overlay--active`]: s }),
+            onClick: h
+          }
         ),
-        children: [
-          r ? /* @__PURE__ */ e(i, { "data-testid": "search-form-icon", className: `${a}-search__input-wrapper__icon` }) : null,
-          /* @__PURE__ */ e(
-            p,
-            {
-              className: `${a}-search__input`,
-              alt: h,
-              hideLabel: !0,
-              placeholder: "Type to search",
-              type: "text"
-            }
-          )
-        ]
-      }
-    )
-  ] });
+        /* @__PURE__ */ a(
+          "button",
+          {
+            "data-testid": `${t}-button`,
+            "aria-label": n,
+            className: `${e}__button`,
+            onClick: h,
+            children: i ? /* @__PURE__ */ a($, { "data-testid": `${t}-button-icon`, className: `${e}__button__icon` }) : n
+          }
+        ),
+        /* @__PURE__ */ a(
+          "form",
+          {
+            "data-testid": `${t}-form`,
+            className: o(`${e}__form`, { [`${e}__form--active`]: s }),
+            "aria-hidden": !s,
+            children: /* @__PURE__ */ f(
+              "div",
+              {
+                className: o(`${e}__input-wrapper`, {
+                  [`${e}__input-wrapper--use-icon`]: i
+                }),
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                children: [
+                  i ? /* @__PURE__ */ a($, { "data-testid": `${t}-form-icon`, className: `${e}__input-wrapper__icon` }) : null,
+                  /* @__PURE__ */ a(
+                    E,
+                    {
+                      className: `${e}__input`,
+                      id: "search-input",
+                      hideLabel: !0,
+                      labelText: n,
+                      placeholder: y,
+                      type: "text",
+                      defaultValue: N,
+                      invalid: m === "invalid",
+                      invalidText: w,
+                      onKeyDown: (r) => {
+                        r.key === "Escape" && p(!1);
+                      },
+                      onChange: d ? (r) => {
+                        d(r.target.value);
+                      } : void 0,
+                      ref: c
+                    }
+                  ),
+                  l && l.length > 2 ? /* @__PURE__ */ a(
+                    j,
+                    {
+                      autoCompleteResults: b,
+                      isLoading: m === "loading",
+                      loadingText: g,
+                      children: /* @__PURE__ */ a("li", { className: `${e}__result`, children: /* @__PURE__ */ a(
+                        P,
+                        {
+                          href: ((r) => k(C(r)))(l),
+                          children: /* @__PURE__ */ a("p", { children: R(l) })
+                        }
+                      ) }, "viewAllSearchResults")
+                    }
+                  ) : null
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 export {
-  v as default
+  V as default
 };

package/dist/components/Search/SearchResults/SearchResults.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface SearchResultsProps extends React.HTMLAttributes<HTMLElement> {
+    autoCompleteResults?: {
+        id: string;
+        url: string;
+        label: string;
+    }[];
+    isLoading?: boolean;
+    children?: React.ReactNode;
+    loadingText?: string;
+}
+declare const SearchResults: ({ autoCompleteResults, isLoading, children, loadingText, }: React.PropsWithChildren<SearchResultsProps>) => import("react/jsx-runtime").JSX.Element;
+export default SearchResults;

package/dist/components/Search/SearchResults/SearchResults.js

@@ -0,0 +1,16 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { px as e } from "../../../utils/index.js";
+import n from "../../Link/Link.js";
+const _ = ({
+  autoCompleteResults: s = [],
+  isLoading: l,
+  children: i,
+  loadingText: c = "Loading..."
+}) => /* @__PURE__ */ h("ul", { "data-testid": "search-results", className: `${e}-search__results`, children: [
+  l ? /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: c }) : null,
+  Array.isArray(s) && s.length > 0 && s.map((a) => /* @__PURE__ */ r("li", { className: `${e}-search__result`, children: /* @__PURE__ */ r(n, { href: a.url, children: /* @__PURE__ */ r("p", { children: a.label }) }) }, a.id)),
+  i
+] });
+export {
+  _ as default
+};

package/dist/components/Social/Social.js

@@ -1,22 +1,23 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import i from "../../node_modules/classnames/index.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import l from "../../node_modules/classnames/index.js";
 import { getCommonProps as u } from "../../utils/index.js";
 import N from "../Button/Button.js";
-const f = ({
-  className: r,
+import { ButtonVariants as d } from "../Button/types.js";
+const v = ({
+  className: e,
   children: t,
-  titleText: m = "Never Miss A Moment",
-  buttonText: a = "Subscribe To Our Newsletter",
-  onSubscribeClick: c,
-  ...o
+  titleText: a = "Never Miss A Moment",
+  buttonText: m = "Subscribe To Our Newsletter",
+  onSubscribeClick: i,
+  ...s
 }) => {
-  const { className: s, ...l } = u(o, "Social");
-  return /* @__PURE__ */ n("div", { ...l, className: i(s, r), ...o, children: [
-    /* @__PURE__ */ e("h3", { className: `${s}__header`, children: m }),
-    /* @__PURE__ */ e(N, { onClick: c, buttonType: "ghost", className: `${s}__button`, children: a }),
+  const { className: o, ...n } = u(s, "Social");
+  return /* @__PURE__ */ c("div", { ...n, className: l(o, e), ...s, children: [
+    /* @__PURE__ */ r("h3", { className: `${o}__header`, children: a }),
+    /* @__PURE__ */ r(N, { onClick: i, variant: d.ghost, className: `${o}__button`, children: m }),
     t
   ] });
 };
 export {
-  f as default
+  v as default
 };

package/dist/components/Subscribe/Subscribe.d.ts

@@ -45,6 +45,10 @@ export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
      * Subscribe success text
      */
     successText?: string;
+    /**
+     * Subscribe privacy text
+     */
+    privacyText?: string;
     /**
      * Subscribe state for loading or error
      */
@@ -59,5 +63,5 @@ export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-subscribe--overview)
  */
-declare const Subscribe: ({ blurb, buttonText, buttonProps, className, element: Element, inputLabelText, inputPlaceholder, title, loadingText, invalidText, errorText, successText, subscriptionState, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Subscribe: ({ blurb, buttonText, buttonProps, className, element: Element, inputLabelText, inputPlaceholder, title, loadingText, invalidText, errorText, successText, privacyText, subscriptionState, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
 export default Subscribe;