@sps-woodland/photo 8.41.2 → 8.41.4
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/lib/index.js +2 -2
- package/lib/index.umd.cjs +1 -1
- package/lib/style.css +1 -1
- package/package.json +9 -9
package/lib/index.js
CHANGED
|
@@ -57,7 +57,7 @@ var L = (o, a, r) => {
|
|
|
57
57
|
for (var [l, c] of o.compoundVariants)
|
|
58
58
|
L(l, t, o.defaultVariants) && (r += " " + c);
|
|
59
59
|
return r;
|
|
60
|
-
}, M = g({ defaultClassName: "pkg_sps-
|
|
60
|
+
}, M = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_41_4__hash_dons240", variantClassNames: { placeholder: { true: "pkg_sps-woodland_photo__version_8_41_4__hash_dons241", false: "pkg_sps-woodland_photo__version_8_41_4__hash_dons242" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] }), z = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_41_4__hash_dons243", variantClassNames: { mode: { fill: "pkg_sps-woodland_photo__version_8_41_4__hash_dons244", fit: "pkg_sps-woodland_photo__version_8_41_4__hash_dons245" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), T = "pkg_sps-woodland_photo__version_8_41_4__hash_dons246";
|
|
61
61
|
function v({
|
|
62
62
|
className: o,
|
|
63
63
|
src: a,
|
|
@@ -135,7 +135,7 @@ F.set(v, {
|
|
|
135
135
|
placeholderIcon: "IconName"
|
|
136
136
|
}
|
|
137
137
|
});
|
|
138
|
-
var I = "pkg_sps-
|
|
138
|
+
var I = "pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s0", E = "pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s1", D = "pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s2", G = "pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s3", H = g({ defaultClassName: "pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s4", variantClassNames: { selected: { true: "pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s5", false: "pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s6" } }, defaultVariants: { selected: !1 }, compoundVariants: [] });
|
|
139
139
|
function y({
|
|
140
140
|
children: o,
|
|
141
141
|
className: a,
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
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-
|
|
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_41_4__hash_dons240",variantClassNames:{placeholder:{true:"pkg_sps-woodland_photo__version_8_41_4__hash_dons241",false:"pkg_sps-woodland_photo__version_8_41_4__hash_dons242"}},defaultVariants:{placeholder:!1},compoundVariants:[]}),k=C({defaultClassName:"pkg_sps-woodland_photo__version_8_41_4__hash_dons243",variantClassNames:{mode:{fill:"pkg_sps-woodland_photo__version_8_41_4__hash_dons244",fit:"pkg_sps-woodland_photo__version_8_41_4__hash_dons245"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),M="pkg_sps-woodland_photo__version_8_41_4__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_41_4__hash_i6pp7s0",O="pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s1",T="pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s2",F="pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s3",V=C({defaultClassName:"pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s4",variantClassNames:{selected:{true:"pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s5",false:"pkg_sps-woodland_photo__version_8_41_4__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
|
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_photo__version_8_41_4__hash_dons240{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}.pkg_sps-woodland_photo__version_8_41_4__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_41_4__hash_dons243{visibility:hidden}.pkg_sps-woodland_photo__version_8_41_4__hash_dons244{height:100%;visibility:visible;width:auto}.pkg_sps-woodland_photo__version_8_41_4__hash_dons245{height:auto;visibility:visible;width:100%}.pkg_sps-woodland_photo__version_8_41_4__hash_dons246{font-size:6em;text-align:center;color:#717779}.pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s0{display:table;float:right}.pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s1{display:table-cell;vertical-align:middle}.pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s3{display:block;margin-bottom:.5rem;width:100%}.pkg_sps-woodland_photo__version_8_41_4__hash_i6pp7s4{display:block;background:transparent;border:0;cursor:pointer;padding:0}.pkg_sps-woodland_photo__version_8_41_4__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.41.
|
|
4
|
+
"version": "8.41.4",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/photo",
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0",
|
|
30
30
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
31
31
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
|
-
"@sps-woodland/core": "8.41.
|
|
33
|
-
"@sps-woodland/tokens": "8.41.
|
|
34
|
-
"@spscommerce/ds-react": "8.41.
|
|
35
|
-
"@spscommerce/ds-shared": "8.41.
|
|
32
|
+
"@sps-woodland/core": "8.41.4",
|
|
33
|
+
"@sps-woodland/tokens": "8.41.4",
|
|
34
|
+
"@spscommerce/ds-react": "8.41.4",
|
|
35
|
+
"@spscommerce/ds-shared": "8.41.4"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@spscommerce/utils": "^8.1.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": "8.41.
|
|
44
|
-
"@sps-woodland/tokens": "8.41.
|
|
45
|
-
"@spscommerce/ds-react": "8.41.
|
|
46
|
-
"@spscommerce/ds-shared": "8.41.
|
|
43
|
+
"@sps-woodland/core": "8.41.4",
|
|
44
|
+
"@sps-woodland/tokens": "8.41.4",
|
|
45
|
+
"@spscommerce/ds-react": "8.41.4",
|
|
46
|
+
"@spscommerce/ds-shared": "8.41.4"
|
|
47
47
|
},
|
|
48
48
|
"scripts": {
|
|
49
49
|
"build": "pnpm run build:js && pnpm run build:types",
|