From fcf2fd1e9fd4c42ce17776b625543a4b98d813a8 Mon Sep 17 00:00:00 2001 From: Jira Coding Agent Date: Mon, 24 Aug 2026 12:40:41 +0000 Subject: [PATCH] feat(ui): add BibleCard max width override Co-authored-by: Cameron Pak --- .changeset/bible-card-max-width.md | 19 ++++++ packages/ui/README.md | 23 +++++++ .../ui/src/components/bible-card.stories.tsx | 68 ++++++++++++++++--- .../ui/src/components/bible-card.test.tsx | 48 ++++++++++++- packages/ui/src/components/bible-card.tsx | 37 +++++++++- 5 files changed, 182 insertions(+), 13 deletions(-) create mode 100644 .changeset/bible-card-max-width.md diff --git a/.changeset/bible-card-max-width.md b/.changeset/bible-card-max-width.md new file mode 100644 index 00000000..3be100d8 --- /dev/null +++ b/.changeset/bible-card-max-width.md @@ -0,0 +1,19 @@ +--- +'@youversion/platform-react-ui': minor +--- + +`BibleCard` now caps its painted shell at 700 px by default — one measure that +the header, scripture, and footer share, matching the Swift SDK — instead of +stretching to fill a wide host. The card still fills a narrower host and centers +itself in a wider one. + +A new optional `maxWidth?: number | '100%'` prop controls the cap: + +- Omit it for the default 700 px shell; the inner column fills that shell (only + the card's padding is the inset). +- Pass a number to cap the shell at that many CSS px; the inner column fills it. +- Pass `"100%"` for a full-bleed shell that fills its parent; the inner text + column then stays capped at 600 px so scripture keeps a column. + +Breaking for full-bleed layouts: hosts that relied on `BibleCard` growing to +fill a wide container must now pass `maxWidth="100%"`. diff --git a/packages/ui/README.md b/packages/ui/README.md index 43c67395..42643af3 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -66,6 +66,29 @@ By default the version picker offers Bible versions in every available language. Language tags are BCP 47 (`en`, `es`, `zh-Hans`). Version ids are YouVersion Bible version ids. An unusable id is refused everywhere — lists, picker, and `versionId` on reader/card/text/VOTD — and surfaces the existing forbidden error. Core-only hosts can set the same lists on `YouVersionPlatformConfiguration`. +### `BibleCard` width + +`BibleCard` caps its painted shell at **700 px by default** — one measure that the header, scripture, and footer share, matching the Swift SDK. The card still fills a narrower host (`width: 100%`) and centers itself in a wider one. Control the cap with the optional `maxWidth` prop: + +| `maxWidth` | Painted shell | Inner text column | +|------------|---------------|-------------------| +| _omitted_ (default) | caps at 700 px | fills the shell (only the card's padding is the inset) | +| a number, e.g. `480` | caps at that many CSS px | fills the shell | +| `"100%"` | full-bleed — fills the parent | stays capped at 600 px so scripture keeps a column | + +```tsx +{/* Default: shell caps at 700, centered on a wide host */} + + +{/* Tighter shell */} + + +{/* Full-bleed shell (the inner text column still caps at 600) */} + +``` + +Only a number or `"100%"` is accepted. If your layout needs a full-bleed card shell, pass `maxWidth="100%"` — otherwise the shell will not grow past 700 px. + ## Styling All component CSS is automatically injected when you wrap your app with `YouVersionProvider` — no extra imports or build steps needed. Under the hood, it uses React 19's [`