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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.30.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/LockScreen/LockScreen.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { cn } from "../../utils";
 import { Button } from "../Button/Button";
 import { Logo } from "../Logo";
+import { PinCodeInput } from "../PinCodeInput";
 import { PinPad } from "../PinPad";
 import type {
   LockScreenMode,
@@ -33,14 +35,21 @@ const titleOf = (mode: LockScreenMode, step: Step, texts: LockScreenTexts) => {
   }
 };
 
+/** Same breakpoint as Tailwind's `sm`. */
+const DESKTOP_QUERY = "(min-width: 640px)";
+
+/** Open lock screens, oldest first; only the last one traps focus. */
+const trapStack: object[] = [];
+
 const FOCUSABLE =
   'button:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
 
 /**
  * Blocking PIN screen: creates, checks, changes or resets (with a one-time
- * code) the user's secret code. Full screen on mobile, centered card on a grey
- * backdrop from 640px. Submit handlers return promises: a rejection clears the
- * code and goes back to the first step, the app shows its message in `error`.
+ * code) the user's secret code. Below 640px: full screen with an on-screen
+ * keypad. From 640px: compact dialog on a grey backdrop with one box per digit,
+ * typed on the keyboard. Submit handlers return promises: a rejection clears
+ * the code and goes back to the first step, the app shows its message in `error`.
  */
 const LockScreen = ({
   mode,
@@ -53,6 +62,8 @@ const LockScreen = ({
   onReset,
   onForgot,
   onCancel,
+  onSignOut,
+  subtitle,
   pinLength = 4,
   otpLength = 6,
   logo,
@@ -68,6 +79,7 @@ const LockScreen = ({
   const [resetKey, setResetKey] = useState(0);
   const panelRef = useRef<HTMLDivElement>(null);
   const mounted = useRef(true);
+  const isDesktop = useMediaQuery(DESKTOP_QUERY);
 
   const restart = useCallback(
     (failed: boolean) => {
@@ -93,21 +105,29 @@ const LockScreen = ({
     };
   }, []);
 
-  // Block page scroll and keep focus inside the screen.
+  // Block page scroll and keep focus inside the screen. Only the most recently
+  // mounted lock screen traps focus: two traps pulling focus back to their own
+  // panel would loop forever (e.g. a Storybook docs page rendering every story).
   useEffect(() => {
+    const token = {};
+    trapStack.push(token);
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const previousFocus = document.activeElement as HTMLElement | null;
-    panelRef.current?.focus();
+    // The desktop code boxes focus themselves first.
+    if (!panelRef.current?.contains(document.activeElement)) panelRef.current?.focus();
     const keepFocus = (event: FocusEvent) => {
+      if (trapStack[trapStack.length - 1] !== token) return;
       const panel = panelRef.current;
       if (panel && !panel.contains(event.target as Node)) panel.focus();
     };
     document.addEventListener("focusin", keepFocus);
     return () => {
+      const wasTop = trapStack[trapStack.length - 1] === token;
+      trapStack.splice(trapStack.indexOf(token), 1);
       document.body.style.overflow = previousOverflow;
       document.removeEventListener("focusin", keepFocus);
-      previousFocus?.focus?.();
+      if (wasTop) previousFocus?.focus?.();
     };
   }, []);
 
@@ -185,6 +205,13 @@ const LockScreen = ({
     setStep("new");
   };
 
+  const completeOtp = (code: string) => {
+    setLocalError(null);
+    setFirstValue(code);
+    setInvalid(false);
+    setStep("new");
+  };
+
   const isBusy = busy || pending;
   const shownError = localError ?? error;
   const showForgot =
@@ -193,82 +220,39 @@ const LockScreen = ({
     (step === "unlock" || step === "current");
   const title = titleOf(mode, step, texts);
 
-  return (
-    <div
-      className={cn(
-        "fixed inset-0 z-[1000] flex justify-center overflow-y-auto bg-white",
-        "sm:items-center sm:bg-ews-gray-900/50 sm:backdrop-blur-sm",
-        className,
-      )}
-      data-testid="lock-screen"
-    >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={texts.dialogLabel}
-        aria-busy={isBusy}
-        tabIndex={-1}
-        onKeyDown={trapTab}
-        className={cn(
-          "flex min-h-full w-full flex-col items-center px-6 pb-8 outline-none",
-          "sm:min-h-0 sm:w-auto sm:min-w-[22rem] sm:rounded-2xl sm:bg-white sm:px-10 sm:py-10 sm:shadow-xl",
-        )}
-      >
-        <div className="flex min-h-[33vh] shrink-0 items-center justify-center sm:min-h-0 sm:pb-8">
-          {logo ?? <Logo size="lg" variant="normal" />}
-        </div>
+  const digitLabel = texts.digit ?? texts.progress;
 
-        {title && (
-          <h2 className="mb-8 text-center text-lg font-normal text-ews-gray-900">
-            {title}
-          </h2>
-        )}
+  const desktopContent = (
+    <>
+      <div className="pb-5">{logo ?? <Logo size="sm" variant="normal" />}</div>
+
+      {title && (
+        <h2 className="text-center text-xl font-semibold text-ews-gray-900">{title}</h2>
+      )}
+      {subtitle && (
+        <p className="mt-1 text-center text-sm text-ews-gray-600">{subtitle}</p>
+      )}
+      {step === "otp" && texts.otpDescription && (
+        <p className="mt-2 text-center text-sm text-ews-gray-600">{texts.otpDescription}</p>
+      )}
 
+      <div className="mt-6">
         {step === "otp" ? (
-          <form
-            onSubmit={submitOtp}
-            className="flex w-full max-w-xs flex-col items-center gap-4"
-          >
-            {texts.otpDescription && (
-              <p className="text-center text-sm text-ews-gray-600">
-                {texts.otpDescription}
-              </p>
-            )}
-            <label className="sr-only" htmlFor="lock-screen-otp">
-              {texts.otpLabel}
-            </label>
-            <input
-              id="lock-screen-otp"
-              dir="ltr"
-              inputMode="numeric"
-              autoComplete="one-time-code"
-              maxLength={otpLength}
-              value={otp}
-              disabled={isBusy}
-              aria-label={texts.otpLabel}
-              aria-invalid={invalid || undefined}
-              onChange={(event) => {
-                setOtp(event.target.value.replace(/\D/g, "").slice(0, otpLength));
-                setInvalid(false);
-              }}
-              className={cn(
-                "w-full rounded-lg border bg-white px-4 py-3 text-center text-2xl tracking-[0.5em]",
-                "focus:border-ews-primary focus:ring-2 focus:ring-ews-primary",
-                invalid ? "border-ews-error" : "border-ews-gray-300",
-              )}
-            />
-            <Button
-              type="submit"
-              variant="ews-primary"
-              fullWidth
-              disabled={otp.length !== otpLength || isBusy}
-            >
-              {texts.otpSubmit}
-            </Button>
-          </form>
+          <PinCodeInput
+            key={step}
+            length={otpLength}
+            masked={false}
+            autoComplete="one-time-code"
+            onComplete={completeOtp}
+            onChange={() => setInvalid(false)}
+            disabled={isBusy}
+            invalid={invalid}
+            resetKey={resetKey}
+            digitLabel={digitLabel}
+            groupLabel={texts.otpLabel ?? title}
+          />
         ) : (
-          <PinPad
+          <PinCodeInput
             key={step}
             length={pinLength}
             onComplete={handlePin}
@@ -276,26 +260,24 @@ const LockScreen = ({
             disabled={isBusy}
             invalid={invalid}
             resetKey={resetKey}
-            eraseLabel={texts.erase}
-            progressLabel={texts.progress}
-            keypadLabel={texts.keypad}
+            digitLabel={digitLabel}
+            groupLabel={title}
           />
         )}
+      </div>
 
-        <p
-          role="alert"
-          className="mt-6 min-h-[1.25rem] text-center text-sm text-ews-error"
-        >
-          {shownError}
-        </p>
+      <p role="alert" className="mt-3 min-h-[1.25rem] text-center text-sm text-ews-error">
+        {shownError}
+      </p>
 
-        <div className="mt-auto flex flex-col items-center gap-3 pt-6 sm:mt-4">
+      {(showForgot || (onCancel && texts.cancel) || (onSignOut && texts.signOut)) && (
+        <div className="mt-4 flex w-full flex-col items-center gap-2 border-t border-ews-gray-200 pt-4">
           {showForgot && (
             <button
               type="button"
               onClick={onForgot}
               disabled={isBusy}
-              className="text-base font-medium text-ews-primary hover:underline focus-visible:underline"
+              className="text-sm font-medium text-ews-primary hover:underline focus-visible:underline"
             >
               {texts.forgot}
             </button>
@@ -310,7 +292,151 @@ const LockScreen = ({
               {texts.cancel}
             </button>
           )}
+          {onSignOut && texts.signOut && (
+            <button
+              type="button"
+              onClick={onSignOut}
+              disabled={isBusy}
+              className="text-sm text-ews-gray-600 hover:underline focus-visible:underline"
+            >
+              {texts.signOut}
+            </button>
+          )}
         </div>
+      )}
+    </>
+  );
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-[1000] flex justify-center overflow-y-auto bg-white",
+        "sm:items-center sm:bg-ews-gray-900/50 sm:backdrop-blur-sm",
+        isDesktop && "p-4",
+        className,
+      )}
+      data-testid="lock-screen"
+      data-layout={isDesktop ? "desktop" : "mobile"}
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={texts.dialogLabel}
+        aria-busy={isBusy}
+        tabIndex={-1}
+        onKeyDown={trapTab}
+        className={
+          isDesktop
+            ? "flex w-full max-w-[400px] flex-col items-center rounded-2xl bg-white px-8 py-8 shadow-xl outline-none"
+            : cn(
+                "flex min-h-full w-full flex-col items-center px-6 pb-8 outline-none",
+                "sm:min-h-0 sm:w-auto sm:min-w-[22rem] sm:rounded-2xl sm:bg-white sm:px-10 sm:py-10 sm:shadow-xl",
+              )
+        }
+      >
+        {isDesktop ? (
+          desktopContent
+        ) : (
+          <>
+            <div className="flex min-h-[33vh] shrink-0 items-center justify-center sm:min-h-0 sm:pb-8">
+              {logo ?? <Logo size="lg" variant="normal" />}
+            </div>
+
+            {title && (
+              <h2 className="mb-8 text-center text-lg font-normal text-ews-gray-900">
+                {title}
+              </h2>
+            )}
+
+            {step === "otp" ? (
+              <form
+                onSubmit={submitOtp}
+                className="flex w-full max-w-xs flex-col items-center gap-4"
+              >
+                {texts.otpDescription && (
+                  <p className="text-center text-sm text-ews-gray-600">
+                    {texts.otpDescription}
+                  </p>
+                )}
+                <label className="sr-only" htmlFor="lock-screen-otp">
+                  {texts.otpLabel}
+                </label>
+                <input
+                  id="lock-screen-otp"
+                  dir="ltr"
+                  inputMode="numeric"
+                  autoComplete="one-time-code"
+                  maxLength={otpLength}
+                  value={otp}
+                  disabled={isBusy}
+                  aria-label={texts.otpLabel}
+                  aria-invalid={invalid || undefined}
+                  onChange={(event) => {
+                    setOtp(event.target.value.replace(/\D/g, "").slice(0, otpLength));
+                    setInvalid(false);
+                  }}
+                  className={cn(
+                    "w-full rounded-lg border bg-white px-4 py-3 text-center text-2xl tracking-[0.5em]",
+                    "focus:border-ews-primary focus:ring-2 focus:ring-ews-primary",
+                    invalid ? "border-ews-error" : "border-ews-gray-300",
+                  )}
+                />
+                <Button
+                  type="submit"
+                  variant="ews-primary"
+                  fullWidth
+                  disabled={otp.length !== otpLength || isBusy}
+                >
+                  {texts.otpSubmit}
+                </Button>
+              </form>
+            ) : (
+              <PinPad
+                key={step}
+                length={pinLength}
+                onComplete={handlePin}
+                onChange={() => setInvalid(false)}
+                disabled={isBusy}
+                invalid={invalid}
+                resetKey={resetKey}
+                eraseLabel={texts.erase}
+                progressLabel={texts.progress}
+                keypadLabel={texts.keypad}
+              />
+            )}
+
+            <p
+              role="alert"
+              className="mt-6 min-h-[1.25rem] text-center text-sm text-ews-error"
+            >
+              {shownError}
+            </p>
+
+            <div className="mt-auto flex flex-col items-center gap-3 pt-6 sm:mt-4">
+              {showForgot && (
+                <button
+                  type="button"
+                  onClick={onForgot}
+                  disabled={isBusy}
+                  className="text-base font-medium text-ews-primary hover:underline focus-visible:underline"
+                >
+                  {texts.forgot}
+                </button>
+              )}
+              {onCancel && texts.cancel && (
+                <button
+                  type="button"
+                  onClick={onCancel}
+                  disabled={isBusy}
+                  className="text-sm text-ews-gray-600 hover:underline focus-visible:underline"
+                >
+                  {texts.cancel}
+                </button>
+              )}
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

package/src/components/LockScreen/LockScreen.types.ts

@@ -30,12 +30,16 @@ export interface LockScreenTexts {
   forgot?: string;
   /** Secondary link, shown with `onCancel`. */
   cancel?: string;
+  /** Desktop: "Se déconnecter" link, shown with `onSignOut`. */
+  signOut?: string;
   /** Accessible label of the erase key. */
   erase: string;
   /** Accessible label of the keypad. */
   keypad?: string;
   /** Text announced when the number of typed digits changes. */
   progress: (filled: number, total: number) => string;
+  /** Desktop: accessible label of each box, e.g. (1, 4) => "Chiffre 1 sur 4". Defaults to `progress`. */
+  digit?: (position: number, total: number) => string;
 }
 
 export interface LockScreenProps {
@@ -57,6 +61,10 @@ export interface LockScreenProps {
   onForgot?: () => void;
   /** Shows the "cancel" link (e.g. leave the change or reset flow). */
   onCancel?: () => void;
+  /** Desktop: shows the sign out link (with `texts.signOut`). */
+  onSignOut?: () => void;
+  /** Desktop: line under the title, e.g. "Connecté en tant que Awa Diop". */
+  subtitle?: React.ReactNode;
   /** Number of PIN digits. Default 4. */
   pinLength?: number;
   /** Number of one-time code digits. Default 6. */

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;