@ews-admin/global-design-system 1.31.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -32,6 +32,7 @@
     "@eslint/js": "^9.36.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@storybook/addon-essentials": "^7.5.0",

package/src/components/Logo/Logo.tsx

@@ -1,5 +1,7 @@
+import type { SyntheticEvent } from "react";
 import { cn } from "../../utils";
 import type { LogoProps } from "./Logo.types";
+import { logoAssets } from "./logoAssets";
 
 const Logo = ({
   size = "md",
@@ -26,19 +28,19 @@ const Logo = ({
     xl: "h-16 w-16",
   };
 
-  // Get the appropriate logo image based on variant or custom source
-  // For iconOnly, always use favicon.ico unless customSrc is provided
-  const logoSrc =
-    customSrc ||
-    (iconOnly
-      ? "/favicon.ico"
-      : variant === "white"
-      ? "/image/logoWhite.png"
-      : variant === "fullWhite"
-      ? "/image/logoFullWhite.png"
-      : variant === "favicon"
-      ? "/favicon.ico"
-      : "/image/logo.png");
+  // Bundled logo per variant (MED-1629); customSrc wins. iconOnly always uses the icon.
+  const logoSrc = customSrc || (iconOnly ? logoAssets.favicon : logoAssets[variant]);
+  const fallbackSrc = iconOnly ? logoAssets.favicon : logoAssets.normal;
+
+  // On a load error, fall back to the bundled logo once, then hide the image (keeps layout).
+  const handleError = (e: SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    if (img.getAttribute("src") !== fallbackSrc) {
+      img.src = fallbackSrc;
+    } else {
+      img.style.visibility = "hidden";
+    }
+  };
 
   const isClickable = clickable || !!onClick;
 
@@ -69,12 +71,7 @@ const Logo = ({
           src={logoSrc}
           alt={alt}
           className="object-contain w-full h-full"
-          onError={(e) => {
-            // Fallback to favicon if image fails to load
-            if (logoSrc !== "/favicon.ico") {
-              (e.target as unknown as { src: string }).src = "/favicon.ico";
-            }
-          }}
+          onError={handleError}
         />
       </div>
     );
@@ -107,12 +104,7 @@ const Logo = ({
         src={logoSrc}
         alt={alt}
         className="object-contain w-auto h-full"
-        onError={(e) => {
-          // Fallback to favicon if image fails to load
-          if (logoSrc !== "/favicon.ico") {
-            (e.target as unknown as { src: string }).src = "/favicon.ico";
-          }
-        }}
+        onError={handleError}
       />
     </div>
   );

package/src/components/Logo/logoAssets.ts

@@ -0,0 +1,16 @@
+/**
+ * MED-1629: the Medecine360 logos ship with the package (inlined as data URIs by
+ * @rollup/plugin-image), so consuming apps need no `/image/logo*.png` in their public folder.
+ * Sized to 2x the largest rendered height (Logo xl = 96px, icon xl = 64px).
+ */
+import logoIcon from "../../assets/logo/logoIcon.png";
+import logo from "../../assets/logo/logo.png";
+import logoFullWhite from "../../assets/logo/logoFullWhite.png";
+import logoWhite from "../../assets/logo/logoWhite.png";
+
+export const logoAssets = {
+  normal: logo,
+  white: logoWhite,
+  fullWhite: logoFullWhite,
+  favicon: logoIcon,
+} as const;

package/src/types/assets.d.ts

@@ -0,0 +1,5 @@
+/** MED-1629: image imports resolve to a URL string (an inlined data URI in the Rollup build). */
+declare module "*.png" {
+  const src: string;
+  export default src;
+}