@sps-woodland/photo 8.0.0-rc1

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/photo](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/photo#readme)
+
+SPS Woodland Design System photo component

package/lib/Photo.css.d.ts

@@ -0,0 +1,11 @@
+import { Tokens } from "@sps-woodland/tokens";
+import type { VariantDefinitions, RecipeVariant, BooleanRecipeVariant } from "@sps-woodland/core";
+export declare type PhotoDisplayMode = keyof typeof Tokens.component.photo["display-mode"];
+interface PhotoVariantDefinition extends VariantDefinitions {
+    mode: RecipeVariant<PhotoDisplayMode>;
+    placeholder: BooleanRecipeVariant;
+}
+export declare const photoWrapper: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<PhotoVariantDefinition, "placeholder">>;
+export declare const photo: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<Pick<PhotoVariantDefinition, "mode">>;
+export declare const photoPlaceholder: string;
+export {};

package/lib/Photo.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+import { IconName } from "@sps-woodland/tokens";
+import type { PhotoDisplayMode } from "./Photo.css";
+export declare function Photo({ className, src, altText, mode, placeholderIcon, ...rest }: ComponentProps<{
+    src?: string;
+    altText?: string;
+    mode?: PhotoDisplayMode;
+    placeholderIcon?: IconName;
+}, HTMLDivElement>): React.ReactElement;

package/lib/Photo.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const PhotoExamples: ComponentManifestEntry;

package/lib/index.cjs.js

@@ -0,0 +1,126 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react"),h=require("@sps-woodland/core"),u=require("@spscommerce/utils");function R(e){if(e&&e.__esModule)return e;const o=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(o,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const a=R(x);function F(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function b(e,o){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o&&(r=r.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),t.push.apply(t,r)}return t}function C(e){for(var o=1;o<arguments.length;o++){var t=arguments[o]!=null?arguments[o]:{};o%2?b(Object(t),!0).forEach(function(r){F(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 M=(e,o,t)=>{for(var r of Object.keys(e)){var n;if(e[r]!==((n=o[r])!==null&&n!==void 0?n:t[r]))return!1}return!0},N=e=>o=>{var t=e.defaultClassName,r=C(C({},e.defaultVariants),o);for(var n in r){var f,p=(f=r[n])!==null&&f!==void 0?f:e.defaultVariants[n];if(p!=null){var i=p;typeof i=="boolean"&&(i=i===!0?"true":"false");var s=e.variantClassNames[n][i];s&&(t+=" "+s)}}for(var[l,d]of e.compoundVariants)M(l,r,e.defaultVariants)&&(t+=" "+d);return t},V=N({defaultClassName:"_1ofindv3",variantClassNames:{mode:{fill:"_1ofindv4",fit:"_1ofindv5"}},defaultVariants:{mode:"fill"},compoundVariants:[]}),z="_1ofindv6",T=N({defaultClassName:"_1ofindv0",variantClassNames:{placeholder:{true:"_1ofindv1",false:"_1ofindv2"}},defaultVariants:{placeholder:!1},compoundVariants:[]});function v({className:e,src:o,altText:t,mode:r="fill",placeholderIcon:n="photo",...f}){const p=a.useRef(null),i=a.useRef(null),s=a.useRef(null),l=a.useRef(null),[d,y]=a.useState(),[O,I]=a.useState(!1);a.useEffect(()=>{i.current&&(s.current&&(window.clearInterval(s.current),s.current=null),s.current=window.setInterval(()=>{if(i.current){const c=i.current.getBoundingClientRect();if(c.height){s.current&&(window.clearInterval(s.current),s.current=null);let m=!0;m=c.width/c.height>1,I(m===(r==="fit"))}}},1e3/60))},[p.current,i.current,o]),a.useEffect(()=>{l.current&&(window.clearInterval(l.current),l.current=null),l.current=window.setInterval(()=>{if(p.current){const c=p.current.getBoundingClientRect();c.width&&(j(c.width),l.current&&(window.clearInterval(l.current),l.current=null))}},1e3/60)},[p.current]);function j(c){var m,g,P;if(c){const w=((P=(g=(m=document==null?void 0:document.body)==null?void 0:m.parentElement)==null?void 0:g.style)==null?void 0:P.fontSize)||"16px",_=Number(w.substring(0,w.length-2));y(c/_)}}function E(){if(typeof d<"u")return d*.05}function S(){if(typeof d<"u")return .75*d}return a.createElement("div",{ref:p,className:h.cl(T({placeholder:!o}),e),style:{width:`${d}`&&`${d}rem`,fontSize:`${E()}rem`,height:`${S()}rem`},...f},o?d?a.createElement("img",{className:V({mode:O?"fit":"fill"}),ref:i,src:o,alt:t}):a.createElement("span",null):a.createElement(h.Icon,{className:z,icon:n}))}h.Metadata.set(v,{name:"Photo",props:{src:"string",altText:"string",mode:{type:'"fill" | "fit"',default:'"fill"'},placeholderIcon:"IconName"}});const W={components:[v],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:u.code`
+            import { Photo } from "@sps-woodland/photo";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[2]}>
+                    <Card>
+                      <Photo src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[6]}>
+                    <Card>
+                      <Photo src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                </div>
+              )
+            }
+          `}}},displayMode:{label:"Fill vs. Fit",description:()=>a.createElement("p",null,"There are two display modes available:",a.createElement("ul",null,a.createElement("li",null,a.createElement("b",null,'"fill"')," fills the entire 4:3 container, cropping off any excess portions of the image."),a.createElement("li",null,a.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:u.code`
+            import { Photo } from "@sps-woodland/photo";
+            import { Card } from "@sps-woodland/cards";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fill" src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fit" src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                </div>
+              )
+            }
+          `},portrait:{description:"Portrait oriented photo ",react:u.code`
+            import { Photo } from "@sps-woodland/photo";
+            import { Card } from "@sps-woodland/cards";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fill" src="assets/images/photo-portrait.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fit" src="assets/images/photo-portrait.jpg" />
+                    </Card>
+                  </div>
+                </div>
+              )
+            }
+          `}}},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:u.code`
+            import { Photo } from "@sps-woodland/photo";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo />
+                  </div>
+                </div>
+              )
+            }
+          `},photoAlt:{description:"Photo Alt",react:u.code`
+            import { Photo } from "@sps-woodland/photo";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="camera" />
+                  </div>
+                </div>
+              )
+            }
+          `},user:{description:"User / Single Person",react:u.code`
+            import { Photo } from "@sps-woodland/photo";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="user" />
+                  </div>
+                </div>
+              )
+            }
+          `},group:{description:"Group / Multiple People",react:u.code`
+            import { Photo } from "@sps-woodland/photo";
+            
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="group" />
+                  </div>
+                </div>
+              )
+            }
+          `},company:{description:"Company / Building",react:u.code`
+            import { Photo } from "@sps-woodland/photo";
+
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="building" />
+                  </div>
+                </div>
+              )
+            }
+          `}}}}},A={Photos:W};exports.MANIFEST=A;exports.Photo=v;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Photo";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,313 @@
+import * as a from "react";
+import { Metadata as S, cl as R, Icon as F } from "@sps-woodland/core";
+import { code as u } from "@spscommerce/utils";
+function V(e, t, o) {
+  return t in e ? Object.defineProperty(e, t, {
+    value: o,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[t] = o, e;
+}
+function w(e, t) {
+  var o = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var r = Object.getOwnPropertySymbols(e);
+    t && (r = r.filter(function(n) {
+      return Object.getOwnPropertyDescriptor(e, n).enumerable;
+    })), o.push.apply(o, r);
+  }
+  return o;
+}
+function P(e) {
+  for (var t = 1; t < arguments.length; t++) {
+    var o = arguments[t] != null ? arguments[t] : {};
+    t % 2 ? w(Object(o), !0).forEach(function(r) {
+      V(e, r, o[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : w(Object(o)).forEach(function(r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(o, r));
+    });
+  }
+  return e;
+}
+var _ = (e, t, o) => {
+  for (var r of Object.keys(e)) {
+    var n;
+    if (e[r] !== ((n = t[r]) !== null && n !== void 0 ? n : o[r]))
+      return !1;
+  }
+  return !0;
+}, C = (e) => (t) => {
+  var o = e.defaultClassName, r = P(P({}, e.defaultVariants), t);
+  for (var n in r) {
+    var m, p = (m = r[n]) !== null && m !== void 0 ? m : e.defaultVariants[n];
+    if (p != null) {
+      var i = p;
+      typeof i == "boolean" && (i = i === !0 ? "true" : "false");
+      var s = e.variantClassNames[n][i];
+      s && (o += " " + s);
+    }
+  }
+  for (var [l, d] of e.compoundVariants)
+    _(l, r, e.defaultVariants) && (o += " " + d);
+  return o;
+}, z = C({ defaultClassName: "_1ofindv3", variantClassNames: { mode: { fill: "_1ofindv4", fit: "_1ofindv5" } }, defaultVariants: { mode: "fill" }, compoundVariants: [] }), W = "_1ofindv6", A = C({ defaultClassName: "_1ofindv0", variantClassNames: { placeholder: { true: "_1ofindv1", false: "_1ofindv2" } }, defaultVariants: { placeholder: !1 }, compoundVariants: [] });
+function b({
+  className: e,
+  src: t,
+  altText: o,
+  mode: r = "fill",
+  placeholderIcon: n = "photo",
+  ...m
+}) {
+  const p = a.useRef(null), i = a.useRef(null), s = a.useRef(null), l = a.useRef(null), [d, N] = a.useState(), [y, I] = a.useState(!1);
+  a.useEffect(() => {
+    i.current && (s.current && (window.clearInterval(s.current), s.current = null), s.current = window.setInterval(() => {
+      if (i.current) {
+        const c = i.current.getBoundingClientRect();
+        if (c.height) {
+          s.current && (window.clearInterval(s.current), s.current = null);
+          let f = !0;
+          f = c.width / c.height > 1, I(f === (r === "fit"));
+        }
+      }
+    }, 1e3 / 60));
+  }, [p.current, i.current, t]), a.useEffect(() => {
+    l.current && (window.clearInterval(l.current), l.current = null), l.current = window.setInterval(() => {
+      if (p.current) {
+        const c = p.current.getBoundingClientRect();
+        c.width && (O(c.width), l.current && (window.clearInterval(l.current), l.current = null));
+      }
+    }, 1e3 / 60);
+  }, [p.current]);
+  function O(c) {
+    var f, h, v;
+    if (c) {
+      const g = ((v = (h = (f = document == null ? void 0 : document.body) == null ? void 0 : f.parentElement) == null ? void 0 : h.style) == null ? void 0 : v.fontSize) || "16px", x = Number(g.substring(0, g.length - 2));
+      N(c / x);
+    }
+  }
+  function E() {
+    if (typeof d < "u")
+      return d * 0.05;
+  }
+  function j() {
+    if (typeof d < "u")
+      return 0.75 * d;
+  }
+  return /* @__PURE__ */ a.createElement("div", {
+    ref: p,
+    className: R(A({ placeholder: !t }), e),
+    style: {
+      width: `${d}` && `${d}rem`,
+      fontSize: `${E()}rem`,
+      height: `${j()}rem`
+    },
+    ...m
+  }, t ? d ? /* @__PURE__ */ a.createElement("img", {
+    className: z({ mode: y ? "fit" : "fill" }),
+    ref: i,
+    src: t,
+    alt: o
+  }) : /* @__PURE__ */ a.createElement("span", null) : /* @__PURE__ */ a.createElement(F, {
+    className: W,
+    icon: n
+  }));
+}
+S.set(b, {
+  name: "Photo",
+  props: {
+    src: "string",
+    altText: "string",
+    mode: {
+      type: '"fill" | "fit"',
+      default: '"fill"'
+    },
+    placeholderIcon: "IconName"
+  }
+});
+const D = {
+  components: [b],
+  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: u`
+            import { Photo } from "@sps-woodland/photo";
+            import { Card } from "@sps-woodland/cards";
+
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[2]}>
+                    <Card>
+                      <Photo src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[6]}>
+                    <Card>
+                      <Photo src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                </div>
+              )
+            }
+          `
+        }
+      }
+    },
+    displayMode: {
+      label: "Fill vs. Fit",
+      description: () => /* @__PURE__ */ a.createElement("p", null, "There are two display modes available:", /* @__PURE__ */ a.createElement("ul", null, /* @__PURE__ */ a.createElement("li", null, /* @__PURE__ */ a.createElement("b", null, '"fill"'), " fills the entire 4:3 container, cropping off any excess portions of the image."), /* @__PURE__ */ a.createElement("li", null, /* @__PURE__ */ a.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: u`
+            import { Photo } from "@sps-woodland/photo";
+            import { Card } from "@sps-woodland/cards";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fill" src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fit" src="assets/images/photo-landscape.jpg" />
+                    </Card>
+                  </div>
+                </div>
+              )
+            }
+          `
+        },
+        portrait: {
+          description: "Portrait oriented photo ",
+          react: u`
+            import { Photo } from "@sps-woodland/photo";
+            import { Card } from "@sps-woodland/cards";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fill" src="assets/images/photo-portrait.jpg" />
+                    </Card>
+                  </div>
+                  <div className={grid[4]}>
+                    <Card>
+                      <Photo mode="fit" src="assets/images/photo-portrait.jpg" />
+                    </Card>
+                  </div>
+                </div>
+              )
+            }
+          `
+        }
+      }
+    },
+    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: u`
+            import { Photo } from "@sps-woodland/photo";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo />
+                  </div>
+                </div>
+              )
+            }
+          `
+        },
+        photoAlt: {
+          description: "Photo Alt",
+          react: u`
+            import { Photo } from "@sps-woodland/photo";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="camera" />
+                  </div>
+                </div>
+              )
+            }
+          `
+        },
+        user: {
+          description: "User / Single Person",
+          react: u`
+            import { Photo } from "@sps-woodland/photo";
+              
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="user" />
+                  </div>
+                </div>
+              )
+            }
+          `
+        },
+        group: {
+          description: "Group / Multiple People",
+          react: u`
+            import { Photo } from "@sps-woodland/photo";
+            
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="group" />
+                  </div>
+                </div>
+              )
+            }
+          `
+        },
+        company: {
+          description: "Company / Building",
+          react: u`
+            import { Photo } from "@sps-woodland/photo";
+
+            function Component () {
+              return (
+                <div className={grid.root}>
+                  <div className={grid[3]}>
+                    <Photo placeholderIcon="building" />
+                  </div>
+                </div>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, B = {
+  Photos: D
+};
+export {
+  B as MANIFEST,
+  b as Photo
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/style.css

@@ -0,0 +1 @@
+._1ofindv0{align-items:center;display:flex;justify-content:center;overflow:hidden;padding:0!important;vertical-align:middle}._1ofindv1{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}._1ofindv3{visibility:hidden}._1ofindv4{height:100%;visibility:visible;width:auto}._1ofindv5{height:auto;visibility:visible;width:100%}._1ofindv6{flex:1;font-size:6em;text-align:center;color:#717779}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@sps-woodland/photo",
+  "description": "SPS Woodland Design System photo component",
+  "version": "8.0.0-rc1",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/photo",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/photo#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/tokens": "8.0.0-rc1",
+    "@sps-woodland/core": "8.0.0-rc1"
+  },
+  "devDependencies": {
+    "@spscommerce/utils": "^6.12.1",
+    "@vanilla-extract/css": "^1.9.3",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "@sps-woodland/core": "8.0.0-rc1",
+    "@sps-woodland/tokens": "8.0.0-rc1"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});