Promotion-back · 0.3.0

Frontend primitives promoted to @tpisent/ui-rn

Scaffolded

12 primitives the tpemis-frontend-mobile team built locally are now canonical in @tpisent/ui-rn. Each section below demonstrates one primitive against the showcase's tokens. Issue #111 (epic), children #101–#110.

RnStepper · #101

Numbered horizontal stepper with `pending` / `current` / `completed` statuses. Tap any step to jump to it.

  • Method
    Choose how to apply
  • Identity
    Verify who you are
  • Program
    Pick what to study
  • Review
    Confirm and submit

RnFlowShell · #101

Page-level shell that wraps Stepper for multi-step auth/signup flows. Renders with the `lg` (4xl) width preset.

Apply to Njala University
Complete each step to submit your 2026/2027 application.
  • Method
    Choose how to apply
  • 2
    Identity
    Verify who you are
  • 3
    Program
    Pick what to study
  • 4
    Review
    Confirm and submit

Step body content goes here.

RnAuthCard · #102

Three width presets and the no-tenant (platform) variant.

With tenant — `md`

NU
Sign in
Welcome back
Enter your credentials to access the applicant portal.
Form fields go here.

No tenant — `sm` (platform variant)

Create your TpEMIS account
One account works across every university you apply to.
Email / phone fields go here.

Already have an account? Sign in

RnSubNav · #104

A 2-group sub-nav (Admissions + Support). Active item key is controlled state; tapping any item updates it.

Active: requirements

RnDeadlineCountdownBanner · #105

Near-deadline (7 days out) and post-deadline (closed) variants.

Applications open now
Closes Sunday, 30 August 2026 at 23:59 GMT
Late applications not accepted. All payment confirmations must clear before the deadline.
Loading countdown…
Applications opened
Closes Sunday, 30 August 2026 at 23:59 GMT
Late applications not accepted. All payment confirmations must clear before the deadline.
Loading countdown…

RnBankListGrid · #106

Three banks; the grid wraps 1 / 2 / 3 cols by viewport.

  • Ecobank Sierra Leone
    7 Lightfoot Boston Street, Freetown
    Account: 6010123456789
  • Sierra Leone Commercial Bank
    29-31 Siaka Stevens Street, Freetown
    Account: 0010045612345
  • Rokel Commercial Bank
    25 Siaka Stevens Street, Freetown
    Account: 2001234567890

RnPaymentRailsGrid · #106

Default rails — Mobile money, Card, International, Pan-African.

Accepted payment rails
Pay the application fee through any of the following channels.
Mobile money
OM
Orange Money
Mobile money
AM
Afrimoney
Mobile money
QM
Qmoney
Mobile money
Card
VI
Visa
Card
MC
Mastercard
Card
International
PP
PayPal
International
ST
Stripe
International
Pan-African
PS
Paystack
Pan-African
FL
Flutterwave
Pan-African

RnSignupOptionGrid · #106

Narrative variant with parameterised cards. Tap to select.

Selected: (none)

RnAnchorNav · #107

5-link sticky marketing nav with both CTAs. Mobile menu opens via the existing `RnSheet` (already shipped in 0.2.1).

RnPageLayout · #108

Both `container` and `full` widths. The skip link only renders on web; tab into the demo to see it slide in.

Skip to main content
Header slot · `container`

Main content. Capped to max-width 1280 px and centered.

Footer slot
Skip to main content

Main content. Full width — no header/footer in this variant.

RnPricingTierCard · #109

Featured + standard tiers. The featured tier raises with a tinted border + accent badge.

Starter
Free
For applicants exploring options.
  • 1 application
  • PIN redemption
  • Email support
Most institutions
Standard
SLE 250,000
/ application
The most popular path.
  • Unlimited applications
  • Bank, mobile money, or card
  • Application tracker
  • Priority support
Institution
Contact
Bulk admissions for partner universities.
  • Custom branding
  • Direct API access
  • Dedicated success manager

RnTestimonial · #109

With and without an avatar; the `featured` variant centers everything around a quote glyph.

TpEMIS replaced our paper-and-bank-line admissions workflow with something families can actually use from a feature phone.
AB
Aminata Bangura
Registrar at Njala University
2026-03-12
The bank-API channel cut our application-fee chase time in half.
Sahr Kamara
Bursar at Eastern Technical University

JsonLdScript · #110 (security hardening)

The existing JsonLdScript from @tpisent/ui-rn now escapes < to < before inlining into a <script> tag. With user-supplied content (taglines, FAQ answers, course descriptions) containing </script> or </body> substrings, this prevents the inline JSON from terminating the script tag prematurely (an XSS vector).

The component itself emits no visible UI; this section exists so the issue has a documentation surface in the showcase.