@phillips/seldon 1.32.0 → 1.34.0

package/dist/scss/_vars.scss

@@ -42,6 +42,7 @@ $clock-widget-red: $widget-red;
 $articker-red: #fc1e2b;
 $articker-orange: #ff8201;
 $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
+$overlay-black: rgba(0, 0, 0, 80%);
 
 // Legacy mapping
 $pure-white: $white;
@@ -242,3 +243,4 @@ $size-sm: 'sm';
 $size-md: 'md';
 $size-lg: 'lg';
 $size-xl: 'xl';
+$default-transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);

package/dist/scss/components/Drawer/_drawer.scss

@@ -0,0 +1,66 @@
+@import '../../_vars';
+
+.#{$px}-drawer {
+  align-items: center;
+  animation: content-show $default-transition;
+  background-color: $white;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-width: 600px;
+  padding: $padding-md;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    max-width: 100%;
+  }
+
+  &__overlay {
+    animation: overlay-show $default-transition;
+    background-color: $overlay-black;
+    inset: 0;
+    position: fixed;
+    z-index: 10;
+  }
+
+  &__close {
+    align-items: center;
+    border-radius: 100%;
+    color: $pure-black;
+    display: inline-flex;
+    justify-content: center;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  @keyframes overlay-show {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes content-show {
+    from {
+      opacity: 0;
+      transform: translateX(12rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

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

@@ -5,44 +5,76 @@
 
 .#{$px}-footer {
   background-color: $off-white;
-  border-top: 1px solid $keyline-gray;
   margin: $spacing-lg 0 0;
   width: 100%;
 
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  &__navigation {
-    background-color: $white;
-    padding: $spacing-md $spacing-md $spacing-sm;
-    text-align: right;
-
-    @include media($size-md) {
-      padding: $spacing-md $spacing-lg $spacing-sm;
-    }
-
-    @include media($size-lg) {
-      padding: $spacing-md $spacing-xl $spacing-sm;
+  .#{$px}-accordion {
+    border-bottom: 1px solid #eae8e4;
+    border-top: 1px solid #eae8e4;
+    width: 100%;
+
+    &-item {
+      padding: $spacing-sm 0 0;
+
+      ul {
+        li {
+          a {
+            font-size: 0.875rem;
+            font-weight: 500;
+            line-height: 1.875rem;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+      }
+
+      &-label {
+        opacity: 1;
+        padding: 0 0 0.5rem;
+
+        @include media($size-sm) {
+          cursor: unset;
+        }
+
+        &__text {
+          color: $pure-black;
+          font-family: $Distinct;
+          font-size: 1rem;
+          font-weight: 600;
+        }
+      }
+
+      &__border-bottom {
+        border-bottom: 1px solid #eae8e4;
+      }
     }
+  }
 
-    ul {
-      display: inline-flex;
-      flex-wrap: wrap;
-      gap: $spacing-md;
-      justify-content: center;
-      list-style: none;
-      padding: 0;
+  @include media($size-sm) {
+    .#{$px}-accordion {
+      border-bottom: 0;
+      border-top: 0;
+      display: flex;
+      width: 100%;
+
+      &-item {
+        border-bottom: 0;
+        flex: 1;
+        max-width: 18rem;
+        padding: $spacing-sm;
+
+        &-label__icon {
+          display: none;
+        }
+      }
     }
+  }
 
-    a,
-    button {
-      @include text('cta-sm');
-      @include bodyText;
-
-      cursor: pointer;
-    }
+  ul {
+    list-style: none;
+    padding: 0;
   }
 
   &__content {
@@ -88,10 +120,25 @@
     align-items: center;
     background-color: $white;
     display: flex;
+    flex-direction: column;
+    font-size: 1rem;
+    gap: 1rem;
 
-    // font-size: 0.875rem;
     // height: 2.125rem;
     justify-content: center;
     padding: $spacing-xsm 0;
+
+    h1 {
+      margin-top: $spacing-md;
+    }
+  }
+
+  .#{$px}-split-panel {
+    @include media($size-sm) {
+      & > :last-child {
+        flex: unset;
+        width: unset;
+      }
+    }
   }
 }

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

@@ -3,30 +3,68 @@
 @import '../../type';
 
 .#{$px}-social {
-  align-items: center;
   display: inline-flex;
   flex-direction: column;
+  padding: 0;
+  width: 100%;
+
+  @include media($size-sm) {
+    align-items: center;
+    padding: $spacing-sm;
+    width: unset;
+  }
+
+  &__button {
+    color: $pure-black;
+    font-size: 0.875rem;
+    justify-content: flex-start;
+    opacity: 1;
+    padding: 0;
+    text-decoration: underline;
+    white-space: nowrap;
+
+    @include media($size-sm) {
+      justify-content: center;
+    }
+
+    &:hover {
+      background-color: unset;
+      color: unset;
+    }
+
+    &:focus {
+      background-color: unset;
+      color: unset;
+    }
+  }
 
   @include media($size-sm) {
     align-items: flex-end;
   }
 
   &__header {
-    @include text($heading3);
-
-    margin-bottom: $spacing-xsm;
+    color: $pure-black;
+    font-family: $Distinct;
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
   }
 
   ul {
     align-items: center;
+    border-top: 1px solid #eae8e4;
     display: flex;
     gap: 0 1.25rem;
     list-style: none;
-    margin: 0 0 $spacing-md;
-    padding: 0;
+    margin: $spacing-md 0 $spacing-md;
+    padding: $spacing-md 0 0;
 
     @include media($size-sm) {
       gap: 0 1rem;
+      justify-content: flex-end;
+      margin: $spacing-sm 0 $spacing-md;
+      padding: $spacing-sm 0 0;
+      width: 100%;
     }
 
     li {

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

@@ -5,6 +5,7 @@
 
 .#{$px}-subscribe {
   max-width: 30rem;
+  width: 100%;
 
   &__title {
     @include text($heading3);

package/dist/scss/styles.scss

@@ -38,3 +38,4 @@
 @import 'components/Modal/modal';
 @import 'components/Accordion/accordion';
 @import 'components/Breadcrumb/breadcrumb';
+@import 'components/Drawer/drawer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.32.0",
+  "version": "1.34.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
     "flatpickr": "^4.6.13",
@@ -77,10 +78,10 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.8",
+    "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.1.2",
-    "prettier": "3.3.2",
+    "husky": "^9.1.4",
+    "prettier": "3.3.3",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
@@ -90,14 +91,14 @@
     "sass": "^1.77.8",
     "semantic-release": "^23.1.1",
     "storybook": "^8.1.4",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.8.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.4",
-    "vite": "^5.3.3",
+    "vite": "^5.3.5",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",

package/dist/node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-context/dist/index.js

@@ -1,52 +0,0 @@
-import * as i from "react";
-import { jsx as _ } from "react/jsx-runtime";
-function P(t, x = []) {
-  let o = [];
-  function f(u, e) {
-    const n = i.createContext(e), r = o.length;
-    o = [...o, e];
-    function m(a) {
-      const { scope: c, children: C, ...p } = a, d = (c == null ? void 0 : c[t][r]) || n, v = i.useMemo(() => p, Object.values(p));
-      return /* @__PURE__ */ _(d.Provider, { value: v, children: C });
-    }
-    function S(a, c) {
-      const C = (c == null ? void 0 : c[t][r]) || n, p = i.useContext(C);
-      if (p) return p;
-      if (e !== void 0) return e;
-      throw new Error(`\`${a}\` must be used within \`${u}\``);
-    }
-    return m.displayName = u + "Provider", [m, S];
-  }
-  const s = () => {
-    const u = o.map((e) => i.createContext(e));
-    return function(n) {
-      const r = (n == null ? void 0 : n[t]) || u;
-      return i.useMemo(
-        () => ({ [`__scope${t}`]: { ...n, [t]: r } }),
-        [n, r]
-      );
-    };
-  };
-  return s.scopeName = t, [f, h(s, ...x)];
-}
-function h(...t) {
-  const x = t[0];
-  if (t.length === 1) return x;
-  const o = () => {
-    const f = t.map((s) => ({
-      useScope: s(),
-      scopeName: s.scopeName
-    }));
-    return function(u) {
-      const e = f.reduce((n, { useScope: r, scopeName: m }) => {
-        const a = r(u)[`__scope${m}`];
-        return { ...n, ...a };
-      }, {});
-      return i.useMemo(() => ({ [`__scope${x.scopeName}`]: e }), [e]);
-    };
-  };
-  return o.scopeName = x.scopeName, o;
-}
-export {
-  P as createContextScope
-};

package/dist/node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-primitive/dist/index.js

@@ -1,31 +0,0 @@
-import * as f from "react";
-import "react-dom";
-import { Slot as n } from "../../react-slot/dist/index.js";
-import { jsx as s } from "react/jsx-runtime";
-var d = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "span",
-  "svg",
-  "ul"
-], c = d.reduce((o, r) => {
-  const i = f.forwardRef((t, e) => {
-    const { asChild: m, ...a } = t, p = m ? n : r;
-    return typeof window != "undefined" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ s(p, { ...a, ref: e });
-  });
-  return i.displayName = `Primitive.${r}`, { ...o, [r]: i };
-}, {});
-export {
-  c as Primitive
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive/dist/index.js

@@ -1,9 +0,0 @@
-function h(f, c, { checkForDefaultPrevented: p = !0 } = {}) {
-  return function(s) {
-    if (f == null || f(s), p === !1 || !s.defaultPrevented)
-      return c == null ? void 0 : c(s);
-  };
-}
-export {
-  h as composeEventHandlers
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs/dist/index.js

@@ -1,14 +0,0 @@
-import * as e from "react";
-function c(o, n) {
-  typeof o == "function" ? o(n) : o != null && (o.current = n);
-}
-function u(...o) {
-  return (n) => o.forEach((t) => c(t, n));
-}
-function i(...o) {
-  return e.useCallback(u(...o), o);
-}
-export {
-  u as composeRefs,
-  i as useComposedRefs
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context/dist/index.js

@@ -1,52 +0,0 @@
-import * as i from "react";
-import { jsx as _ } from "react/jsx-runtime";
-function P(t, x = []) {
-  let o = [];
-  function f(u, e) {
-    const n = i.createContext(e), r = o.length;
-    o = [...o, e];
-    function m(a) {
-      const { scope: c, children: C, ...p } = a, d = (c == null ? void 0 : c[t][r]) || n, v = i.useMemo(() => p, Object.values(p));
-      return /* @__PURE__ */ _(d.Provider, { value: v, children: C });
-    }
-    function S(a, c) {
-      const C = (c == null ? void 0 : c[t][r]) || n, p = i.useContext(C);
-      if (p) return p;
-      if (e !== void 0) return e;
-      throw new Error(`\`${a}\` must be used within \`${u}\``);
-    }
-    return m.displayName = u + "Provider", [m, S];
-  }
-  const s = () => {
-    const u = o.map((e) => i.createContext(e));
-    return function(n) {
-      const r = (n == null ? void 0 : n[t]) || u;
-      return i.useMemo(
-        () => ({ [`__scope${t}`]: { ...n, [t]: r } }),
-        [n, r]
-      );
-    };
-  };
-  return s.scopeName = t, [f, h(s, ...x)];
-}
-function h(...t) {
-  const x = t[0];
-  if (t.length === 1) return x;
-  const o = () => {
-    const f = t.map((s) => ({
-      useScope: s(),
-      scopeName: s.scopeName
-    }));
-    return function(u) {
-      const e = f.reduce((n, { useScope: r, scopeName: m }) => {
-        const a = r(u)[`__scope${m}`];
-        return { ...n, ...a };
-      }, {});
-      return i.useMemo(() => ({ [`__scope${x.scopeName}`]: e }), [e]);
-    };
-  };
-  return o.scopeName = x.scopeName, o;
-}
-export {
-  P as createContextScope
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id/dist/index.js

@@ -1,13 +0,0 @@
-import * as f from "react";
-import { useLayoutEffect as a } from "../../react-use-layout-effect/dist/index.js";
-var e = f.useId || (() => {
-}), r = 0;
-function i(o) {
-  const [u, s] = f.useState(e());
-  return a(() => {
-    o || s((t) => t != null ? t : String(r++));
-  }, [o]), o || (u ? `radix-${u}` : "");
-}
-export {
-  i as useId
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive/dist/index.js

@@ -1,31 +0,0 @@
-import * as f from "react";
-import "react-dom";
-import { Slot as n } from "../../react-slot/dist/index.js";
-import { jsx as s } from "react/jsx-runtime";
-var d = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "span",
-  "svg",
-  "ul"
-], c = d.reduce((o, r) => {
-  const i = f.forwardRef((t, e) => {
-    const { asChild: m, ...a } = t, p = m ? n : r;
-    return typeof window != "undefined" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ s(p, { ...a, ref: e });
-  });
-  return i.displayName = `Primitive.${r}`, { ...o, [r]: i };
-}, {});
-export {
-  c as Primitive
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot/dist/index.js

@@ -1,48 +0,0 @@
-import * as l from "react";
-import { composeRefs as u } from "../../react-compose-refs/dist/index.js";
-import { jsx as c, Fragment as d } from "react/jsx-runtime";
-var m = l.forwardRef((e, n) => {
-  const { children: r, ...t } = e, o = l.Children.toArray(r), i = o.find(y);
-  if (i) {
-    const s = i.props.children, a = o.map((p) => p === i ? l.Children.count(s) > 1 ? l.Children.only(null) : l.isValidElement(s) ? s.props.children : null : p);
-    return /* @__PURE__ */ c(f, { ...t, ref: n, children: l.isValidElement(s) ? l.cloneElement(s, void 0, a) : null });
-  }
-  return /* @__PURE__ */ c(f, { ...t, ref: n, children: r });
-});
-m.displayName = "Slot";
-var f = l.forwardRef((e, n) => {
-  const { children: r, ...t } = e;
-  if (l.isValidElement(r)) {
-    const o = C(r);
-    return l.cloneElement(r, {
-      ...h(t, r.props),
-      // @ts-ignore
-      ref: n ? u(n, o) : o
-    });
-  }
-  return l.Children.count(r) > 1 ? l.Children.only(null) : null;
-});
-f.displayName = "SlotClone";
-var g = ({ children: e }) => /* @__PURE__ */ c(d, { children: e });
-function y(e) {
-  return l.isValidElement(e) && e.type === g;
-}
-function h(e, n) {
-  const r = { ...n };
-  for (const t in n) {
-    const o = e[t], i = n[t];
-    /^on[A-Z]/.test(t) ? o && i ? r[t] = (...a) => {
-      i(...a), o(...a);
-    } : o && (r[t] = o) : t === "style" ? r[t] = { ...o, ...i } : t === "className" && (r[t] = [o, i].filter(Boolean).join(" "));
-  }
-  return { ...e, ...r };
-}
-function C(e) {
-  var t, o;
-  let n = (t = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : t.get, r = n && "isReactWarning" in n && n.isReactWarning;
-  return r ? e.ref : (n = (o = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : o.get, r = n && "isReactWarning" in n && n.isReactWarning, r ? e.props.ref : e.props.ref || e.ref);
-}
-export {
-  m as Slot,
-  g as Slottable
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-callback-ref/dist/index.js

@@ -1,13 +0,0 @@
-import * as r from "react";
-function o(t) {
-  const e = r.useRef(t);
-  return r.useEffect(() => {
-    e.current = t;
-  }), r.useMemo(() => (...n) => {
-    var u;
-    return (u = e.current) == null ? void 0 : u.call(e, ...n);
-  }, []);
-}
-export {
-  o as useCallbackRef
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state/dist/index.js

@@ -1,32 +0,0 @@
-import * as l from "react";
-import { useCallbackRef as f } from "../../react-use-callback-ref/dist/index.js";
-function R({
-  prop: t,
-  defaultProp: r,
-  onChange: s = () => {
-  }
-}) {
-  const [e, n] = v({ defaultProp: r, onChange: s }), o = t !== void 0, i = o ? t : e, u = f(s), d = l.useCallback(
-    (c) => {
-      if (o) {
-        const a = typeof c == "function" ? c(t) : c;
-        a !== t && u(a);
-      } else
-        n(c);
-    },
-    [o, t, n, u]
-  );
-  return [i, d];
-}
-function v({
-  defaultProp: t,
-  onChange: r
-}) {
-  const s = l.useState(t), [e] = s, n = l.useRef(e), o = f(r);
-  return l.useEffect(() => {
-    n.current !== e && (o(e), n.current = e);
-  }, [e, n, o]), s;
-}
-export {
-  R as useControllableState
-};

package/dist/node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect/dist/index.js

@@ -1,6 +0,0 @@
-import * as e from "react";
-var o = globalThis != null && globalThis.document ? e.useLayoutEffect : () => {
-};
-export {
-  o as useLayoutEffect
-};

package/dist/node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-compose-refs/dist/index.js

@@ -1,14 +0,0 @@
-import * as e from "react";
-function c(o, n) {
-  typeof o == "function" ? o(n) : o != null && (o.current = n);
-}
-function u(...o) {
-  return (n) => o.forEach((t) => c(t, n));
-}
-function i(...o) {
-  return e.useCallback(u(...o), o);
-}
-export {
-  u as composeRefs,
-  i as useComposedRefs
-};