@phillips/seldon 1.35.0 → 1.37.0

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/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;

package/dist/components/Subscribe/Subscribe.js

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

package/dist/scss/components/Footer/_footer.scss

@@ -8,6 +8,50 @@
   margin: $spacing-lg 0 0;
   width: 100%;
 
+  &-desktop {
+    display: none;
+
+    div {
+      flex: 1;
+      max-width: 18rem;
+      padding: 1rem;
+
+      h4 {
+        color: $pure-black;
+        font-family: $Distinct;
+        font-size: 1rem;
+        font-weight: 600;
+        letter-spacing: 0.0625rem;
+        margin-bottom: 0;
+        padding-bottom: 0.5rem;
+      }
+
+      ul {
+        li {
+          a {
+            font-size: 0.875rem;
+            font-weight: 500;
+            line-height: 1.875rem;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include media($size-sm) {
+    &-desktop {
+      display: flex;
+    }
+
+    &-mobile {
+      display: none;
+    }
+  }
+
   .#{$px}-accordion {
     border-bottom: 1px solid #eae8e4;
     border-top: 1px solid #eae8e4;
@@ -56,7 +100,6 @@
     .#{$px}-accordion {
       border-bottom: 0;
       border-top: 0;
-      display: flex;
       width: 100%;
 
       &-item {

package/dist/scss/components/Input/_input.scss

@@ -15,11 +15,10 @@ $lg: #{$px}-input--lg;
   }
 
   &__label {
-    color: $keyline-gray;
-    font-size: 0.8125rem;
+    color: $pure-black;
+    font-size: 0.75rem;
     font-weight: 600;
     margin-bottom: 0.5rem;
-    text-transform: uppercase;
     word-break: break-word;
 
     &--hidden {
@@ -105,6 +104,10 @@ $lg: #{$px}-input--lg;
   &--invalid {
     color: $error-red;
 
+    label {
+      color: $error-red;
+    }
+
     .#{$px}-input__input,
     .#{$px}-input__input::placeholder,
     .#{$px}-input__validation {
@@ -127,7 +130,6 @@ $lg: #{$px}-input--lg;
   .#{$px}-input__validation {
     animation: reveal 0.45s linear forwards;
     padding-bottom: 0.5rem;
-    padding-left: 2rem;
   }
 }
 

package/dist/scss/components/Social/_social.scss

@@ -47,6 +47,7 @@
     font-family: $Distinct;
     font-size: 1rem;
     font-weight: 600;
+    letter-spacing: 0.0625rem;
     margin-bottom: 0.75rem;
   }
 

package/dist/scss/components/Subscribe/_subscribe.scss

@@ -4,27 +4,19 @@
 @import '../../typography';
 
 .#{$px}-subscribe {
-  max-width: 30rem;
+  max-width: 600px;
   width: 100%;
 
   &__title {
     @include text($heading3);
 
     margin-bottom: $spacing-xsm;
-    text-align: center;
   }
 
   &__blurb {
     @include text($body2);
 
-    text-align: center;
-  }
-
-  @include media($size-sm) {
-    &__title,
-    &__blurb {
-      text-align: left;
-    }
+    color: $pure-black;
   }
 
   &__input__wrapper {
@@ -32,6 +24,23 @@
   }
 
   &__button {
-    margin: $spacing-md 0 $spacing-md;
+    margin: $spacing-sm 0 $spacing-md;
+    width: 100%;
+
+    @include media($size-sm) {
+      width: 240px;
+    }
+  }
+
+  &__privacy {
+    @include text($body3);
+
+    color: $pure-black;
+    font-size: 0.75rem;
+    margin-top: $spacing-sm;
+
+    @include media($size-sm) {
+      margin-top: $spacing-xl;
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.35.0",
+  "version": "1.37.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -76,6 +76,7 @@
     "@vitest/coverage-v8": "^1.6.0",
     "color": "^4.2.3",
     "eslint": "^8.57.0",
+    "eslint-plugin-local-rules": "^3.0.2",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.9",