@phillips/seldon 1.132.0 → 1.133.0

package/dist/patterns/BidSnapshot/BidMessage.js

@@ -1,25 +1,23 @@
-import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import p from "../../node_modules/classnames/index.js";
 import { getCommonProps as f } from "../../utils/index.js";
-import { TextVariants as d } from "../../components/Text/types.js";
+import { TextVariants as h } from "../../components/Text/types.js";
 import g from "../../components/Text/Text.js";
-import { BidMessageVariants as e } from "./types.js";
-import "react";
-import v from "../../assets/icon-green-circle.svg.js";
-import x from "../../assets/icon-red-circle.svg.js";
-const S = ({
-  className: t,
-  hasIcon: i = !0,
-  message: m,
-  variant: a = e.positive,
-  ...r
+import { BidMessageVariants as i } from "./types.js";
+import t from "../../components/Icon/Icon.js";
+const M = ({
+  className: r,
+  hasIcon: m = !0,
+  message: a,
+  variant: n = i.positive,
+  ...o
 }) => {
-  const { className: s, ...n } = f(r, "BidMessage"), c = a === e.positive ? /* @__PURE__ */ o(v, {}) : /* @__PURE__ */ o(x, {});
-  return /* @__PURE__ */ l("div", { ...n, className: p(s, t), ...r, children: [
-    i ? c : null,
-    /* @__PURE__ */ o(g, { variant: d.string2, className: `${s}-text`, children: m })
+  const { className: s, ...c } = f(o, "BidMessage"), l = n === i.positive ? /* @__PURE__ */ e(t, { icon: "IconGreenCircle", height: 8, width: 8 }) : /* @__PURE__ */ e(t, { icon: "IconRedCircle", height: 8, width: 8 });
+  return /* @__PURE__ */ d("div", { ...c, className: p(s, r), ...o, children: [
+    m ? l : null,
+    /* @__PURE__ */ e(g, { variant: h.string2, className: `${s}-text`, children: a })
   ] });
 };
 export {
-  S as default
+  M as default
 };

package/dist/patterns/Subscribe/Subscribe.d.ts

@@ -17,6 +17,10 @@ export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
      * Optional element to render in place of a form e.g. Remix Form, etc
      */
     element?: React.ElementType<SubscribeProps>;
+    /**
+     * A unique `id` for the `<Subscribe>`
+     */
+    id: string;
     /**
      * Subscribe input label
      */
@@ -63,5 +67,5 @@ export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-subscribe--overview)
  */
-declare const Subscribe: ({ autoFocus, blurb, buttonText, buttonProps, className, element: Element, inputLabelText, inputPlaceholder, title, loadingText, invalidText, errorText, successText, privacyText, subscriptionState, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Subscribe: ({ autoFocus, blurb, buttonText, buttonProps, className, element: Element, inputLabelText, inputPlaceholder, title, loadingText, invalidText, errorText, successText, privacyText, subscriptionState, id, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
 export default Subscribe;

package/dist/patterns/Subscribe/Subscribe.js

@@ -1,66 +1,68 @@
-import { jsxs as C, jsx as n } from "react/jsx-runtime";
-import I from "../../node_modules/classnames/index.js";
-import { getCommonProps as L } from "../../utils/index.js";
-import S from "../../components/Input/Input.js";
-import T from "../../components/Button/Button.js";
+import { jsxs as I, jsx as n } from "react/jsx-runtime";
+import L from "../../node_modules/classnames/index.js";
+import { getCommonProps as S } from "../../utils/index.js";
+import T from "../../components/Input/Input.js";
+import j from "../../components/Button/Button.js";
 import { SubscriptionState as o } from "./types.js";
-import { ButtonVariants as j } from "../../components/Button/types.js";
-const k = ({
-  autoFocus: m = !0,
-  blurb: a,
-  buttonText: c = "Sign Up",
+import { ButtonVariants as w } from "../../components/Button/types.js";
+const z = ({
+  autoFocus: c = !0,
+  blurb: s,
+  buttonText: u = "Sign Up",
   buttonProps: d,
-  className: s,
-  element: u = "form",
-  inputLabelText: p = "Enter Your Email Address To Sign Up*",
-  inputPlaceholder: f = "example@email.com",
-  title: g = "Never Miss A Moment",
-  loadingText: _ = "Loading...",
-  invalidText: h = "",
-  errorText: v = "An error occurred. Please try again.",
-  successText: x,
-  privacyText: i = "By signing up, you agree to receive email communications from Phillips.",
+  className: i,
+  element: p = "form",
+  inputLabelText: f = "Enter Your Email Address To Sign Up*",
+  inputPlaceholder: g = "example@email.com",
+  title: _ = "Never Miss A Moment",
+  loadingText: h = "Loading...",
+  invalidText: v = "",
+  errorText: x = "An error occurred. Please try again.",
+  successText: N,
+  privacyText: t = "By signing up, you agree to receive email communications from Phillips.",
   subscriptionState: e = o.Default,
-  ...t
+  id: a,
+  ...l
 }) => {
-  const { className: r, ...N } = L(t, "Subscribe"), y = e === o.Invalid, $ = e === o.Loading, b = e === o.Success, E = e === o.Error, P = {
-    invalid: h,
-    success: x,
-    loading: _,
-    error: v
-  }, l = e !== o.Default ? P[e] : "", A = b || $, B = y || E;
-  return /* @__PURE__ */ C(u, { ...N, className: I(r, s), noValidate: !0, ...t, children: [
-    /* @__PURE__ */ n("h3", { className: `${r}__title`, children: g }),
-    a ? /* @__PURE__ */ n("p", { className: `${r}__blurb`, children: a }) : null,
+  const { className: r, ...$ } = S({ id: a, ...l }, "Subscribe"), y = e === o.Invalid, b = e === o.Loading, E = e === o.Success, P = e === o.Error, A = {
+    invalid: v,
+    success: N,
+    loading: h,
+    error: x
+  }, m = e !== o.Default ? A[e] : "", B = E || b, C = y || P;
+  return /* @__PURE__ */ I(p, { id: a, ...$, className: L(r, i), noValidate: !0, ...l, children: [
+    /* @__PURE__ */ n("h3", { className: `${r}__title`, children: _ }),
+    s ? /* @__PURE__ */ n("p", { className: `${r}__blurb`, children: s }) : null,
     /* @__PURE__ */ n(
-      S,
+      T,
       {
-        autoFocus: m,
+        autoFocus: c,
         className: `${r}__input`,
         type: "email",
         name: "email",
-        placeholder: f,
-        labelText: p,
-        invalid: B,
-        invalidText: l,
-        warn: A,
-        warnText: l,
-        required: !0
+        placeholder: g,
+        labelText: f,
+        invalid: C,
+        invalidText: m,
+        warn: B,
+        warnText: m,
+        required: !0,
+        id: `${a}-input`
       }
     ),
     /* @__PURE__ */ n(
-      T,
+      j,
       {
-        className: `${r}__button ${s}`,
-        variant: j.secondary,
+        className: `${r}__button ${i}`,
+        variant: w.secondary,
         type: "submit",
         ...d,
-        children: c
+        children: u
       }
     ),
-    i ? /* @__PURE__ */ n("p", { className: `${r}__privacy`, children: i }) : null
+    t ? /* @__PURE__ */ n("p", { className: `${r}__privacy`, children: t }) : null
   ] });
 };
 export {
-  k as default
+  z as default
 };

package/dist/patterns/Subscribe/Subscribe.stories.d.ts

@@ -2,7 +2,7 @@ import { SubscribeProps } from './Subscribe';
 import { SubscriptionState } from './types';
 declare const meta: {
     title: string;
-    component: ({ autoFocus, blurb, buttonText, buttonProps, className, element: Element, inputLabelText, inputPlaceholder, title, loadingText, invalidText, errorText, successText, privacyText, subscriptionState, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ autoFocus, blurb, buttonText, buttonProps, className, element: Element, inputLabelText, inputPlaceholder, title, loadingText, invalidText, errorText, successText, privacyText, subscriptionState, id, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default meta;
 export declare const Playground: {

package/dist/patterns/UserManagement/UserManagement.js

@@ -1,30 +1,46 @@
-import { jsx as o, Fragment as x, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as C } from "react";
-import { getCommonProps as v, noOp as A } from "../../utils/index.js";
-import s from "../../assets/account_circle.svg.js";
+import { jsx as o, Fragment as L, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { getCommonProps as A, noOp as w } from "../../utils/index.js";
 import $ from "../../node_modules/classnames/index.js";
-import { AuthState as a } from "./types.js";
+import { AuthState as e } from "./types.js";
 import { TextVariants as m } from "../../components/Text/types.js";
 import i from "../../components/Text/Text.js";
-const b = C(
+import s from "../../components/Icon/Icon.js";
+const b = x(
   ({
     accountDetailsLinkComponent: l = "a",
-    className: g,
-    onLogin: d = A,
-    authState: e = a.LoggedOut,
-    loginLabel: f = "Login",
-    accountLabel: p = "Account",
-    href: u = "/account",
-    disabled: t = !1,
+    className: d,
+    onLogin: g = w,
+    authState: t = e.LoggedOut,
+    loginLabel: h = "Login",
+    accountLabel: u = "Account",
+    href: f = "/account",
+    disabled: a = !1,
     ...c
-  }, h) => {
-    const { className: n, ...N } = v(c, "UserManagement"), _ = e === a.LoggedIn, L = e !== a.Loading;
-    return /* @__PURE__ */ o("div", { ...N, className: $(n, g), ...c, ref: h, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ r(l, { className: `${n}__login`, href: u, disabled: t, children: [
-      /* @__PURE__ */ o(s, { className: `${n}__account-icon` }),
-      /* @__PURE__ */ o(i, { variant: m.body3, children: p })
-    ] }) : /* @__PURE__ */ r("button", { className: `${n}__login`, onClick: d, disabled: t, children: [
-      /* @__PURE__ */ o(s, { className: `${n}__account-icon` }),
-      /* @__PURE__ */ o(i, { variant: m.body3, children: f })
+  }, p) => {
+    const { className: n, ...N } = A(c, "UserManagement"), _ = t === e.LoggedIn, C = t !== e.Loading;
+    return /* @__PURE__ */ o("div", { ...N, className: $(n, d), ...c, ref: p, children: C && /* @__PURE__ */ o(L, { children: _ ? /* @__PURE__ */ r(l, { className: `${n}__login`, href: f, disabled: a, children: [
+      /* @__PURE__ */ o(
+        s,
+        {
+          icon: "AccountCircle",
+          className: `${n}__account-icon`,
+          height: "1.5rem",
+          width: "1.5rem"
+        }
+      ),
+      /* @__PURE__ */ o(i, { variant: m.body3, children: u })
+    ] }) : /* @__PURE__ */ r("button", { className: `${n}__login`, onClick: g, disabled: a, children: [
+      /* @__PURE__ */ o(
+        s,
+        {
+          icon: "AccountCircle",
+          className: `${n}__account-icon`,
+          height: "1.5rem",
+          width: "1.5rem"
+        }
+      ),
+      /* @__PURE__ */ o(i, { variant: m.body3, children: h })
     ] }) }) });
   }
 );

package/dist/scss/_vars.scss

@@ -103,10 +103,9 @@ $snwHeaderLink: 'snwHeaderLink';
 $snwFlyoutLink: 'snwFlyoutLink';
 $snwHeadingHero1: 'snwHeadingHero1';
 $snwHeadingHero2: 'snwHeadingHero2';
-$text-tokens:
-  $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5, $title1,
-  $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink, $snwHeaderLink,
-  $snwHeadingHero1, $snwHeadingHero2;
+$text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
+  $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
+  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts