@breathe-ds/ui 0.2.0 → 0.4.0

package/components/InfoCard.tsx

@@ -0,0 +1,116 @@
+import type { ComponentType, ElementType, ReactNode } from "react";
+
+/** lucide-style icon component (the card sets the size). */
+type IconType = ComponentType<{ size?: number; strokeWidth?: number; className?: string; "aria-hidden"?: boolean | "true" }>;
+
+export type InfoCardLink = {
+  href: string;
+  label: ReactNode;
+  /** Opens in a new tab (always a plain <a>) with an sr-only note after the label. */
+  external?: boolean;
+};
+
+type Props = {
+  /** Icon in the tinted bubble above the title (lucide, 20px, stroke 1.75). */
+  Icon: IconType;
+  title: ReactNode;
+  /** h2 on a page section (default), h3 inside a section that already has an h2. */
+  headingLevel?: "h2" | "h3";
+  /** Address lines: one <address> block, lines separated by <br>. */
+  address?: ReactNode[];
+  /** Body: one paragraph per item. */
+  lines?: ReactNode[];
+  /** Smaller closing line (e.g. "Outside these hours, by appointment"). */
+  note?: ReactNode;
+  /** Custom body, rendered after `address`/`lines`/`note`. */
+  children?: ReactNode;
+  /** Action links at the bottom ("Directions ↗ · Waze ↗"): underlined semibold,
+   *  outbound arrow, separated by a middle dot. */
+  links?: InfoCardLink[];
+  /** Wrapper element. `section` by default; `li` inside a list of cards. */
+  as?: "section" | "div" | "li" | "article";
+  /** Link component of the app for page links (external links always use <a>). */
+  linkComponent?: ElementType;
+  /** sr-only after an external link. */
+  newTabLabel?: string;
+  className?: string;
+};
+
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+const body = "mt-2 leading-relaxed text-ink/80";
+const link =
+  "mt-4 inline-flex min-h-11 items-center gap-1.5 font-semibold text-ink underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink";
+
+/**
+ * Info card of the Cuidado Global family — the three white cards of the
+ * novo.creeta clinic page ("Address", "Opening hours", "Where we see
+ * patients") and the contact page: a 44px tinted bubble with the icon, the
+ * title, the body (address lines, paragraphs, a smaller note) and, at the
+ * bottom, the action links with the outbound arrow, separated by a middle
+ * dot ("Directions ↗ · Waze ↗"). White on the page color (`surface`), 28px
+ * radius, 24px padding (32px from md).
+ */
+export function InfoCard({
+  Icon,
+  title,
+  headingLevel: Heading = "h2",
+  address,
+  lines,
+  note,
+  children,
+  links,
+  as: Tag = "section",
+  linkComponent,
+  newTabLabel = "(opens in a new tab)",
+  className = "",
+}: Props) {
+  const L: ElementType = linkComponent ?? "a";
+
+  return (
+    <Tag className={`rounded-2xl bg-card p-6 md:p-8 ${className}`}>
+      <span aria-hidden="true" className="flex h-11 w-11 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+        <Icon size={20} strokeWidth={1.75} />
+      </span>
+      <Heading className="mt-4 font-heading text-xl font-medium text-ink">{title}</Heading>
+
+      {address && address.length > 0 && (
+        <address className={`${body} not-italic`}>
+          {address.map((line, i) => (
+            <span key={i}>
+              {i > 0 && <br />}
+              {line}
+            </span>
+          ))}
+        </address>
+      )}
+      {lines?.map((line, i) => (
+        <p key={i} className={body}>
+          {line}
+        </p>
+      ))}
+      {note && <p className={`${body} text-sm`}>{note}</p>}
+      {children}
+
+      {links?.map((l, i) => (
+        <span key={`${i}-${l.href}`}>
+          {i > 0 && <span aria-hidden="true" className="mx-2 text-ink/80">·</span>}
+          {l.external ? (
+            <a href={l.href} target="_blank" rel="noopener noreferrer" className={link}>
+              {l.label}
+              <ArrowUpRight />
+              <span className="sr-only"> {newTabLabel}</span>
+            </a>
+          ) : (
+            <L href={l.href} className={link}>
+              {l.label}
+              <ArrowUpRight />
+            </L>
+          )}
+        </span>
+      ))}
+    </Tag>
+  );
+}

package/components/LanguageSwitcher.tsx

@@ -114,7 +114,7 @@ export function LanguageSwitcher({ languages, mode = "menu", labels, className =
       </button>
       <ul
         id={id}
-        className={`absolute right-0 top-full z-50 mt-2 min-w-[11rem] list-none origin-top-right rounded-[20px] bg-white p-1.5 shadow-[0_16px_40px_-16px_rgba(0,0,0,0.35)] transition duration-150 ease-out motion-reduce:transition-none ${
+        className={`absolute right-0 top-full z-50 mt-2 min-w-[11rem] list-none origin-top-right rounded-[20px] bg-card p-1.5 shadow-[0_16px_40px_-16px_rgba(0,0,0,0.35)] transition duration-150 ease-out motion-reduce:transition-none ${
           open ? "visible scale-100 opacity-100" : "invisible scale-95 opacity-0"
         }`}
       >

package/components/List.tsx

@@ -0,0 +1,81 @@
+import type { ElementType, ReactNode } from "react";
+
+export type ListItem = {
+  label: ReactNode;
+  /** With an href the item is a link: semibold, underlined, with an outbound arrow at the end. */
+  href?: string;
+  external?: boolean;
+};
+
+type Props = {
+  items: ListItem[];
+  /** `check` (default): bubble with a check — "what we assess", "what we treat".
+   *  `arrow`: corner arrow (↳) — one sentence per item, as in the Footer notice. */
+  marker?: "check" | "arrow";
+  /** Link component of the app (e.g. next-intl Link). Default: <a>. */
+  linkComponent?: ElementType;
+  /** sr-only after an external link. */
+  newTabLabel?: string;
+  className?: string;
+};
+
+const Check = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
+);
+const CornerDownRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="mt-[0.2rem] shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 10 5 5-5 5" /><path d="M4 4v7a4 4 0 0 0 4 4h12" /></svg>
+);
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={16} height={16} className="cg-arrow-go ml-auto mt-1 shrink-0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+
+/**
+ * The family's list with a marker in front of each item (from novo.creeta:
+ * `Lista` on the method page, "O que tratamos aqui" on a treatment page, the
+ * notice in the footer).
+ * - check: a 24px bubble (ink at 12%) with the check; the marker is
+ *   decoration, the <ul> is what says "list".
+ * - arrow: the corner arrow, for one sentence per item.
+ * - An item with `href` becomes a link: semibold, underline that darkens on
+ *   hover, outbound arrow at the end stepping toward where it goes; 44px tap
+ *   height without changing the rhythm (negative vertical margin).
+ */
+export function List({ items, marker = "check", linkComponent, newTabLabel = "(opens in a new tab)", className = "" }: Props) {
+  const L: ElementType = linkComponent ?? "a";
+  const bubble = (
+    <span aria-hidden="true" className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ink/[0.12] text-ink">
+      <Check />
+    </span>
+  );
+  const mark = marker === "check" ? bubble : <CornerDownRight />;
+  const gap = marker === "check" ? "gap-3" : "gap-2.5";
+
+  return (
+    <ul className={`list-none ${marker === "check" ? "space-y-3 text-ink" : "space-y-2 leading-relaxed text-ink/80"} ${className}`}>
+      {items.map((it, i) => (
+        <li key={`${i}-${it.href ?? ""}`}>
+          {it.href ? (
+            <L
+              href={it.href}
+              {...(it.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+              className={`group/item -my-2 flex min-h-11 items-start ${gap} py-2.5 font-semibold text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink`}
+            >
+              {mark}
+              <span className="underline decoration-ink/40 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/item:decoration-ink motion-reduce:transition-none">
+                {it.label}
+                {it.external && <span className="sr-only"> {newTabLabel}</span>}
+              </span>
+              <ArrowUpRight />
+            </L>
+          ) : (
+            <span className={`flex items-start ${gap}`}>
+              {mark}
+              <span>{it.label}</span>
+            </span>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
+

package/components/Lockup.tsx

@@ -109,7 +109,6 @@ export function Lockup({
   if (variant === "wordmark") {
     return (
       <span className={`inline-flex flex-col${entranceCls} ${className}`} style={entranceStyle}>
-        {entrance && <style>{ENTRANCE_CSS}</style>}
         {nameEl}
         {tagEl && <span className="mt-1">{tagEl}</span>}
       </span>
@@ -119,7 +118,6 @@ export function Lockup({
   if (variant === "stacked") {
     return (
       <span className={`inline-flex flex-col items-center text-center${entranceCls} ${className}`} style={entranceStyle}>
-        {entrance && <style>{ENTRANCE_CSS}</style>}
         {mark}
         <span className="mt-4 flex flex-col items-center">
           {nameEl}
@@ -148,7 +146,6 @@ export function Lockup({
   if (symbolSide === "right") {
     return (
       <span className={`inline-flex flex-col items-start${entranceCls} ${className}`} style={entranceStyle}>
-        {entrance && <style>{ENTRANCE_CSS}</style>}
         <span className={`inline-flex items-center ${GAP[size]}`}>
           {nameEl}
           {mark}
@@ -159,7 +156,6 @@ export function Lockup({
   }
   return (
     <span className={`inline-flex items-center ${GAP[size]}${entranceCls} ${className}`} style={entranceStyle}>
-      {entrance && <style>{ENTRANCE_CSS}</style>}
       {mark}
       <span className="flex min-w-0 flex-col">
         {nameEl}
@@ -169,17 +165,3 @@ export function Lockup({
   );
 }
 
-/* Entrance: symbol (scale + slight rotation) → name (slides in from the left) → tagline.
-   Same vocabulary as the Curtain; with reduced motion it becomes just a short fade. */
-const ENTRANCE_CSS = `
-.cg-lockup--entrance .cg-lockup__mark{ animation: cg-lockup-mark 500ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) var(--cg-entrance-delay,0ms) both; }
-.cg-lockup--entrance .cg-lockup__name{ animation: cg-lockup-name 420ms var(--ease-cg,cubic-bezier(.2,.8,.2,1)) calc(var(--cg-entrance-delay,0ms) + 420ms) both; }
-.cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-tag 360ms ease calc(var(--cg-entrance-delay,0ms) + 700ms) both; }
-@keyframes cg-lockup-mark{ from{ opacity:0; transform:scale(.6) rotate(-16deg); } }
-@keyframes cg-lockup-name{ from{ opacity:0; transform:translateX(-8px); } }
-@keyframes cg-lockup-tag{ from{ opacity:0; transform:translateY(4px); } }
-@media (prefers-reduced-motion:reduce){
-  .cg-lockup--entrance .cg-lockup__mark, .cg-lockup--entrance .cg-lockup__name, .cg-lockup--entrance .cg-lockup__tag{ animation: cg-lockup-fade 240ms ease var(--cg-entrance-delay,0ms) both; }
-  @keyframes cg-lockup-fade{ from{ opacity:0; } }
-}
-`;

package/components/MapCard.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Button } from "./Button";
+
+type Labels = {
+  /** The button that loads the map. */
+  open: string;
+  /** The outbound link ("Directions"). */
+  directions: string;
+  /** sr-only after the outbound link. */
+  newTab: string;
+  /** The note under the actions. */
+  note: string;
+  /** The close button on the bar under the open map. */
+  close: string;
+  /** Accessible title of the map frame; receives the address. */
+  frameTitle: (address: string) => string;
+};
+const EN: Labels = {
+  open: "View the map",
+  directions: "Directions",
+  newTab: "(opens in a new tab)",
+  note: "The map is Google's and only loads after your tap.",
+  close: "Close the map",
+  frameTitle: (address) => `Map: ${address}`,
+};
+
+type Props = {
+  /** First line, large: the street and number. */
+  address: string;
+  /** Second line: neighbourhood, city/state. */
+  locality?: ReactNode;
+  /** Still image of the map (a file of the site, never a live tile): says
+   *  "there is a map here" without calling Google. Wide, pin near the top-middle. */
+  preview: { src: string; width?: number; height?: number; position?: string };
+  /** Embed URL, requested only after the tap (e.g. https://www.google.com/maps?q=…&output=embed). */
+  embedSrc: string;
+  /** Google Maps search/route link; works without JavaScript. */
+  directionsHref: string;
+  /** Caption on the close bar while the map is open. Default: the address. */
+  caption?: ReactNode;
+  /** Height of the open map. */
+  mapHeight?: string;
+  labels?: Partial<Labels>;
+  className?: string;
+};
+
+const MapPin = ({ size = 20, strokeWidth = 1.75 }: { size?: number; strokeWidth?: number }) => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" /></svg>
+);
+const ArrowUpRight = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} className="cg-arrow-go" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8" /></svg>
+);
+const X = () => (
+  <svg aria-hidden="true" viewBox="0 0 24 24" width={18} height={18} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
+);
+
+/**
+ * Map card — the Mapa of novo.creeta: a Google map that only loads on tap.
+ *
+ * The embedded map sets third-party cookies as soon as it appears, and the
+ * sites have no consent banner. So the card shows a still preview of the map
+ * fading into the card, the address, a "View the map" button and the outbound
+ * "Directions" link (works without JavaScript); Google is only called when the
+ * person asks. The page is also lighter on phones.
+ *
+ * Open, the map fills the card and a bar at the bottom (the same as the
+ * PageVideoHero's) carries the caption and the close button, so the person
+ * can put the still back.
+ */
+export function MapCard({ address, locality, preview, embedSrc, directionsHref, caption, mapHeight = "min-h-[420px]", labels, className = "" }: Props) {
+  const t = { ...EN, ...labels };
+  const [open, setOpen] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <div className={`relative overflow-hidden rounded-2xl bg-card ${className}`}>
+      {open ? (
+        <div className="flex flex-col">
+          <div className={`relative ${mapHeight} bg-surface`}>
+            <iframe
+              title={t.frameTitle(address)}
+              src={embedSrc}
+              referrerPolicy="no-referrer-when-downgrade"
+              allowFullScreen
+              onLoad={() => setLoaded(true)}
+              // only shown once Google has drawn it, with a fade: before that the frame is an empty white
+              className={`absolute inset-0 block h-full w-full border-0 transition-opacity duration-300 motion-reduce:transition-none ${loaded ? "opacity-100" : "opacity-0"}`}
+            />
+          </div>
+          {/* close bar — the same as the hero video's: caption on the left, close on the right */}
+          <div className="relative z-10 flex h-[4.5rem] items-center justify-between gap-6 bg-ink px-6">
+            <p className="m-0 min-w-0 truncate text-sm text-surface/80">{caption ?? address}</p>
+            <button
+              type="button"
+              onClick={() => {
+                setOpen(false);
+                setLoaded(false);
+              }}
+              className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-full border border-surface/25 px-5 text-sm font-semibold text-surface transition-colors duration-200 hover:bg-surface/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface motion-reduce:transition-none"
+            >
+              <X />
+              {t.close}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex h-full min-h-[320px] flex-col">
+          {/* Top: a still crop of the map fading into the card towards the bottom.
+              The text sits below, outside the image, always on the card color. */}
+          <div aria-hidden="true" className="relative min-h-[9rem] flex-1 overflow-hidden">
+            <img
+              src={preview.src}
+              alt=""
+              width={preview.width}
+              height={preview.height}
+              loading="lazy"
+              decoding="async"
+              className="absolute inset-0 h-full w-full object-cover"
+              style={{ objectPosition: preview.position ?? "48% 18%" }}
+            />
+            <span className="absolute inset-0 bg-gradient-to-b from-card/0 via-card/35 via-60% to-card" />
+            {/* on the right: on the left it covered the place's name on the map */}
+            <span className="absolute right-6 top-6 flex h-11 w-11 items-center justify-center rounded-full bg-card text-ink shadow-[0_2px_8px_rgba(0,0,0,0.18)] md:right-8 md:top-8">
+              <MapPin />
+            </span>
+          </div>
+
+          <div className="px-6 pb-6 md:px-8 md:pb-8">
+            <address className="m-0 not-italic font-heading text-2xl font-medium leading-snug text-ink">
+              {address}
+              {locality && <span className="mt-1 block font-body text-base font-normal text-ink/80">{locality}</span>}
+            </address>
+
+            <div className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2">
+              <Button variant="solid" onClick={() => setOpen(true)}>
+                <MapPin size={19} strokeWidth={2} />
+                {t.open}
+              </Button>
+              <a
+                href={directionsHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex min-h-11 items-center gap-1.5 font-semibold text-ink underline underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
+              >
+                {t.directions}
+                <ArrowUpRight />
+                <span className="sr-only"> {t.newTab}</span>
+              </a>
+            </div>
+            <p className="m-0 mt-4 text-sm leading-relaxed text-ink/80">{t.note}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}