@phillips/seldon 1.17.5 → 1.19.0

package/dist/scss/_typography.scss

@@ -1,5 +1,8 @@
 @import './vars';
 
+// Design wants this replaced in the future with a local version of Montserrat
+@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,600;0,700;1,400&display=swap';
+
 html,
 body {
   font-family:

package/dist/scss/_utils.scss

@@ -1,3 +1,5 @@
+@import './vars';
+
 @mixin hidden {
   block-size: 1px;
   border: 0;
@@ -37,10 +39,26 @@
   width: 2rem;
 }
 
-@mixin grid($columns: 2) {
+@mixin gridMargins {
+  margin: 0 $spacing-medium;
+
+  @media (min-width: $breakpoint3) {
+    margin: 0 $spacing-large;
+  }
+
+  @media (min-width: $breakpoint4) {
+    margin: 0 $spacing-xl;
+  }
+}
+
+@mixin grid($columns: 2, $margins-on: true) {
   display: grid;
   gap: $spacing-medium;
   grid-template-columns: repeat($columns, 1fr);
+
+  @if $margins-on {
+    @include gridMargins;
+  }
 }
 
 @mixin gridContainer($margins-on: true) {
@@ -48,25 +66,38 @@
   gap: $spacing-medium;
   grid-template-columns: repeat(2, 1fr);
 
-  @if $margins-on {
-    margin: 0 $spacing-medium;
-  }
-
   @media (min-width: $breakpoint2) {
     grid-template-columns: repeat(4, 1fr);
   }
 
   @media (min-width: $breakpoint3) {
     grid-template-columns: repeat(12, 1fr);
+  }
+
+  @if $margins-on {
+    @include gridMargins;
+  }
+}
 
-    @if $margins-on {
-      margin: 0 $spacing-large;
+@mixin media($breakpoint) {
+  @if $breakpoint == $breakpoint-sm {
+    // $breakpoint2: 961px;
+    @media (min-width: $breakpoint2) {
+      @content;
     }
   }
 
-  @media (min-width: $breakpoint4) {
-    @if $margins-on {
-      margin: 0 $spacing-xl;
+  @if $breakpoint == $breakpoint-md {
+    // $breakpoint3: 1401px;
+    @media (min-width: $breakpoint3) {
+      @content;
+    }
+  }
+
+  @if $breakpoint == $breakpoint-lg {
+    // $breakpoint4: 1801px;
+    @media (min-width: $breakpoint4) {
+      @content;
     }
   }
 }

package/dist/scss/_vars.scss

@@ -118,7 +118,7 @@ $body3: 'body3';
     --label-size3: 0.56rem;
   }
 
-  @media (width >= 1800px) {
+  @media (width >= 1801px) {
     --heading-size0: 4.06rem;
     --heading-size1: 3.05rem;
     --heading-size2: 2.44rem;
@@ -179,7 +179,7 @@ $text-badge-label-size: var(--label-size3);
     --spacing-xl: 4.8rem;
   }
 
-  @media (width >= 1800px) {
+  @media (width >= 1801px) {
     --spacing-micro: 0.31rem;
     --spacing-xsm: 0.63rem;
     --spacing-small: 1.25rem;
@@ -219,3 +219,16 @@ $margin-xl: var(--spacing-xl);
 $breakpoint2: 961px;
 $breakpoint3: 1401px;
 $breakpoint4: 1801px;
+
+////////////////////////
+/// max-site-width TOKEN:
+///////////////////////
+$max-site-width: 1560px;
+
+////////////////////////////
+/// Media breakpoint tokens:
+///////////////////////////
+
+$breakpoint-sm: 'sm';
+$breakpoint-md: 'md';
+$breakpoint-lg: 'lg';

package/dist/scss/components/Button/_button.scss

@@ -1,5 +1,6 @@
 @import '../../vars';
-@import '../../_utils';
+@import '../../typography';
+@import '../../utils';
 
 .#{$px}-button {
   @include bodyText;
@@ -12,8 +13,8 @@
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
-  min-width: 9rem;
-  padding: 0.5em 1.75em;
+  min-width: 3rem;
+  padding: 0.5em $spacing-medium;
   transition:
     color 0.25s,
     background-color 0.25s,

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

@@ -0,0 +1,96 @@
+@import '../../vars';
+@import '../../utils';
+@import '../../type';
+@import '../../typography';
+
+.#{$px}-footer {
+  background-color: $off-white;
+  border-top: 1px solid $keyline-gray;
+  width: 100%;
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  &__navigation {
+    background-color: $white;
+    padding: $spacing-medium $spacing-medium $spacing-small;
+    text-align: right;
+
+    @include media($breakpoint-md) {
+      padding: $spacing-medium $spacing-large $spacing-small;
+    }
+
+    @include media($breakpoint-lg) {
+      padding: $spacing-medium $spacing-xl $spacing-small;
+    }
+
+    ul {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: $spacing-medium;
+      justify-content: center;
+      list-style: none;
+      padding: 0;
+    }
+
+    a,
+    button {
+      @include text('cta-sm');
+      @include bodyText;
+
+      cursor: pointer;
+    }
+  }
+
+  &__content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: $spacing-large $spacing-medium 0;
+
+    @include media($breakpoint-sm) {
+      align-items: flex-start;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    @include media($breakpoint-md) {
+      padding: 3.75rem $spacing-large;
+    }
+
+    @include media($breakpoint-lg) {
+      padding: 3.75rem $spacing-xl;
+    }
+  }
+
+  &__content-split-panel__left {
+    margin-bottom: $spacing-medium;
+
+    @include media($breakpoint-sm) {
+      margin-bottom: 0;
+    }
+  }
+
+  &__content-split-panel__right {
+    display: flex;
+
+    @include media($breakpoint-sm) {
+      justify-content: flex-end;
+    }
+  }
+
+  &__copyright {
+    @include text($body3);
+
+    align-items: center;
+    background-color: $white;
+    display: flex;
+
+    // font-size: 0.875rem;
+    // height: 2.125rem;
+    justify-content: center;
+    padding: $spacing-xsm 0;
+  }
+}

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

@@ -1,5 +1,5 @@
 @import '../../vars';
-@import '../../_utils';
+@import '../../utils';
 
 .#{$px}-grid {
   &__container {

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

@@ -1,5 +1,5 @@
 @import '../../vars';
-@import '../../_utils';
+@import '../../utils';
 
 $md: #{$px}-input--md;
 $lg: #{$px}-input--lg;

package/dist/scss/components/Link/_link.scss

@@ -0,0 +1,34 @@
+@import '../../type';
+
+.#{$px}-link {
+  @include text($cta-sm);
+
+  color: $cta-blue;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover:not(&--list),
+  &:focus:not(&--list) {
+    @include underline;
+  }
+
+  &:hover,
+  &:focus {
+    color: $cta-blue;
+    outline: unset;
+  }
+
+  &--inline {
+    font-size: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+  }
+
+  &--list {
+    color: $soft-black;
+  }
+
+  &--email {
+    @include text($email);
+  }
+}

package/dist/scss/components/LinkBlock/_linkBlock.scss

@@ -0,0 +1,14 @@
+@import '../../type';
+@import '../../vars';
+
+.#{$px}-link-block {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xsm;
+  text-align: center;
+
+  &__description {
+    @include text($body2);
+  }
+}

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

@@ -0,0 +1,11 @@
+@import '../../_utils';
+
+.#{$px}-link-list {
+  &--item {
+    grid-column: span 4;
+
+    @include media($breakpoint-lg) {
+      grid-column: span 2;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+@import '../../vars';
+@import '../../utils';
+@import '../../type';
+
+.#{$px}-social {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: column;
+
+  @include media($breakpoint-sm) {
+    align-items: flex-end;
+  }
+
+  &__header {
+    @include text($heading3);
+
+    margin-bottom: $spacing-xsm;
+  }
+
+  ul {
+    align-items: center;
+    display: flex;
+    gap: 0 1.25rem;
+    list-style: none;
+    margin: 0 0 $spacing-medium;
+    padding: 0;
+
+    @include media($breakpoint-sm) {
+      gap: 0 1rem;
+    }
+
+    li {
+      cursor: pointer;
+    }
+  }
+
+  a {
+    display: inline-block;
+  }
+}

package/dist/scss/components/SplitPanel/_splitPanel.scss

@@ -0,0 +1,39 @@
+@import '../../vars';
+@import '../../utils';
+
+.#{$px}-split-panel {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-medium;
+
+  &:not(.#{$px}-split-panel--borderless) {
+    padding: 2.5rem $spacing-medium;
+  }
+
+  > * {
+    flex: 1 1 0px;
+  }
+
+  @include media($breakpoint-sm) {
+    align-items: stretch;
+    flex-direction: row;
+
+    & > :first-child,
+    & > :last-child {
+      width: 50%;
+    }
+
+    & > :not(:last-child) {
+      border-right: 1px solid $medium-gray;
+      padding-right: $spacing-medium;
+    }
+
+    &--borderless {
+      & > :not(:last-child) {
+        border-right: none;
+        padding-right: 0;
+      }
+    }
+  }
+}

package/dist/scss/components/SplitPanel/_splitPanel.stories.scss

@@ -0,0 +1,18 @@
+@import '../../vars';
+
+.split-panel-story {
+  background-color: #f4f2f1;
+
+  &__text {
+    font-family: Montserrat, serif;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.0625rem;
+    line-height: 1.125rem; /* 150% */
+  }
+
+  & .split-panel-story__text:not(:last-child) {
+    margin-bottom: $spacing-medium;
+  }
+}

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

@@ -0,0 +1,37 @@
+@import '../../vars';
+@import '../../utils';
+@import '../../type';
+@import '../../typography';
+
+.#{$px}-subscribe {
+  max-width: 30rem;
+
+  &__title {
+    @include text($heading3);
+
+    margin-bottom: $spacing-xsm;
+    text-align: center;
+  }
+
+  &__blurb {
+    @include text($body2);
+
+    text-align: center;
+  }
+
+  @include media($breakpoint-sm) {
+    &__title,
+    &__blurb {
+      text-align: left;
+    }
+  }
+
+  &__blurb,
+  .#{$px}-input__input {
+    margin-bottom: $spacing-medium;
+  }
+
+  &__button {
+    margin: 0 0 $spacing-medium;
+  }
+}

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

@@ -1,5 +1,5 @@
 @import '../../vars';
-@import '../../_utils';
+@import '../../utils';
 
 $toggleBaseWidth: 3rem;
 $inline: #{$px}-input--inline;

package/dist/scss/components/ViewingsList/_viewingsList.scss

@@ -1,5 +1,5 @@
 @import '../../vars';
-@import '../../_utils';
+@import '../../utils';
 @import '../../typography';
 
 .#{$px}-viewings-list {

package/dist/scss/styles.scss

@@ -2,6 +2,7 @@
 @import './vars';
 
 // @TODO: add styles when we can do a site wide regressions QA
+
 // @use 'reset';
 @import './typography';
 
@@ -9,12 +10,19 @@
 @import 'components/Button/button';
 
 // @import 'components/DatePicker/datePicker';
+@import 'components/Footer/footer';
+@import 'components/Grid/grid';
 @import 'components/Header/header';
 @import 'components/HeroBanner/heroBanner';
 @import 'components/Input/input';
+@import 'components/Social/social';
+@import 'components/SplitPanel/splitPanel';
+@import 'components/Subscribe/subscribe';
 @import 'components/Toggle/toggle';
 @import 'components/ViewingsList/viewingsList';
-@import 'components/Grid/grid';
+@import 'components/Link/link';
+@import 'components/LinkBlock/linkBlock';
+@import 'components/LinkList/linkList';
 
 // 📑 Pages
 @import 'pages/page';

package/dist/utils/index.d.ts

@@ -64,4 +64,5 @@ interface NormalizedProps {
 
  */
 export declare function useNormalizedInputProps({ disabled, id, invalid, invalidText, readOnly, type, warn, warnText, }: InputProps): NormalizedProps;
+export declare const defaultYear: number;
 export {};

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.17.5",
+  "version": "1.19.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -24,9 +24,8 @@
     "dist/**"
   ],
   "scripts": {
-    "dev": "vite",
-    "test": "jest",
     "start": "storybook dev -p 6006",
+    "test": "jest",
     "build": "npm run clean && tsc && vite build",
     "build:storybook": "storybook build",
     "preview": "npx http-server storybook-static",
@@ -39,60 +38,61 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "flatpickr": "^4.6.13",
-    "react": "^18.3.1",
-    "react-dom": "^18.2.0"
+    "flatpickr": "^4.6.13"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@figma/code-connect": "^0.1.1",
     "@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.0.22",
-    "@storybook/addon-links": "^7.0.22",
-    "@storybook/addon-styling": "^1.3.0",
+    "@storybook/addon-links": "^7.6.18",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.0.22",
     "@storybook/react": "^7.0.22",
     "@storybook/react-vite": "^7.6.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/color": "^3.0.3",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/color": "^3.0.6",
     "@types/jest": "^29.5.3",
-    "@types/react": "^18.3.0",
+    "@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",
     "color": "^4.2.3",
     "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "prettier": "3.0.3",
-    "prop-types": "^15.8.1",
-    "rimraf": "^5.0.1",
-    "rollup-plugin-copy": "^3.4.0",
+    "react-docgen-typescript": "^2.2.2",
+    "react": "^18.3.1",
+    "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",
-    "stylelint": "^16.3.1",
+    "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.1",
-    "ts-node": "^10.9.1",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.0.2",
     "vite": "^4.5.3",
     "vite-plugin-dts": "^2.3.0",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",