@sps-woodland/photo 7.17.13 → 7.19.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.
Files changed (9) hide show
  1. package/lib/{index.es.js → index.js} +102 -102
  2. package/lib/index.umd.cjs +143 -0
  3. package/lib/style.css +1 -1
  4. package/package.json +14 -14
  5. package/sps-woodland-photo-7.19.0.tgz +0 -0
  6. package/vite.config.js +13 -4
  7. package/lib/Photo.css.d.ts +0 -11
  8. package/lib/Photo.d.ts +0 -10
  9. package/lib/index.cjs.js +0 -143
package/lib/{index.es.js → index.js} RENAMED
@@ -1,127 +1,127 @@
1
1
  import * as e from "react";
2
- import { Metadata as B, cl as h, Icon as L, selectChildren as z } from "@sps-woodland/core";
3
- import { grid as v } from "@sps-woodland/tokens";
4
- import { SpsButton as b } from "@spscommerce/ds-react";
5
- import { ButtonKind as I, SpsIcon as E } from "@spscommerce/ds-shared";
6
- import { code as u } from "@spscommerce/utils";
7
- function T(t, a, r) {
8
- return a in t ? Object.defineProperty(t, a, {
2
+ import { Metadata as A, cl as u, Icon as B, selectChildren as L } from "@sps-woodland/core";
3
+ import { grid as f } from "@sps-woodland/tokens";
4
+ import { SpsButton as N } from "@spscommerce/ds-react";
5
+ import { ButtonKind as b, SpsIcon as I } from "@spscommerce/ds-shared";
6
+ import { code as m } from "@spscommerce/utils";
7
+ function z(o, a, r) {
8
+ return a in o ? Object.defineProperty(o, a, {
9
9
  value: r,
10
10
  enumerable: !0,
11
11
  configurable: !0,
12
12
  writable: !0
13
- }) : t[a] = r, t;
13
+ }) : o[a] = r, o;
14
14
  }
15
- function y(t, a) {
16
- var r = Object.keys(t);
15
+ function E(o, a) {
16
+ var r = Object.keys(o);
17
17
  if (Object.getOwnPropertySymbols) {
18
- var o = Object.getOwnPropertySymbols(t);
19
- a && (o = o.filter(function(n) {
20
- return Object.getOwnPropertyDescriptor(t, n).enumerable;
21
- })), r.push.apply(r, o);
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
22
  }
23
23
  return r;
24
24
  }
25
- function O(t) {
25
+ function y(o) {
26
26
  for (var a = 1; a < arguments.length; a++) {
27
27
  var r = arguments[a] != null ? arguments[a] : {};
28
- a % 2 ? y(Object(r), !0).forEach(function(o) {
29
- T(t, o, r[o]);
30
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(r)) : y(Object(r)).forEach(function(o) {
31
- Object.defineProperty(t, o, Object.getOwnPropertyDescriptor(r, o));
28
+ a % 2 ? E(Object(r), !0).forEach(function(t) {
29
+ z(o, t, r[t]);
30
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(r)) : E(Object(r)).forEach(function(t) {
31
+ Object.defineProperty(o, t, Object.getOwnPropertyDescriptor(r, t));
32
32
  });
33
33
  }
34
- return t;
34
+ return o;
35
35
  }
36
- var D = (t, a, r) => {
37
- for (var o of Object.keys(t)) {
38
- var n;
39
- if (t[o] !== ((n = a[o]) !== null && n !== void 0 ? n : r[o]))
36
+ var T = (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
40
  return !1;
41
41
  }
42
42
  return !0;
43
- }, g = (t) => (a) => {
44
- var r = t.defaultClassName, o = O(O({}, t.defaultVariants), a);
45
- for (var n in o) {
46
- var d, c = (d = o[n]) !== null && d !== void 0 ? d : t.defaultVariants[n];
47
- if (c != null) {
48
- var s = c;
49
- typeof s == "boolean" && (s = s === !0 ? "true" : "false");
50
- var i = t.variantClassNames[n][s];
43
+ }, v = (o) => (a) => {
44
+ var r = o.defaultClassName, t = y(y({}, 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 = o.variantClassNames[s][n];
51
51
  i && (r += " " + i);
52
52
  }
53
53
  }
54
- for (var [l, p] of t.compoundVariants)
55
- D(l, o, t.defaultVariants) && (r += " " + p);
54
+ for (var [l, c] of o.compoundVariants)
55
+ T(l, t, o.defaultVariants) && (r += " " + c);
56
56
  return r;
57
- }, M = g({ defaultClassName: "dons243", variantClassNames: { mode: { fill: "dons244", fit: "dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), G = "dons246", H = g({ defaultClassName: "dons240", variantClassNames: { placeholder: { true: "dons241", false: "dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] });
58
- function P({
59
- className: t,
57
+ }, D = v({ defaultClassName: "pkg_sps-woodland_photo__version_7_19_0__hash_dons243", variantClassNames: { mode: { fill: "pkg_sps-woodland_photo__version_7_19_0__hash_dons244", fit: "pkg_sps-woodland_photo__version_7_19_0__hash_dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), M = "pkg_sps-woodland_photo__version_7_19_0__hash_dons246", G = v({ defaultClassName: "pkg_sps-woodland_photo__version_7_19_0__hash_dons240", variantClassNames: { placeholder: { true: "pkg_sps-woodland_photo__version_7_19_0__hash_dons241", false: "pkg_sps-woodland_photo__version_7_19_0__hash_dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] });
58
+ function g({
59
+ className: o,
60
60
  src: a,
61
61
  altText: r,
62
- mode: o = "fill",
63
- placeholderIcon: n = "photo",
62
+ mode: t = "fill",
63
+ placeholderIcon: s = "photo",
64
64
  ...d
65
65
  }) {
66
- const c = e.useRef(null), s = e.useRef(null), i = e.useRef(null), l = e.useRef(null), [p, j] = e.useState(), [S, V] = e.useState(!1);
66
+ const p = e.useRef(null), n = e.useRef(null), i = e.useRef(null), l = e.useRef(null), [c, R] = e.useState(), [j, S] = e.useState(!1);
67
67
  e.useEffect(() => {
68
- s.current && (i.current && (window.clearInterval(i.current), i.current = null), i.current = window.setInterval(() => {
69
- if (s.current) {
70
- const m = s.current.getBoundingClientRect();
71
- if (m.height) {
68
+ n.current && (i.current && (window.clearInterval(i.current), i.current = null), i.current = window.setInterval(() => {
69
+ if (n.current) {
70
+ const h = n.current.getBoundingClientRect();
71
+ if (h.height) {
72
72
  i.current && (window.clearInterval(i.current), i.current = null);
73
- let f = !0;
74
- f = m.width / m.height > 1, V(f === (o === "fit"));
73
+ let _ = !0;
74
+ _ = h.width / h.height > 1, S(_ === (t === "fit"));
75
75
  }
76
76
  }
77
77
  }, 1e3 / 60));
78
- }, [c.current, s.current, a]), e.useEffect(() => {
78
+ }, [p.current, n.current, a]), e.useEffect(() => {
79
79
  l.current && (window.clearInterval(l.current), l.current = null), l.current = window.setInterval(() => {
80
- if (c.current) {
81
- const m = c.current.getBoundingClientRect();
82
- m.width && (F(m.width), l.current && (window.clearInterval(l.current), l.current = null));
80
+ if (p.current) {
81
+ const h = p.current.getBoundingClientRect();
82
+ h.width && (k(h.width), l.current && (window.clearInterval(l.current), l.current = null));
83
83
  }
84
84
  }, 1e3 / 60);
85
- }, [c.current]);
86
- function F(m) {
87
- var f, C, w;
88
- if (m) {
89
- const N = ((w = (C = (f = document == null ? void 0 : document.body) == null ? void 0 : f.parentElement) == null ? void 0 : C.style) == null ? void 0 : w.fontSize) || "16px", _ = Number(N.substring(0, N.length - 2));
90
- j(m / _);
85
+ }, [p.current]);
86
+ function k(h) {
87
+ var _, w, P;
88
+ if (h) {
89
+ const C = ((P = (w = (_ = document == null ? void 0 : document.body) == null ? void 0 : _.parentElement) == null ? void 0 : w.style) == null ? void 0 : P.fontSize) || "16px", W = Number(C.substring(0, C.length - 2));
90
+ R(h / W);
91
91
  }
92
92
  }
93
- function W() {
94
- if (typeof p < "u")
95
- return p * 0.05;
93
+ function V() {
94
+ if (typeof c < "u")
95
+ return c * 0.05;
96
96
  }
97
- function A() {
98
- if (typeof p < "u")
99
- return 0.75 * p;
97
+ function F() {
98
+ if (typeof c < "u")
99
+ return 0.75 * c;
100
100
  }
101
101
  return /* @__PURE__ */ e.createElement(
102
102
  "div",
103
103
  {
104
- ref: c,
105
- className: h(H({ placeholder: !a }), t),
104
+ ref: p,
105
+ className: u(G({ placeholder: !a }), o),
106
106
  style: {
107
- width: `${p}` && `${p}rem`,
108
- fontSize: `${W()}rem`,
109
- height: `${A()}rem`
107
+ width: `${c}` && `${c}rem`,
108
+ fontSize: `${V()}rem`,
109
+ height: `${F()}rem`
110
110
  },
111
111
  ...d
112
112
  },
113
- a ? p ? /* @__PURE__ */ e.createElement(
113
+ a ? c ? /* @__PURE__ */ e.createElement(
114
114
  "img",
115
115
  {
116
- className: M({ mode: S ? "fit" : "fill" }),
117
- ref: s,
116
+ className: D({ mode: j ? "fit" : "fill" }),
117
+ ref: n,
118
118
  src: a,
119
119
  alt: r
120
120
  }
121
- ) : /* @__PURE__ */ e.createElement("span", null) : /* @__PURE__ */ e.createElement(L, { className: G, icon: n })
121
+ ) : /* @__PURE__ */ e.createElement("span", null) : /* @__PURE__ */ e.createElement(B, { className: M, icon: s })
122
122
  );
123
123
  }
124
- B.set(P, {
124
+ A.set(g, {
125
125
  name: "Photo",
126
126
  props: {
127
127
  src: "string",
@@ -133,54 +133,54 @@ B.set(P, {
133
133
  placeholderIcon: "IconName"
134
134
  }
135
135
  });
136
- var x = "i6pp7s1", R = "i6pp7s0", K = "i6pp7s3", k = "i6pp7s2", U = g({ defaultClassName: "i6pp7s4", variantClassNames: { selected: { true: "i6pp7s5", false: "i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
136
+ var O = "pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s1", x = "pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s0", H = "pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s3", K = "pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s2", U = v({ defaultClassName: "pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s4", variantClassNames: { selected: { true: "pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s5", false: "pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
137
137
  function q({
138
- children: t,
138
+ children: o,
139
139
  className: a,
140
140
  ...r
141
141
  }) {
142
- const [o] = z(t, [{ type: P }]), [n, d] = e.useState(0);
143
- function c() {
144
- n + 1 === o.length ? d(0) : d(n + 1);
142
+ const [t] = L(o, [{ type: g }]), [s, d] = e.useState(0);
143
+ function p() {
144
+ s + 1 === t.length ? d(0) : d(s + 1);
145
145
  }
146
- function s() {
147
- d(n === 0 ? o.length - 1 : n - 1);
146
+ function n() {
147
+ d(s === 0 ? t.length - 1 : s - 1);
148
148
  }
149
- return /* @__PURE__ */ e.createElement("div", { className: v.root, ...r }, /* @__PURE__ */ e.createElement("div", { className: h(R) }, /* @__PURE__ */ e.createElement("div", { className: h(x) }, /* @__PURE__ */ e.createElement(
150
- b,
149
+ return /* @__PURE__ */ e.createElement("div", { className: f.root, ...r }, /* @__PURE__ */ e.createElement("div", { className: u(x) }, /* @__PURE__ */ e.createElement("div", { className: u(O) }, /* @__PURE__ */ e.createElement(
150
+ N,
151
151
  {
152
152
  tabIndex: 0,
153
- kind: I.ICON,
154
- icon: E.ARROW_LEFT_CIRCLE,
155
- onClick: s
153
+ kind: b.ICON,
154
+ icon: I.ARROW_LEFT_CIRCLE,
155
+ onClick: n
156
156
  }
157
- ))), /* @__PURE__ */ e.createElement("div", { className: v[10] }, /* @__PURE__ */ e.createElement("div", { className: h(K, v[12]) }, o[n]), /* @__PURE__ */ e.createElement("div", { className: h(k, v[12]) }, o.map((i, l) => /* @__PURE__ */ e.createElement(
157
+ ))), /* @__PURE__ */ e.createElement("div", { className: f[10] }, /* @__PURE__ */ e.createElement("div", { className: u(H, f[12]) }, t[s]), /* @__PURE__ */ e.createElement("div", { className: u(K, f[12]) }, t.map((i, l) => /* @__PURE__ */ e.createElement(
158
158
  "button",
159
159
  {
160
160
  tabIndex: 0,
161
- className: h(U({ selected: l === n })),
161
+ className: u(U({ selected: l === s })),
162
162
  onClick: () => d(l)
163
163
  },
164
164
  i
165
- )))), /* @__PURE__ */ e.createElement("div", { className: h(R) }, /* @__PURE__ */ e.createElement("div", { className: h(x) }, /* @__PURE__ */ e.createElement(
166
- b,
165
+ )))), /* @__PURE__ */ e.createElement("div", { className: u(x) }, /* @__PURE__ */ e.createElement("div", { className: u(O) }, /* @__PURE__ */ e.createElement(
166
+ N,
167
167
  {
168
168
  tabIndex: 0,
169
- kind: I.ICON,
170
- icon: E.ARROW_RIGHT_CIRCLE,
171
- onClick: c
169
+ kind: b.ICON,
170
+ icon: I.ARROW_RIGHT_CIRCLE,
171
+ onClick: p
172
172
  }
173
173
  ))));
174
174
  }
175
175
  const J = {
176
- components: [P, q],
176
+ components: [g, q],
177
177
  examples: {
178
178
  sizing: {
179
179
  label: "Sizing",
180
180
  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.",
181
181
  examples: {
182
182
  basic: {
183
- react: u`
183
+ react: m`
184
184
  import { Photo } from "@sps-woodland/photo";
185
185
  import { Card } from "@sps-woodland/cards";
186
186
 
@@ -215,7 +215,7 @@ const J = {
215
215
  examples: {
216
216
  landscape: {
217
217
  description: "Landscape oriented photo",
218
- react: u`
218
+ react: m`
219
219
  import { Photo } from "@sps-woodland/photo";
220
220
  import { Card } from "@sps-woodland/cards";
221
221
 
@@ -239,7 +239,7 @@ const J = {
239
239
  },
240
240
  portrait: {
241
241
  description: "Portrait oriented photo ",
242
- react: u`
242
+ react: m`
243
243
  import { Photo } from "@sps-woodland/photo";
244
244
  import { Card } from "@sps-woodland/cards";
245
245
 
@@ -269,7 +269,7 @@ const J = {
269
269
  examples: {
270
270
  general: {
271
271
  description: "General Photo",
272
- react: u`
272
+ react: m`
273
273
  import { Photo } from "@sps-woodland/photo";
274
274
 
275
275
  function Component () {
@@ -285,7 +285,7 @@ const J = {
285
285
  },
286
286
  photoAlt: {
287
287
  description: "Photo Alt",
288
- react: u`
288
+ react: m`
289
289
  import { Photo } from "@sps-woodland/photo";
290
290
 
291
291
  function Component () {
@@ -301,7 +301,7 @@ const J = {
301
301
  },
302
302
  user: {
303
303
  description: "User / Single Person",
304
- react: u`
304
+ react: m`
305
305
  import { Photo } from "@sps-woodland/photo";
306
306
 
307
307
  function Component () {
@@ -317,7 +317,7 @@ const J = {
317
317
  },
318
318
  group: {
319
319
  description: "Group / Multiple People",
320
- react: u`
320
+ react: m`
321
321
  import { Photo } from "@sps-woodland/photo";
322
322
 
323
323
  function Component () {
@@ -333,7 +333,7 @@ const J = {
333
333
  },
334
334
  company: {
335
335
  description: "Company / Building",
336
- react: u`
336
+ react: m`
337
337
  import { Photo } from "@sps-woodland/photo";
338
338
 
339
339
  function Component () {
@@ -355,7 +355,7 @@ const J = {
355
355
  examples: {
356
356
  general: {
357
357
  description: "",
358
- react: u`
358
+ react: m`
359
359
  import { PhotoCarousel, Photo } from "@sps-woodland/photo";
360
360
 
361
361
  function Component () {
@@ -382,6 +382,6 @@ const J = {
382
382
  };
383
383
  export {
384
384
  ee as MANIFEST,
385
- P as Photo,
385
+ g as Photo,
386
386
  q as PhotoCarousel
387
387
  };
package/lib/index.umd.cjs ADDED
@@ -0,0 +1,143 @@
1
+ (function(n,f){typeof exports=="object"&&typeof module<"u"?f(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"],f):(n=typeof globalThis<"u"?globalThis:n||self,f(n.Photo={},n.React,n.core,n.tokens,n.dsReact,n.dsShared,n.utils))})(this,function(n,f,c,g,N,P,h){"use strict";function R(e){if(e&&e.__esModule)return 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=R(f),J="";function k(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function b(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 I(e){for(var a=1;a<arguments.length;a++){var t=arguments[a]!=null?arguments[a]:{};a%2?b(Object(t),!0).forEach(function(r){k(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var T=(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=I(I({},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 l=e.variantClassNames[s][i];l&&(t+=" "+l)}}for(var[d,m]of e.compoundVariants)T(d,r,e.defaultVariants)&&(t+=" "+m);return t},F=C({defaultClassName:"pkg_sps-woodland_photo__version_7_19_0__hash_dons243",variantClassNames:{mode:{fill:"pkg_sps-woodland_photo__version_7_19_0__hash_dons244",fit:"pkg_sps-woodland_photo__version_7_19_0__hash_dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),V="pkg_sps-woodland_photo__version_7_19_0__hash_dons246",A=C({defaultClassName:"pkg_sps-woodland_photo__version_7_19_0__hash_dons240",variantClassNames:{placeholder:{true:"pkg_sps-woodland_photo__version_7_19_0__hash_dons241",false:"pkg_sps-woodland_photo__version_7_19_0__hash_dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]});function w({className:e,src:a,altText:t,mode:r="fill",placeholderIcon:s="photo",...p}){const u=o.useRef(null),i=o.useRef(null),l=o.useRef(null),d=o.useRef(null),[m,L]=o.useState(),[q,D]=o.useState(!1);o.useEffect(()=>{i.current&&(l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(i.current){const _=i.current.getBoundingClientRect();if(_.height){l.current&&(window.clearInterval(l.current),l.current=null);let v=!0;v=_.width/_.height>1,D(v===(r==="fit"))}}},1e3/60))},[u.current,i.current,a]),o.useEffect(()=>{d.current&&(window.clearInterval(d.current),d.current=null),d.current=window.setInterval(()=>{if(u.current){const _=u.current.getBoundingClientRect();_.width&&(G(_.width),d.current&&(window.clearInterval(d.current),d.current=null))}},1e3/60)},[u.current]);function G(_){var v,j,S;if(_){const x=((S=(j=(v=document==null?void 0:document.body)==null?void 0:v.parentElement)==null?void 0:j.style)==null?void 0:S.fontSize)||"16px",U=Number(x.substring(0,x.length-2));L(_/U)}}function K(){if(typeof m<"u")return m*.05}function H(){if(typeof m<"u")return .75*m}return o.createElement("div",{ref:u,className:c.cl(A({placeholder:!a}),e),style:{width:`${m}`&&`${m}rem`,fontSize:`${K()}rem`,height:`${H()}rem`},...p},a?m?o.createElement("img",{className:F({mode:q?"fit":"fill"}),ref:i,src:a,alt:t}):o.createElement("span",null):o.createElement(c.Icon,{className:V,icon:s}))}c.Metadata.set(w,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});const Q="";var E="pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s1",y="pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s0",B="pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s3",M="pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s2",W=C({defaultClassName:"pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s4",variantClassNames:{selected:{true:"pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s5",false:"pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s6"}},defaultVariants:{selected:!1},compoundVariants:[]});function O({children:e,className:a,...t}){const[r]=c.selectChildren(e,[{type:w}]),[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(E)},o.createElement(N.SpsButton,{tabIndex:0,kind:P.ButtonKind.ICON,icon:P.SpsIcon.ARROW_LEFT_CIRCLE,onClick:i}))),o.createElement("div",{className:g.grid[10]},o.createElement("div",{className:c.cl(B,g.grid[12])},r[s]),o.createElement("div",{className:c.cl(M,g.grid[12])},r.map((l,d)=>o.createElement("button",{tabIndex:0,className:c.cl(W({selected:d===s})),onClick:()=>p(d)},l)))),o.createElement("div",{className:c.cl(y)},o.createElement("div",{className:c.cl(E)},o.createElement(N.SpsButton,{tabIndex:0,kind:P.ButtonKind.ICON,icon:P.SpsIcon.ARROW_RIGHT_CIRCLE,onClick:u}))))}const z={Photos:{components:[w,O],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
+ import { Photo } from "@sps-woodland/photo";
3
+ import { Card } from "@sps-woodland/cards";
4
+
5
+ function Component () {
6
+ return (
7
+ <div className={grid.root}>
8
+ <div className={grid[2]}>
9
+ <Card>
10
+ <Photo src="assets/images/photo-landscape.jpg" />
11
+ </Card>
12
+ </div>
13
+ <div className={grid[4]}>
14
+ <Card>
15
+ <Photo src="assets/images/photo-landscape.jpg" />
16
+ </Card>
17
+ </div>
18
+ <div className={grid[6]}>
19
+ <Card>
20
+ <Photo src="assets/images/photo-landscape.jpg" />
21
+ </Card>
22
+ </div>
23
+ </div>
24
+ )
25
+ }
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
+ import { Photo } from "@sps-woodland/photo";
28
+ import { Card } from "@sps-woodland/cards";
29
+
30
+ function Component () {
31
+ return (
32
+ <div className={grid.root}>
33
+ <div className={grid[4]}>
34
+ <Card>
35
+ <Photo mode="fill" src="assets/images/photo-landscape.jpg" />
36
+ </Card>
37
+ </div>
38
+ <div className={grid[4]}>
39
+ <Card>
40
+ <Photo mode="fit" src="assets/images/photo-landscape.jpg" />
41
+ </Card>
42
+ </div>
43
+ </div>
44
+ )
45
+ }
46
+ `},portrait:{description:"Portrait oriented photo ",react:h.code`
47
+ import { Photo } from "@sps-woodland/photo";
48
+ import { Card } from "@sps-woodland/cards";
49
+
50
+ function Component () {
51
+ return (
52
+ <div className={grid.root}>
53
+ <div className={grid[4]}>
54
+ <Card>
55
+ <Photo mode="fill" src="assets/images/photo-portrait.jpg" />
56
+ </Card>
57
+ </div>
58
+ <div className={grid[4]}>
59
+ <Card>
60
+ <Photo mode="fit" src="assets/images/photo-portrait.jpg" />
61
+ </Card>
62
+ </div>
63
+ </div>
64
+ )
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:h.code`
67
+ import { Photo } from "@sps-woodland/photo";
68
+
69
+ function Component () {
70
+ return (
71
+ <div className={grid.root}>
72
+ <div className={grid[3]}>
73
+ <Photo />
74
+ </div>
75
+ </div>
76
+ )
77
+ }
78
+ `},photoAlt:{description:"Photo Alt",react:h.code`
79
+ import { Photo } from "@sps-woodland/photo";
80
+
81
+ function Component () {
82
+ return (
83
+ <div className={grid.root}>
84
+ <div className={grid[3]}>
85
+ <Photo placeholderIcon="camera" />
86
+ </div>
87
+ </div>
88
+ )
89
+ }
90
+ `},user:{description:"User / Single Person",react:h.code`
91
+ import { Photo } from "@sps-woodland/photo";
92
+
93
+ function Component () {
94
+ return (
95
+ <div className={grid.root}>
96
+ <div className={grid[3]}>
97
+ <Photo placeholderIcon="user" />
98
+ </div>
99
+ </div>
100
+ )
101
+ }
102
+ `},group:{description:"Group / Multiple People",react:h.code`
103
+ import { Photo } from "@sps-woodland/photo";
104
+
105
+ function Component () {
106
+ return (
107
+ <div className={grid.root}>
108
+ <div className={grid[3]}>
109
+ <Photo placeholderIcon="group" />
110
+ </div>
111
+ </div>
112
+ )
113
+ }
114
+ `},company:{description:"Company / Building",react:h.code`
115
+ import { Photo } from "@sps-woodland/photo";
116
+
117
+ function Component () {
118
+ return (
119
+ <div className={grid.root}>
120
+ <div className={grid[3]}>
121
+ <Photo placeholderIcon="building" />
122
+ </div>
123
+ </div>
124
+ )
125
+ }
126
+ `}}},carousel:{label:"Photo Carousel",description:"",examples:{general:{description:"",react:h.code`
127
+ import { PhotoCarousel, Photo } from "@sps-woodland/photo";
128
+
129
+ function Component () {
130
+ return (
131
+ <div className={grid.root}>
132
+ <div className={grid[6]}>
133
+ <PhotoCarousel>
134
+ <Photo placeholderIcon="building" />
135
+ <Photo placeholderIcon="camera" />
136
+ <Photo placeholderIcon="user" />
137
+ <Photo placeholderIcon="group" />
138
+ </PhotoCarousel>
139
+ </div>
140
+ </div>
141
+ )
142
+ }
143
+ `}}}}}};n.MANIFEST=z,n.Photo=w,n.PhotoCarousel=O,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.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}.dons243{visibility:hidden}.dons244{height:100%;visibility:visible;width:auto}.dons245{height:auto;visibility:visible;width:100%}.dons246{flex:1;font-size:6em;text-align:center;color:#717779}.i6pp7s0{display:table;float:right}.i6pp7s1{display:table-cell;vertical-align:middle}.i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.i6pp7s6{opacity:.4}
1
+ .pkg_sps-woodland_photo__version_7_19_0__hash_dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.pkg_sps-woodland_photo__version_7_19_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_7_19_0__hash_dons243{visibility:hidden}.pkg_sps-woodland_photo__version_7_19_0__hash_dons244{height:100%;visibility:visible;width:auto}.pkg_sps-woodland_photo__version_7_19_0__hash_dons245{height:auto;visibility:visible;width:100%}.pkg_sps-woodland_photo__version_7_19_0__hash_dons246{flex:1;font-size:6em;text-align:center;color:#717779}.pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s0{display:table;float:right}.pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s1{display:table-cell;vertical-align:middle}.pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.pkg_sps-woodland_photo__version_7_19_0__hash_i6pp7s6{opacity:.4}
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "@sps-woodland/photo",
3
3
  "description": "SPS Woodland Design System photo component",
4
- "version": "7.17.13",
4
+ "version": "7.19.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/photo",
8
8
  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/photo#readme",
9
- "main": "./lib/index.cjs.js",
10
- "module": "./lib/index.es.js",
11
9
  "type": "module",
10
+ "module": "./lib/index.js",
11
+ "main": "./lib/index.umd.cjs",
12
12
  "types": "./lib/index.d.ts",
13
13
  "exports": {
14
14
  ".": {
15
- "import": "./lib/index.es.js",
16
- "require": "./lib/index.cjs.js",
17
- "default": "./lib/index.cjs.js",
15
+ "require": "./lib/index.umd.cjs",
16
+ "import": "./lib/index.js",
17
+ "default": "./lib/index.js",
18
18
  "types": "./lib/index.d.ts"
19
19
  },
20
20
  "./lib/style.css": {
@@ -29,10 +29,10 @@
29
29
  "@spscommerce/utils": "^6.12.1",
30
30
  "react": "^16.9.0",
31
31
  "react-dom": "^16.9.0",
32
- "@spscommerce/ds-shared": "7.17.13",
33
- "@spscommerce/ds-react": "7.17.13",
34
- "@sps-woodland/tokens": "7.17.13",
35
- "@sps-woodland/core": "7.17.13"
32
+ "@sps-woodland/tokens": "7.19.0",
33
+ "@spscommerce/ds-react": "7.19.0",
34
+ "@sps-woodland/core": "7.19.0",
35
+ "@spscommerce/ds-shared": "7.19.0"
36
36
  },
37
37
  "devDependencies": {
38
38
  "@spscommerce/utils": "^6.12.1",
@@ -40,10 +40,10 @@
40
40
  "@vanilla-extract/recipes": "^0.2.5",
41
41
  "react": "^16.9.0",
42
42
  "react-dom": "^16.9.0",
43
- "@sps-woodland/core": "7.17.13",
44
- "@sps-woodland/tokens": "7.17.13",
45
- "@spscommerce/ds-react": "7.17.13",
46
- "@spscommerce/ds-shared": "7.17.13"
43
+ "@spscommerce/ds-react": "7.19.0",
44
+ "@sps-woodland/core": "7.19.0",
45
+ "@spscommerce/ds-shared": "7.19.0",
46
+ "@sps-woodland/tokens": "7.19.0"
47
47
  },
48
48
  "scripts": {
49
49
  "build": "pnpm run build:js && pnpm run build:types",
package/sps-woodland-photo-7.19.0.tgz ADDED
Binary file
package/vite.config.js CHANGED
@@ -1,16 +1,25 @@
1
1
  import path from "path";
2
2
  import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
3
3
  import { defineConfig } from "vite";
4
-
4
+ import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.js";
5
5
  import pkg from "./package.json";
6
6
 
7
+ const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
8
+
7
9
  export default defineConfig({
8
- plugins: [vanillaExtractPlugin()],
10
+ plugins: [
11
+ vanillaExtractPlugin(
12
+ getVanillaExtractPluginProps({
13
+ packageName: pkg.name,
14
+ packageVersion,
15
+ })
16
+ ),
17
+ ],
9
18
  build: {
10
19
  lib: {
11
20
  entry: path.resolve(__dirname, "src/index.ts"),
12
- formats: ["es", "cjs"],
13
- fileName: (format) => `index.${format}.js`,
21
+ name: "Photo",
22
+ fileName: "index",
14
23
  },
15
24
  outDir: path.resolve(__dirname, "./lib"),
16
25
  emptyOutDir: false,
package/lib/Photo.css.d.ts DELETED
@@ -1,11 +0,0 @@
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 {};
package/lib/Photo.d.ts DELETED
@@ -1,10 +0,0 @@
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;
package/lib/index.cjs.js DELETED
@@ -1,143 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const M=require("react"),d=require("@sps-woodland/core"),v=require("@sps-woodland/tokens"),I=require("@spscommerce/ds-react"),g=require("@spscommerce/ds-shared"),h=require("@spscommerce/utils");function T(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return a.default=e,Object.freeze(a)}const t=T(M);function W(e,a,o){return a in e?Object.defineProperty(e,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[a]=o,e}function E(e,a){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),o.push.apply(o,r)}return o}function y(e){for(var a=1;a<arguments.length;a++){var o=arguments[a]!=null?arguments[a]:{};a%2?E(Object(o),!0).forEach(function(r){W(e,r,o[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):E(Object(o)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))})}return e}var z=(e,a,o)=>{for(var r of Object.keys(e)){var n;if(e[r]!==((n=a[r])!==null&&n!==void 0?n:o[r]))return!1}return!0},C=e=>a=>{var o=e.defaultClassName,r=y(y({},e.defaultVariants),a);for(var n in r){var c,p=(c=r[n])!==null&&c!==void 0?c:e.defaultVariants[n];if(p!=null){var s=p;typeof s=="boolean"&&(s=s===!0?"true":"false");var i=e.variantClassNames[n][s];i&&(o+=" "+i)}}for(var[l,u]of e.compoundVariants)z(l,r,e.defaultVariants)&&(o+=" "+u);return o},L=C({defaultClassName:"dons243",variantClassNames:{mode:{fill:"dons244",fit:"dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),q="dons246",D=C({defaultClassName:"dons240",variantClassNames:{placeholder:{true:"dons241",false:"dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]});function P({className:e,src:a,altText:o,mode:r="fill",placeholderIcon:n="photo",...c}){const p=t.useRef(null),s=t.useRef(null),i=t.useRef(null),l=t.useRef(null),[u,R]=t.useState(),[x,_]=t.useState(!1);t.useEffect(()=>{s.current&&(i.current&&(window.clearInterval(i.current),i.current=null),i.current=window.setInterval(()=>{if(s.current){const m=s.current.getBoundingClientRect();if(m.height){i.current&&(window.clearInterval(i.current),i.current=null);let f=!0;f=m.width/m.height>1,_(f===(r==="fit"))}}},1e3/60))},[p.current,s.current,a]),t.useEffect(()=>{l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(p.current){const m=p.current.getBoundingClientRect();m.width&&(F(m.width),l.current&&(window.clearInterval(l.current),l.current=null))}},1e3/60)},[p.current]);function F(m){var f,w,b;if(m){const N=((b=(w=(f=document==null?void 0:document.body)==null?void 0:f.parentElement)==null?void 0:w.style)==null?void 0:b.fontSize)||"16px",B=Number(N.substring(0,N.length-2));R(m/B)}}function V(){if(typeof u<"u")return u*.05}function A(){if(typeof u<"u")return .75*u}return t.createElement("div",{ref:p,className:d.cl(D({placeholder:!a}),e),style:{width:`${u}`&&`${u}rem`,fontSize:`${V()}rem`,height:`${A()}rem`},...c},a?u?t.createElement("img",{className:L({mode:x?"fit":"fill"}),ref:s,src:a,alt:o}):t.createElement("span",null):t.createElement(d.Icon,{className:q,icon:n}))}d.Metadata.set(P,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});var O="i6pp7s1",S="i6pp7s0",k="i6pp7s3",G="i6pp7s2",K=C({defaultClassName:"i6pp7s4",variantClassNames:{selected:{true:"i6pp7s5",false:"i6pp7s6"}},defaultVariants:{selected:!1},compoundVariants:[]});function j({children:e,className:a,...o}){const[r]=d.selectChildren(e,[{type:P}]),[n,c]=t.useState(0);function p(){n+1===r.length?c(0):c(n+1)}function s(){c(n===0?r.length-1:n-1)}return t.createElement("div",{className:v.grid.root,...o},t.createElement("div",{className:d.cl(S)},t.createElement("div",{className:d.cl(O)},t.createElement(I.SpsButton,{tabIndex:0,kind:g.ButtonKind.ICON,icon:g.SpsIcon.ARROW_LEFT_CIRCLE,onClick:s}))),t.createElement("div",{className:v.grid[10]},t.createElement("div",{className:d.cl(k,v.grid[12])},r[n]),t.createElement("div",{className:d.cl(G,v.grid[12])},r.map((i,l)=>t.createElement("button",{tabIndex:0,className:d.cl(K({selected:l===n})),onClick:()=>c(l)},i)))),t.createElement("div",{className:d.cl(S)},t.createElement("div",{className:d.cl(O)},t.createElement(I.SpsButton,{tabIndex:0,kind:g.ButtonKind.ICON,icon:g.SpsIcon.ARROW_RIGHT_CIRCLE,onClick:p}))))}const H={components:[P,j],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
- import { Photo } from "@sps-woodland/photo";
3
- import { Card } from "@sps-woodland/cards";
4
-
5
- function Component () {
6
- return (
7
- <div className={grid.root}>
8
- <div className={grid[2]}>
9
- <Card>
10
- <Photo src="assets/images/photo-landscape.jpg" />
11
- </Card>
12
- </div>
13
- <div className={grid[4]}>
14
- <Card>
15
- <Photo src="assets/images/photo-landscape.jpg" />
16
- </Card>
17
- </div>
18
- <div className={grid[6]}>
19
- <Card>
20
- <Photo src="assets/images/photo-landscape.jpg" />
21
- </Card>
22
- </div>
23
- </div>
24
- )
25
- }
26
- `}}},displayMode:{label:"Fill vs. Fit",description:()=>t.createElement("p",null,"There are two display modes available:",t.createElement("ul",null,t.createElement("li",null,t.createElement("b",null,'"fill"')," fills the entire 4:3 container, cropping off any excess portions of the image."),t.createElement("li",null,t.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
- import { Photo } from "@sps-woodland/photo";
28
- import { Card } from "@sps-woodland/cards";
29
-
30
- function Component () {
31
- return (
32
- <div className={grid.root}>
33
- <div className={grid[4]}>
34
- <Card>
35
- <Photo mode="fill" src="assets/images/photo-landscape.jpg" />
36
- </Card>
37
- </div>
38
- <div className={grid[4]}>
39
- <Card>
40
- <Photo mode="fit" src="assets/images/photo-landscape.jpg" />
41
- </Card>
42
- </div>
43
- </div>
44
- )
45
- }
46
- `},portrait:{description:"Portrait oriented photo ",react:h.code`
47
- import { Photo } from "@sps-woodland/photo";
48
- import { Card } from "@sps-woodland/cards";
49
-
50
- function Component () {
51
- return (
52
- <div className={grid.root}>
53
- <div className={grid[4]}>
54
- <Card>
55
- <Photo mode="fill" src="assets/images/photo-portrait.jpg" />
56
- </Card>
57
- </div>
58
- <div className={grid[4]}>
59
- <Card>
60
- <Photo mode="fit" src="assets/images/photo-portrait.jpg" />
61
- </Card>
62
- </div>
63
- </div>
64
- )
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:h.code`
67
- import { Photo } from "@sps-woodland/photo";
68
-
69
- function Component () {
70
- return (
71
- <div className={grid.root}>
72
- <div className={grid[3]}>
73
- <Photo />
74
- </div>
75
- </div>
76
- )
77
- }
78
- `},photoAlt:{description:"Photo Alt",react:h.code`
79
- import { Photo } from "@sps-woodland/photo";
80
-
81
- function Component () {
82
- return (
83
- <div className={grid.root}>
84
- <div className={grid[3]}>
85
- <Photo placeholderIcon="camera" />
86
- </div>
87
- </div>
88
- )
89
- }
90
- `},user:{description:"User / Single Person",react:h.code`
91
- import { Photo } from "@sps-woodland/photo";
92
-
93
- function Component () {
94
- return (
95
- <div className={grid.root}>
96
- <div className={grid[3]}>
97
- <Photo placeholderIcon="user" />
98
- </div>
99
- </div>
100
- )
101
- }
102
- `},group:{description:"Group / Multiple People",react:h.code`
103
- import { Photo } from "@sps-woodland/photo";
104
-
105
- function Component () {
106
- return (
107
- <div className={grid.root}>
108
- <div className={grid[3]}>
109
- <Photo placeholderIcon="group" />
110
- </div>
111
- </div>
112
- )
113
- }
114
- `},company:{description:"Company / Building",react:h.code`
115
- import { Photo } from "@sps-woodland/photo";
116
-
117
- function Component () {
118
- return (
119
- <div className={grid.root}>
120
- <div className={grid[3]}>
121
- <Photo placeholderIcon="building" />
122
- </div>
123
- </div>
124
- )
125
- }
126
- `}}},carousel:{label:"Photo Carousel",description:"",examples:{general:{description:"",react:h.code`
127
- import { PhotoCarousel, Photo } from "@sps-woodland/photo";
128
-
129
- function Component () {
130
- return (
131
- <div className={grid.root}>
132
- <div className={grid[6]}>
133
- <PhotoCarousel>
134
- <Photo placeholderIcon="building" />
135
- <Photo placeholderIcon="camera" />
136
- <Photo placeholderIcon="user" />
137
- <Photo placeholderIcon="group" />
138
- </PhotoCarousel>
139
- </div>
140
- </div>
141
- )
142
- }
143
- `}}}}},U={Photos:H};exports.MANIFEST=U;exports.Photo=P;exports.PhotoCarousel=j;