@breathe-ds/ui 0.6.2 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -208,10 +208,13 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
|
|
|
208
208
|
joiners={joiners}
|
|
209
209
|
/>
|
|
210
210
|
);
|
|
211
|
+
// the whole card opens the panel (stretched link: the button's ::after covers the card);
|
|
212
|
+
// the video and the source link sit above it (relative z-[1]) and keep their own click
|
|
213
|
+
const opens = overflows || !!panel;
|
|
211
214
|
return (
|
|
212
|
-
<Root className={`${cardVideo || cardPhoto ? "grid grid-cols-1 sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]" : "flex"} overflow-hidden rounded-[28px] bg-card ${className}`}>
|
|
215
|
+
<Root className={`${opens ? "group/card relative" : ""} ${cardVideo || cardPhoto ? "grid grid-cols-1 sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)]" : "flex"} overflow-hidden rounded-[28px] bg-card ${className}`}>
|
|
213
216
|
{cardVideo ? (
|
|
214
|
-
<TapVideo {...cardVideo} label={t.watch(cardVideo.description)} />
|
|
217
|
+
<TapVideo {...cardVideo} label={t.watch(cardVideo.description)} frameClass="relative z-[1] aspect-video overflow-hidden bg-ink sm:aspect-auto sm:min-h-[16rem]" />
|
|
215
218
|
) : cardPhoto ? (
|
|
216
219
|
<div className="relative aspect-[4/3] overflow-hidden bg-tint sm:aspect-auto sm:min-h-[16rem]">
|
|
217
220
|
{cardPhoto.media ?? (
|
|
@@ -240,17 +243,17 @@ export function TestimonialCard({ quote, author, authorPhoto, authorAvatar, auth
|
|
|
240
243
|
{quote}
|
|
241
244
|
</blockquote>
|
|
242
245
|
)}
|
|
243
|
-
{
|
|
246
|
+
{opens && (
|
|
244
247
|
<button
|
|
245
248
|
type="button"
|
|
246
249
|
onClick={() => setOpen(true)}
|
|
247
|
-
className="mt-3 inline-flex min-h-11 items-center gap-1 text-left font-semibold text-ink underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink"
|
|
250
|
+
className="mt-3 inline-flex min-h-11 items-center gap-1 text-left font-semibold text-ink underline decoration-ink/40 underline-offset-4 transition-[text-decoration-color] duration-150 after:absolute after:inset-0 after:rounded-[28px] after:content-[''] group-hover/card:decoration-ink focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:outline-offset-2 focus-visible:after:outline-ink motion-reduce:transition-none"
|
|
248
251
|
>
|
|
249
252
|
{video && !cardVideo ? t.watchFull : t.readMore}
|
|
250
253
|
</button>
|
|
251
254
|
)}
|
|
252
255
|
</div>
|
|
253
|
-
<figcaption>{byline}</figcaption>
|
|
256
|
+
<figcaption className={link ? "relative z-[1]" : undefined}>{byline}</figcaption>
|
|
254
257
|
</figure>
|
|
255
258
|
{(clampLines || panel) && (
|
|
256
259
|
<SidePanel open={open} onClose={() => setOpen(false)} title={names} labels={{ close: t.close }}>
|
package/package.json
CHANGED