@breathe-ds/ui 0.2.0 → 0.3.0

package/components/ProfessionalCard.tsx

@@ -0,0 +1,341 @@
+"use client";
+
+import { useEffect, useRef, useState, type ElementType, type ReactNode } from "react";
+import { initials } from "./Avatar";
+import { ProfessionalModal, type ProfessionalModalLabels, type ProfessionalPresentation } from "./ProfessionalModal";
+import { CollapseRow, LinkRow, RowList } from "./Rows";
+
+export type ProfessionalPhoto = {
+  src: string;
+  /** Default: `labels.portrait(name)` ("Portrait of {name}"). */
+  alt?: string;
+  srcSet?: string;
+  /** Default: one of three columns from lg, two from sm, full width on phones. */
+  sizes?: string;
+};
+
+export type ProfessionalLiving = {
+  /** Short muted clip, back-and-forth (first frame == last frame). */
+  src: string;
+  /** The clip's first frame: it is the still portrait. Same frame the clip
+   *  starts and ends on, so there is no jump when it plays or stops. */
+  poster: string;
+};
+
+export type ProfessionalGuidance = { label: ReactNode; href: string };
+
+export type ProfessionalCardLabels = ProfessionalModalLabels & {
+  /** alt of the portrait. */
+  portrait: (name: string) => string;
+  trajectory: string;
+  /** The row of the guidance the person signs; the count goes beside it. */
+  guidance: string;
+  /** sr-only, right after "Trajectory" and "Guidance": " of {name}". */
+  of: (name: string) => string;
+  instagram: string;
+  /** sr-only, right after "Instagram". */
+  instagramOf: (name: string) => string;
+};
+
+const EN: Omit<ProfessionalCardLabels, keyof ProfessionalModalLabels> = {
+  portrait: (name) => `Portrait of ${name}`,
+  trajectory: "Trajectory",
+  guidance: "Guidance",
+  of: (name) => ` of ${name}`,
+  instagram: "Instagram",
+  instagramOf: (name) => ` of ${name} (opens in a new tab)`,
+};
+
+const SIZES = "(min-width: 1024px) 30vw, (min-width: 640px) 45vw, 92vw";
+
+/** The photo zooms in a little with the mouse over the card, as on the home. */
+const ZOOM =
+  "aspect-[4/5] h-auto w-full object-cover transition-transform duration-500 ease-[var(--ease-cg)] motion-reduce:transition-none";
+const ZOOM_CARD = `${ZOOM} [@media(hover:hover)_and_(pointer:fine)]:group-hover/card:scale-[1.03] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover/card:scale-100`;
+/* inside the modal trigger only the photo button is the hover target */
+const ZOOM_PHOTO = `${ZOOM} [@media(hover:hover)_and_(pointer:fine)]:group-hover/photo:scale-[1.03] motion-reduce:[@media(hover:hover)_and_(pointer:fine)]:group-hover/photo:scale-100`;
+
+type LivingProps = ProfessionalLiving & {
+  /** The usual photo. Only shows if the video fails. */
+  photo: ProfessionalPhoto;
+  /** Replaces the fallback <img> (e.g. next/image). */
+  media?: ReactNode;
+  /** alt text read when the clip is decoration beside the name (sr-only). */
+  alt: string;
+  /** Empty alt when the text beside already says who it is. */
+  decorative?: boolean;
+  className?: string;
+};
+
+/**
+ * Portrait that comes alive with the mouse over the card — novo.creeta's
+ * `FotoViva` (components/foto-viva.tsx).
+ *
+ * What is seen still is the poster, the clip's own first frame. With the
+ * mouse over, the clip loops. On leave it does not cut: it finishes the way
+ * back to the first frame. The clip goes there and back, so the frame at t is
+ * the one at (duration − t): if the mouse leaves on the way out, it jumps to
+ * the mirrored point (same image) and plays only the way back.
+ *
+ * Only with a fine pointer (desktop); on touch the poster stays, because the
+ * tap on the photo already has a job (opens the presentation of who has one).
+ * People who asked for less motion also keep the poster. The clip only
+ * downloads on the first hover. If the video fails, the photo takes over.
+ *
+ * The hover target is the whole card: the closest `[data-cg-professional-card]`,
+ * <article> or <a>, else the parent.
+ */
+export function LivingPortrait({ src, poster, photo, media, alt, decorative = false, className = "" }: LivingProps) {
+  const video = useRef<HTMLVideoElement>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    const v = video.current;
+    if (!v) return;
+    const card = v.closest("[data-cg-professional-card], article, a") ?? v.parentElement;
+    if (!card) return;
+    const canAnimate = () =>
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(hover: hover) and (pointer: fine)").matches &&
+      !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const enter = () => {
+      if (!canAnimate()) return;
+      v.loop = true;
+      v.play().catch(() => {});
+    };
+    const leave = () => {
+      const d = v.duration;
+      if (!Number.isFinite(d) || d === 0) {
+        // no data yet: nothing to finish
+        v.pause();
+        return;
+      }
+      if (v.paused) return;
+      if (v.currentTime < d / 2) v.currentTime = d - v.currentTime;
+      v.loop = false;
+    };
+    // reached the end of the way back: the last frame equals the first
+    const onEnded = () => {
+      v.currentTime = 0;
+      v.loop = true;
+    };
+    card.addEventListener("pointerenter", enter);
+    card.addEventListener("pointerleave", leave);
+    v.addEventListener("ended", onEnded);
+    return () => {
+      card.removeEventListener("pointerenter", enter);
+      card.removeEventListener("pointerleave", leave);
+      v.removeEventListener("ended", onEnded);
+    };
+  }, []);
+
+  if (failed) {
+    return (
+      <span data-portrait="living" className={`relative block ${className}`}>
+        {media ?? (
+          <img
+            src={photo.src}
+            srcSet={photo.srcSet}
+            sizes={photo.sizes ?? SIZES}
+            alt={decorative ? "" : alt}
+            loading="lazy"
+            decoding="async"
+            className="absolute inset-0 h-full w-full object-cover"
+          />
+        )}
+      </span>
+    );
+  }
+
+  return (
+    <span data-portrait="living" className={`relative block ${className}`}>
+      <video
+        ref={video}
+        src={src}
+        poster={poster}
+        muted
+        loop
+        playsInline
+        preload="none"
+        aria-hidden="true"
+        tabIndex={-1}
+        onError={() => setFailed(true)}
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      {!decorative && <span className="sr-only">{alt}</span>}
+    </span>
+  );
+}
+
+type PortraitProps = {
+  name: string;
+  photo?: ProfessionalPhoto;
+  media?: ReactNode;
+  living?: ProfessionalLiving;
+  alt: string;
+  decorative?: boolean;
+  className: string;
+};
+
+/** The card's portrait: living clip, custom media, or the plain <img>. */
+function Portrait({ photo, media, living, alt, decorative = false, className }: PortraitProps) {
+  if (living) {
+    return (
+      <LivingPortrait
+        src={living.src}
+        poster={living.poster}
+        photo={photo ?? { src: living.poster }}
+        media={media}
+        alt={alt}
+        decorative={decorative}
+        className={className}
+      />
+    );
+  }
+  if (media) return <>{media}</>;
+  if (!photo) return null;
+  return (
+    <img
+      src={photo.src}
+      srcSet={photo.srcSet}
+      sizes={photo.sizes ?? SIZES}
+      alt={decorative ? "" : alt}
+      loading="lazy"
+      decoding="async"
+      className={className}
+    />
+  );
+}
+
+type Props = {
+  name: string;
+  /** Second line under the name (the profession), in `ink-soft`. */
+  role?: ReactNode;
+  /** Registration line (CREFITO). The family rule: a health professional
+   *  always shows the council number. */
+  registration?: ReactNode;
+  /** The still portrait (3:4 source, shown 4:5). Without it (and without
+   *  `media`/`living`), the initials in a tinted bubble. */
+  photo?: ProfessionalPhoto;
+  /** Your own image element (e.g. next/image) in place of `photo`. Give it
+   *  the box yourself (`aspect-[4/5] w-full object-cover`). */
+  media?: ReactNode;
+  /** Living portrait: the clip plays muted on hover; `photo` is the fallback. */
+  living?: ProfessionalLiving;
+  /** With a presentation video the portrait opens the modal (ProfessionalModal). */
+  presentation?: ProfessionalPresentation;
+  /** The bio: a string (one paragraph) or your own paragraphs. Opens in place
+   *  under "Trajectory". */
+  bio?: ReactNode;
+  /** The guidance pages the person signs: the row lists them, with the count. */
+  guidance?: ProfessionalGuidance[];
+  /** Instagram profile URL (outbound row). */
+  instagram?: string;
+  /** Anchor of the card (the authorship link of a guidance page lands here). */
+  id?: string;
+  /** h2 on the team page (default), h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  /** Root element. Default <article>. */
+  as?: ElementType;
+  /** Link component of the app for the guidance links (e.g. next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  labels?: Partial<ProfessionalCardLabels>;
+  className?: string;
+};
+
+/**
+ * Team card of the Cuidado Global family — novo.creeta's `ProfessionalCard`
+ * (components/professional-card.tsx) with the Breathe tokens. A `card`
+ * surface with the portrait on top (plain, living, or opening the video
+ * presentation), the name, role and registration, then one list of equal
+ * rows separated by hairlines: Trajectory (opens the bio in place), Guidance
+ * (opens the links in place) and Instagram (outbound). Six open bios used to
+ * make the page 6,700px tall on a phone, hence the rows.
+ *
+ * The Guidance row carries `data-cg-open-on-arrival`: the site opens it when
+ * the page is reached by the card's anchor (creeta's `abre-ao-chegar.tsx`,
+ * not part of the DS).
+ */
+export function ProfessionalCard({
+  name,
+  role,
+  registration,
+  photo,
+  media,
+  living,
+  presentation,
+  bio,
+  guidance,
+  instagram,
+  id,
+  headingLevel: Heading = "h2",
+  as: As = "article",
+  linkComponent,
+  labels,
+  className = "",
+}: Props) {
+  const t = { ...EN, ...labels };
+  const L: ElementType = linkComponent ?? "a";
+  const alt = photo?.alt ?? t.portrait(name);
+  const hasPortrait = Boolean(photo || media || living);
+
+  return (
+    <As id={id} data-cg-professional-card="" className={`group/card scroll-mt-24 rounded-2xl bg-card p-3 pb-6 ${className}`}>
+      {hasPortrait && presentation ? (
+        // with a presentation video, the photo opens the modal
+        <ProfessionalModal
+          name={name}
+          role={role}
+          registration={registration}
+          bio={bio}
+          presentation={presentation}
+          labels={labels}
+          portrait={<Portrait name={name} photo={photo} media={media} living={living} alt={alt} decorative className={ZOOM_PHOTO} />}
+        />
+      ) : hasPortrait ? (
+        <span className="block overflow-hidden rounded-[20px]">
+          <Portrait name={name} photo={photo} media={media} living={living} alt={alt} className={ZOOM_CARD} />
+        </span>
+      ) : (
+        <div
+          data-testid="initials"
+          aria-hidden="true"
+          className="flex aspect-[3/4] w-full items-center justify-center rounded-[20px] bg-ink/[0.12]"
+        >
+          <span className="font-heading text-4xl font-bold text-ink">{initials(name)}</span>
+        </div>
+      )}
+      <div className="px-3 pt-5">
+        <Heading className="font-heading text-xl font-medium leading-snug text-ink">{name}</Heading>
+        {role && <p className="mt-1 text-sm font-semibold text-ink-soft">{role}</p>}
+        {registration && (
+          <>
+            {/* /80 = 5.78:1 on white (creeta) — the CREFITO has a legal
+                visibility duty (COFFITO 414/2012); /60 gave 3.37:1 and failed AA. */}
+            <p className="mt-1 text-xs text-ink/80">{registration}</p>
+          </>
+        )}
+        {/* Trajectory, guidance and Instagram: one list, of equal rows. They
+            used to be three things with three designs (an open button, a loose
+            list of links and a magenta link at the end). The first two open in
+            place: six open bios made 6,700px of page on a phone. */}
+        <RowList className="mt-4">
+          {bio && (
+            <CollapseRow label={t.trajectory} srLabel={t.of(name)}>
+              {bio}
+            </CollapseRow>
+          )}
+
+          {/* What the person signs: it is what makes this card the destination
+              of the authorship link of the guidance pages. Whoever arrives by
+              that link finds this block open (site-side, data-cg-open-on-arrival). */}
+          {guidance && guidance.length > 0 && (
+            <CollapseRow label={t.guidance} srLabel={t.of(name)} links={guidance} linkComponent={L} data-cg-open-on-arrival="" />
+          )}
+
+          {instagram && <LinkRow label={t.instagram} srLabel={t.instagramOf(name)} href={instagram} external />}
+        </RowList>
+      </div>
+    </As>
+  );
+}

package/components/ProfessionalModal.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { Play, X } from "lucide-react";
+import { MediaCardBadge } from "./MediaCard";
+import { CaptionBand, useCaption } from "./CaptionBand";
+import { formatDuration } from "./VideoStoryCard";
+
+export type ProfessionalCaptions = {
+  /** WebVTT file in the page's language. With it, the current line is shown in
+   *  the CaptionBand at the top of the text column (never over the picture). */
+  src: string;
+  /** BCP 47 tag of the captions ("en", "pt-BR"). */
+  srcLang: string;
+  /** Name of the language, for the browser's captions menu. */
+  label?: string;
+};
+
+export type ProfessionalPresentation = {
+  /** The presentation video, recorded for the clinic's Instagram. Downloaded
+   *  only when the modal opens; plays with sound (it was a tap by the person). */
+  src: string;
+  poster?: string;
+  captions?: ProfessionalCaptions;
+  /** Seconds (formatted as "1 min 15 s"), or an already formatted string for
+   *  other languages. Goes into the sr-only text of the trigger. */
+  duration?: number | string;
+};
+
+export type ProfessionalModalLabels = {
+  /** The chip over the portrait: says the photo opens a video. */
+  presentation: string;
+  /** sr-only text of the trigger. `duration` is undefined when none was given. */
+  watch: (firstName: string, duration?: string) => string;
+  /** aria-label of the <video>. */
+  video: (firstName: string) => string;
+  close: string;
+};
+
+/** Lucide's icon type is wider than MediaCardBadge's `IconType` under strict
+ *  TS (propTypes allow a string `size`); this thin wrapper fits the slot. */
+const PlayIcon = (p: { size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }) => <Play {...p} />;
+
+const EN: ProfessionalModalLabels = {
+  presentation: "Presentation",
+  watch: (firstName, duration) => `Watch ${firstName}'s video presentation${duration ? ` (${duration})` : ""}`,
+  video: (firstName) => `${firstName}'s video presentation`,
+  close: "Close",
+};
+
+type Props = {
+  name: string;
+  /** Second line under the name (the profession). */
+  role?: ReactNode;
+  /** Registration line (CREFITO). Kept at /80: it has a legal visibility duty
+   *  (COFFITO 414/2012). */
+  registration?: ReactNode;
+  /** Full bio: a string (one paragraph) or your own paragraphs. */
+  bio?: ReactNode;
+  presentation: ProfessionalPresentation;
+  /** The portrait the trigger shows (plain photo or living portrait), rendered
+   *  by the card so both share one media contract. Decorative: the sr-only
+   *  text of the button already says who it is. */
+  portrait: ReactNode;
+  labels?: Partial<ProfessionalModalLabels>;
+};
+
+/**
+ * Team portrait that opens the video presentation in a modal — novo.creeta's
+ * `Apresentacao` (components/apresentacao.tsx) with the Breathe tokens.
+ *
+ * - The portrait is a button with a small play chip in the corner. On tap, the
+ *   modal grows out of the photo's place (FLIP: starts with the photo's scale
+ *   and position, transform and opacity only) up to the centre. On close it
+ *   goes back the same way.
+ * - It is a native <dialog>: focus trapped, Esc closes, focus returns to the
+ *   button, dark blurred backdrop. Body scroll is locked by the browser's
+ *   modal layer (`showModal()`), nothing else to do.
+ * - The video is only downloaded when the modal opens, and plays with sound
+ *   (it was a tap by the person). Under reduced motion it just appears.
+ * - With `captions`, the current line is shown in the CaptionBand that opens
+ *   the text column: under the video on phones, beside it from `md`.
+ */
+export function ProfessionalModal({ name, role, registration, bio, presentation, portrait, labels }: Props) {
+  const t = { ...EN, ...labels };
+  const trigger = useRef<HTMLButtonElement>(null);
+  const box = useRef<HTMLDialogElement>(null);
+  const video = useRef<HTMLVideoElement>(null);
+  const [open, setOpen] = useState(false);
+  const headingId = useId();
+  const captions = presentation.captions;
+  const { line, attach } = useCaption();
+  const firstName = name.split(" ")[0];
+  const duration =
+    typeof presentation.duration === "number" ? formatDuration(presentation.duration) : presentation.duration;
+
+  // Where the modal is born from: the difference between the photo and the box, as a transform.
+  function origin() {
+    const d = box.current;
+    const f = trigger.current;
+    if (!d || !f) return;
+    const a = f.getBoundingClientRect();
+    const b = d.getBoundingClientRect();
+    d.style.setProperty("--dx", `${a.left + a.width / 2 - (b.left + b.width / 2)}px`);
+    d.style.setProperty("--dy", `${a.top + a.height / 2 - (b.top + b.height / 2)}px`);
+    d.style.setProperty("--sx", `${a.width / b.width}`);
+    d.style.setProperty("--sy", `${a.height / b.height}`);
+  }
+
+  function show() {
+    const d = box.current;
+    if (!d) return;
+    setOpen(true);
+    d.showModal();
+    // origin() reads the layout, which flushes the closed styles; the attribute
+    // set right after is what the transition runs from.
+    origin();
+    d.setAttribute("data-open", "");
+  }
+
+  // The <video> is only mounted while the modal is open: this effect presses
+  // play, once it exists. The tap on the photo counts as the person's
+  // gesture, so it plays with sound.
+  useEffect(() => {
+    if (!open) return;
+    const v = video.current;
+    if (!v) return;
+    v.play().catch(() => {});
+  }, [open]);
+
+  function close() {
+    const d = box.current;
+    if (!d) return;
+    video.current?.pause();
+    origin();
+    d.removeAttribute("data-open");
+    // wait for the way back to finish before taking it off the screen
+    const wait = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 260;
+    window.setTimeout(() => {
+      d.close();
+      setOpen(false);
+    }, wait);
+  }
+
+  // Esc and click on the backdrop: close with the same animation.
+  useEffect(() => {
+    const d = box.current;
+    if (!d) return;
+    const onCancel = (e: Event) => {
+      e.preventDefault();
+      close();
+    };
+    const onClick = (e: MouseEvent) => {
+      if (e.target === d) close();
+    };
+    d.addEventListener("cancel", onCancel);
+    d.addEventListener("click", onClick);
+    return () => {
+      d.removeEventListener("cancel", onCancel);
+      d.removeEventListener("click", onClick);
+    };
+  });
+
+  return (
+    <>
+      <button
+        ref={trigger}
+        type="button"
+        onClick={show}
+        className="group/photo relative block w-full overflow-hidden rounded-[20px] text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+      >
+        {portrait}
+        {/* the play chip in the corner: says the photo opens a video */}
+        <span
+          aria-hidden="true"
+          className="absolute bottom-3 right-3 transition-transform duration-200 ease-out group-active/photo:scale-95 motion-reduce:transition-none"
+        >
+          <MediaCardBadge Icon={PlayIcon}>{t.presentation}</MediaCardBadge>
+        </span>
+        <span className="sr-only">{t.watch(firstName, duration)}</span>
+      </button>
+
+      {/* The <dialog> is born from the photo's place: --dx/--dy/--sx/--sy are
+          the photo's position and scale relative to the box, computed on open.
+          Transform and opacity only; `data-open` runs the transition, closing
+          runs it back. Under reduced motion: a short fade, no transform. */}
+      <dialog
+        ref={box}
+        aria-labelledby={headingId}
+        className="m-auto max-h-[calc(100dvh-1.5rem)] w-[min(100vw-1.5rem,64rem)] overflow-y-auto rounded-[32px] bg-card p-0 text-ink shadow-2xl md:rounded-[40px] opacity-0 [transform:translate(var(--dx,0),var(--dy,0))_scale(var(--sx,0.9),var(--sy,0.9))] [transition:transform_320ms_var(--ease-cg),opacity_200ms_ease-out] data-open:opacity-100 data-open:transform-none motion-reduce:transform-none motion-reduce:[transition:opacity_150ms_ease] backdrop:bg-ink/60 backdrop:backdrop-blur-md backdrop:opacity-0 backdrop:[transition:opacity_240ms_ease-out] [&[data-open]::backdrop]:opacity-100"
+      >
+        <div className="grid md:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]">
+          {/* on phones the box is shorter than 9:16: the video fits whole
+              (object-contain), without cutting the head */}
+          <div className="relative aspect-[9/16] max-h-[55dvh] w-full bg-ink md:max-h-none">
+            {open && (
+              <video
+                ref={video}
+                src={presentation.src}
+                poster={presentation.poster}
+                controls
+                playsInline
+                aria-label={t.video(firstName)}
+                className="absolute inset-0 h-full w-full object-contain md:object-cover"
+              >
+                {captions && (
+                  <track ref={attach} kind="subtitles" src={captions.src} srcLang={captions.srcLang} label={captions.label} default />
+                )}
+              </video>
+            )}
+          </div>
+          <div className="flex flex-col p-6 md:p-10">
+            {/* the spoken line, in the page's language: opens the text column,
+                which sits right under the video on phones and beside it on desktop */}
+            {open && captions && (
+              <div className="-mt-2 mb-5 md:mr-12">
+                <CaptionBand text={line} lang={captions.srcLang} />
+              </div>
+            )}
+            <h2 id={headingId} className="font-heading text-2xl font-medium leading-snug md:text-[2rem]">
+              {name}
+            </h2>
+            {role && <p className="mt-1 text-sm font-semibold text-ink-soft">{role}</p>}
+            {registration && <p className="mt-1 text-xs text-ink/80">{registration}</p>}
+            {typeof bio === "string" ? (
+              <p className="mt-5 leading-relaxed text-ink/80">{bio}</p>
+            ) : (
+              bio && <div className="mt-5 space-y-3 leading-relaxed text-ink/80">{bio}</div>
+            )}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={close}
+          className="absolute right-4 top-4 flex h-11 w-11 items-center justify-center rounded-full bg-ink text-white transition-transform duration-150 ease-out hover:bg-ink/90 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white motion-reduce:transition-none"
+        >
+          <X aria-hidden="true" size={20} strokeWidth={2} />
+          <span className="sr-only">{t.close}</span>
+        </button>
+      </dialog>
+    </>
+  );
+}