@phillips/seldon 1.19.0 → 1.19.2

package/dist/components/ErrorBoundary/ErrorBoundary.js

@@ -3,7 +3,8 @@ var i = (t, r, o) => r in t ? n(t, r, { enumerable: !0, configurable: !0, writab
 var e = (t, r, o) => (i(t, typeof r != "symbol" ? r + "" : r, o), o);
 import { jsx as c } from "react/jsx-runtime";
 import * as l from "react";
-class p extends l.Component {
+import { nullishCoalescing as p } from "../../utils/index.js";
+class h extends l.Component {
   constructor() {
     super(...arguments);
     e(this, "state", {
@@ -15,15 +16,15 @@ class p extends l.Component {
   }
   componentDidCatch(o, s) {
     var a;
-    (a = this.props) == null || a.logger(o, s.componentStack ?? "ErrorBoundary caught an error");
+    (a = this.props) == null || a.logger(o, p(s.componentStack, "ErrorBoundary caught an error"));
   }
   render() {
     return this.state.hasError ? this.props.fallback || /* @__PURE__ */ c("h2", { children: "Sorry... An error occurred and we are looking into it" }) : this.props.children;
   }
 }
-e(p, "defaultProps", {
+e(h, "defaultProps", {
   logger: console.log
 });
 export {
-  p as default
+  h as default
 };

package/dist/components/Link/Link.d.ts

@@ -1,14 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare const LinkVariants: {
-    /** Default variant, used */
-    readonly standalone: "standalone";
-    /** link rendering emailto: */
-    readonly email: "email";
-    /** these links are being rendered in a list */
-    readonly list: "list";
-    /** link is being rendered within body copy */
-    readonly inline: "inline";
-};
+import { LinkVariants } from './utils';
 export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
     /**
      * Describes where the link is used. It controls the styling of the link so we apply consistent styles. Defaults to `standalone`.  See the documentation [here](https://www.figma.com/file/xMuOXOAKVt5HC7hgYjF3ot/Components-v2.0?type=design&node-id=5731-12815) to see where each variant is used.
@@ -16,7 +7,7 @@ export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
      * @default standalone
      * @see LinkVariants
      */
-    variant?: keyof typeof LinkVariants;
+    variant?: LinkVariants;
     /**
      * The text of the link
      */

package/dist/components/Link/Link.js

@@ -1,40 +1,30 @@
-import { jsx as c } from "react/jsx-runtime";
-import k from "../../node_modules/classnames/index.js";
+import { jsx as k } from "react/jsx-runtime";
+import c from "../../node_modules/classnames/index.js";
 import { px as p } from "../../utils/index.js";
-import { getLinkVariantClassName as d, isLinkExternal as f } from "./utils.js";
-const x = {
-  /** Default variant, used */
-  standalone: "standalone",
-  /** link rendering emailto: */
-  email: "email",
-  /** these links are being rendered in a list */
-  list: "list",
-  /** link is being rendered within body copy */
-  inline: "inline"
-}, V = ({
+import { getLinkVariantClassName as f, isLinkExternal as x, LinkVariants as d } from "./utils.js";
+const V = ({
   children: s,
   id: a,
-  className: e,
-  element: n = "a",
-  variant: i = x.standalone,
-  href: t,
-  ...l
+  className: r,
+  element: t = "a",
+  variant: e = d.standalone,
+  href: n,
+  ...o
 }) => {
-  const r = k(`${p}-link`, d(i), e), o = a ? `link-${a}` : "link", m = f(t);
-  return /* @__PURE__ */ c(
-    n,
+  const i = c(`${p}-link`, f(e), r), l = a ? `link-${a}` : "link", m = x(n);
+  return /* @__PURE__ */ k(
+    t,
     {
-      ...l,
-      href: t,
-      "data-testid": o,
+      ...o,
+      href: n,
+      "data-testid": l,
       id: a,
-      className: r,
-      ...m && n === "a" ? { rel: "noopener noreferrer", target: "_blank" } : {},
+      className: i,
+      ...m && t === "a" ? { rel: "noopener noreferrer", target: "_blank" } : {},
       children: s
     }
   );
 };
 export {
-  x as LinkVariants,
   V as default
 };

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

@@ -1,3 +1,12 @@
-import { LinkVariants } from './Link';
 export declare const getLinkVariantClassName: (variant: keyof typeof LinkVariants) => string;
 export declare const isLinkExternal: (href: string) => boolean;
+export declare enum LinkVariants {
+    /** Default variant, used */
+    standalone = "standalone",
+    /** link rendering emailto: */
+    email = "email",
+    /** these links are being rendered in a list */
+    list = "list",
+    /** link is being rendered within body copy */
+    inline = "inline"
+}

package/dist/components/Link/utils.js

@@ -1,8 +1,10 @@
-import { px as a } from "../../utils/index.js";
-const n = (t) => `${a}-link--${t}`, s = (t) => !!t.match(
+import { px as t } from "../../utils/index.js";
+const n = (l) => `${t}-link--${l}`, a = (l) => !!l.match(
   /(http[s]?:\/\/)(?!.*phillips\.com)([a-zA-Z0-9\-.]+)(:[0-9]{1,4})?([a-zA-Z0-9/\-._~:?#[\]@!$&'()*+,;=]*)/g
 );
+var e = /* @__PURE__ */ ((l) => (l.standalone = "standalone", l.email = "email", l.list = "list", l.inline = "inline", l))(e || {});
 export {
+  e as LinkVariants,
   n as getLinkVariantClassName,
-  s as isLinkExternal
+  a as isLinkExternal
 };

package/dist/components/LinkBlock/LinkBlock.js

@@ -1,14 +1,15 @@
 import { jsxs as r, jsx as o } from "react/jsx-runtime";
 import k from "../../node_modules/classnames/index.js";
-import { px as d } from "../../utils/index.js";
-import p, { LinkVariants as f } from "../Link/Link.js";
-const $ = ({ linkProps: t, description: e, className: i, id: s, ...l }) => {
-  const a = `${d}-link-block`, c = k(a, i), m = t.element ?? p, n = s ? `link-block-${s}` : "link-block";
+import { nullishCoalescing as d, px as p } from "../../utils/index.js";
+import f from "../Link/Link.js";
+import { LinkVariants as b } from "../Link/utils.js";
+const u = ({ linkProps: t, description: i, className: e, id: s, ...l }) => {
+  const a = `${p}-link-block`, c = k(a, e), m = d(t.element, f), n = s ? `link-block-${s}` : "link-block";
   return /* @__PURE__ */ r("div", { ...l, className: c, id: s, "data-testid": n, children: [
-    /* @__PURE__ */ o(m, { ...t, "data-testid": `${n}-link`, variant: f.list }),
-    /* @__PURE__ */ o("p", { className: `${a}__description`, children: e })
+    /* @__PURE__ */ o(m, { ...t, "data-testid": `${n}-link`, variant: b.list }),
+    /* @__PURE__ */ o("p", { className: `${a}__description`, children: i })
   ] });
 };
 export {
-  $ as default
+  u as default
 };

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as Header, type HeaderProps } from './components/Header/Header'
 export { default as HeroBanner, type HeroBannerProps } from './components/HeroBanner/HeroBanner';
 export { default as Input, type InputProps } from './components/Input/Input';
 export { default as Link, type LinkProps } from './components/Link/Link';
+export { LinkVariants } from './components/Link/utils';
 export { default as LinkBlock, type LinkBlockProps } from './components/LinkBlock/LinkBlock';
 export { default as LinkList, type LinkListProps } from './components/LinkList/LinkList';
 export { default as Select, type SelectProps } from './components/Select/Select';

package/dist/index.js

@@ -1,36 +1,38 @@
 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 { default as s } from "./components/Footer/Footer.js";
 import { Grid as u } from "./components/Grid/Grid.js";
-import { default as p } from "./components/Header/Header.js";
+import { default as d } from "./components/Header/Header.js";
 import { default as x } from "./components/HeroBanner/HeroBanner.js";
 import { default as n } from "./components/Input/Input.js";
-import { default as S } from "./components/Link/Link.js";
-import { default as k } from "./components/LinkBlock/LinkBlock.js";
-import { default as g } from "./components/LinkList/LinkList.js";
-import { default as w } from "./components/Select/Select.js";
-import { default as P } from "./components/SplitPanel/SplitPanel.js";
-import { default as y } from "./components/Subscribe/Subscribe.js";
-import { default as F } from "./components/Social/Social.js";
-import { default as I } from "./components/ViewingsList/ViewingsList.js";
-import { default as j } from "./components/ViewingsList/StatefulViewingsList.js";
-import { default as v } from "./pages/Page.js";
+import { default as k } from "./components/Link/Link.js";
+import { LinkVariants as c } from "./components/Link/utils.js";
+import { default as g } from "./components/LinkBlock/LinkBlock.js";
+import { default as b } from "./components/LinkList/LinkList.js";
+import { default as H } from "./components/Select/Select.js";
+import { default as y } from "./components/SplitPanel/SplitPanel.js";
+import { default as F } from "./components/Subscribe/Subscribe.js";
+import { default as I } from "./components/Social/Social.js";
+import { default as j } from "./components/ViewingsList/ViewingsList.js";
+import { default as v } from "./components/ViewingsList/StatefulViewingsList.js";
+import { default as A } from "./pages/Page.js";
 export {
   t as Button,
   a as ErrorBoundary,
-  l as Footer,
+  s as Footer,
   u as Grid,
-  p as Header,
+  d as Header,
   x as HeroBanner,
   n as Input,
-  S as Link,
-  k as LinkBlock,
-  g as LinkList,
-  v as Page,
-  w as Select,
-  F as Social,
-  P as SplitPanel,
-  j as StatefulViewingsList,
-  y as Subscribe,
-  I as ViewingsList
+  k as Link,
+  g as LinkBlock,
+  b as LinkList,
+  c as LinkVariants,
+  A as Page,
+  H as Select,
+  I as Social,
+  y as SplitPanel,
+  v as StatefulViewingsList,
+  F as Subscribe,
+  j as ViewingsList
 };

package/dist/scss/_typography.scss

@@ -25,7 +25,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   margin: 0;
   -webkit-overflow-scrolling: touch;
-  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
 /** Fonts **/

package/dist/scss/_utils.scss

@@ -79,25 +79,50 @@
   }
 }
 
-@mixin media($breakpoint) {
+@mixin media($breakpoint, $type: 'min') {
   @if $breakpoint == $breakpoint-sm {
     // $breakpoint2: 961px;
-    @media (min-width: $breakpoint2) {
-      @content;
+    @if $type == 'min' {
+      @media (min-width: $breakpoint2) {
+        @content;
+      }
+    }
+
+    @if $type == 'max' {
+      @media (max-width: $breakpoint2) {
+        @content;
+      }
     }
   }
 
   @if $breakpoint == $breakpoint-md {
     // $breakpoint3: 1401px;
-    @media (min-width: $breakpoint3) {
-      @content;
+
+    @if $type == 'min' {
+      @media (min-width: $breakpoint3) {
+        @content;
+      }
+    }
+
+    @if type == 'max' {
+      @media (max-width: $breakpoint3) {
+        @content;
+      }
     }
   }
 
   @if $breakpoint == $breakpoint-lg {
     // $breakpoint4: 1801px;
-    @media (min-width: $breakpoint4) {
-      @content;
+    @if type == 'min' {
+      @media (min-width: $breakpoint4) {
+        @content;
+      }
+    }
+
+    @if type == 'max' {
+      @media (max-width: $breakpoint4) {
+        @content;
+      }
     }
   }
 }

package/dist/scss/_vars.scss

@@ -22,7 +22,7 @@ $off-white: #f4f2f1;
 
 // Notification color palette
 $error-red: #f00;
-$error-pink: rgb(255 229 229 / 90%);
+$error-pink: rgba(255, 229, 229, 90%);
 $warn-yellow: #d6d141;
 $post-sale-pink: #ff0086;
 $cta-blue: #4a90e2;
@@ -104,7 +104,7 @@ $body3: 'body3';
   --label-size2: 1rem;
   --label-size3: 0.75rem;
 
-  @media (width <= 960px) {
+  @media (max-width: 960px) {
     --heading-size0: 2.59rem;
     --heading-size1: 1.83rem;
     --heading-size2: 1.46rem;
@@ -118,7 +118,7 @@ $body3: 'body3';
     --label-size3: 0.56rem;
   }
 
-  @media (width >= 1801px) {
+  @media (min-width: 1801px) {
     --heading-size0: 4.06rem;
     --heading-size1: 3.05rem;
     --heading-size2: 2.44rem;
@@ -170,7 +170,7 @@ $text-badge-label-size: var(--label-size3);
   --spacing-large: 3rem;
   --spacing-xl: 6rem;
 
-  @media (width <= 960px) {
+  @media (max-width: 960px) {
     --spacing-micro: 0.19rem;
     --spacing-xsm: 0.38rem;
     --spacing-small: 0.75rem;
@@ -179,7 +179,7 @@ $text-badge-label-size: var(--label-size3);
     --spacing-xl: 4.8rem;
   }
 
-  @media (width >= 1801px) {
+  @media (min-width: 1801px) {
     --spacing-micro: 0.31rem;
     --spacing-xsm: 0.63rem;
     --spacing-small: 1.25rem;

package/dist/scss/components/Grid/_grid.scss

@@ -9,11 +9,11 @@
   &__container--has-margins {
     margin: 0 $spacing-medium;
 
-    @media (width >= 1401px) {
+    @media (min-width: 1401px) {
       margin: 0 $spacing-large;
     }
 
-    @media (width >= 1801px) {
+    @media (min-width: 1801px) {
       margin: 0 $spacing-xl;
     }
   }

package/dist/scss/components/Header/_header.scss

@@ -1,6 +1,6 @@
 .storybook-header {
   align-items: center;
-  border-bottom: 1px solid rgb(0 0 0 / 10%);
+  border-bottom: 1px solid rgba(0, 0, 0, 10%);
   display: flex;
   font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   justify-content: space-between;

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

@@ -13,7 +13,7 @@
   padding: 1rem;
   width: 100%;
 
-  @media (width <= 28.8125rem) {
+  @media (max-width: 28.8125rem) {
     align-items: center;
     align-self: stretch;
     background: $pure-black;
@@ -70,11 +70,11 @@
     font-size: 0.75rem;
     gap: 1.875rem;
 
-    @media (width >= 28.8125rem) {
+    @media (min-width: 28.8125rem) {
       font-size: 0.875rem;
     }
 
-    @media (width <= 28.8125rem) {
+    @media (max-width: 28.8125rem) {
       align-items: center;
       flex-direction: column;
       gap: 1rem;
@@ -90,7 +90,7 @@
     margin: 1.875rem 0;
     text-align: center;
 
-    @media (width >= 28.8125rem) {
+    @media (min-width: 28.8125rem) {
       font-size: 2.375rem;
     }
 

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

@@ -97,7 +97,7 @@ $lg: #{$px}-input--lg;
     }
 
     .#{$px}-input__input {
-      background-color: rgb(239 239 239 / 30%);
+      background-color: rgba(239, 239, 239, 30%);
     }
   }
 

package/dist/scss/components/LinkList/_linkList.scss

@@ -2,10 +2,11 @@
 
 .#{$px}-link-list {
   &--item {
-    grid-column: span 4;
+    // mobile first
+    grid-column: span 2;
 
-    @include media($breakpoint-lg) {
-      grid-column: span 2;
+    @include media($breakpoint-sm) {
+      grid-column: span 4;
     }
   }
 }

package/dist/scss/components/Toggle/_toggle.scss

@@ -30,7 +30,7 @@ $lg: #{$px}-input--lg;
     }
 
     &::before {
-      background-color: rgb(0 0 0 / 40%);
+      background-color: rgba(0, 0, 0, 40%);
       border-radius: 1rem;
       height: 1rem;
       left: 0;

package/dist/utils/index.d.ts

@@ -65,4 +65,9 @@ interface NormalizedProps {
  */
 export declare function useNormalizedInputProps({ disabled, id, invalid, invalidText, readOnly, type, warn, warnText, }: InputProps): NormalizedProps;
 export declare const defaultYear: number;
+/**
+ * Nullish coalescing operator '??' polyfill
+ * To be removed once sass upgrade branch is merged in phillips-public
+ */
+export declare const nullishCoalescing: (a: any, b: any) => any;
 export {};

package/dist/utils/index.js

@@ -1,29 +1,30 @@
-import { jsx as d } from "react/jsx-runtime";
-const n = "phillips";
+import { jsx as t } from "react/jsx-runtime";
+const o = "phillips";
 function c({
-  disabled: l = !1,
-  id: o,
-  invalid: t = !1,
-  invalidText: e = "invalid",
+  disabled: i = !1,
+  id: a,
+  invalid: s = !1,
+  invalidText: d = "invalid",
   readOnly: r = !1,
-  type: a,
-  warn: s = !1,
-  warnText: v
+  type: l,
+  warn: e = !1,
+  warnText: u
 }) {
-  const i = {
-    disabled: !r && l,
-    invalid: !r && !l && t,
-    invalidId: `${o}-error-msg`,
-    type: a === "toggle" ? "checkbox" : a,
-    warn: !r && !l && !t && s,
-    warnId: `${o}-warn-msg`,
+  const n = {
+    disabled: !r && i,
+    invalid: !r && !i && s,
+    invalidId: `${a}-error-msg`,
+    type: l === "toggle" ? "checkbox" : l,
+    warn: !r && !i && !s && e,
+    warnId: `${a}-warn-msg`,
     validation: null
   };
-  return i.invalid && (i.validation = /* @__PURE__ */ d("div", { className: `${n}-input__validation ${n}-${a}-input--invalid`, id: i.invalidId, children: e })), i.warn && (i.validation = /* @__PURE__ */ d("div", { className: `${n}-input__validation ${n}-${a}-input--warn`, id: i.warnId, children: v })), i;
+  return n.invalid && (n.validation = /* @__PURE__ */ t("div", { className: `${o}-input__validation ${o}-${l}-input--invalid`, id: n.invalidId, children: d })), n.warn && (n.validation = /* @__PURE__ */ t("div", { className: `${o}-input__validation ${o}-${l}-input--warn`, id: n.warnId, children: u })), n;
 }
-const p = (/* @__PURE__ */ new Date()).getFullYear();
+const p = (/* @__PURE__ */ new Date()).getFullYear(), f = (i, a) => i ?? a;
 export {
   p as defaultYear,
-  n as px,
+  f as nullishCoalescing,
+  o as px,
   c as useNormalizedInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -49,45 +49,46 @@
     "@semantic-release/github": "^10.0.3",
     "@storybook/addon-essentials": "^7.6.18",
     "@storybook/addon-interactions": "^7.0.22",
-    "@storybook/addon-links": "^7.6.18",
+    "@storybook/addon-links": "^7.6.19",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.0.22",
     "@storybook/react": "^7.0.22",
-    "@storybook/react-vite": "^7.6.18",
+    "@storybook/react-vite": "^7.6.19",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/color": "^3.0.6",
-    "@types/jest": "^29.5.3",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "color": "^4.2.3",
-    "eslint": "^8.38.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
-    "jest": "^29.6.1",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.6.1",
-    "prettier": "3.0.3",
-    "react-docgen-typescript": "^2.2.2",
+    "prettier": "3.2.5",
     "react": "^18.3.1",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.75.0",
-    "semantic-release": "^21.0.5",
-    "storybook": "^7.6.18",
+    "sass": "^1.77.0",
+    "semantic-release": "^23.0.8",
+    "storybook": "^7.6.19",
     "stylelint": "^16.4.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.2.1",
     "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
     "typescript": "^5.0.2",
     "vite": "^4.5.3",
     "vite-plugin-dts": "^2.3.0",