@phillips/seldon 1.22.2 → 1.24.0

package/dist/node_modules/react-modal/lib/index.js

@@ -0,0 +1,19 @@
+import { getDefaultExportFromCjs as d } from "../../../_virtual/_commonjsHelpers.js";
+import { __module as r } from "../../../_virtual/index2.js";
+import "./components/Modal.js";
+import { __exports as f } from "../../../_virtual/Modal.js";
+(function(o, t) {
+  Object.defineProperty(t, "__esModule", {
+    value: !0
+  });
+  var a = f, l = u(a);
+  function u(e) {
+    return e && e.__esModule ? e : { default: e };
+  }
+  t.default = l.default, o.exports = t.default;
+})(r, r.exports);
+var i = r.exports;
+const n = /* @__PURE__ */ d(i);
+export {
+  n as default
+};

package/dist/node_modules/warning/warning.js

@@ -0,0 +1,33 @@
+var c = process.env.NODE_ENV !== "production", i = function() {
+};
+if (c) {
+  var g = function(e, r) {
+    var a = arguments.length;
+    r = new Array(a > 1 ? a - 1 : 0);
+    for (var n = 1; n < a; n++)
+      r[n - 1] = arguments[n];
+    var u = 0, t = "Warning: " + e.replace(/%s/g, function() {
+      return r[u++];
+    });
+    typeof console != "undefined" && console.error(t);
+    try {
+      throw new Error(t);
+    } catch {
+    }
+  };
+  i = function(o, e, r) {
+    var a = arguments.length;
+    r = new Array(a > 2 ? a - 2 : 0);
+    for (var n = 2; n < a; n++)
+      r[n - 2] = arguments[n];
+    if (e === void 0)
+      throw new Error(
+        "`warning(condition, format, ...args)` requires a warning message argument"
+      );
+    o || g.apply(null, [e].concat(r));
+  };
+}
+var s = i;
+export {
+  s as w
+};

package/dist/scss/_type.scss

@@ -63,8 +63,8 @@
     line-height: 1.25;
   }
 
-  @if $label == 'text-badge' {
-    font-size: $text-badge-label-size;
+  @if $label == 'badge' {
+    font-size: $badge-label-size;
     font-weight: 500;
     letter-spacing: 0.1875rem;
     line-height: 1.25;
@@ -94,8 +94,8 @@
     @include labelText($label);
   }
 
-  @if $token == 'text-badge' {
-    @include labelText($text-badge);
+  @if $token == 'badge' {
+    @include labelText($badge);
   }
 
   // Displays
@@ -120,8 +120,8 @@
   }
 
   // Headings
-  @if $token == 'heading1' {
-    @include hText($heading-size1);
+  @if $token == 'blockquote' {
+    @include hText($heading-size1, $color: $primary-black, $transform-style: initial);
   }
 
   @if $token == 'heading2' {

package/dist/scss/_utils.scss

@@ -43,11 +43,11 @@
 @mixin gridMargins {
   margin: 0 $spacing-md;
 
-  @media (min-width: $breakpoint3) {
+  @media (min-width: $breakpoint-lg) {
     margin: 0 $spacing-lg;
   }
 
-  @media (min-width: $breakpoint4) {
+  @media (min-width: $breakpoint-xl) {
     margin: 0 $spacing-xl;
   }
 }
@@ -67,11 +67,11 @@
   gap: $spacing-md;
   grid-template-columns: repeat(2, 1fr);
 
-  @media (min-width: $breakpoint2) {
+  @media (min-width: $breakpoint-md) {
     grid-template-columns: repeat(4, 1fr);
   }
 
-  @media (min-width: $breakpoint3) {
+  @media (min-width: $breakpoint-lg) {
     grid-template-columns: repeat(12, 1fr);
   }
 
@@ -81,47 +81,47 @@
 }
 
 @mixin media($breakpoint, $type: 'min') {
-  @if $breakpoint == $breakpoint-sm {
-    // $breakpoint2: 961px;
+  @if $breakpoint == $size-sm {
+    // $breakpoint-md: 961px;
     @if $type == 'min' {
-      @media (min-width: $breakpoint2) {
+      @media (min-width: $breakpoint-md) {
         @content;
       }
     }
 
     @if $type == 'max' {
-      @media (max-width: $breakpoint2) {
+      @media (max-width: $breakpoint-md) {
         @content;
       }
     }
   }
 
-  @if $breakpoint == $breakpoint-md {
-    // $breakpoint3: 1401px;
+  @if $breakpoint == $size-md {
+    // $breakpoint-lg: 1401px;
 
     @if $type == 'min' {
-      @media (min-width: $breakpoint3) {
+      @media (min-width: $breakpoint-lg) {
         @content;
       }
     }
 
     @if type == 'max' {
-      @media (max-width: $breakpoint3) {
+      @media (max-width: $breakpoint-lg) {
         @content;
       }
     }
   }
 
-  @if $breakpoint == $breakpoint-lg {
-    // $breakpoint4: 1801px;
+  @if $breakpoint == $size-lg {
+    // $breakpoint-xl: 1801px;
     @if type == 'min' {
-      @media (min-width: $breakpoint4) {
+      @media (min-width: $breakpoint-xl) {
         @content;
       }
     }
 
     @if type == 'max' {
-      @media (max-width: $breakpoint4) {
+      @media (max-width: $breakpoint-xl) {
         @content;
       }
     }

package/dist/scss/_vars.scss

@@ -73,21 +73,21 @@ $cta-sm: 'cta-sm';
 $cta-lg: 'cta-lg';
 $email: 'email';
 $label: 'label';
-$text-badge: 'text-badge';
+$badge: 'badge';
 $display0: 'display0';
 $display1: 'display1';
 $display2: 'display2';
 $display3: 'display3';
 $display4: 'display4';
-$heading1: 'heading1';
+$blockquote: 'blockquote';
 $heading2: 'heading2';
 $heading3: 'heading3';
 $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;
+$text-tokens: $button, $cta-sm, $cta-lg, $email, $label, $badge, $display0, $display1, $display2, $display3, $display4,
+  $blockquote, $heading2, $heading3, $heading4, $body1, $body2, $body3;
 
 ////////////////////////
 /// FONT SIZE TOKENS:
@@ -158,7 +158,7 @@ $cta-sm-label-size: var(--label-size2);
 $email-label-size: var(--label-size2);
 $cta-lg-label-size: var(--label-size1);
 $text-label-size: var(--label-size3);
-$text-badge-label-size: var(--label-size3);
+$badge-label-size: var(--label-size3);
 
 ////////////////////////
 /// SPACING TOKENS:
@@ -216,24 +216,22 @@ $margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 
 ////////////////////////
-/// Breakpoint TOKENS:
+/// Breakpoint TOKENS that map to minimum pixels
 ///////////////////////
-
-$breakpoint2: 961px;
-$breakpoint3: 1401px;
-$breakpoint4: 1801px;
+$breakpoint-sm: 461px;
+$breakpoint-md: 961px;
+$breakpoint-lg: 1401px;
+$breakpoint-xl: 1801px;
 
 ////////////////////////
 /// max-site-width TOKEN:
 ///////////////////////
 $max-site-width: 1560px;
 
-////////////////////////////
-/// Media breakpoint tokens:
-///////////////////////////
-
-$breakpoint-xs: 'xs';
-$breakpoint-sm: 'sm';
-$breakpoint-md: 'md';
-$breakpoint-lg: 'lg';
-$breakpoint-xl: 'xl';
+////////////////////////
+/// Our tokens usually support at least 4 sizes.
+///////////////////////
+$size-sm: 'sm';
+$size-md: 'md';
+$size-lg: 'lg';
+$size-xl: 'xl';

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

@@ -18,11 +18,11 @@
     padding: $spacing-md $spacing-md $spacing-sm;
     text-align: right;
 
-    @include media($breakpoint-md) {
+    @include media($size-md) {
       padding: $spacing-md $spacing-lg $spacing-sm;
     }
 
-    @include media($breakpoint-lg) {
+    @include media($size-lg) {
       padding: $spacing-md $spacing-xl $spacing-sm;
     }
 
@@ -50,17 +50,17 @@
     flex-direction: column;
     padding: $spacing-lg $spacing-md 0;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       align-items: flex-start;
       flex-direction: row;
       justify-content: space-between;
     }
 
-    @include media($breakpoint-md) {
+    @include media($size-md) {
       padding: 3.75rem $spacing-lg;
     }
 
-    @include media($breakpoint-lg) {
+    @include media($size-lg) {
       padding: 3.75rem $spacing-xl;
     }
   }
@@ -68,7 +68,7 @@
   &__content-split-panel__left {
     margin-bottom: $spacing-md;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       margin-bottom: 0;
     }
   }
@@ -76,7 +76,7 @@
   &__content-split-panel__right {
     display: flex;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       justify-content: flex-end;
     }
   }

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

@@ -26,7 +26,7 @@
     }
   }
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     @for $i from 1 through 4 {
       &--span-sm-#{$i} {
         @include gridItemColumnSpan($i, 4);
@@ -34,7 +34,7 @@
     }
   }
 
-  @include media($breakpoint-md) {
+  @include media($size-md) {
     @for $i from 1 through 12 {
       &--span-md-#{$i} {
         @include gridItemColumnSpan($i, 12);
@@ -42,7 +42,7 @@
     }
   }
 
-  @include media($breakpoint-lg) {
+  @include media($size-lg) {
     @for $i from 1 through 12 {
       &--span-lg-#{$i} {
         @include gridItemColumnSpan($i, 12);

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

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

package/dist/scss/components/IconButton/_iconButton.scss

@@ -0,0 +1,47 @@
+.#{$px}-icon-button {
+  background-color: unset;
+  border: unset;
+  color: $text-color;
+  min-width: unset;
+  padding: unset;
+
+  & > svg {
+    fill: $pure-black;
+    height: 100%;
+    margin-inline-end: unset;
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: unset;
+    opacity: 0.75;
+
+    & > svg {
+      fill: $pure-black;
+    }
+  }
+
+  &:focus {
+    background-color: unset;
+    fill: $pure-black;
+
+    & > svg {
+      fill: $pure-black;
+    }
+  }
+
+  &--sm {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  &--md {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  &--lg {
+    height: 2rem;
+    width: 2rem;
+  }
+}

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

@@ -1,8 +1,6 @@
 @import '../../type';
 
 .#{$px}-link {
-  @include text($cta-sm);
-
   color: $cta-blue;
   text-decoration: none;
   white-space: nowrap;
@@ -27,8 +25,4 @@
   &--list {
     color: $soft-black;
   }
-
-  &--email {
-    @include text($email);
-  }
 }

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

@@ -5,7 +5,7 @@
     // mobile first
     grid-column: span 2;
 
-    @include media($breakpoint-md) {
+    @include media($size-md) {
       grid-column: span 4;
     }
   }

package/dist/scss/components/Modal/_modal.scss

@@ -0,0 +1,29 @@
+@import '../../vars';
+@import '../../utils';
+
+.#{$px}-modal {
+  background-color: white;
+  left: 50%;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  padding: 2rem;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  &__overlay {
+    background-color: rgba(0, 0, 0, 75%);
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+  }
+
+  &__close {
+    position: absolute;
+    right: 0.4rem;
+    top: 0.4rem;
+  }
+}

package/dist/scss/components/Modal/_modal.stories.scss

@@ -0,0 +1,5 @@
+.modal-story {
+  &__button {
+    margin-bottom: 16px;
+  }
+}

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

@@ -7,7 +7,7 @@
   display: inline-flex;
   flex-direction: column;
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     align-items: flex-end;
   }
 
@@ -25,7 +25,7 @@
     margin: 0 0 $spacing-md;
     padding: 0;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       gap: 0 1rem;
     }
 

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

@@ -11,7 +11,7 @@
     flex: 1 1 0px;
   }
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     align-items: stretch;
     flex-direction: row;
 

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

@@ -19,7 +19,7 @@
     text-align: center;
   }
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     &__title,
     &__blurb {
       text-align: left;

package/dist/scss/styles.scss

@@ -9,6 +9,7 @@
 
 // ⚛️ Components
 @import 'components/Button/button';
+@import 'components/IconButton/iconButton';
 
 // @import 'components/DatePicker/datePicker';
 @import 'components/Footer/footer';
@@ -27,6 +28,7 @@
 @import 'components/LinkBlock/linkBlock';
 @import 'components/LinkList/linkList';
 @import 'components/Text/text';
+@import 'components/Modal/modal';
 
 // 📑 Pages
 @import 'pages/page';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.22.2",
+  "version": "1.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -39,7 +39,8 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "flatpickr": "^4.6.13"
+    "flatpickr": "^4.6.13",
+    "react-modal": "^3.16.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
@@ -49,7 +50,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.5",
-    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-interactions": "^8.1.4",
     "@storybook/addon-links": "^8.1.4",
     "@storybook/addon-mdx-gfm": "^8.1.5",
@@ -63,6 +64,7 @@
     "@types/color": "^3.0.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.0.11",
+    "@types/react-modal": "^3.16.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.0",
@@ -73,14 +75,14 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
-    "prettier": "3.2.5",
+    "prettier": "3.3.0",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.7",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.77.3",
+    "sass": "^1.77.4",
     "semantic-release": "^23.1.1",
     "storybook": "^8.1.4",
     "stylelint": "^16.6.1",