@phillips/seldon 1.33.0 → 1.35.0

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.d.ts

@@ -1,8 +1,17 @@
+import { MouseEventHandler } from 'react';
 export interface SocialProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Title text for the social section
      */
     titleText?: string;
+    /**
+     * Text for the subscribe button
+     */
+    buttonText?: string;
+    /**
+     * Function for when the subscribe button is clicked
+     */
+    onSubscribeClick?: MouseEventHandler<HTMLButtonElement>;
 }
 /**
  * ## Overview
@@ -13,5 +22,5 @@ export interface SocialProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-social--overview)
  */
-declare const Social: ({ className, children, titleText, ...props }: SocialProps) => import("react/jsx-runtime").JSX.Element;
+declare const Social: ({ className, children, titleText, buttonText, onSubscribeClick, ...props }: SocialProps) => import("react/jsx-runtime").JSX.Element;
 export default Social;

package/dist/components/Social/Social.js

@@ -1,13 +1,23 @@
-import { jsxs as r, jsx as c } from "react/jsx-runtime";
-import i from "../../node_modules/classnames/index.js";
-import { getCommonProps as n } from "../../utils/index.js";
-const h = ({ className: a, children: m, titleText: e = "Follow on Social", ...o }) => {
-  const { className: s, ...l } = n(o, "Social");
-  return /* @__PURE__ */ r("div", { ...l, className: i(s, a), ...o, children: [
-    /* @__PURE__ */ c("h3", { className: `${s}__header`, children: e }),
-    m
+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";
+import { ButtonVariants as d } from "../Button/types.js";
+const v = ({
+  className: e,
+  children: t,
+  titleText: a = "Never Miss A Moment",
+  buttonText: m = "Subscribe To Our Newsletter",
+  onSubscribeClick: i,
+  ...s
+}) => {
+  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 {
-  h as default
+  v as default
 };

package/dist/components/Subscribe/Subscribe.js

@@ -1,14 +1,15 @@
-import { jsxs as C, jsx as s } from "react/jsx-runtime";
-import E from "../../node_modules/classnames/index.js";
-import { getCommonProps as I } from "../../utils/index.js";
-import L from "../Input/Input.js";
-import P from "../Button/Button.js";
-import { SubscriptionState as o } from "./types.js";
-const U = ({
-  blurb: a,
-  buttonText: i = "Sign Up",
+import { jsxs as E, jsx as a } from "react/jsx-runtime";
+import I from "../../node_modules/classnames/index.js";
+import { getCommonProps as L } from "../../utils/index.js";
+import P from "../Input/Input.js";
+import S from "../Button/Button.js";
+import { SubscriptionState as r } from "./types.js";
+import { ButtonVariants as T } from "../Button/types.js";
+const k = ({
+  blurb: n,
+  buttonText: l = "Sign Up",
   buttonProps: m,
-  className: n,
+  className: s,
   element: c = "form",
   inputLabelText: d = "Email*",
   inputPlaceholder: u = "example@email.com",
@@ -16,37 +17,46 @@ const U = ({
   loadingText: f = "Loading...",
   invalidText: x = "",
   errorText: _ = "An error occurred. Please try again.",
-  successText: b,
-  subscriptionState: e = o.Default,
+  successText: g,
+  subscriptionState: e = r.Default,
   ...t
 }) => {
-  const { className: r, ...g } = I(t, "Subscribe"), N = e === o.Invalid, h = e === o.Loading, v = e === o.Success, y = e === o.Error, $ = {
+  const { className: o, ...N } = L(t, "Subscribe"), b = e === r.Invalid, h = e === r.Loading, v = e === r.Success, $ = e === r.Error, y = {
     invalid: x,
-    success: b,
+    success: g,
     loading: f,
     error: _
-  }, l = e !== o.Default ? $[e] : "", T = v || h, w = N || y;
-  return /* @__PURE__ */ C(c, { ...g, className: E(r, n), noValidate: !0, ...t, children: [
-    /* @__PURE__ */ s("h3", { className: `${r}__title`, children: p }),
-    a ? /* @__PURE__ */ s("p", { className: `${r}__blurb`, children: a }) : null,
-    /* @__PURE__ */ s(
-      L,
+  }, i = e !== r.Default ? y[e] : "", w = v || h, C = b || $;
+  return /* @__PURE__ */ E(c, { ...N, className: I(o, s), noValidate: !0, ...t, children: [
+    /* @__PURE__ */ a("h3", { className: `${o}__title`, children: p }),
+    n ? /* @__PURE__ */ a("p", { className: `${o}__blurb`, children: n }) : null,
+    /* @__PURE__ */ a(
+      P,
       {
-        className: `${r}__input`,
+        className: `${o}__input`,
         type: "email",
         name: "email",
         placeholder: u,
         labelText: d,
-        invalid: w,
-        invalidText: l,
-        warn: T,
-        warnText: l,
+        invalid: C,
+        invalidText: i,
+        warn: w,
+        warnText: i,
         required: !0
       }
     ),
-    /* @__PURE__ */ s(P, { className: `${r}__button ${n}`, buttonType: "secondary", type: "submit", ...m, children: i })
+    /* @__PURE__ */ a(
+      S,
+      {
+        className: `${o}__button ${s}`,
+        variant: T.secondary,
+        type: "submit",
+        ...m,
+        children: l
+      }
+    )
   ] });
 };
 export {
-  U as default
+  k as default
 };