@sps-woodland/photo 8.51.2 → 8.52.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/README.md +1 -22
- package/lib/index.d.ts +2 -1
- package/lib/index.js +194 -20
- package/lib/index.umd.cjs +10 -10
- package/lib/photo/Photo.css.d.ts +11 -0
- package/lib/photo/Photo.d.ts +10 -0
- package/lib/photo-carousel/PhotoCarousel.css.d.ts +12 -0
- package/lib/photo-carousel/PhotoCarousel.d.ts +3 -0
- package/lib/style.css +1 -1
- package/package.json +12 -9
- package/vite.config.mjs +14 -5
package/README.md
CHANGED
|
@@ -1,24 +1,3 @@
|
|
|
1
1
|
## [@sps-woodland/photo](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/photo#readme)
|
|
2
2
|
|
|
3
|
-
SPS Woodland Design System photo component
|
|
4
|
-
|
|
5
|
-
The source for `Photo` and `PhotoCarousel` lives in `@sps-woodland/core`. This wrapper still
|
|
6
|
-
ships and re-exports from core, so existing imports keep working unchanged.
|
|
7
|
-
|
|
8
|
-
```ts
|
|
9
|
-
// Preferred (core, tree-shakes per component)
|
|
10
|
-
import { Photo, PhotoCarousel } from "@sps-woodland/core/photo";
|
|
11
|
-
import "@sps-woodland/core/photo/style.css";
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
`PhotoCarousel` uses `selectChildren({ type: Photo })` internally, so it relies on
|
|
15
|
-
`Photo` and `PhotoCarousel` sharing the same function references. Import both from the
|
|
16
|
-
`@sps-woodland/core/photo` barrel together — don't mix the barrel with the flat
|
|
17
|
-
`@sps-woodland/core/photo-carousel` subpath at the same call site (see Gotcha #11 in
|
|
18
|
-
the mono-package migration guide).
|
|
19
|
-
|
|
20
|
-
```ts
|
|
21
|
-
// Still supported, re-exports from @sps-woodland/core
|
|
22
|
-
import { Photo, PhotoCarousel } from "@sps-woodland/photo";
|
|
23
|
-
import "@sps-woodland/photo/style.css";
|
|
24
|
-
```
|
|
3
|
+
SPS Woodland Design System photo component
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,16 +1,188 @@
|
|
|
1
|
-
import { Photo as t, PhotoCarousel as a } from "@sps-woodland/core/photo";
|
|
2
|
-
export * from "@sps-woodland/core/photo";
|
|
3
1
|
import * as e from "react";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
import { Metadata as F, cl as u, Icon as W, selectChildren as A } from "@sps-woodland/core";
|
|
3
|
+
import { grid as f } from "@sps-woodland/tokens";
|
|
4
|
+
import { SpsButton as w } from "@spscommerce/ds-react";
|
|
5
|
+
import { SpsIcon as C, ButtonKind as P } from "@spscommerce/ds-shared";
|
|
6
|
+
import { code as m } from "@spscommerce/utils";
|
|
7
|
+
function B(o, a, r) {
|
|
8
|
+
return a in o ? Object.defineProperty(o, a, {
|
|
9
|
+
value: r,
|
|
10
|
+
enumerable: !0,
|
|
11
|
+
configurable: !0,
|
|
12
|
+
writable: !0
|
|
13
|
+
}) : o[a] = r, o;
|
|
14
|
+
}
|
|
15
|
+
function N(o, a) {
|
|
16
|
+
var r = Object.keys(o);
|
|
17
|
+
if (Object.getOwnPropertySymbols) {
|
|
18
|
+
var t = Object.getOwnPropertySymbols(o);
|
|
19
|
+
a && (t = t.filter(function(s) {
|
|
20
|
+
return Object.getOwnPropertyDescriptor(o, s).enumerable;
|
|
21
|
+
})), r.push.apply(r, t);
|
|
22
|
+
}
|
|
23
|
+
return r;
|
|
24
|
+
}
|
|
25
|
+
function b(o) {
|
|
26
|
+
for (var a = 1; a < arguments.length; a++) {
|
|
27
|
+
var r = arguments[a] != null ? arguments[a] : {};
|
|
28
|
+
a % 2 ? N(Object(r), !0).forEach(function(t) {
|
|
29
|
+
B(o, t, r[t]);
|
|
30
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(r)) : N(Object(r)).forEach(function(t) {
|
|
31
|
+
Object.defineProperty(o, t, Object.getOwnPropertyDescriptor(r, t));
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
return o;
|
|
35
|
+
}
|
|
36
|
+
var L = (o, a, r) => {
|
|
37
|
+
for (var t of Object.keys(o)) {
|
|
38
|
+
var s;
|
|
39
|
+
if (o[t] !== ((s = a[t]) !== null && s !== void 0 ? s : r[t]))
|
|
40
|
+
return !1;
|
|
41
|
+
}
|
|
42
|
+
return !0;
|
|
43
|
+
}, g = (o) => (a) => {
|
|
44
|
+
var r = o.defaultClassName, t = b(b({}, o.defaultVariants), a);
|
|
45
|
+
for (var s in t) {
|
|
46
|
+
var d, p = (d = t[s]) !== null && d !== void 0 ? d : o.defaultVariants[s];
|
|
47
|
+
if (p != null) {
|
|
48
|
+
var n = p;
|
|
49
|
+
typeof n == "boolean" && (n = n === !0 ? "true" : "false");
|
|
50
|
+
var i = (
|
|
51
|
+
// @ts-expect-error
|
|
52
|
+
o.variantClassNames[s][n]
|
|
53
|
+
);
|
|
54
|
+
i && (r += " " + i);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
for (var [l, c] of o.compoundVariants)
|
|
58
|
+
L(l, t, o.defaultVariants) && (r += " " + c);
|
|
59
|
+
return r;
|
|
60
|
+
}, M = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_52_0__hash_dons240", variantClassNames: { placeholder: { true: "pkg_sps-woodland_photo__version_8_52_0__hash_dons241", false: "pkg_sps-woodland_photo__version_8_52_0__hash_dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] }), z = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_52_0__hash_dons243", variantClassNames: { mode: { fill: "pkg_sps-woodland_photo__version_8_52_0__hash_dons244", fit: "pkg_sps-woodland_photo__version_8_52_0__hash_dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), T = "pkg_sps-woodland_photo__version_8_52_0__hash_dons246";
|
|
61
|
+
function v({
|
|
62
|
+
className: o,
|
|
63
|
+
src: a,
|
|
64
|
+
altText: r,
|
|
65
|
+
mode: t = "fill",
|
|
66
|
+
placeholderIcon: s = "photo",
|
|
67
|
+
...d
|
|
68
|
+
}) {
|
|
69
|
+
const p = e.useRef(null), n = e.useRef(null), i = e.useRef(null), l = e.useRef(null), [c, O] = e.useState(), [x, R] = e.useState(!1);
|
|
70
|
+
e.useEffect(() => {
|
|
71
|
+
n.current && (i.current && (window.clearInterval(i.current), i.current = null), i.current = window.setInterval(() => {
|
|
72
|
+
if (n.current) {
|
|
73
|
+
const h = n.current.getBoundingClientRect();
|
|
74
|
+
if (h.height) {
|
|
75
|
+
i.current && (window.clearInterval(i.current), i.current = null);
|
|
76
|
+
let _ = h.width / h.height > 1;
|
|
77
|
+
R(_ === (t === "fit"));
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}, 1e3 / 60));
|
|
81
|
+
}, [p.current, n.current, a]), e.useEffect(() => {
|
|
82
|
+
l.current && (window.clearInterval(l.current), l.current = null), l.current = window.setInterval(() => {
|
|
83
|
+
if (p.current) {
|
|
84
|
+
const h = p.current.getBoundingClientRect();
|
|
85
|
+
h.width && (j(h.width), l.current && (window.clearInterval(l.current), l.current = null));
|
|
86
|
+
}
|
|
87
|
+
}, 1e3 / 60);
|
|
88
|
+
}, [p.current]);
|
|
89
|
+
function j(h) {
|
|
90
|
+
if (h) {
|
|
91
|
+
const _ = document?.body?.parentElement?.style?.fontSize || "16px", V = Number(_.substring(0, _.length - 2));
|
|
92
|
+
O(h / V);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
function S() {
|
|
96
|
+
if (typeof c < "u")
|
|
97
|
+
return c * 0.05;
|
|
98
|
+
}
|
|
99
|
+
function k() {
|
|
100
|
+
if (typeof c < "u")
|
|
101
|
+
return 0.75 * c;
|
|
102
|
+
}
|
|
103
|
+
return /* @__PURE__ */ e.createElement(
|
|
104
|
+
"div",
|
|
105
|
+
{
|
|
106
|
+
ref: p,
|
|
107
|
+
className: u(M({ placeholder: !a }), o),
|
|
108
|
+
style: {
|
|
109
|
+
width: `${c}` && `${c}rem`,
|
|
110
|
+
fontSize: `${S()}rem`,
|
|
111
|
+
height: `${k()}rem`
|
|
112
|
+
},
|
|
113
|
+
...d
|
|
114
|
+
},
|
|
115
|
+
a ? c ? /* @__PURE__ */ e.createElement(
|
|
116
|
+
"img",
|
|
117
|
+
{
|
|
118
|
+
className: z({ mode: x ? "fit" : "fill" }),
|
|
119
|
+
ref: n,
|
|
120
|
+
src: a,
|
|
121
|
+
alt: r
|
|
122
|
+
}
|
|
123
|
+
) : /* @__PURE__ */ e.createElement("span", null) : /* @__PURE__ */ e.createElement(W, { className: T, icon: s })
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
F.set(v, {
|
|
127
|
+
name: "Photo",
|
|
128
|
+
props: {
|
|
129
|
+
src: "string",
|
|
130
|
+
altText: "string",
|
|
131
|
+
mode: {
|
|
132
|
+
type: '"fill" | "fit"',
|
|
133
|
+
default: '"fill"'
|
|
134
|
+
},
|
|
135
|
+
placeholderIcon: "IconName"
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
var I = "pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s0", E = "pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s1", D = "pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s2", G = "pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s3", H = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s4", variantClassNames: { selected: { true: "pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s5", false: "pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
|
|
139
|
+
function y({
|
|
140
|
+
children: o,
|
|
141
|
+
className: a,
|
|
142
|
+
...r
|
|
143
|
+
}) {
|
|
144
|
+
const [t] = A(o, [{ type: v }]), [s, d] = e.useState(0);
|
|
145
|
+
function p() {
|
|
146
|
+
s + 1 === t.length ? d(0) : d(s + 1);
|
|
147
|
+
}
|
|
148
|
+
function n() {
|
|
149
|
+
d(s === 0 ? t.length - 1 : s - 1);
|
|
150
|
+
}
|
|
151
|
+
return /* @__PURE__ */ e.createElement("div", { className: f.root, ...r }, /* @__PURE__ */ e.createElement("div", { className: u(I) }, /* @__PURE__ */ e.createElement("div", { className: u(E) }, /* @__PURE__ */ e.createElement(
|
|
152
|
+
w,
|
|
153
|
+
{
|
|
154
|
+
tabIndex: 0,
|
|
155
|
+
kind: P.ICON,
|
|
156
|
+
icon: C.ARROW_LEFT_CIRCLE,
|
|
157
|
+
onClick: n
|
|
158
|
+
}
|
|
159
|
+
))), /* @__PURE__ */ e.createElement("div", { className: f[10] }, /* @__PURE__ */ e.createElement("div", { className: u(G, f[12]) }, t[s]), /* @__PURE__ */ e.createElement("div", { className: u(D, f[12]) }, t.map((i, l) => /* @__PURE__ */ e.createElement(
|
|
160
|
+
"button",
|
|
161
|
+
{
|
|
162
|
+
tabIndex: 0,
|
|
163
|
+
className: u(H({ selected: l === s })),
|
|
164
|
+
onClick: () => d(l)
|
|
165
|
+
},
|
|
166
|
+
i
|
|
167
|
+
)))), /* @__PURE__ */ e.createElement("div", { className: u(I) }, /* @__PURE__ */ e.createElement("div", { className: u(E) }, /* @__PURE__ */ e.createElement(
|
|
168
|
+
w,
|
|
169
|
+
{
|
|
170
|
+
tabIndex: 0,
|
|
171
|
+
kind: P.ICON,
|
|
172
|
+
icon: C.ARROW_RIGHT_CIRCLE,
|
|
173
|
+
onClick: p
|
|
174
|
+
}
|
|
175
|
+
))));
|
|
176
|
+
}
|
|
177
|
+
const K = {
|
|
178
|
+
components: [v, y],
|
|
7
179
|
examples: {
|
|
8
180
|
sizing: {
|
|
9
181
|
label: "Sizing",
|
|
10
182
|
description: "Photos are block elements, so a photo fills its container's width unless an explicit width is set. It is always a 4:3 aspect ratio. In this example, photos have been placed in cards which have different widths in the 12 column grid.",
|
|
11
183
|
examples: {
|
|
12
184
|
basic: {
|
|
13
|
-
react:
|
|
185
|
+
react: m`
|
|
14
186
|
import { Photo } from "@sps-woodland/photo";
|
|
15
187
|
import { Card } from "@sps-woodland/cards";
|
|
16
188
|
|
|
@@ -45,7 +217,7 @@ const r = {
|
|
|
45
217
|
examples: {
|
|
46
218
|
landscape: {
|
|
47
219
|
description: "Landscape oriented photo",
|
|
48
|
-
react:
|
|
220
|
+
react: m`
|
|
49
221
|
import { Photo } from "@sps-woodland/photo";
|
|
50
222
|
import { Card } from "@sps-woodland/cards";
|
|
51
223
|
|
|
@@ -69,7 +241,7 @@ const r = {
|
|
|
69
241
|
},
|
|
70
242
|
portrait: {
|
|
71
243
|
description: "Portrait oriented photo ",
|
|
72
|
-
react:
|
|
244
|
+
react: m`
|
|
73
245
|
import { Photo } from "@sps-woodland/photo";
|
|
74
246
|
import { Card } from "@sps-woodland/cards";
|
|
75
247
|
|
|
@@ -99,7 +271,7 @@ const r = {
|
|
|
99
271
|
examples: {
|
|
100
272
|
general: {
|
|
101
273
|
description: "General Photo",
|
|
102
|
-
react:
|
|
274
|
+
react: m`
|
|
103
275
|
import { Photo } from "@sps-woodland/photo";
|
|
104
276
|
|
|
105
277
|
function Component () {
|
|
@@ -115,7 +287,7 @@ const r = {
|
|
|
115
287
|
},
|
|
116
288
|
photoAlt: {
|
|
117
289
|
description: "Photo Alt",
|
|
118
|
-
react:
|
|
290
|
+
react: m`
|
|
119
291
|
import { Photo } from "@sps-woodland/photo";
|
|
120
292
|
|
|
121
293
|
function Component () {
|
|
@@ -131,7 +303,7 @@ const r = {
|
|
|
131
303
|
},
|
|
132
304
|
user: {
|
|
133
305
|
description: "User / Single Person",
|
|
134
|
-
react:
|
|
306
|
+
react: m`
|
|
135
307
|
import { Photo } from "@sps-woodland/photo";
|
|
136
308
|
|
|
137
309
|
function Component () {
|
|
@@ -147,7 +319,7 @@ const r = {
|
|
|
147
319
|
},
|
|
148
320
|
group: {
|
|
149
321
|
description: "Group / Multiple People",
|
|
150
|
-
react:
|
|
322
|
+
react: m`
|
|
151
323
|
import { Photo } from "@sps-woodland/photo";
|
|
152
324
|
|
|
153
325
|
function Component () {
|
|
@@ -163,7 +335,7 @@ const r = {
|
|
|
163
335
|
},
|
|
164
336
|
company: {
|
|
165
337
|
description: "Company / Building",
|
|
166
|
-
react:
|
|
338
|
+
react: m`
|
|
167
339
|
import { Photo } from "@sps-woodland/photo";
|
|
168
340
|
|
|
169
341
|
function Component () {
|
|
@@ -180,8 +352,8 @@ const r = {
|
|
|
180
352
|
}
|
|
181
353
|
}
|
|
182
354
|
}
|
|
183
|
-
},
|
|
184
|
-
components: [
|
|
355
|
+
}, U = {
|
|
356
|
+
components: [v, y],
|
|
185
357
|
examples: {
|
|
186
358
|
carousel: {
|
|
187
359
|
label: "Media Carousel",
|
|
@@ -189,7 +361,7 @@ const r = {
|
|
|
189
361
|
examples: {
|
|
190
362
|
general: {
|
|
191
363
|
description: "",
|
|
192
|
-
react:
|
|
364
|
+
react: m`
|
|
193
365
|
import { PhotoCarousel, Photo } from "@sps-woodland/photo";
|
|
194
366
|
|
|
195
367
|
function Component () {
|
|
@@ -211,10 +383,12 @@ const r = {
|
|
|
211
383
|
}
|
|
212
384
|
}
|
|
213
385
|
}
|
|
214
|
-
},
|
|
215
|
-
"Media Carousel":
|
|
216
|
-
Photos:
|
|
386
|
+
}, Z = {
|
|
387
|
+
"Media Carousel": U,
|
|
388
|
+
Photos: K
|
|
217
389
|
};
|
|
218
390
|
export {
|
|
219
|
-
|
|
391
|
+
Z as MANIFEST,
|
|
392
|
+
v as Photo,
|
|
393
|
+
y as PhotoCarousel
|
|
220
394
|
};
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(n,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("react"),require("@sps-woodland/core"),require("@sps-woodland/tokens"),require("@spscommerce/ds-react"),require("@spscommerce/ds-shared"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@sps-woodland/tokens","@spscommerce/ds-react","@spscommerce/ds-shared","@spscommerce/utils"],_):(n=typeof globalThis<"u"?globalThis:n||self,_(n.Photo={},n.React,n.core,n.tokens,n.dsReact,n.dsShared,n.utils))})(this,(function(n,_,c,g,b,w,h){"use strict";function j(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const o=j(_);function x(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function I(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),t.push.apply(t,r)}return t}function E(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?I(Object(t),!0).forEach(function(r){x(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):I(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var S=(e,a,t)=>{for(var r of Object.keys(e)){var s;if(e[r]!==((s=a[r])!==null&&s!==void 0?s:t[r]))return!1}return!0},C=e=>a=>{var t=e.defaultClassName,r=E(E({},e.defaultVariants),a);for(var s in r){var p,u=(p=r[s])!==null&&p!==void 0?p:e.defaultVariants[s];if(u!=null){var i=u;typeof i=="boolean"&&(i=i===!0?"true":"false");var d=e.variantClassNames[s][i];d&&(t+=" "+d)}}for(var[l,m]of e.compoundVariants)S(l,r,e.defaultVariants)&&(t+=" "+m);return t},R=C({defaultClassName:"pkg_sps-woodland_photo__version_8_52_0__hash_dons240",variantClassNames:{placeholder:{true:"pkg_sps-woodland_photo__version_8_52_0__hash_dons241",false:"pkg_sps-woodland_photo__version_8_52_0__hash_dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]}),k=C({defaultClassName:"pkg_sps-woodland_photo__version_8_52_0__hash_dons243",variantClassNames:{mode:{fill:"pkg_sps-woodland_photo__version_8_52_0__hash_dons244",fit:"pkg_sps-woodland_photo__version_8_52_0__hash_dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),M="pkg_sps-woodland_photo__version_8_52_0__hash_dons246";function v({className:e,src:a,altText:t,mode:r="fill",placeholderIcon:s="photo",...p}){const u=o.useRef(null),i=o.useRef(null),d=o.useRef(null),l=o.useRef(null),[m,W]=o.useState(),[z,D]=o.useState(!1);o.useEffect(()=>{i.current&&(d.current&&(window.clearInterval(d.current),d.current=null),d.current=window.setInterval(()=>{if(i.current){const f=i.current.getBoundingClientRect();if(f.height){d.current&&(window.clearInterval(d.current),d.current=null);let P=f.width/f.height>1;D(P===(r==="fit"))}}},1e3/60))},[u.current,i.current,a]),o.useEffect(()=>{l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(u.current){const f=u.current.getBoundingClientRect();f.width&&(L(f.width),l.current&&(window.clearInterval(l.current),l.current=null))}},1e3/60)},[u.current]);function L(f){if(f){const P=document?.body?.parentElement?.style?.fontSize||"16px",K=Number(P.substring(0,P.length-2));W(f/K)}}function q(){if(typeof m<"u")return m*.05}function G(){if(typeof m<"u")return .75*m}return o.createElement("div",{ref:u,className:c.cl(R({placeholder:!a}),e),style:{width:`${m}`&&`${m}rem`,fontSize:`${q()}rem`,height:`${G()}rem`},...p},a?m?o.createElement("img",{className:k({mode:z?"fit":"fill"}),ref:i,src:a,alt:t}):o.createElement("span",null):o.createElement(c.Icon,{className:M,icon:s}))}c.Metadata.set(v,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});var y="pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s0",O="pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s1",T="pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s2",F="pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s3",V=C({defaultClassName:"pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s4",variantClassNames:{selected:{true:"pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s5",false:"pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s6"}},defaultVariants:{selected:!1},compoundVariants:[]});function N({children:e,className:a,...t}){const[r]=c.selectChildren(e,[{type:v}]),[s,p]=o.useState(0);function u(){s+1===r.length?p(0):p(s+1)}function i(){p(s===0?r.length-1:s-1)}return o.createElement("div",{className:g.grid.root,...t},o.createElement("div",{className:c.cl(y)},o.createElement("div",{className:c.cl(O)},o.createElement(b.SpsButton,{tabIndex:0,kind:w.ButtonKind.ICON,icon:w.SpsIcon.ARROW_LEFT_CIRCLE,onClick:i}))),o.createElement("div",{className:g.grid[10]},o.createElement("div",{className:c.cl(F,g.grid[12])},r[s]),o.createElement("div",{className:c.cl(T,g.grid[12])},r.map((d,l)=>o.createElement("button",{tabIndex:0,className:c.cl(V({selected:l===s})),onClick:()=>p(l)},d)))),o.createElement("div",{className:c.cl(y)},o.createElement("div",{className:c.cl(O)},o.createElement(b.SpsButton,{tabIndex:0,kind:w.ButtonKind.ICON,icon:w.SpsIcon.ARROW_RIGHT_CIRCLE,onClick:u}))))}const A={components:[v,N],examples:{sizing:{label:"Sizing",description:"Photos are block elements, so a photo fills its container's width unless an explicit width is set. It is always a 4:3 aspect ratio. In this example, photos have been placed in cards which have different widths in the 12 column grid.",examples:{basic:{react:h.code`
|
|
2
2
|
import { Photo } from "@sps-woodland/photo";
|
|
3
3
|
import { Card } from "@sps-woodland/cards";
|
|
4
4
|
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
</div>
|
|
24
24
|
)
|
|
25
25
|
}
|
|
26
|
-
`}}},displayMode:{label:"Fill vs. Fit",description:()=>
|
|
26
|
+
`}}},displayMode:{label:"Fill vs. Fit",description:()=>o.createElement("p",null,"There are two display modes available:",o.createElement("ul",null,o.createElement("li",null,o.createElement("b",null,'"fill"')," fills the entire 4:3 container, cropping off any excess portions of the image."),o.createElement("li",null,o.createElement("b",null,'"fit"')," fits the entire image into the container, leaving any excess portions of the container blank."))),examples:{landscape:{description:"Landscape oriented photo",react:h.code`
|
|
27
27
|
import { Photo } from "@sps-woodland/photo";
|
|
28
28
|
import { Card } from "@sps-woodland/cards";
|
|
29
29
|
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
</div>
|
|
44
44
|
)
|
|
45
45
|
}
|
|
46
|
-
`},portrait:{description:"Portrait oriented photo ",react:
|
|
46
|
+
`},portrait:{description:"Portrait oriented photo ",react:h.code`
|
|
47
47
|
import { Photo } from "@sps-woodland/photo";
|
|
48
48
|
import { Card } from "@sps-woodland/cards";
|
|
49
49
|
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
)
|
|
65
65
|
}
|
|
66
|
-
`}}},placeholder:{label:"Placeholders",description:"When an image is not provided for a particular use case (such as a user avatar, a company photo, item image, etc.), a placeholder should be shown in its place. The placeholder's icon, selected from our SPS icon set, should represent the type of image it is substituting for.",examples:{general:{description:"General Photo",react:
|
|
66
|
+
`}}},placeholder:{label:"Placeholders",description:"When an image is not provided for a particular use case (such as a user avatar, a company photo, item image, etc.), a placeholder should be shown in its place. The placeholder's icon, selected from our SPS icon set, should represent the type of image it is substituting for.",examples:{general:{description:"General Photo",react:h.code`
|
|
67
67
|
import { Photo } from "@sps-woodland/photo";
|
|
68
68
|
|
|
69
69
|
function Component () {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
</div>
|
|
76
76
|
)
|
|
77
77
|
}
|
|
78
|
-
`},photoAlt:{description:"Photo Alt",react:
|
|
78
|
+
`},photoAlt:{description:"Photo Alt",react:h.code`
|
|
79
79
|
import { Photo } from "@sps-woodland/photo";
|
|
80
80
|
|
|
81
81
|
function Component () {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
</div>
|
|
88
88
|
)
|
|
89
89
|
}
|
|
90
|
-
`},user:{description:"User / Single Person",react:
|
|
90
|
+
`},user:{description:"User / Single Person",react:h.code`
|
|
91
91
|
import { Photo } from "@sps-woodland/photo";
|
|
92
92
|
|
|
93
93
|
function Component () {
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
</div>
|
|
100
100
|
)
|
|
101
101
|
}
|
|
102
|
-
`},group:{description:"Group / Multiple People",react:
|
|
102
|
+
`},group:{description:"Group / Multiple People",react:h.code`
|
|
103
103
|
import { Photo } from "@sps-woodland/photo";
|
|
104
104
|
|
|
105
105
|
function Component () {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
</div>
|
|
112
112
|
)
|
|
113
113
|
}
|
|
114
|
-
`},company:{description:"Company / Building",react:
|
|
114
|
+
`},company:{description:"Company / Building",react:h.code`
|
|
115
115
|
import { Photo } from "@sps-woodland/photo";
|
|
116
116
|
|
|
117
117
|
function Component () {
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
</div>
|
|
124
124
|
)
|
|
125
125
|
}
|
|
126
|
-
`}}}}},
|
|
126
|
+
`}}}}},B={"Media Carousel":{components:[v,N],examples:{carousel:{label:"Media Carousel",description:"",examples:{general:{description:"",react:h.code`
|
|
127
127
|
import { PhotoCarousel, Photo } from "@sps-woodland/photo";
|
|
128
128
|
|
|
129
129
|
function Component () {
|
|
@@ -140,4 +140,4 @@
|
|
|
140
140
|
</div>
|
|
141
141
|
)
|
|
142
142
|
}
|
|
143
|
-
`}}}}},Photos:
|
|
143
|
+
`}}}}},Photos:A};n.MANIFEST=B,n.Photo=v,n.PhotoCarousel=N,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Tokens } from "@sps-woodland/tokens";
|
|
2
|
+
import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
|
|
3
|
+
export type PhotoDisplayMode = keyof typeof Tokens.component.photo["display-mode"];
|
|
4
|
+
interface PhotoVariantDefinition extends VariantDefinitions {
|
|
5
|
+
mode: RecipeVariant<PhotoDisplayMode>;
|
|
6
|
+
placeholder: BooleanRecipeVariant;
|
|
7
|
+
}
|
|
8
|
+
export declare const photoWrapper: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<PhotoVariantDefinition, "placeholder">>;
|
|
9
|
+
export declare const photo: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<PhotoVariantDefinition, "mode">>;
|
|
10
|
+
export declare const photoPlaceholder: string;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ComponentProps } from "@sps-woodland/core";
|
|
3
|
+
import { IconName } from "@sps-woodland/tokens";
|
|
4
|
+
import type { PhotoDisplayMode } from "./Photo.css";
|
|
5
|
+
export declare function Photo({ className, src, altText, mode, placeholderIcon, ...rest }: ComponentProps<{
|
|
6
|
+
src?: string;
|
|
7
|
+
altText?: string;
|
|
8
|
+
mode?: PhotoDisplayMode;
|
|
9
|
+
placeholderIcon?: IconName;
|
|
10
|
+
}, HTMLDivElement>): React.ReactElement;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export declare const photoCarouselButtonWrapper: string;
|
|
2
|
+
export declare const photoCarouselButton: string;
|
|
3
|
+
export declare const photoCarouselList: string;
|
|
4
|
+
export declare const photoCarouselDisplayPhoto: string;
|
|
5
|
+
export declare const photoCarouselListPhoto: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
|
|
6
|
+
selected: {
|
|
7
|
+
true: {};
|
|
8
|
+
false: {
|
|
9
|
+
opacity: number;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
}>;
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_photo__version_8_52_0__hash_dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.pkg_sps-woodland_photo__version_8_52_0__hash_dons241{background:#f3f4f4;box-shadow:inset .0625rem 0 #d2d4d4,inset -.0625rem 0 #d2d4d4,inset 0 .0625rem #d2d4d4,inset 0 -.0625rem #d2d4d4,inset 1em 0 #fff,inset -1em 0 #fff,inset 0 1em #fff,inset 0 -1em #fff}.pkg_sps-woodland_photo__version_8_52_0__hash_dons243{visibility:hidden}.pkg_sps-woodland_photo__version_8_52_0__hash_dons244{height:100%;visibility:visible;width:auto}.pkg_sps-woodland_photo__version_8_52_0__hash_dons245{height:auto;visibility:visible;width:100%}.pkg_sps-woodland_photo__version_8_52_0__hash_dons246{font-size:6em;text-align:center;color:#717779}.pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s0{display:table;float:right}.pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s1{display:table-cell;vertical-align:middle}.pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.pkg_sps-woodland_photo__version_8_52_0__hash_i6pp7s6{opacity:.4}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/photo",
|
|
3
3
|
"description": "SPS Woodland Design System photo component",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.52.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/photo",
|
|
@@ -17,10 +17,6 @@
|
|
|
17
17
|
"import": "./lib/index.js",
|
|
18
18
|
"default": "./lib/index.js"
|
|
19
19
|
},
|
|
20
|
-
"./style.css": {
|
|
21
|
-
"import": "./lib/style.css",
|
|
22
|
-
"require": "./lib/style.css"
|
|
23
|
-
},
|
|
24
20
|
"./lib/style.css": {
|
|
25
21
|
"import": "./lib/style.css",
|
|
26
22
|
"require": "./lib/style.css"
|
|
@@ -33,19 +29,26 @@
|
|
|
33
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
34
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
35
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
36
|
-
"@sps-woodland/core": "8.
|
|
32
|
+
"@sps-woodland/core": "8.52.0",
|
|
33
|
+
"@sps-woodland/tokens": "8.52.0",
|
|
34
|
+
"@spscommerce/ds-react": "8.52.0",
|
|
35
|
+
"@spscommerce/ds-shared": "8.52.0"
|
|
37
36
|
},
|
|
38
37
|
"devDependencies": {
|
|
39
38
|
"@spscommerce/utils": "9.0.3",
|
|
39
|
+
"@vanilla-extract/css": "1.17.4",
|
|
40
|
+
"@vanilla-extract/recipes": "0.2.5",
|
|
40
41
|
"react": "16.14.0",
|
|
41
42
|
"react-dom": "16.14.0",
|
|
42
|
-
"@sps-woodland/core": "8.
|
|
43
|
+
"@sps-woodland/core": "8.52.0",
|
|
44
|
+
"@sps-woodland/tokens": "8.52.0",
|
|
45
|
+
"@spscommerce/ds-react": "8.52.0",
|
|
46
|
+
"@spscommerce/ds-shared": "8.52.0"
|
|
43
47
|
},
|
|
44
48
|
"scripts": {
|
|
45
|
-
"build": "pnpm run build:js && pnpm run build:types
|
|
49
|
+
"build": "pnpm run build:js && pnpm run build:types",
|
|
46
50
|
"build:js": "vite build",
|
|
47
51
|
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
|
|
48
|
-
"build:css": "cp ../core/lib/photo/style.css lib/style.css 2>/dev/null || echo 'photo style.css not found, skipping'",
|
|
49
52
|
"watch": "vite build --watch",
|
|
50
53
|
"clean": "git clean -fdX",
|
|
51
54
|
"pub": "node ../../../scripts/publish-package.mjs"
|
package/vite.config.mjs
CHANGED
|
@@ -1,22 +1,31 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
+
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
2
3
|
import { defineConfig } from "vite";
|
|
4
|
+
import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
|
|
3
5
|
import pkg from "./package.json";
|
|
4
6
|
|
|
7
|
+
const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
|
|
8
|
+
|
|
5
9
|
export default defineConfig({
|
|
10
|
+
plugins: [
|
|
11
|
+
vanillaExtractPlugin(
|
|
12
|
+
getVanillaExtractPluginProps({
|
|
13
|
+
packageName: pkg.name,
|
|
14
|
+
packageVersion,
|
|
15
|
+
})
|
|
16
|
+
),
|
|
17
|
+
],
|
|
6
18
|
build: {
|
|
7
19
|
lib: {
|
|
8
20
|
entry: path.resolve(__dirname, "src/index.ts"),
|
|
9
21
|
name: "Photo",
|
|
10
22
|
fileName: "index",
|
|
23
|
+
cssFileName: "style",
|
|
11
24
|
},
|
|
12
25
|
outDir: path.resolve(__dirname, "./lib"),
|
|
13
26
|
emptyOutDir: false,
|
|
14
27
|
rollupOptions: {
|
|
15
|
-
|
|
16
|
-
external: (id) => {
|
|
17
|
-
const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
|
|
18
|
-
return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
|
|
19
|
-
},
|
|
28
|
+
external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
|
|
20
29
|
},
|
|
21
30
|
},
|
|
22
31
|
});
|