@phillips/seldon 1.100.2 → 1.102.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/SeldonImage/SeldonImage.d.ts +8 -0
- package/dist/components/SeldonImage/SeldonImage.js +79 -57
- package/dist/node_modules/exenv/index.js +1 -1
- package/dist/node_modules/prop-types/node_modules/react-is/index.js +1 -1
- package/dist/patterns/ObjectTile/ObjectTile.d.ts +17 -1
- package/dist/patterns/ObjectTile/ObjectTile.js +97 -87
- package/dist/patterns/ObjectTile/ObjectTile.stories.d.ts +5 -4
- package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.d.ts +16 -0
- package/dist/patterns/SaleHeaderBanner/SaleHeaderBanner.js +47 -39
- package/dist/scss/components/SeldonImage/_seldonImage.scss +0 -4
- package/package.json +1 -1
|
@@ -25,6 +25,14 @@ export interface SeldonImageProps extends ComponentProps<'div'> {
|
|
|
25
25
|
* The sizes of the image [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes]
|
|
26
26
|
*/
|
|
27
27
|
sizes?: string;
|
|
28
|
+
/**
|
|
29
|
+
* The loading attribute of the image. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading]
|
|
30
|
+
*/
|
|
31
|
+
loading?: ComponentProps<'img'>['loading'];
|
|
32
|
+
/**
|
|
33
|
+
* The fetch priority of the image. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-fetchpriority]
|
|
34
|
+
*/
|
|
35
|
+
fetchPriority?: ComponentProps<'img'>['fetchPriority'];
|
|
28
36
|
/**
|
|
29
37
|
* The alt text of the image.
|
|
30
38
|
*/
|
|
@@ -1,78 +1,100 @@
|
|
|
1
|
-
import { jsxs as v, jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import { getCommonProps as
|
|
5
|
-
import
|
|
6
|
-
function
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { jsxs as v, jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import { memo as P, forwardRef as x, useRef as C, useState as S, useCallback as j, useEffect as k } from "react";
|
|
3
|
+
import u from "../../node_modules/classnames/index.js";
|
|
4
|
+
import { getCommonProps as R } from "../../utils/index.js";
|
|
5
|
+
import V from "../../assets/PhillipsLogo.svg.js";
|
|
6
|
+
function B({
|
|
7
|
+
img: c,
|
|
8
|
+
src: t,
|
|
9
|
+
srcSet: a,
|
|
10
|
+
sizes: m
|
|
11
|
+
}) {
|
|
12
|
+
return new Promise((n) => {
|
|
13
|
+
let e = c;
|
|
14
|
+
e || (e = document.createElement("img")), e.onerror = () => n(!1), e.onload = () => n(!0), a && (e.srcset = a), m && (e.sizes = m), e.src = t, e.complete && n(!0);
|
|
10
15
|
});
|
|
11
16
|
}
|
|
12
|
-
const
|
|
13
|
-
|
|
17
|
+
const H = typeof window == "undefined", M = P(
|
|
18
|
+
x(
|
|
14
19
|
({
|
|
15
|
-
className:
|
|
16
|
-
aspectRatio:
|
|
20
|
+
className: c,
|
|
21
|
+
aspectRatio: t = "none",
|
|
17
22
|
objectFit: a = "none",
|
|
18
|
-
hasBlurBackground:
|
|
19
|
-
imageClassName:
|
|
20
|
-
imageStyle:
|
|
21
|
-
src:
|
|
22
|
-
alt:
|
|
23
|
-
srcSet:
|
|
24
|
-
sizes:
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
hasBlurBackground: m = !1,
|
|
24
|
+
imageClassName: p,
|
|
25
|
+
imageStyle: n,
|
|
26
|
+
src: e,
|
|
27
|
+
alt: $,
|
|
28
|
+
srcSet: r,
|
|
29
|
+
sizes: i,
|
|
30
|
+
loading: y,
|
|
31
|
+
fetchPriority: N,
|
|
32
|
+
errorText: w = "Error loading image",
|
|
33
|
+
...E
|
|
34
|
+
}, L) => {
|
|
35
|
+
const { className: o, ...I } = R(E, "SeldonImage"), b = C(null), [l, d] = S(() => {
|
|
36
|
+
if (H)
|
|
37
|
+
return "loading";
|
|
38
|
+
const s = document.getElementById(e);
|
|
39
|
+
if (s instanceof HTMLImageElement && !s.classList.contains(`${o}-img--hidden`))
|
|
40
|
+
return "loaded";
|
|
41
|
+
const g = document.createElement("img");
|
|
42
|
+
return r && (g.srcset = r), i && (g.sizes = i), g.src = e, g.complete ? "loaded" : "loading";
|
|
43
|
+
}), h = j(async () => {
|
|
44
|
+
const s = await B({
|
|
45
|
+
img: b.current,
|
|
46
|
+
src: e,
|
|
47
|
+
srcSet: r,
|
|
48
|
+
sizes: i
|
|
49
|
+
});
|
|
50
|
+
d(s ? "loaded" : "error");
|
|
51
|
+
}, [e, r, i]);
|
|
52
|
+
return k(() => {
|
|
53
|
+
h();
|
|
54
|
+
}, [h]), /* @__PURE__ */ v(
|
|
35
55
|
"div",
|
|
36
56
|
{
|
|
37
|
-
ref:
|
|
38
|
-
className:
|
|
39
|
-
[`${
|
|
40
|
-
[`${e}--aspect-ratio-${m.replace("/", "-")}`]: m !== "none"
|
|
57
|
+
ref: L,
|
|
58
|
+
className: u(o, c, {
|
|
59
|
+
[`${o}--aspect-ratio-${t.replace("/", "-")}`]: t !== "none"
|
|
41
60
|
}),
|
|
42
61
|
role: "img",
|
|
43
|
-
"aria-label":
|
|
44
|
-
...
|
|
45
|
-
...
|
|
62
|
+
"aria-label": $,
|
|
63
|
+
...E,
|
|
64
|
+
...I,
|
|
46
65
|
children: [
|
|
47
|
-
|
|
66
|
+
m && /* @__PURE__ */ f(
|
|
48
67
|
"div",
|
|
49
68
|
{
|
|
50
|
-
className:
|
|
51
|
-
[`${
|
|
69
|
+
className: u(`${o}-blur`, {
|
|
70
|
+
[`${o}-blur--hidden`]: l === "loading" || l === "error"
|
|
52
71
|
}),
|
|
53
|
-
style: { backgroundImage: `url(${
|
|
72
|
+
style: { backgroundImage: `url(${e})` }
|
|
54
73
|
}
|
|
55
74
|
),
|
|
56
|
-
|
|
57
|
-
/* @__PURE__ */
|
|
75
|
+
l === "error" ? /* @__PURE__ */ f("div", { className: `${o}--error`, children: /* @__PURE__ */ f(V, { "aria-label": w }) }) : null,
|
|
76
|
+
/* @__PURE__ */ f(
|
|
58
77
|
"img",
|
|
59
78
|
{
|
|
60
|
-
className:
|
|
61
|
-
[`${
|
|
62
|
-
[`${
|
|
79
|
+
className: u(`${o}-img`, p, {
|
|
80
|
+
[`${o}-img--hidden`]: l === "error",
|
|
81
|
+
[`${o}-img--object-fit-${a}`]: a !== "none"
|
|
63
82
|
}),
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
83
|
+
id: e,
|
|
84
|
+
style: n,
|
|
85
|
+
src: e,
|
|
86
|
+
srcSet: r,
|
|
87
|
+
sizes: i,
|
|
88
|
+
alt: $,
|
|
89
|
+
"data-testid": `${I["data-testid"]}-img`,
|
|
90
|
+
ref: b,
|
|
91
|
+
loading: y,
|
|
92
|
+
fetchpriority: N,
|
|
71
93
|
onLoad: () => {
|
|
72
|
-
|
|
94
|
+
d("loaded");
|
|
73
95
|
},
|
|
74
96
|
onError: () => {
|
|
75
|
-
|
|
97
|
+
d("error");
|
|
76
98
|
}
|
|
77
99
|
}
|
|
78
100
|
)
|
|
@@ -82,7 +104,7 @@ const R = y(
|
|
|
82
104
|
}
|
|
83
105
|
)
|
|
84
106
|
);
|
|
85
|
-
|
|
107
|
+
M.displayName = "SeldonImage";
|
|
86
108
|
export {
|
|
87
|
-
|
|
109
|
+
M as default
|
|
88
110
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __module as e } from "../../../../_virtual/
|
|
1
|
+
import { __module as e } from "../../../../_virtual/index5.js";
|
|
2
2
|
import { __require as o } from "./cjs/react-is.production.min.js";
|
|
3
3
|
import { __require as t } from "./cjs/react-is.development.js";
|
|
4
4
|
var r;
|
|
@@ -28,6 +28,22 @@ export interface ObjectTileProps extends ComponentProps<'a'> {
|
|
|
28
28
|
* Image URL for the object.
|
|
29
29
|
*/
|
|
30
30
|
imageUrl?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Image srcset for the object. [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset]
|
|
33
|
+
*/
|
|
34
|
+
imageSrcSet?: string;
|
|
35
|
+
/**
|
|
36
|
+
* Image sizes for the object. [https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes]
|
|
37
|
+
*/
|
|
38
|
+
imageSizes?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Image loading attribute. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading]
|
|
41
|
+
*/
|
|
42
|
+
imageLoading?: ComponentProps<'img'>['loading'];
|
|
43
|
+
/**
|
|
44
|
+
* Image fetch priority. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-fetchpriority]
|
|
45
|
+
*/
|
|
46
|
+
imageFetchPriority?: ComponentProps<'img'>['fetchPriority'];
|
|
31
47
|
/**
|
|
32
48
|
* Object Lot number.
|
|
33
49
|
*/
|
|
@@ -62,5 +78,5 @@ export interface ObjectTileProps extends ComponentProps<'a'> {
|
|
|
62
78
|
*
|
|
63
79
|
* [Storybook Link](https://phillips-seldon.netlify.app//?path=/story/patterns-objecttile--playground)
|
|
64
80
|
*/
|
|
65
|
-
declare const ObjectTile: import('react').ForwardRefExoticComponent<Omit<ObjectTileProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement
|
|
81
|
+
declare const ObjectTile: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<ObjectTileProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>>;
|
|
66
82
|
export default ObjectTile;
|
|
@@ -1,94 +1,104 @@
|
|
|
1
|
-
import { jsxs as s, jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import
|
|
4
|
-
import { getCommonProps as
|
|
1
|
+
import { jsxs as s, jsx as a, Fragment as O } from "react/jsx-runtime";
|
|
2
|
+
import { memo as S, forwardRef as D } from "react";
|
|
3
|
+
import R from "../../node_modules/classnames/index.js";
|
|
4
|
+
import { getCommonProps as z } from "../../utils/index.js";
|
|
5
5
|
import { TextVariants as l } from "../../components/Text/types.js";
|
|
6
6
|
import i from "../../components/Text/Text.js";
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
const
|
|
11
|
-
(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
src: g
|
|
39
|
-
}
|
|
40
|
-
),
|
|
41
|
-
n ? null : /* @__PURE__ */ e(i, { className: `${a}__badge`, variant: l.badge, children: p }),
|
|
42
|
-
/* @__PURE__ */ s("div", { className: `${a}__lot-number-like`, children: [
|
|
43
|
-
/* @__PURE__ */ e(i, { className: `${a}__lot-number`, variant: l.heading3, element: "p", children: b }),
|
|
44
|
-
m && /* @__PURE__ */ e(m, {})
|
|
45
|
-
] }),
|
|
46
|
-
n ? /* @__PURE__ */ e(i, { className: `${a}__withdrawn`, variant: l.heading4, children: n }) : /* @__PURE__ */ s(x, { children: [
|
|
47
|
-
/* @__PURE__ */ s("div", { className: `${a}__meta`, children: [
|
|
48
|
-
o ? /* @__PURE__ */ e(i, { className: `${a}__maker`, variant: l.heading3, children: o }) : null,
|
|
49
|
-
d ? /* @__PURE__ */ e(
|
|
50
|
-
i,
|
|
51
|
-
{
|
|
52
|
-
className: `${a}__title ${a}__token-fix`,
|
|
53
|
-
variant: l.heading4,
|
|
54
|
-
element: "cite",
|
|
55
|
-
children: d
|
|
56
|
-
}
|
|
57
|
-
) : null,
|
|
58
|
-
_ ? /* @__PURE__ */ e(
|
|
59
|
-
i,
|
|
60
|
-
{
|
|
61
|
-
className: `${a}__reference-number ${a}__token-fix`,
|
|
62
|
-
variant: l.heading4,
|
|
63
|
-
element: "p",
|
|
64
|
-
children: _
|
|
65
|
-
}
|
|
66
|
-
) : null,
|
|
67
|
-
c ? /* @__PURE__ */ e(
|
|
68
|
-
i,
|
|
69
|
-
{
|
|
70
|
-
className: `${a}__model ${a}__token-fix`,
|
|
71
|
-
variant: l.heading4,
|
|
72
|
-
element: "p",
|
|
73
|
-
children: c
|
|
74
|
-
}
|
|
75
|
-
) : null
|
|
76
|
-
] }),
|
|
77
|
-
t ? /* @__PURE__ */ e(P, { hasSeparators: !0, className: `${a}__estimate ${a}__section`, children: /* @__PURE__ */ e(
|
|
78
|
-
D,
|
|
7
|
+
import B from "../DetailList/DetailList.js";
|
|
8
|
+
import F from "../../components/Detail/Detail.js";
|
|
9
|
+
import I from "../../components/SeldonImage/SeldonImage.js";
|
|
10
|
+
const L = S(
|
|
11
|
+
D(
|
|
12
|
+
({
|
|
13
|
+
badgeText: p,
|
|
14
|
+
className: f,
|
|
15
|
+
children: $,
|
|
16
|
+
element: r,
|
|
17
|
+
estimate: m,
|
|
18
|
+
estimateLabelText: N = "Estimate",
|
|
19
|
+
favoriteElement: n,
|
|
20
|
+
imageAlt: g = "Brought to you by Phillips",
|
|
21
|
+
imageUrl: u = "",
|
|
22
|
+
imageSrcSet: b,
|
|
23
|
+
imageSizes: v,
|
|
24
|
+
imageLoading: j,
|
|
25
|
+
imageFetchPriority: k,
|
|
26
|
+
lotNumber: y,
|
|
27
|
+
makerText: o,
|
|
28
|
+
modelText: c,
|
|
29
|
+
referenceNumber: _,
|
|
30
|
+
titleText: d,
|
|
31
|
+
withdrawnText: t,
|
|
32
|
+
...h
|
|
33
|
+
}, P) => {
|
|
34
|
+
const { className: e, ...x } = z(h, "ObjectTile"), C = r != null ? r : "a";
|
|
35
|
+
return /* @__PURE__ */ s(C, { ...x, className: R(e, f), ...h, ref: P, children: [
|
|
36
|
+
/* @__PURE__ */ a(
|
|
37
|
+
I,
|
|
79
38
|
{
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
39
|
+
alt: g,
|
|
40
|
+
aspectRatio: "1/1",
|
|
41
|
+
className: `${e}__img`,
|
|
42
|
+
objectFit: "cover",
|
|
43
|
+
src: u,
|
|
44
|
+
srcSet: b,
|
|
45
|
+
sizes: v,
|
|
46
|
+
loading: j,
|
|
47
|
+
fetchPriority: k
|
|
84
48
|
}
|
|
85
|
-
)
|
|
86
|
-
/* @__PURE__ */
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
49
|
+
),
|
|
50
|
+
t ? null : /* @__PURE__ */ a(i, { className: `${e}__badge`, variant: l.badge, children: p }),
|
|
51
|
+
/* @__PURE__ */ s("div", { className: `${e}__lot-number-like`, children: [
|
|
52
|
+
/* @__PURE__ */ a(i, { className: `${e}__lot-number`, variant: l.heading3, element: "p", children: y }),
|
|
53
|
+
n && /* @__PURE__ */ a(n, {})
|
|
54
|
+
] }),
|
|
55
|
+
t ? /* @__PURE__ */ a(i, { className: `${e}__withdrawn`, variant: l.heading4, children: t }) : /* @__PURE__ */ s(O, { children: [
|
|
56
|
+
/* @__PURE__ */ s("div", { className: `${e}__meta`, children: [
|
|
57
|
+
o ? /* @__PURE__ */ a(i, { className: `${e}__maker`, variant: l.heading3, children: o }) : null,
|
|
58
|
+
d ? /* @__PURE__ */ a(
|
|
59
|
+
i,
|
|
60
|
+
{
|
|
61
|
+
className: `${e}__title ${e}__token-fix`,
|
|
62
|
+
variant: l.heading4,
|
|
63
|
+
element: "cite",
|
|
64
|
+
children: d
|
|
65
|
+
}
|
|
66
|
+
) : null,
|
|
67
|
+
_ ? /* @__PURE__ */ a(
|
|
68
|
+
i,
|
|
69
|
+
{
|
|
70
|
+
className: `${e}__reference-number ${e}__token-fix`,
|
|
71
|
+
variant: l.heading4,
|
|
72
|
+
element: "p",
|
|
73
|
+
children: _
|
|
74
|
+
}
|
|
75
|
+
) : null,
|
|
76
|
+
c ? /* @__PURE__ */ a(
|
|
77
|
+
i,
|
|
78
|
+
{
|
|
79
|
+
className: `${e}__model ${e}__token-fix`,
|
|
80
|
+
variant: l.heading4,
|
|
81
|
+
element: "p",
|
|
82
|
+
children: c
|
|
83
|
+
}
|
|
84
|
+
) : null
|
|
85
|
+
] }),
|
|
86
|
+
m ? /* @__PURE__ */ a(B, { hasSeparators: !0, className: `${e}__estimate ${e}__section`, children: /* @__PURE__ */ a(
|
|
87
|
+
F,
|
|
88
|
+
{
|
|
89
|
+
className: `${e}__estimate__label`,
|
|
90
|
+
label: N,
|
|
91
|
+
value: m,
|
|
92
|
+
hasWrap: !1
|
|
93
|
+
}
|
|
94
|
+
) }) : null,
|
|
95
|
+
/* @__PURE__ */ a("div", { className: `${e}__section`, children: $ })
|
|
96
|
+
] })
|
|
97
|
+
] });
|
|
98
|
+
}
|
|
99
|
+
)
|
|
90
100
|
);
|
|
91
|
-
|
|
101
|
+
L.displayName = "ObjectTile";
|
|
92
102
|
export {
|
|
93
|
-
|
|
103
|
+
L as default
|
|
94
104
|
};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { default as ObjectTile } from './ObjectTile';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
2
3
|
declare const meta: {
|
|
3
4
|
title: string;
|
|
4
|
-
component: import('react').ForwardRefExoticComponent<Omit<ObjectTileProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement
|
|
5
|
+
component: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<import('./ObjectTile').ObjectTileProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>>;
|
|
5
6
|
};
|
|
6
7
|
export default meta;
|
|
7
8
|
export declare const NoImage: {
|
|
8
|
-
(props:
|
|
9
|
+
(props: ComponentProps<typeof ObjectTile>): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
args: {
|
|
10
11
|
badgeText: string;
|
|
11
12
|
favoriteElement: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -22,7 +23,7 @@ export declare const NoImage: {
|
|
|
22
23
|
};
|
|
23
24
|
};
|
|
24
25
|
export declare const Playground: {
|
|
25
|
-
(props:
|
|
26
|
+
(props: ComponentProps<typeof ObjectTile>): import("react/jsx-runtime").JSX.Element;
|
|
26
27
|
args: {
|
|
27
28
|
badgeText: string;
|
|
28
29
|
favoriteElement: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -13,6 +13,22 @@ export interface SaleHeaderBannerProps extends ComponentProps<'div'> {
|
|
|
13
13
|
* The URL of the banner image
|
|
14
14
|
*/
|
|
15
15
|
imageSrcUrl: string;
|
|
16
|
+
/**
|
|
17
|
+
* The srcset of the banner image [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset]
|
|
18
|
+
*/
|
|
19
|
+
imageSrcSet?: string;
|
|
20
|
+
/**
|
|
21
|
+
* The sizes of the banner image [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes]
|
|
22
|
+
*/
|
|
23
|
+
imageSizes?: ComponentProps<'img'>['sizes'];
|
|
24
|
+
/**
|
|
25
|
+
* Image loading attribute. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading]
|
|
26
|
+
*/
|
|
27
|
+
imageLoading?: ComponentProps<'img'>['loading'];
|
|
28
|
+
/**
|
|
29
|
+
* Image fetch priority. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-fetchpriority]
|
|
30
|
+
*/
|
|
31
|
+
imageFetchPriority?: ComponentProps<'img'>['fetchPriority'];
|
|
16
32
|
/**
|
|
17
33
|
* Where is the auction taking place?
|
|
18
34
|
*/
|
|
@@ -1,58 +1,66 @@
|
|
|
1
|
-
import { jsxs as s, jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { getCommonProps as
|
|
4
|
-
import
|
|
1
|
+
import { jsxs as s, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as b } from "react";
|
|
3
|
+
import { getCommonProps as j } from "../../utils/index.js";
|
|
4
|
+
import H from "../../node_modules/classnames/index.js";
|
|
5
5
|
import f from "../../components/Countdown/Countdown.js";
|
|
6
|
-
import
|
|
7
|
-
import { AuctionStatus as
|
|
6
|
+
import R from "../../components/SeldonImage/SeldonImage.js";
|
|
7
|
+
import { AuctionStatus as h } from "../../types/commonTypes.js";
|
|
8
8
|
import { TextVariants as t } from "../../components/Text/types.js";
|
|
9
9
|
import o from "../../components/Text/Text.js";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
const
|
|
10
|
+
import y from "../../components/PageContentWrapper/PageContentWrapper.js";
|
|
11
|
+
import D from "../../components/Button/Button.js";
|
|
12
|
+
const F = b(
|
|
13
13
|
({
|
|
14
|
-
auctionEndTime:
|
|
15
|
-
auctionTitle:
|
|
16
|
-
imageSrcUrl:
|
|
17
|
-
|
|
14
|
+
auctionEndTime: a,
|
|
15
|
+
auctionTitle: n,
|
|
16
|
+
imageSrcUrl: N,
|
|
17
|
+
imageSrcSet: g,
|
|
18
|
+
imageSizes: v,
|
|
19
|
+
imageLoading: $,
|
|
20
|
+
imageFetchPriority: u,
|
|
21
|
+
location: B,
|
|
18
22
|
auctionState: l,
|
|
19
|
-
occurrenceInformation:
|
|
20
|
-
ctaLabel:
|
|
21
|
-
onClick:
|
|
22
|
-
children:
|
|
23
|
-
className:
|
|
24
|
-
...
|
|
25
|
-
},
|
|
26
|
-
const { className: e, ...
|
|
27
|
-
return /* @__PURE__ */ s("div", { ...
|
|
28
|
-
d &&
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
|
|
23
|
+
occurrenceInformation: S,
|
|
24
|
+
ctaLabel: w = "Register to Bid",
|
|
25
|
+
onClick: x,
|
|
26
|
+
children: k,
|
|
27
|
+
className: C,
|
|
28
|
+
...i
|
|
29
|
+
}, c) => {
|
|
30
|
+
const { className: e, ...m } = j(i, "SaleHeaderBanner"), d = l === h.live, _ = l === h.past;
|
|
31
|
+
return /* @__PURE__ */ s("div", { ...m, className: H(e, C), ...i, ref: c, children: [
|
|
32
|
+
d && a ? /* @__PURE__ */ r("div", { className: `${e}__stack__mobile-countdown`, children: /* @__PURE__ */ r(f, { endDateTime: a, showBottomBorder: !1 }) }) : null,
|
|
33
|
+
/* @__PURE__ */ r(
|
|
34
|
+
R,
|
|
31
35
|
{
|
|
32
36
|
aspectRatio: "16/9",
|
|
33
|
-
src:
|
|
34
|
-
alt: String(
|
|
37
|
+
src: N,
|
|
38
|
+
alt: String(n),
|
|
35
39
|
objectFit: "cover",
|
|
36
|
-
className: `${e}__image
|
|
40
|
+
className: `${e}__image`,
|
|
41
|
+
srcSet: g,
|
|
42
|
+
sizes: v,
|
|
43
|
+
loading: $,
|
|
44
|
+
fetchPriority: u
|
|
37
45
|
}
|
|
38
46
|
),
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
d &&
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
/* @__PURE__ */
|
|
47
|
+
/* @__PURE__ */ r(y, { className: `${e}__stack-wrapper`, ...m, ...i, ref: c, children: /* @__PURE__ */ s("div", { className: `${e}__stack`, children: [
|
|
48
|
+
d && a ? /* @__PURE__ */ r("div", { className: `${e}__stack__desktop-countdown`, children: /* @__PURE__ */ r(f, { endDateTime: a }) }) : null,
|
|
49
|
+
/* @__PURE__ */ r(o, { variant: t.title1, children: n }),
|
|
50
|
+
/* @__PURE__ */ r(o, { variant: t.string2, className: `${e}__location`, children: B }),
|
|
43
51
|
/* @__PURE__ */ s("div", { className: `${e}__occurrence-details`, children: [
|
|
44
|
-
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
/* @__PURE__ */
|
|
52
|
+
S.map(({ date: p, occurrenceLabel: P }) => /* @__PURE__ */ s("div", { className: `${e}__occurrence-details-text`, children: [
|
|
53
|
+
/* @__PURE__ */ r(o, { variant: t.string2, children: P }),
|
|
54
|
+
/* @__PURE__ */ r(o, { variant: t.string2, className: `${e}__date`, children: p })
|
|
47
55
|
] }, String(p))),
|
|
48
|
-
_ ?
|
|
56
|
+
_ ? k : null
|
|
49
57
|
] }),
|
|
50
|
-
_ ? null : /* @__PURE__ */
|
|
58
|
+
_ ? null : /* @__PURE__ */ r(D, { className: `${e}__cta`, onClick: x, children: w })
|
|
51
59
|
] }) })
|
|
52
60
|
] });
|
|
53
61
|
}
|
|
54
62
|
);
|
|
55
|
-
|
|
63
|
+
F.displayName = "SaleHeaderBanner";
|
|
56
64
|
export {
|
|
57
|
-
|
|
65
|
+
F as default
|
|
58
66
|
};
|