ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2026-09-27 23:47:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3861 from XRPLF/update-panelstack-heading

Browse Source 
Update panel stack to have one heading for the section and remove obs…
This commit is contained in:
Amarantha Kulkarni
2026-08-24 12:39:51 -07:00
committed by GitHub
parent 096afbf126 0142811ec9
commit 5cfd3a13d5
3 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
community/developer-funding.page.tsx
View File

@@ -25,7 +25,6 @@ export default function Funding() {
const carouselSlides: PanelStackPanel[] = [
{
id: "xrpl-grants-accelerator",
heading: translate("Explore XRPL Funding and Builders Programs"),
features: [
{
title: translate("XRPL Grants & XRPL Accelerator"),
@@ -61,7 +60,6 @@ export default function Funding() {
},
{
id: "xrpl-student-builder-residency",
heading: translate("Explore XRPL Funding and Builders Programs"),
features: [
{
title: translate("XRPL Student Builder Residency"),
@@ -96,7 +94,6 @@ export default function Funding() {
},
{
id: "xrpl-commons",
heading: translate("Explore XRPL Funding and Builders Programs"),
features: [
{
title: translate("XRPL Commons"),
@@ -156,7 +153,11 @@ export default function Funding() {
}}
/>
<PanelStack slides={carouselSlides} background="yellow" />
<PanelStack
heading={translate("Explore XRPL Funding and Builders Programs")}
slides={carouselSlides}
background="yellow"
/>
<LogoSquareGrid
variant="gray"

5
docs/use-cases/tokenization/index.page.tsx
View File

@@ -118,10 +118,10 @@ export default function Tokenization() {
{/* 5. Token Utility and Market Integration — Carousel Featured (4 slides from Assets frame) */}
<PanelStack
background="neutral"
heading={translate('Token Utility and Market Integration')}
slides={[
{
id: 'token-utility-trading',
heading: translate('Token Utility and Market Integration'),
features: [
{
title: translate('Trading'),
@@ -141,7 +141,6 @@ export default function Tokenization() {
},
{
id: 'token-utility-collateral',
heading: translate('Token Utility and Market Integration'),
features: [
{
title: translate('Collateral Mobility'),
@@ -161,7 +160,6 @@ export default function Tokenization() {
},
{
id: 'token-utility-delegated',
heading: translate('Token Utility and Market Integration'),
features: [
{
title: translate('Delegated Distribution'),
@@ -181,7 +179,6 @@ export default function Tokenization() {
},
{
id: 'token-utility-crosschain',
heading: translate('Token Utility and Market Integration'),
features: [
{
title: translate('Cross-Chain Markets'),

45
shared/patterns/PanelStack/PanelStack.tsx
View File

@@ -11,9 +11,13 @@ import type {
/**
* Props for a single panel in the PanelStack component.
* Same shape as a CarouselFeatured slide.
* Extends CarouselSlide but makes heading optional since PanelStack
* can display a single heading above all panels.
*/
export type PanelStackPanel = CarouselSlide;
export interface PanelStackPanel extends Omit<CarouselSlide, 'heading'> {
/** Optional heading for this specific panel. If omitted, only the component-level heading is shown. */
heading?: string;
}
/**
* Background color options for PanelStack.
@@ -25,11 +29,15 @@ export type PanelStackBackground = CarouselFeaturedBackground;
* Props for the PanelStack pattern component.
* Matches CarouselFeatured, minus carousel-only behavior.
*/
export interface PanelStackProps extends CarouselFeaturedProps {
/** Array of panels to display. Same shape as CarouselFeatured slides. */
slides: readonly CarouselSlide[];
export interface PanelStackProps extends Omit<CarouselFeaturedProps, 'slides'> {
/** Array of panels to display. Heading is optional for each panel. */
slides: readonly PanelStackPanel[];
/** Background color variant. Defaults to 'grey'. */
background?: PanelStackBackground;
/** Optional heading text displayed above all panels */
heading?: string;
/** Optional description text displayed below the heading */
description?: string;
}
/**
@@ -64,7 +72,7 @@ export interface PanelStackProps extends CarouselFeaturedProps {
*/
export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
(props, ref) => {
const { slides, background = "grey", className, children, ...rest } = props;
const { slides, background = "grey", heading, description, className, children, ...rest } = props;
if (slides.length === 0) {
console.warn("PanelStack: No slides provided");
@@ -77,6 +85,18 @@ export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
className={clsx("bds-panel-stack", className)}
{...rest}
>
{heading && (
<PageGrid className="bds-panel-stack__header">
<PageGridRow>
<PageGridCol span={{ base: 4, md: 6, lg: 8 }}>
<div className="bds-panel-stack__header-text">
<h4 className="h-md mb-0">{heading}</h4>
{description && <p className="body-l mb-0">{description}</p>}
</div>
</PageGridCol>
</PageGridRow>
</PageGrid>
)}
{slides.map((slide, index) => (
<PageGrid
key={slide.id}
@@ -92,11 +112,13 @@ export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
className="bds-carousel-featured__content-col order-1 order-lg-2"
>
<div className="bds-carousel-featured__content">
<div className="bds-carousel-featured__header">
<h2 className="bds-carousel-featured__heading h-md">
{slide.heading}
</h2>
</div>
{slide.heading && (
<div className="bds-carousel-featured__header">
<h2 className="bds-carousel-featured__heading h-md">
{slide.heading}
</h2>
</div>
)}
<div className="bds-carousel-featured__bottom">
<ul className="bds-carousel-featured__features">
@@ -105,7 +127,6 @@ export const PanelStack = React.forwardRef<HTMLElement, PanelStackProps>(
key={featureIndex}
className="bds-carousel-featured__feature"
>
<Divider color="base" weight="regular" />
<div className="bds-carousel-featured__feature-title body-r">
{feature.title}
</div>