@fiscozen/thumbnail 0.2.0

package/dist/thumbnail.js

@@ -0,0 +1,94 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createVNode as r, defineComponent as i, mergeProps as a, normalizeClass as o, normalizeStyle as s, openBlock as c, ref as l, renderSlot as u, unref as d, watch as f } from "vue";
+import { FzIcon as p } from "@fiscozen/icons";
+//#region src/FzThumbnail.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"src",
+	"alt",
+	"loading"
+], h = ["role", "aria-label"], g = {
+	key: 2,
+	class: "fz-thumbnail__scrim absolute inset-0",
+	"data-testid": "fz-thumbnail-scrim"
+}, _ = /* @__PURE__ */ ((e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+})(/* @__PURE__ */ i({
+	__name: "FzThumbnail",
+	props: {
+		src: {},
+		alt: {},
+		width: {},
+		height: {},
+		aspectRatio: {},
+		radius: { default: "base" },
+		bordered: {
+			type: Boolean,
+			default: !1
+		},
+		scrim: {
+			type: Boolean,
+			default: !1
+		},
+		overlayPosition: { default: "bottom-end" },
+		placeholderIcon: { default: "file" },
+		loading: { default: "lazy" },
+		imgProps: {}
+	},
+	emits: ["error"],
+	setup(i, { emit: _ }) {
+		let v = i, y = _, b = l(!1);
+		f(() => v.src, () => {
+			b.value = !1;
+		});
+		let x = e(() => !!v.src && !b.value), S = e(() => b.value && v.alt ? v.alt : void 0), C = {
+			none: "rounded-none",
+			sm: "rounded-sm",
+			base: "rounded",
+			lg: "rounded-lg",
+			xl: "rounded-xl"
+		}, w = {
+			"top-start": "items-start justify-start",
+			"top-end": "items-start justify-end",
+			"bottom-start": "items-end justify-start",
+			"bottom-end": "items-end justify-end",
+			center: "items-center justify-center"
+		}, T = e(() => ({
+			...v.width ? { width: v.width } : {},
+			...v.height ? { height: v.height } : {},
+			...v.aspectRatio ? { aspectRatio: v.aspectRatio } : {}
+		})), E = () => {
+			b.value = !0, y("error", v.src);
+		};
+		return (e, l) => (c(), n("div", {
+			class: o(["fz-thumbnail bg-core-white relative overflow-hidden", [C[i.radius], { "border-1 border-grey-100 border-solid": i.bordered }]]),
+			style: s(T.value)
+		}, [
+			x.value ? (c(), n("img", a({ key: 0 }, i.imgProps, {
+				src: i.src,
+				alt: i.alt,
+				loading: i.loading,
+				class: "block size-full object-cover",
+				onError: E
+			}), null, 16, m)) : (c(), n("div", {
+				key: 1,
+				class: "bg-grey-100 grid size-full place-content-center",
+				role: S.value ? "img" : void 0,
+				"aria-label": S.value,
+				"data-testid": "fz-thumbnail-placeholder"
+			}, [r(d(p), {
+				name: i.placeholderIcon,
+				size: "lg",
+				class: "text-grey-300"
+			}, null, 8, ["name"])], 8, h)),
+			i.scrim && x.value ? (c(), n("div", g)) : t("", !0),
+			e.$slots.overlay ? (c(), n("div", {
+				key: 3,
+				class: o(["pointer-events-none absolute inset-0 flex p-8 [&>*]:pointer-events-auto", w[i.overlayPosition]]),
+				"data-testid": "fz-thumbnail-overlay"
+			}, [u(e.$slots, "overlay", {}, void 0, !0)], 2)) : t("", !0)
+		], 6));
+	}
+}), [["__scopeId", "data-v-a2d500cf"]]);
+//#endregion
+export { _ as FzThumbnail };

package/dist/thumbnail.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`@fiscozen/icons`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@fiscozen/icons`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FzThumbnail={},e.Vue,e._fiscozen_icons))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=[`src`,`alt`,`loading`],i=[`role`,`aria-label`],a={key:2,class:`fz-thumbnail__scrim absolute inset-0`,"data-testid":`fz-thumbnail-scrim`};e.FzThumbnail=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({__name:`FzThumbnail`,props:{src:{},alt:{},width:{},height:{},aspectRatio:{},radius:{default:`base`},bordered:{type:Boolean,default:!1},scrim:{type:Boolean,default:!1},overlayPosition:{default:`bottom-end`},placeholderIcon:{default:`file`},loading:{default:`lazy`},imgProps:{}},emits:[`error`],setup(e,{emit:o}){let s=e,c=o,l=(0,t.ref)(!1);(0,t.watch)(()=>s.src,()=>{l.value=!1});let u=(0,t.computed)(()=>!!s.src&&!l.value),d=(0,t.computed)(()=>l.value&&s.alt?s.alt:void 0),f={none:`rounded-none`,sm:`rounded-sm`,base:`rounded`,lg:`rounded-lg`,xl:`rounded-xl`},p={"top-start":`items-start justify-start`,"top-end":`items-start justify-end`,"bottom-start":`items-end justify-start`,"bottom-end":`items-end justify-end`,center:`items-center justify-center`},m=(0,t.computed)(()=>({...s.width?{width:s.width}:{},...s.height?{height:s.height}:{},...s.aspectRatio?{aspectRatio:s.aspectRatio}:{}})),h=()=>{l.value=!0,c(`error`,s.src)};return(o,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`fz-thumbnail bg-core-white relative overflow-hidden`,[f[e.radius],{"border-1 border-grey-100 border-solid":e.bordered}]]),style:(0,t.normalizeStyle)(m.value)},[u.value?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,(0,t.mergeProps)({key:0},e.imgProps,{src:e.src,alt:e.alt,loading:e.loading,class:`block size-full object-cover`,onError:h}),null,16,r)):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:`bg-grey-100 grid size-full place-content-center`,role:d.value?`img`:void 0,"aria-label":d.value,"data-testid":`fz-thumbnail-placeholder`},[(0,t.createVNode)((0,t.unref)(n.FzIcon),{name:e.placeholderIcon,size:`lg`,class:`text-grey-300`},null,8,[`name`])],8,i)),e.scrim&&u.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,a)):(0,t.createCommentVNode)(``,!0),o.$slots.overlay?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:3,class:(0,t.normalizeClass)([`pointer-events-none absolute inset-0 flex p-8 [&>*]:pointer-events-auto`,p[e.overlayPosition]]),"data-testid":`fz-thumbnail-overlay`},[(0,t.renderSlot)(o.$slots,`overlay`,{},void 0,!0)],2)):(0,t.createCommentVNode)(``,!0)],6))}}),[[`__scopeId`,`data-v-a2d500cf`]])});

package/eslintrc.cjs

@@ -0,0 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': ['@fiscozen/eslint-config', 'plugin:storybook/recommended'],
+  overrides: [
+    {
+      files: [
+        'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
+        'cypress/support/**/*.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:cypress/recommended'
+      ]
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@fiscozen/thumbnail",
+  "version": "0.2.0",
+  "description": "Design System Thumbnail component",
+  "main": "src/index.ts",
+  "type": "module",
+  "keywords": [],
+  "author": "Riccardo Agnoletto",
+  "peerDependencies": {
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.13",
+    "@fiscozen/icons": "^1.0.8"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.1",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "eslint": "^8.49.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.7.0",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^4.1.1",
+    "vue-tsc": "^2.2.12",
+    "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "coverage": "vitest run --coverage",
+    "format": "prettier --write src/",
+    "test:unit": "vitest run",
+    "build": "vue-tsc && vite build"
+  }
+}

package/prettierrc.js

@@ -0,0 +1,5 @@
+import fiscozenPrettierConfig from '@fiscozen/prettier-config';
+
+export default {
+    ...fiscozenPrettierConfig
+};

package/src/FzThumbnail.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * FzThumbnail – shows an image from a URL inside a box the caller sizes.
+ *
+ * The design system had no way to render an arbitrary image (LIB-2918): the only
+ * three components that render an `<img>` are `FzAvatar` — round, with hardwired
+ * sizes — and `FzRadioCard` / `FzCheckboxCard`, where the image is an
+ * illustration inside a selectable card. This generalises that second pattern.
+ *
+ * **The caller imposes the dimensions.** This component hardwires none, so that
+ * it does not repeat `FzAvatar`'s mistake of owning a size — but it takes them as
+ * *props* rather than leaving them to a class, because the consuming apps forbid
+ * `class` at the organism, template and page layers and `style` above an atom.
+ * Give it `width` + `height`, or one of them + `aspectRatio`. With no dimension
+ * at all the box takes its container's width and the image's *natural* aspect
+ * ratio: visible, but at a size neither the caller nor the design chose — and a
+ * load failure then collapses it, because the placeholder has no natural ratio
+ * to fall back on. Size it.
+ *
+ * @component
+ * @example
+ * <FzThumbnail src="/receipt.jpg" alt="Scontrino di marzo" width="158px" height="108px" />
+ *
+ * @example A download action over a scrim, as in the customer chat feed.
+ * <FzThumbnail :src="a.url" alt="" scrim bordered width="100%" height="168px">
+ *   <template #overlay>
+ *     <FzIconButton iconName="arrow-down-to-line" ariaLabel="Scarica" @click="download(a)" />
+ *   </template>
+ * </FzThumbnail>
+ */
+import { computed, ref, watch } from 'vue'
+import { FzIcon } from '@fiscozen/icons'
+import type { FzThumbnailOverlayPosition, FzThumbnailProps, FzThumbnailRadius } from './types'
+
+const props = withDefaults(defineProps<FzThumbnailProps>(), {
+  radius: 'base',
+  bordered: false,
+  scrim: false,
+  overlayPosition: 'bottom-end',
+  placeholderIcon: 'file',
+  loading: 'lazy'
+})
+
+const emit = defineEmits<{
+  /**
+   * The image could not be loaded and the placeholder is showing. The caller can
+   * use it to fall back to something else entirely — a file card, say.
+   */
+  error: [src: string]
+}>()
+
+const failed = ref(false)
+
+// A new URL deserves a new attempt: without this, one broken image would pin the
+// placeholder for every later `src` the same instance is given.
+watch(
+  () => props.src,
+  () => {
+    failed.value = false
+  }
+)
+
+const showImage = computed(() => !!props.src && !failed.value)
+
+// The placeholder speaks only when a *named* image failed. Three cases, and they
+// are not the same thing:
+//   - `src` empty      → nothing was ever meant to be here; stay silent.
+//   - failed, alt ""   → the caller called it decorative; stay silent.
+//   - failed, alt set  → the caller named it, and a native <img> whose resource
+//                        404s would still expose that name in the accessibility
+//                        tree. Swapping the element out must not throw it away.
+const placeholderLabel = computed(() => (failed.value && props.alt ? props.alt : undefined))
+
+const radiusClasses: Record<FzThumbnailRadius, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  base: 'rounded',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl'
+}
+
+const overlayPositionClasses: Record<FzThumbnailOverlayPosition, string> = {
+  'top-start': 'items-start justify-start',
+  'top-end': 'items-start justify-end',
+  'bottom-start': 'items-end justify-start',
+  'bottom-end': 'items-end justify-end',
+  center: 'items-center justify-center'
+}
+
+// Only the keys the caller actually set, so an unset dimension stays absent from
+// the style attribute rather than landing there as `undefined`.
+const boxStyle = computed(() => ({
+  ...(props.width ? { width: props.width } : {}),
+  ...(props.height ? { height: props.height } : {}),
+  ...(props.aspectRatio ? { aspectRatio: props.aspectRatio } : {})
+}))
+
+const onError = () => {
+  failed.value = true
+  emit('error', props.src)
+}
+</script>
+
+<template>
+  <div
+    class="fz-thumbnail bg-core-white relative overflow-hidden"
+    :class="[radiusClasses[radius], { 'border-1 border-grey-100 border-solid': bordered }]"
+    :style="boxStyle"
+  >
+    <img
+      v-if="showImage"
+      v-bind="imgProps"
+      :src="src"
+      :alt="alt"
+      :loading="loading"
+      class="block size-full object-cover"
+      @error="onError"
+    />
+
+    <!-- Placeholder. Fills the same box, so a broken URL leaves the layout
+         alone instead of collapsing the row around it — as long as the box has
+         a size of its own. An unsized box is only as tall as its content, and
+         a placeholder, unlike an image, has no intrinsic ratio to supply that
+         height with, so it collapses to the icon. Deliberately not given a
+         min-height: that would hand the component a size of its own, which is
+         the thing it refuses. Measured in the `Unsized` story. -->
+    <div
+      v-else
+      class="bg-grey-100 grid size-full place-content-center"
+      :role="placeholderLabel ? 'img' : undefined"
+      :aria-label="placeholderLabel"
+      data-testid="fz-thumbnail-placeholder"
+    >
+      <FzIcon :name="placeholderIcon" size="lg" class="text-grey-300" />
+    </div>
+
+    <div
+      v-if="scrim && showImage"
+      class="fz-thumbnail__scrim absolute inset-0"
+      data-testid="fz-thumbnail-scrim"
+    />
+
+    <!-- Overlay layer. Inert itself so it does not swallow clicks meant for the
+         image, with pointer events handed back to whatever the caller puts in
+         it. A flex box rather than bare `absolute inset-0`, so that dropping a
+         button in the slot places it without the call site writing a class —
+         which the organism, template and page layers may not do. -->
+    <div
+      v-if="$slots.overlay"
+      class="pointer-events-none absolute inset-0 flex p-8 [&>*]:pointer-events-auto"
+      :class="overlayPositionClasses[overlayPosition]"
+      data-testid="fz-thumbnail-overlay"
+    >
+      <slot name="overlay" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Why this is not `bg-grey-500/20`: the design system's colours resolve to
+   `var(--grey-500, #596167)`, and Tailwind cannot decompose a `var()` into
+   channels — so an opacity modifier on a token colour generates *no rule at
+   all*, silently. Verified against the DS preset with the Tailwind CLI. The
+   value is `grey-500` at 20%, matching the design's `rgba(74, 85, 101, 0.2)`
+   re-expressed on the DS palette.
+
+   And why the 20% is `opacity` rather than baked into an `rgba()`: writing
+   `rgba(89, 97, 103, 0.2)` freezes `--grey-500`'s *fallback*, so a consumer who
+   rethemes the token gets every other grey following and the scrim staying put.
+   The scrim is an empty overlay div, so `opacity` has nothing to bleed onto —
+   the `dialog::backdrop` rule in `FzDialog` is the same trick, and the better
+   of that file's two. Both custom properties are the consumer's escape hatch,
+   as with `--fz-navbar-shadow`. */
+.fz-thumbnail__scrim {
+  background-color: var(--fz-thumbnail-scrim, var(--grey-500, #596167));
+  opacity: var(--fz-thumbnail-scrim-opacity, 0.2);
+}
+</style>