Ad Carousel — GCash DS Assessment

FixNeeds Refinement

A titled rail that scrolls Ad Space cards sideways, with an optional button in the header. One version, driven by a content slot.

Fix — clean structure, one open family question

The component reads in two levels: a Header holding #title and an optional button, over a ⤷ CarouselSlot that holds the cards. Names match Ad Space exactly, and the slot is the single control for what appears in the rail. It is badged Needs Refinement for one reason: nothing inside it is actually about ads. A title, a button, and a row of cards is the generic rail pattern, so the ad-specific framing is worth revisiting once the Carousel family is reviewed.

In Context

Sits on dashboard and category surfaces as a sponsored rail — a section heading, an optional "Show more" button, and a horizontally scrolling row of Ad Space cards with the next one peeking at the right edge.

Live Preview

Properties

hasCTA

⤷ CarouselSlot

Content

#title

DS Health

Reusable

Pass

The rail is content-agnostic in structure — ⤷ CarouselSlot takes whatever card is dropped into it. Every ad surface that needs a scrolling row uses this one component rather than a bespoke frame.

Self-contained

Pass

Carries its own surface, heading type style, spacing, and clipping behaviour. The button comes from the design system's own Button - XSmall rather than a hand-built shape.

Consistent

Pass

Layer names match Ad Space one for one — Header, #title, and a ⤷ -prefixed slot. The duplicate hand-built button and the spacer node that used to sit in the header are both gone.

Composable

Partial

It nests Ad Space cleanly through the slot. What it cannot do is hold anything else: the component is named and documented for ads, so a dashboard rail of Carousel Cards needs a second component. That is the open family question behind the Needs Refinement badge.

Behavior

State	iOS	Android	Figma Property	Notes
hasCTA=false	N/A	N/A	default	Heading only. This is the default the component ships with.
hasCTA=true	N/A	N/A	Button - XSmall	Adds the "Show more" button at the right of the heading row.
⤷ CarouselSlot	N/A	N/A	content slot	Selects which Ad Space version fills the rail. Promo is the default.
Peek	N/A	N/A	overflow clip	The rail is wider than the shell, so the next card is cut off at the right edge to signal scrollability.

Issues

One button in the heading, not two. The header used to carry a hand-built "Show more" — an offset frame, a spacer, and an arrow — alongside a real Button - XSmall instance saying the same thing. The hand-built one is gone. C1 · Layer Structure & Naming
The spacer node is gone. A _space_8 instance was faking a gap between the label and the arrow. Spacer nodes have no native equivalent — auto layout spacing does the job — and it went with the hand-built button. C4 · Native Mappability
Names match Ad Space. header-content became Header, and the empty header frame wrapping it was removed. The heading text is #title, the same name Ad Space uses for the same job. C1 · Layer Structure & Naming
The one-value setting is gone. The component was a set with a single Type=Default version — a dropdown with nothing to choose. It is now a plain component; what varies is the slot content and hasCTA. C2 · Variant & Property Naming
Banner filling the rail edge to edge is intentional. A 320-wide Banner in a 360-wide shell leaves no room for the next card, so nothing peeks — Promo shows about 96px and Receipt about 20px. Confirmed as intended: Banner is the full-width option, and the rail still scrolls. No change to the inset or the gap. C1 · Layer Structure & Naming
The next card now actually peeks. With Banner cards in the rail, the second card started exactly on the shell's right edge — nothing showed, so the rail read as a single card. Promo is now the default slot content, which leaves about 96px of the next card visible. C1 · Layer Structure & Naming

Structure

Ad Carousel

Properties

Title

hasCTA

Properties

Title Title

hasCTA true

⤷ CarouselSlot Ad Space · Promo

Colors

Surface #FFFFFF

#title #072592

CTA label #005CE5

Typography

#title Primary/Label/Large

CTA label Primary/Label/Small

Layout

Height 288px

Width 360px

Padding H 24px leading · 0 trailing (derived)

Padding V 12px (derived)

Gap 16px (derived)

Alignment Leading (derived)

EBAdCarousel(title: "Title") {
    ForEach(ads) { ad in
        EBAdSpace(.promo, header: ad.headline) { Image(ad.creative) }
    }
}

Ad Carousel — Colors

The frame paints a real white surface. The cards inside the rail carry their own colours — see Ad Space.

Role	Token	Value
Surface	bg/color-bg-main	#FFFFFF
#title	text/color-text-stronger	#072592
CTA label	main/button/tertiary/brand/enabled/label	#005CE5

Installation Planned API

iOS — Swift Package Manager

.package(url: "https://github.com/AY-Org/eb-ds-ios", from: "1.0.0")

Android — Gradle (Kotlin DSL)

implementation("com.eastblue.ds:ad-space:1.0.0")

Import

import EastBlueDS
import com.eastblue.ds.adspace.*

Planned API — the native library does not exist yet. Snippets show the intended shape, not shipped code.

Property Mapping

Figma properties mapped to the intended native parameters.

Figma Property	SwiftUI	Compose
Title (text)	`title: String`	`title: String`
hasCTA — true, false	`action: EBAdCarouselAction?` — nil hides the button	`action: (() -> Unit)? = null`
⤷ CarouselSlot (slot)	`@ViewBuilder content: () -> Content`	`content: @Composable RowScope.() -> Unit`

Usage Snippets Planned API

With the button (hasCTA=true)

EBAdCarousel(
    title: "Title",
    action: EBAdCarouselAction("Show more") { /* action */ }
) {
    ForEach(ads) { ad in
        EBAdSpace(.promo, header: ad.headline) { Image(ad.creative) }
    }
}

EBAdCarousel(
    title = "Title",
    action = { /* action */ }
) {
    ads.forEach { ad ->
        EBAdSpace(variant = AdSpaceVariant.Promo, header = ad.headline) { AsyncImage(model = ad.creative, contentDescription = null) }
    }
}

Heading only (default)

EBAdCarousel(title: "Title") {
    ForEach(ads) { ad in
        EBAdSpace(.promo, header: ad.headline) { Image(ad.creative) }
    }
}

EBAdCarousel(title = "Title") {
    ads.forEach { ad ->
        EBAdSpace(variant = AdSpaceVariant.Promo, header = ad.headline) { AsyncImage(model = ad.creative, contentDescription = null) }
    }
}

Requirement	iOS	Android
Rail is one navigable group	`accessibilityElement(children: .contain)` on the rail, labelled by `#title`	`Modifier.semantics { collectionInfo = CollectionInfo(1, itemCount) }`
Heading is exposed as a heading	`.accessibilityAddTraits(.isHeader)`	`Modifier.semantics { heading() }`
Button reachable without scrolling the rail	Button precedes the rail in the accessibility order	Button precedes the rail in the traversal order
Clipped card is still reachable	Scroll to reveal on accessibility focus	`bringIntoViewRequester` on focus

Usage Guidelines

Do

Use Promo cards when the rail should read as scrollable — about 96px of the next card stays visible.

Don't

Don't expect a peek from Banner cards; at 320 wide they fill the rail by design.

Do

Let the heading describe the whole rail, and switch off the card titles inside it.

Don't

Don't repeat the same wording in the rail heading and in every card.

Do

Turn on the button only when there is somewhere further to go.

Don't

Don't ship a "Show more" that leads back to the same surface.

Criteria Scorecard

ID	Criterion	Status	Notes
C1	Layer Structure & Naming	Ready	Two levels, names matching Ad Space. Banner filling the rail edge to edge is intentional.
C2	Variant & Property Naming	Ready	The one-value `Type` setting was removed. `hasCTA` follows the boolean prefix convention.
C3	Token Coverage	Needs Refinement	Confirmed by design: surface `bg/color-bg-main`, `#title` `text/color-text-stronger`, CTA label `main/button/tertiary/brand/enabled/label`.
C4	Native Mappability	Ready	The spacer instance is gone. Heading plus scrolling row maps to a lazy row with a header on both platforms.
C5	Interaction State Coverage	Not Applicable	The container has no states of its own. Pressed behaviour belongs to the cards and the button.
C6	Asset & Icon Quality	Needs Refinement	The button's arrow uses a `shape_full` boolean operation — delegated to the iconography team, not fixable here.

Variants Inventory (1 total)

A single component, not a component set — 1 variant. hasCTA is a boolean property and ⤷ CarouselSlot is a slot, so neither multiplies the matrix. The two rows below are the states that boolean produces.

hasCTA	Header	Node
false	#title only	5703:38564
true	#title + Button - XSmall	5703:38564

1.1.4 — September 2026Patch

Preview typeface corrected — node 6507:74166

The preview rendered Primary text in the wrong typeface. Every Primary/* layer is Proxima Soft and every Secondary/* layer is BarkAda, but the preview never said so: the root declared no font-family at all, which resolves through .eb-preview-scope to body — the documentation font, BarkAda. Both text layers here are Primary — #title at Primary/Label/Large and the CTA label at Primary/Label/Small — so the whole preview was in the wrong face. There is no Secondary text on this component, so the root declaration settles it.

Docs

1.1.3 — September 2026Patch

Kotlin import corrected to the family package

The Kotlin import named the component, not its family. It read com.eastblue.ds.adcarousel.*. Under the packaging rule settled on 2 September the package is the family — Ad Space — so it is com.eastblue.ds.adspace.*. One package per family keeps imports stable when a family gains a component. The Gradle artifact keeps the slug and is unchanged.

Docs

1.1.2 — September 2026Patch

Corrects the default recorded in v1.1.1 — node 5703:38564

hasCTA defaults to false. v1.1.1 recorded the opposite, reading the toggle's on state in the Figma file as the component default. It was set on to show the full scope for preview. The panel control, the spec-card fallback snippet and the Usage Snippets order all now start from the button hidden.

Docs

The Overview behavior table was right. v1.1.1 logged it as contradicting the panel; it does not. That open item is withdrawn — no Component Review is owed for it.

C2 Resolved

1.1.1 — September 2026Patch

Corrections to v1.1.0 — node 5703:38564

The Title property now has a control. v1.1.0 recorded it as blocked on a shared renderer change; the renderer gained a control: 'input' kind later the same day, so the heading is editable from the spec-card panel. That row is superseded, not deleted.

Docs

The default snippet was labelled on the wrong state. Usage Snippets called hasCTA=false "default" while the Figma panel ships the button on. The two snippets are now "With the button (default)" and "Heading only (hasCTA=false)", in that order.

Docs

One call, written three ways. The spec card's fallback used ad.image, the Code tab used $0.image, and the live getSnippet used Image(ad.creative). All three now match the generated form.

Docs

The Overview behavior table still calls hasCTA=false the shipped default. The Figma panel shows it on. Overview is not this run's scope — logged for a Component Review pass.

C2 Open

1.1.0 — September 2026Minor

Text property added, documentation pass — node 5703:38564

Style tab rebuilt to the content guides. Four spec sections in order, card description cleared, and Layout cut to the canonical keys — Side inset, Heading to rail, Card gap and Next card visible came out in favour of Padding H, Padding V, Gap and Alignment.

Docs

Typography reduced to text style names. #title is Primary/Label/Large and the CTA label is Primary/Label/Small, replacing the previously documented Primary/Bold/Heading and its font rows.

Docs

Colour tokens confirmed by design. Surface bg/color-bg-main, #title text/color-text-stronger, CTA label main/button/tertiary/brand/enabled/label. The previous text/color-text-heading and text/color-text-link paths were unverified. Unlike Ad Space, the frame here paints a real white fill, so the surface row is correct as written.

C3 Resolved

A colours table was added. The component had none.

Docs

The slot no longer has a demo control. ⤷ CarouselSlot is a slot, so the panel drops it and hasCTA is the only control — a toggle, defaulting to true as the Figma panel does.

Docs

DEV code is live. getSnippet in demos/ad-carousel.js rebuilds both snippets from the card's controls, so turning hasCTA off drops the action argument.

Docs

Install coordinates corrected. gcash/east-blue-ios and com.gcash.eastblue:components:1.0.0 became AY-Org/eb-ds-ios and com.eastblue.ds:ad-carousel:1.1.3, and an Import block was added. Property Mapping was regrouped and Code Connect emptied.

Docs

Variant count corrected to 1. Ad Carousel is a single component, not a component set. The inventory read 2 by counting hasCTA's two states; a boolean property does not multiply the variant matrix.

C2 Resolved

#title gained a Title text property. The panel previously exposed only hasCTA and ⤷ CarouselSlot, so the heading could not be set from an instance while Ad Space exposed one for the same job. Design added it during this pass, named to match Ad Space, default value Title. It sits first in the panel.

C2 Resolved

The heading row holds its height. The live preview let the 26px CTA stretch the header; in Figma the Header frame stays 18px and the button overflows it, centred. The preview now matches.

Docs

The text property has no demo control. SpecCard.astro renders select and toggle only, so the heading cannot be edited from the panel. Blocked on a shared renderer change — the same gap logged on Ad Space.

Docs Partial

1.0.0 — August 2026Initial

First assessment · node 5703:38564

Duplicate Show more removed — the hand-built frame is gone, the Button - XSmall instance stays.

C1 resolved

_space_8 spacer instance deleted with the hand-built button.

C4 resolved

header-content renamed to Header, the redundant header wrapper removed, and the heading text renamed to #title.

C1 resolved

The single-value Type setting removed — the component set became a plain component, which is why the node changed.

C2 resolved

Promo set as the default rail content so the next card peeks. Banner fills the rail edge to edge, confirmed as intentional.

C1 resolved