@breathe-ds/ui 0.2.0 → 0.4.0

package/components/PillList.tsx

@@ -1,38 +1,29 @@
-import type { ReactNode } from "react";
+import type { ElementType, ReactNode } from "react";
 import { Button } from "./Button";
+import { Pill } from "./Pill";
 
-export type Pill = { label: ReactNode; href?: string };
+export type PillItem = { label: ReactNode; href: string; meta?: ReactNode };
+/** @deprecated use PillItem */
+export type Pill_ = PillItem;
 
 type Props = {
   title?: ReactNode;
-  items: Pill[];
+  /** Each item is a Pill: `#anchor` hrefs get the down arrow, page links the diagonal one. */
+  items: PillItem[];
   /** Optional "See all" link. */
   seeAll?: { label: ReactNode; href?: string };
+  linkComponent?: ElementType;
 };
 
-function ArrowUpRight() {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      className="h-4 w-4 flex-none"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M7 17 17 7M9 7h8v8" />
-    </svg>
-  );
-}
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" className="h-4 w-4 flex-none" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
 
 /**
- * Pill list (e.g. "Conditions we treat"): white chips with label + arrow, in
- * a wrapping grid, plus a "See all" link. A clickable chip renders as `<a>`.
- * The DS's subtle card style (soft border + shadow), pill radius.
+ * Pill list: a wrapping row of Pills ("Conditions we treat", the video groups
+ * of a page with "11 videos" as meta), plus an optional "See all" link.
  */
-export function PillList({ title, items, seeAll }: Props) {
+export function PillList({ title, items, seeAll, linkComponent }: Props) {
   return (
     <div>
       {title && (
@@ -40,30 +31,12 @@ export function PillList({ title, items, seeAll }: Props) {
           {title}
         </h2>
       )}
-      <ul className="flex flex-wrap gap-2.5">
-        {items.map((p, i) => {
-          const inner = (
-            <>
-              <span>{p.label}</span>
-              <span className="grid h-7 w-7 flex-none place-items-center rounded-full bg-ink/[0.06] text-ink-soft transition-colors group-hover:bg-ink/[0.1] group-hover:text-ink">
-                <ArrowUpRight />
-              </span>
-            </>
-          );
-          const cls =
-            "group inline-flex items-center gap-3 rounded-pill border border-line bg-surface py-2 pr-2 pl-5 font-heading text-[0.98rem] font-semibold text-ink shadow-[0_2px_10px_rgba(20,71,83,0.05)] transition hover:-translate-y-0.5 hover:shadow-[0_10px_24px_rgba(20,71,83,0.1)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
-          return (
-            <li key={i}>
-              {p.href ? (
-                <a href={p.href} className={cls}>
-                  {inner}
-                </a>
-              ) : (
-                <span className={cls}>{inner}</span>
-              )}
-            </li>
-          );
-        })}
+      <ul className="flex list-none flex-wrap gap-2.5">
+        {items.map((p, i) => (
+          <li key={`${i}-${p.href}`}>
+            <Pill href={p.href} meta={p.meta} linkComponent={linkComponent}>{p.label}</Pill>
+          </li>
+        ))}
       </ul>
       {seeAll && (
         <div className="mt-6">

package/components/PlanTimeline.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import { useOnAppear } from "./useOnAppear";
+import { PauseButton } from "./PauseButton";
+
+type Labels = {
+  /** Completes the pause button's name: "Pause the plan animation". */
+  pause: string;
+};
+const EN: Labels = { pause: "the plan animation" };
+
+type Props = {
+  /** The three stages, short ("Short", "Medium", "Long"). Three: the keyframes
+   *  in theme.css light one dot at a time, and there are three sets. */
+  names: [string, string, string];
+  /** Only from md, glued to the name: " term" → "Short term". */
+  suffix?: string;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Step 3 of the care flow (creeta's `Prazos`): the three stages of the plan.
+ * The line comes down and each dot lights up when it reaches it; after a rest
+ * everything goes off and restarts (6s loop, keyframes in theme.css).
+ * - Starts when on screen and only runs while on screen.
+ * - Moves by itself for more than 5s: pause button (WCAG 2.2.2).
+ * - Without JavaScript or with reduced motion: still, the three dots lit, no button.
+ * Fills its box (absolute inset-0): put it in a frame with a height.
+ */
+export function PlanTimeline({ names, suffix, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const { ref, state, onScreen } = useOnAppear<HTMLDivElement>();
+  const [paused, setPaused] = useState(false);
+
+  return (
+    <div ref={ref} data-state={state} data-stopped={paused || !onScreen ? "" : undefined} className={`cg-plan absolute inset-0 ${className}`}>
+      <div aria-hidden="true" className="absolute inset-y-3 left-3 right-0 flex flex-col justify-center rounded-l-2xl bg-card pl-3 md:inset-y-5 md:left-5 md:pl-5">
+        {/* the track, light, and over it the line that comes down */}
+        <span className="absolute bottom-[22%] left-[17.5px] top-[22%] w-px bg-ink-soft/25 md:left-[25.5px]" />
+        <span className="cg-plan-line absolute bottom-[22%] left-[17.5px] top-[22%] w-px origin-top bg-ink-soft md:left-[25.5px]" />
+        {names.map((name, i) => (
+          <span
+            key={name}
+            data-n={i + 1}
+            className={`cg-plan-step flex flex-1 items-center gap-2.5 text-[0.8125rem] font-medium text-ink md:gap-3.5 md:text-[0.9375rem] ${i > 0 ? "border-t border-ink/10" : ""}`}
+          >
+            <span className="relative h-3 w-3 shrink-0 rounded-full border-2 border-ink-soft bg-card">
+              <span className="cg-plan-dot absolute -inset-0.5 rounded-full bg-ink-soft" />
+            </span>
+            {/* on the phone the frame is 134px and the pause button takes the corner: name only */}
+            <span className="cg-plan-name">
+              {name}
+              {suffix && <span className="max-md:hidden">{suffix}</span>}
+            </span>
+          </span>
+        ))}
+      </div>
+
+      {state !== "whole" && (
+        <PauseButton paused={paused} onToggle={() => setPaused((p) => !p)} what={t.pause} bubble="surface" className="bottom-3 right-0 md:bottom-5 md:right-1" />
+      )}
+    </div>
+  );
+}

package/components/PostArticle.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from "react";
+import type { PostDate } from "./PostCard";
+
+type Labels = {
+  /** sr-only before the date. */
+  publishedOn: string;
+  /** sr-only heading of the aside (the video). */
+  aside: string;
+};
+const EN: Labels = { publishedOn: "Published on", aside: "Watch" };
+
+type Props = {
+  /** The trail above the title (a Breadcrumb). */
+  trail?: ReactNode;
+  title: ReactNode;
+  /** Who signs (a PersonChip). */
+  signature?: ReactNode;
+  date?: PostDate;
+  /** The text, one entry per paragraph: the first one is the lead, larger. */
+  paragraphs: ReactNode[];
+  /** Small line under a hairline at the end of the text ("This text guides, but…"). */
+  notice?: ReactNode;
+  /** Right column from md, sticky: the video the text came from (a VideoStoryCard). */
+  aside?: ReactNode;
+  /** The video's speech, in full, open: here it is the body of the page, not an extra. */
+  transcript?: { title: ReactNode; note?: ReactNode; paragraphs: ReactNode[]; lang?: string };
+  /** After the article: "other posts" (a heading and a grid of PostCard), the final call… */
+  children?: ReactNode;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+/**
+ * Post page of the Cuidado Global family — creeta's `OrientacaoTela`, by
+ * tokens. Order: the trail, the title, who signs and when; the text, which
+ * answers at once; the video the text came from and, in full, what is said in
+ * it. On the phone they come in reading order (text, video, transcript); from
+ * md the video goes to the right column, sticky, and follows the reading.
+ */
+export function PostArticle({ trail, title, signature, date, paragraphs, notice, aside, transcript, children, labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  return (
+    <article className={className}>
+      {trail}
+
+      <header className="mt-3 max-w-3xl md:mt-5">
+        <h1 className="font-heading text-[2rem] font-medium leading-[1.08] tracking-[-0.02em] text-ink md:text-5xl">{title}</h1>
+        {(signature || date) && (
+          <div className="mt-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-ink-body">
+            {signature}
+            {date && (
+              <time dateTime={date.iso}>
+                <span className="sr-only">{t.publishedOn} </span>
+                {date.label}
+              </time>
+            )}
+          </div>
+        )}
+      </header>
+
+      {/* Three pieces in a grid. On the phone in reading order: the text (the
+          answer), the video, the transcript. From md the video takes the right
+          column and follows the reading of the other two. The two text pieces
+          share one column (`contents` on the phone, a stack from md): in two
+          grid rows the taller video stretched the first row and opened a gap
+          above the transcript (2026-10-29). */}
+      <div className="mt-8 grid gap-3 md:mt-10 md:grid-cols-[minmax(0,7fr)_minmax(0,4fr)] md:items-start md:gap-5">
+        <div className="contents md:col-start-1 md:row-start-1 md:flex md:flex-col md:gap-5">
+          <section className="rounded-[28px] bg-card p-6 md:p-10">
+            {paragraphs.map((p, i) => (
+              <p key={i} className={i === 0 ? "text-lg leading-relaxed text-ink md:text-xl" : "mt-4 leading-relaxed text-ink-body"}>
+                {p}
+              </p>
+            ))}
+            {notice && <p className="mt-6 border-t border-ink/10 pt-4 text-sm text-ink-body">{notice}</p>}
+          </section>
+
+          {transcript && transcript.paragraphs.length > 0 && (
+            <section className="rounded-[28px] bg-card p-6 max-md:order-2 md:p-10">
+              <h2 className="font-heading text-[1.375rem] font-medium leading-snug text-ink md:text-2xl">{transcript.title}</h2>
+              {transcript.note && <p className="mt-2 text-sm font-medium text-ink">{transcript.note}</p>}
+              <div lang={transcript.lang} className="mt-4 space-y-4 leading-relaxed text-ink-body">
+                {transcript.paragraphs.map((p, i) => (
+                  <p key={i}>{p}</p>
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+
+        {aside && (
+          <aside className="max-md:order-1 md:sticky md:top-28 md:col-start-2 md:row-start-1">
+            <h2 className="sr-only">{t.aside}</h2>
+            {aside}
+          </aside>
+        )}
+      </div>
+
+      {children}
+    </article>
+  );
+}

package/components/PostCard.tsx

@@ -0,0 +1,69 @@
+import type { ElementType, ReactNode } from "react";
+
+export type PostCover = { src: string; srcSet?: string; sizes?: string };
+export type PostDate = { iso: string; label: ReactNode };
+
+type Labels = {
+  /** Decorative line at the foot ("Read the guidance"); the link is the title. */
+  read: ReactNode;
+};
+const EN: Labels = { read: "Read more" };
+
+type Props = {
+  /** 4:3 at the top, decorative (the title says the subject). */
+  cover: PostCover;
+  /** Small line above the title ("Respiratory treatment"). */
+  category?: ReactNode;
+  title: ReactNode;
+  href: string;
+  /** The first paragraph, clamped to three lines. */
+  excerpt: ReactNode;
+  author: ReactNode;
+  date: PostDate;
+  headingLevel?: "h2" | "h3";
+  linkComponent?: ElementType;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+/**
+ * Post card of the Cuidado Global family — creeta's `OrientacaoCartao`, by
+ * tokens: the card of one article in the list and in "other posts". The whole
+ * card is clickable (the title's link stretches over it) but the link's name
+ * stays the title: that is what the screen reader hears.
+ */
+export function PostCard({ cover, category, title, href, excerpt, author, date, headingLevel: Title = "h2", linkComponent, labels, className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const t = { ...EN, ...labels };
+  return (
+    <article className={`group relative flex h-full flex-col overflow-hidden rounded-[28px] bg-card transition-transform duration-200 ease-out active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 ${className}`}>
+      <div className="relative aspect-[4/3] overflow-hidden">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={cover.src} srcSet={cover.srcSet} sizes={cover.sizes} alt="" loading="lazy" decoding="async" className="absolute inset-0 h-full w-full object-cover object-[50%_30%]" />
+      </div>
+      <div className="flex flex-1 flex-col p-6 md:p-7">
+        {category && <p className="mb-2 text-sm font-semibold text-ink-soft">{category}</p>}
+        <Title className="font-heading text-xl font-medium leading-snug text-ink md:text-[1.375rem]">
+          <L href={href} className="after:absolute after:inset-0 after:rounded-[28px] focus-visible:outline-none focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:-outline-offset-2 focus-visible:after:outline-ink">
+            {title}
+          </L>
+        </Title>
+        <p className="mt-3 line-clamp-3 leading-relaxed text-ink-body">{excerpt}</p>
+        <p className="mt-auto pt-5 text-sm text-ink-body">
+          <span className="font-semibold text-ink">{author}</span>
+          <span aria-hidden="true"> · </span>
+          <time dateTime={date.iso}>{date.label}</time>
+        </p>
+        {/* decoration: the link is the title */}
+        <p aria-hidden="true" className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-ink-soft">
+          {t.read}
+          <ArrowUpRight />
+        </p>
+      </div>
+    </article>
+  );
+}