Skip to content

refactor(design-system): ExpandableCard defaults #18157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pettinarip merged 3 commits into from
May 13, 2026
Merged

refactor(design-system): ExpandableCard defaults #18157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d51b16f
refactor(ui): ExpandableCard defaults
wackerow May 9, 2026
ea8bec5
feat(ui): update border-radius to `2xl` token
wackerow May 12, 2026
c0d29e5
Merge branch 'dev' into expandable-card
wackerow May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions app/[locale]/bug-bounty/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,9 +387,7 @@ export default async function Page(props: { params: Promise<Params> }) {
<Text>
{t.rich("page-upgrades-bug-bounty-validity-desc", {
a: (chunks) => (
<Link href="https://bbp-form.ethereum.org/">
{chunks}
</Link>
<Link href="https://bbp-form.ethereum.org/">{chunks}</Link>
),
})}
</Text>
Expand Down Expand Up @@ -775,50 +773,50 @@ export default async function Page(props: { params: Promise<Params> }) {
title={t("bug-bounty-faq-q2-title")}
contentPreview={t("bug-bounty-faq-q2-contentPreview")}
>
<Text>
<p>
{t.rich("bug-bounty-faq-q2-content-1", {
a: (chunks) => (
<Link href="https://blog.ethereum.org/">{chunks}</Link>
),
})}
</Text>
</p>
</ExpandableCard>
<ExpandableCard
title={t("bug-bounty-faq-q3-title")}
contentPreview={t("bug-bounty-faq-q3-contentPreview")}
>
<Text>
<p>
{t.rich("bug-bounty-faq-q3-content-1", {
strong: Strong,
})}
</Text>
</p>
</ExpandableCard>
<ExpandableCard
title={t("bug-bounty-faq-q4-title")}
contentPreview={t("bug-bounty-faq-q4-contentPreview")}
>
<Text>{t("bug-bounty-faq-q4-content-1")}</Text>
<p>{t("bug-bounty-faq-q4-content-1")}</p>
</ExpandableCard>
</div>
<Flex className="ms-0 w-full flex-col lg:ms-8">
<ExpandableCard
title={t("bug-bounty-faq-q5-title")}
contentPreview={t("bug-bounty-faq-q5-contentPreview")}
>
<Text>{t("bug-bounty-faq-q5-content-1")}</Text>
<p>{t("bug-bounty-faq-q5-content-1")}</p>
</ExpandableCard>
<ExpandableCard
title={t("bug-bounty-faq-q6-title")}
contentPreview={t("bug-bounty-faq-q6-contentPreview")}
>
<Text>{t("bug-bounty-faq-q6-content-1")}</Text>
<Text>{t("bug-bounty-faq-q6-content-2")}</Text>
<p>{t("bug-bounty-faq-q6-content-1")}</p>
<p>{t("bug-bounty-faq-q6-content-2")}</p>
</ExpandableCard>
<ExpandableCard
title={t("bug-bounty-faq-q7-title")}
contentPreview={t("bug-bounty-faq-q7-contentPreview")}
>
<Text>{t("bug-bounty-faq-q7-content-1")}</Text>
<p>{t("bug-bounty-faq-q7-content-1")}</p>
</ExpandableCard>
</Flex>
</Flex>
Expand Down
10 changes: 5 additions & 5 deletions app/[locale]/gas/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,26 +373,26 @@ const Page = async (props: { params: Promise<PageParams> }) => {
<H2 className="mt-0">{t("page-gas-faq-header")}</H2>
<div className="max-w-[832px]">
<ExpandableCard title={t("page-gas-faq-question-1-q")}>
<p className="mb-6">
<p>
<Translation id="page-gas:page-gas-faq-question-1-a-1" />
</p>
<p className="mb-6">
<p>
<Translation id="page-gas:page-gas-faq-question-1-a-2" />
</p>
</ExpandableCard>
<ExpandableCard title={t("page-gas-faq-question-2-q")}>
<p className="mb-6">
<p>
<Translation id="page-gas:page-gas-faq-question-2-a-1" />
</p>
<BaseLink href="/eth/">
<Translation id="page-gas:page-gas-faq-question-2-a-2" />
</BaseLink>
</ExpandableCard>
<ExpandableCard title={t("page-gas-faq-question-3-q")}>
<p className="mb-6">
<p>
<Translation id="page-gas:page-gas-faq-question-3-a-1" />
</p>
<p className="mb-6">{t("page-gas-faq-question-3-a-2")}</p>
<p>{t("page-gas-faq-question-3-a-2")}</p>
</ExpandableCard>
</div>
</Content>
Expand Down
36 changes: 16 additions & 20 deletions app/[locale]/layer-2/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,33 +463,29 @@ const Page = async (props: { params: Promise<PageParams> }) => {
eventAction="expand"
eventName="how do i know if a network is part of ethereum"
>
<div className="flex flex-col gap-8">
<p>
{t("page-layer-2-faq-ExpandableCard-1-description-1")}{" "}
<InlineLink href="/layer-2/networks">
{tCommon("nav-ethereum-networks")}
</InlineLink>
{t("page-layer-2-period")}
</p>
<p>{t("page-layer-2-faq-ExpandableCard-1-description-2")}</p>
</div>
<p>
{t("page-layer-2-faq-ExpandableCard-1-description-1")}{" "}
<InlineLink href="/layer-2/networks">
{tCommon("nav-ethereum-networks")}
</InlineLink>
{t("page-layer-2-period")}
</p>
<p>{t("page-layer-2-faq-ExpandableCard-1-description-2")}</p>
</ExpandableCard>
<ExpandableCard
title={t("page-layer-2-faq-ExpandableCard-2-title")}
eventCategory="l2_hub"
eventAction="expand"
eventName="are all these networks safe"
>
<div className="flex flex-col gap-8">
<p>
{t("page-layer-2-faq-ExpandableCard-2-description-1")}{" "}
<InlineLink href="/layer-2/networks">
{t("page-layer-2-faq-ExpandableCard-2-link")}
</InlineLink>
{t("page-layer-2-period")}
</p>
<p>{t("page-layer-2-faq-ExpandableCard-2-description-2")}</p>
</div>
<p>
{t("page-layer-2-faq-ExpandableCard-2-description-1")}{" "}
<InlineLink href="/layer-2/networks">
{t("page-layer-2-faq-ExpandableCard-2-link")}
</InlineLink>
{t("page-layer-2-period")}
</p>
<p>{t("page-layer-2-faq-ExpandableCard-2-description-2")}</p>
</ExpandableCard>
<ExpandableCard
title={t("page-layer-2-faq-ExpandableCard-3-title")}
Expand Down
54 changes: 23 additions & 31 deletions app/[locale]/roadmap/_components/roadmap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,52 +216,44 @@ const RoadmapPage = () => {
title={t("page-roadmap-faq-1-title")}
className="mb-0"
>
<div className="flex flex-col gap-4">
<p>
<strong>{t("page-roadmap-faq-1-p1")}</strong>{" "}
{t("page-roadmap-faq-1-p1-continued")}
</p>
<p>{t("page-roadmap-faq-1-p2")}</p>
</div>
<p>
<strong>{t("page-roadmap-faq-1-p1")}</strong>{" "}
{t("page-roadmap-faq-1-p1-continued")}
</p>
<p>{t("page-roadmap-faq-1-p2")}</p>
</ExpandableCard>
<ExpandableCard
title={t("page-roadmap-faq-2-title")}
className="mb-0"
>
<div className="flex flex-col gap-4">
<p>
{t("page-roadmap-faq-2-p1")}{" "}
<strong>{t("page-roadmap-faq-2-p1-strong")}</strong>{" "}
{t("page-roadmap-faq-2-p1-continued")}
</p>
<p>{t("page-roadmap-faq-2-p2")}</p>
</div>
<p>
{t("page-roadmap-faq-2-p1")}{" "}
<strong>{t("page-roadmap-faq-2-p1-strong")}</strong>{" "}
{t("page-roadmap-faq-2-p1-continued")}
</p>
<p>{t("page-roadmap-faq-2-p2")}</p>
</ExpandableCard>
<ExpandableCard
title={t("page-roadmap-faq-3-title")}
className="mb-0"
>
<div className="flex flex-col gap-4">
<p>
<Translation
id="page-roadmap:page-roadmap-faq-3-p1"
transform={{ a: Link }}
/>
</p>
</div>
<p>
<Translation
id="page-roadmap:page-roadmap-faq-3-p1"
transform={{ a: Link }}
/>
</p>
</ExpandableCard>
<ExpandableCard
title={t("page-roadmap-faq-4-title")}
className="mb-0"
>
<div className="flex flex-col gap-4">
<p>
<Translation
id="page-roadmap:page-roadmap-faq-4-p1"
transform={{ a: Link }}
/>
</p>
</div>
<p>
<Translation
id="page-roadmap:page-roadmap-faq-4-p1"
transform={{ a: Link }}
/>
</p>
</ExpandableCard>
</div>
</div>
Expand Down
42 changes: 18 additions & 24 deletions app/[locale]/staking/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -507,26 +507,22 @@ const Page = async (props: { params: Promise<PageParams> }) => {
<div>
<H2 id={tocItems.faq.id}>{tocItems.faq.title}</H2>
<ExpandableCard title={t("page-staking-faq-4-question")}>
<Stack className="gap-[1.45rem]">
<p>{t("page-staking-faq-4-answer-p1")}</p>
<p>{t("page-staking-faq-4-answer-p2")}</p>
<p>{t("page-staking-faq-4-answer-p3")}</p>
<ButtonLink className="self-start" href="/roadmap/merge/">
{t("page-upgrades-merge-btn")}
</ButtonLink>
</Stack>
<p>{t("page-staking-faq-4-answer-p1")}</p>
<p>{t("page-staking-faq-4-answer-p2")}</p>
<p>{t("page-staking-faq-4-answer-p3")}</p>
<ButtonLink className="self-start" href="/roadmap/merge/">
{t("page-upgrades-merge-btn")}
</ButtonLink>
</ExpandableCard>
<ExpandableCard title={t("page-staking-faq-5-question")}>
<Stack className="gap-[1.45rem]">
<p>{t("page-staking-faq-5-answer-p1")}</p>
<p>{t("page-staking-faq-5-answer-p2")}</p>
<ButtonLink
className="self-start"
href="/staking/withdrawals/"
>
{t("page-staking-faq-5-answer-link")}
</ButtonLink>
</Stack>
<p>{t("page-staking-faq-5-answer-p1")}</p>
<p>{t("page-staking-faq-5-answer-p2")}</p>
<ButtonLink
className="self-start"
href="/staking/withdrawals/"
>
{t("page-staking-faq-5-answer-link")}
</ButtonLink>
</ExpandableCard>
<ExpandableCard title={t("page-staking-faq-1-question")}>
<Translation id="page-staking:page-staking-faq-1-answer" />
Expand All @@ -535,12 +531,10 @@ const Page = async (props: { params: Promise<PageParams> }) => {
{t("page-staking-faq-2-answer")}
</ExpandableCard>
<ExpandableCard title={t("page-staking-faq-3-question")}>
<Stack className="gap-[1.45rem]">
<p>{t("page-staking-faq-3-answer-p1")}</p>
<p>
<Translation id="page-staking:page-staking-faq-3-answer-p2" />
</p>
</Stack>
<p>{t("page-staking-faq-3-answer-p1")}</p>
<p>
<Translation id="page-staking:page-staking-faq-3-answer-p2" />
</p>
</ExpandableCard>
</div>
<div>
Expand Down
6 changes: 1 addition & 5 deletions app/[locale]/videos/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,7 @@ const VideoLandingPage = async (props: {
<AccordionTrigger className="py-4">
<h2 className="text-xl">{t("page-videos-view-transcript")}</h2>
</AccordionTrigger>
{/* forceMount keeps transcript in DOM for SEO crawlers */}
<AccordionContent
className="text-base [[data-state=closed]_&]:invisible [[data-state=closed]_&]:h-0"
forceMount
>
<AccordionContent className="text-base [[data-state=closed]_&]:invisible [[data-state=closed]_&]:h-0">
{await renderSimpleMarkdown(transcriptMdx, {
h1: htmlElements.h2,
})}
Expand Down
8 changes: 5 additions & 3 deletions src/components/ExpandableCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ExpandableCard = ({
eventName = "",
visible = false,
className,
forceMount,
forceMount = true,
}: ExpandableCardProps) => {
const [isVisible, setIsVisible] = useState(visible)
const { t } = useTranslation("common")
Expand Down Expand Up @@ -71,7 +71,7 @@ const ExpandableCard = ({
>
<AccordionItem
value="item-1"
className="rounded-xs border hover:bg-background-highlight"
className="rounded-2xl border hover:bg-background-highlight"
>
<AccordionTrigger
hideIcon
Expand Down Expand Up @@ -104,7 +104,9 @@ const ExpandableCard = ({
"in-data-[state=closed]:hidden in-data-[state=closed]:h-0"
)}
>
<div className="border-t pt-6">{children}</div>
<div className="space-y-[1lh] border-t pt-6 [&>p]:first:mt-0 [&>p]:last:mb-0">
{children}
</div>
</AccordionContent>
</AccordionItem>
</Accordion>
Expand Down
19 changes: 8 additions & 11 deletions src/components/ListingMethodology/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,19 +54,16 @@ const ListingMethodology = async ({
<ExpandableCard
title={t("details-title")}
contentPreview={t("details-preview")}
forceMount
>
<div className="space-y-4">
{children}
{children}

{footers && (
<div className="mt-6 space-y-2 border-t border-body-light pt-6 text-sm text-body-medium">
{footers.map((footer) => (
<p key={footer}>{footer}</p>
))}
</div>
)}
</div>
{footers && (
<div className="mt-6 space-y-2 border-t border-body-light pt-6 text-sm text-body-medium">
{footers.map((footer) => (
<p key={footer}>{footer}</p>
))}
</div>
)}
</ExpandableCard>
</div>
</Section>
Expand Down
Loading
Loading