@phillips/seldon 1.20.0 → 1.22.0

package/dist/components/Footer/Footer.d.ts

@@ -1,5 +1,4 @@
 export interface FooterProps extends React.HTMLAttributes<HTMLElement> {
-    chidlren?: React.ReactNode;
     /**
      * Copyright data added to bottom of site
      */

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

@@ -1,4 +1,5 @@
 import { ButtonProps } from '../Button/Button';
+import { SubscriptionState } from './types';
 export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
     /**
      * Subscribe blurb
@@ -28,6 +29,22 @@ export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
      * Subscribe title text
      */
     title?: string;
+    /**
+     * Subscribe loading text
+     */
+    loadingText?: string;
+    /**
+     * Subscribe error text
+     */
+    invalidText?: string;
+    /**
+     * Subscribe success text
+     */
+    successText?: string;
+    /**
+     * Subscribe state for loading or error
+     */
+    subscriptionState?: SubscriptionState;
 }
 /**
  * ## Overview
@@ -36,5 +53,5 @@ export interface SubscribeProps extends React.HTMLAttributes<HTMLFormElement> {
  *
  * [Figma Link](https://www.figma.com/file/npS5ECbNut8hevUkGWSzUN/Site-Furniture-(Navigation)---SP24?node-id=4347%3A4194&mode=dev)
  */
-declare const Subscribe: ({ blurb, buttonText, buttonProps, className, element: Element, id, inputLabelText, inputPlaceholder, title, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Subscribe: ({ blurb, buttonText, buttonProps, className, element: Element, id, inputLabelText, inputPlaceholder, title, loadingText, invalidText, successText, subscriptionState, ...props }: SubscribeProps) => import("react/jsx-runtime").JSX.Element;
 export default Subscribe;

package/dist/components/Subscribe/Subscribe.js

@@ -1,42 +1,61 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import p from "../../node_modules/classnames/index.js";
-import { px as e } from "../../utils/index.js";
-import f from "../Input/Input.js";
-import _ from "../Button/Button.js";
-const y = ({
-  blurb: t,
-  buttonText: i = "Sign Up",
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import y from "../../node_modules/classnames/index.js";
+import { px as s } from "../../utils/index.js";
+import v from "../Input/Input.js";
+import w from "../Button/Button.js";
+import { SubscriptionState as j } from "./types.js";
+const D = ({
+  blurb: o,
+  buttonText: a = "Sign Up",
   buttonProps: l,
-  className: m,
-  element: a = "form",
-  id: r,
-  inputLabelText: c = "Email*",
-  inputPlaceholder: o = "example@email.com",
-  title: b = "Subscribe to Newsletter",
-  ...u
-}) => /* @__PURE__ */ n(
-  a,
-  {
-    "data-testid": r || "subscribe-form",
-    id: r,
-    className: p(`${e}-subscribe`, m),
-    ...u,
-    children: [
-      /* @__PURE__ */ s("h3", { className: `${e}-subscribe__title`, children: b }),
-      t ? /* @__PURE__ */ s("p", { className: `${e}-subscribe__blurb`, children: t }) : null,
-      /* @__PURE__ */ s(
-        f,
-        {
-          className: `${e}-subscribe__input`,
-          type: "email",
-          placeholder: o,
-          labelText: c
-        }
-      ),
-      /* @__PURE__ */ s(_, { className: `${e}-subscribe__button ${m}`, buttonType: "secondary", type: "submit", ...l, children: i })
-    ]
-  }
-);
+  className: r,
+  element: c = "form",
+  id: i,
+  inputLabelText: m = "Email*",
+  inputPlaceholder: u = "example@email.com",
+  title: d = "Subscribe to Newsletter",
+  loadingText: b = "Loading...",
+  invalidText: n = "",
+  successText: p,
+  subscriptionState: e = j.Default,
+  ...f
+}) => {
+  const x = e === "invalid", _ = e === "loading", h = e === "success", $ = e !== "default" ? {
+    invalid: n,
+    success: p,
+    loading: b
+  }[e] : "", g = h || _;
+  return /* @__PURE__ */ N(
+    c,
+    {
+      "data-testid": i || "subscribe-form",
+      id: i,
+      className: y(`${s}-subscribe`, r),
+      noValidate: !0,
+      ...f,
+      children: [
+        /* @__PURE__ */ t("h3", { className: `${s}-subscribe__title`, children: d }),
+        o ? /* @__PURE__ */ t("p", { className: `${s}-subscribe__blurb`, children: o }) : null,
+        /* @__PURE__ */ t(
+          v,
+          {
+            className: `${s}-subscribe__input`,
+            type: "email",
+            name: "email",
+            placeholder: u,
+            labelText: m,
+            invalid: x,
+            invalidText: n,
+            warn: g,
+            warnText: $,
+            required: !0
+          }
+        ),
+        /* @__PURE__ */ t(w, { className: `${s}-subscribe__button ${r}`, buttonType: "secondary", type: "submit", ...l, children: a })
+      ]
+    }
+  );
+};
 export {
-  y as default
+  D as default
 };

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

@@ -0,0 +1,6 @@
+export declare enum SubscriptionState {
+    Default = "default",
+    Loading = "loading",
+    Invalid = "invalid",
+    Success = "success"
+}

package/dist/components/Subscribe/types.js

@@ -0,0 +1,4 @@
+var l = /* @__PURE__ */ ((d) => (d.Default = "default", d.Loading = "loading", d.Invalid = "invalid", d.Success = "success", d))(l || {});
+export {
+  l as SubscriptionState
+};

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextVariants } from './types';
+export interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Optional element to render as the top-level component e.g. 'div', 'span', CustomComponent, etc.  Defaults to the appropriate HTML based on the variant.
+     */
+    element?: React.ElementType;
+    /**
+     * The OOTB style to apply to the text
+     */
+    variant?: TextVariants;
+}
+/**
+ * ## Overview
+ *
+ * All text rendered in the UI can be wrapped in this component to enforce consistent styling and semantic HTML.
+ *
+ * [Figma Link](https://www.figma.com/design/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?node-id=6344-139&t=BUiWETQbkkWoDZ5V-4)
+ */
+declare const Text: ({ children, id, element: CustomElement, variant, className, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export default Text;

package/dist/components/Text/Text.js

@@ -0,0 +1,28 @@
+import { jsx as l } from "react/jsx-runtime";
+import { px as p } from "../../utils/index.js";
+import f from "../../node_modules/classnames/index.js";
+import { TextVariants as c } from "./types.js";
+import { determineDefaultTextElement as d, determineTextClassName as i } from "./utils.js";
+const $ = ({
+  children: m,
+  id: t,
+  element: s,
+  variant: e = c.body2,
+  className: o,
+  ...a
+}) => {
+  const r = t ? `text-${t}` : "text", n = `${p}-text`, x = s || d(e);
+  return /* @__PURE__ */ l(
+    x,
+    {
+      ...a,
+      "data-testid": r,
+      id: t,
+      className: f(n, i(e), o),
+      children: m
+    }
+  );
+};
+export {
+  $ as default
+};

package/dist/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { TextVariants } from './types';
+export { default as Text, type TextProps } from './Text';

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

@@ -0,0 +1,20 @@
+export declare enum TextVariants {
+    display0 = "display0",
+    display1 = "display1",
+    display2 = "display2",
+    display3 = "display3",
+    display4 = "display4",
+    heading1 = "heading1",
+    heading2 = "heading2",
+    heading3 = "heading3",
+    heading4 = "heading4",
+    body1 = "body1",
+    body2 = "body2",
+    body3 = "body3",
+    button = "button",
+    ctaLg = "ctaLg",
+    ctaSm = "ctaSm",
+    email = "email",
+    label = "label",
+    textBadge = "textBadge"
+}

package/dist/components/Text/types.js

@@ -0,0 +1,4 @@
+var l = /* @__PURE__ */ ((d) => (d.display0 = "display0", d.display1 = "display1", d.display2 = "display2", d.display3 = "display3", d.display4 = "display4", d.heading1 = "heading1", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.button = "button", d.ctaLg = "ctaLg", d.ctaSm = "ctaSm", d.email = "email", d.label = "label", d.textBadge = "textBadge", d))(l || {});
+export {
+  l as TextVariants
+};

package/dist/components/Text/utils.d.ts

@@ -0,0 +1,3 @@
+import { TextVariants } from './types';
+export declare const determineTextClassName: (variant?: TextVariants) => string;
+export declare const determineDefaultTextElement: (variant?: TextVariants) => string;

package/dist/components/Text/utils.js

@@ -0,0 +1,10 @@
+import { px as a } from "../../utils/index.js";
+import { TextVariants as r } from "./types.js";
+const c = (e = r.body1) => {
+  const t = e.replace("labelText", "label-text").replace("textBadge", "text-badge").replace("ctaSm", "cta-sm").replace("ctaLg", "cta-lg");
+  return `${a}-text--${t.charAt(0).toLowerCase() + t.slice(1)}`;
+}, s = (e = r.body1) => e.includes("body") ? "p" : e === r.label ? "label" : e.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
+export {
+  s as determineDefaultTextElement,
+  c as determineTextClassName
+};

package/dist/index.d.ts

@@ -18,4 +18,6 @@ export { default as Subscribe, type SubscribeProps } from './components/Subscrib
 export { default as Social, type SocialProps } from './components/Social/Social';
 export { default as ViewingsList, type ViewingsListProps } from './components/ViewingsList/ViewingsList';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './components/ViewingsList/StatefulViewingsList';
+export * from './components/Text';
+export { PaddingTokens } from './utils';
 export { default as Page } from './pages/Page';

package/dist/index.js

@@ -1,44 +1,50 @@
 import { default as t } from "./components/Button/Button.js";
 import { default as a } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as l } from "./components/Footer/Footer.js";
-import { Grid as d } from "./components/Grid/Grid.js";
+import { default as s } from "./components/Footer/Footer.js";
+import { Grid as l } from "./components/Grid/Grid.js";
 import { default as p } from "./components/Header/Header.js";
-import { default as x } from "./components/HeroBanner/HeroBanner.js";
+import { default as u } from "./components/HeroBanner/HeroBanner.js";
 import { default as n } from "./components/Input/Input.js";
 import { default as k } from "./components/Link/Link.js";
-import { LinkVariants as c } from "./components/Link/utils.js";
+import { LinkVariants as S } from "./components/Link/utils.js";
 import { default as B } from "./components/LinkBlock/LinkBlock.js";
-import { default as G } from "./components/LinkList/LinkList.js";
-import { default as V } from "./components/Row/Row.js";
-import { default as H } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as y } from "./components/GridItem/types.js";
-import { default as E } from "./components/Select/Select.js";
-import { default as R } from "./components/SplitPanel/SplitPanel.js";
-import { default as j } from "./components/Subscribe/Subscribe.js";
-import { default as v } from "./components/Social/Social.js";
-import { default as C } from "./components/ViewingsList/ViewingsList.js";
-import { default as J } from "./components/ViewingsList/StatefulViewingsList.js";
-import { default as M } from "./pages/Page.js";
+import { default as w } from "./components/LinkList/LinkList.js";
+import { default as I } from "./components/Row/Row.js";
+import { default as T } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as H } from "./components/GridItem/types.js";
+import { default as A } from "./components/Select/Select.js";
+import { default as F } from "./components/SplitPanel/SplitPanel.js";
+import { default as h } from "./components/Subscribe/Subscribe.js";
+import { default as q } from "./components/Social/Social.js";
+import { default as z } from "./components/ViewingsList/ViewingsList.js";
+import { default as D } from "./components/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as K } from "./components/Text/types.js";
+import { default as N } from "./components/Text/Text.js";
+import { PaddingTokens as Q } from "./utils/index.js";
+import { default as W } from "./pages/Page.js";
 export {
   t as Button,
   a as ErrorBoundary,
-  l as Footer,
-  d as Grid,
-  H as GridItem,
-  y as GridItemAlign,
+  s as Footer,
+  l as Grid,
+  T as GridItem,
+  H as GridItemAlign,
   p as Header,
-  x as HeroBanner,
+  u as HeroBanner,
   n as Input,
   k as Link,
   B as LinkBlock,
-  G as LinkList,
-  c as LinkVariants,
-  M as Page,
-  V as Row,
-  E as Select,
-  v as Social,
-  R as SplitPanel,
-  J as StatefulViewingsList,
-  j as Subscribe,
-  C as ViewingsList
+  w as LinkList,
+  S as LinkVariants,
+  Q as PaddingTokens,
+  W as Page,
+  I as Row,
+  A as Select,
+  q as Social,
+  F as SplitPanel,
+  D as StatefulViewingsList,
+  h as Subscribe,
+  N as Text,
+  K as TextVariants,
+  z as ViewingsList
 };

package/dist/scss/_type.scss

@@ -56,7 +56,7 @@
     text-transform: lowercase;
   }
 
-  @if $label == 'text' {
+  @if $label == 'label' {
     font-size: $text-label-size;
     font-weight: 500;
     letter-spacing: 0.0625rem;
@@ -90,8 +90,8 @@
     @include labelText($email);
   }
 
-  @if $token == 'text' {
-    @include labelText($text);
+  @if $token == 'label' {
+    @include labelText($label);
   }
 
   @if $token == 'text-badge' {

package/dist/scss/_vars.scss

@@ -72,7 +72,7 @@ $button: 'button';
 $cta-sm: 'cta-sm';
 $cta-lg: 'cta-lg';
 $email: 'email';
-$text: 'text';
+$label: 'label';
 $text-badge: 'text-badge';
 $display0: 'display0';
 $display1: 'display1';
@@ -86,6 +86,8 @@ $heading4: 'heading4';
 $body1: 'body1';
 $body2: 'body2';
 $body3: 'body3';
+$text-tokens: $button, $cta-sm, $cta-lg, $email, $label, $text-badge, $display0, $display1, $display2, $display3,
+  $display4, $heading1, $heading2, $heading3, $heading4, $body1, $body2, $body3;
 
 ////////////////////////
 /// FONT SIZE TOKENS:

package/dist/scss/components/GridItem/_gridItem.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../../_utils';
 
 @mixin gridItemColumnSpan($span: 1, $total-cols: 12) {
@@ -9,7 +10,8 @@
   }
 
   &-align-center {
-    grid-column: calc((#{$total-cols} + 1 - #{$span}) / 2) / span #{$span};
+    grid-column: math.ceil(math.div($total-cols + 1 - $span, 2)) / span #{$span};
+    text-align: center;
   }
 }
 
@@ -20,14 +22,14 @@
 
   @for $i from 1 through 2 {
     &--span-xs-#{$i} {
-      @include gridItemColumnSpan(#{$i}, 2);
+      @include gridItemColumnSpan($i, 2);
     }
   }
 
   @include media($breakpoint-sm) {
     @for $i from 1 through 4 {
       &--span-sm-#{$i} {
-        @include gridItemColumnSpan(#{$i}, 4);
+        @include gridItemColumnSpan($i, 4);
       }
     }
   }
@@ -35,7 +37,7 @@
   @include media($breakpoint-md) {
     @for $i from 1 through 12 {
       &--span-md-#{$i} {
-        @include gridItemColumnSpan(#{$i}, 12);
+        @include gridItemColumnSpan($i, 12);
       }
     }
   }
@@ -43,7 +45,7 @@
   @include media($breakpoint-lg) {
     @for $i from 1 through 12 {
       &--span-lg-#{$i} {
-        @include gridItemColumnSpan(#{$i}, 12);
+        @include gridItemColumnSpan($i, 12);
       }
     }
   }

package/dist/scss/components/HeroBanner/_heroBanner.scss

@@ -9,6 +9,7 @@
   display: flex;
   flex-flow: column;
   justify-content: center;
+  margin-bottom: $spacing-lg;
   min-height: 25rem;
   padding: 1rem;
   width: 100%;

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

@@ -26,12 +26,11 @@
     }
   }
 
-  &__blurb,
-  .#{$px}-input__input {
-    margin-bottom: $spacing-md;
+  &__input__wrapper {
+    margin-top: $spacing-md;
   }
 
   &__button {
-    margin: 0 0 $spacing-md;
+    margin: $spacing-md 0 $spacing-md;
   }
 }

package/dist/scss/components/Text/_text.scss

@@ -0,0 +1,27 @@
+@import '../../_vars';
+
+.#{$px}-text {
+  @each $variant in $text-tokens {
+    &--#{$variant} {
+      @include text($variant);
+    }
+  }
+}
+
+h1.#{$px}-text,
+blockquote.#{$px}-text {
+  margin-bottom: $spacing-xl;
+}
+
+h2.#{$px}-text {
+  margin-bottom: $spacing-lg;
+}
+h3.#{$px}-text {
+  margin-bottom: $spacing-md;
+}
+h4.#{$px}-text {
+  margin-bottom: $spacing-sm;
+}
+p.#{$px}-text {
+  margin-bottom: $spacing-md;
+}

package/dist/scss/styles.scss

@@ -26,6 +26,7 @@
 @import 'components/Link/link';
 @import 'components/LinkBlock/linkBlock';
 @import 'components/LinkList/linkList';
+@import 'components/Text/text';
 
 // 📑 Pages
 @import 'pages/page';

package/dist/utils/index.d.ts

@@ -73,4 +73,13 @@ interface NormalizedProps {
 export declare function useNormalizedInputProps({ disabled, id, invalid, invalidText, readOnly, type, warn, warnText, }: InputProps): NormalizedProps;
 export declare const defaultYear: number;
 export declare const generatePaddingClassName: (padding: PaddingTokens, side?: 'start' | 'end', direction?: 'vertical' | 'horizontal') => string;
+/**
+ * Return true if the email is valid, false otherwise.
+ *
+ * true: some@some.com
+ *
+ * false: some@some, some@.com, some@some.
+
+ */
+export declare const emailValidation: (email: string) => boolean;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -33,7 +33,7 @@
     "clean": "rimraf './dist'",
     "clean:stories": "rimraf './storybook-static'",
     "format": "prettier . --write",
-    "lint": "tsc && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && npm run lint:styles",
+    "lint": "tsc --noEmit && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && npm run lint:styles",
     "lint:styles": "stylelint \"src/**/*.scss\" --fix",
     "prepare": "husky install"
   },
@@ -42,28 +42,30 @@
     "flatpickr": "^4.6.13"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.5.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@figma/code-connect": "^0.1.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^10.0.3",
-    "@storybook/addon-essentials": "^7.6.18",
-    "@storybook/addon-interactions": "^7.6.19",
-    "@storybook/addon-links": "^7.6.19",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.6.19",
-    "@storybook/react": "^7.0.22",
-    "@storybook/react-vite": "^7.6.19",
+    "@semantic-release/github": "^10.0.5",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/addon-mdx-gfm": "^8.1.4",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/react": "^8.1.4",
+    "@storybook/react-vite": "^8.1.4",
+    "@storybook/theming": "^8.1.4",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/color": "^3.0.6",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.0",
     "@vitest/coverage-v8": "^1.6.0",
     "color": "^4.2.3",
     "eslint": "^8.57.0",
@@ -75,20 +77,20 @@
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.7",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.77.0",
+    "sass": "^1.77.2",
     "semantic-release": "^23.1.1",
-    "storybook": "^7.6.19",
-    "stylelint": "^16.4.0",
+    "storybook": "^8.1.4",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.3.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",