Rds Component Mapper

RDS Component Mapper

1. Overview

This skill is the component selection engine for the RDS (Reusable Design System) Vue UI library. Given a visual description, Figma design context, screenshot analysis, or section type, it maps to the best-matching @rds-vue-ui/* component(s).

The RDS library contains 94 components across 15 categories:

All components are installed from the private registry (https://npm.edpl.us) as @rds-vue-ui/{package-name} and are auto-imported via the Nuxt component scanner — no manual import statements are needed.

2. Component Selection Decision Tree

Use this decision tree to map a visual intent or section description to the correct RDS component. Work top-down: match the section type first, then refine by variant/theme.

Heroes

Sections — Content Containers

Sections — Parallax

Sections — Testimonials

Sections — Video

Cards

Accordions & Collapsibles

Carousels & Sliders

Navigation

Footers

Videos

Tabs & Tables

Forms

Lists

Images

Buttons

Core UI

Utilities

Quick-Match Reference

For the most common visual patterns:

Full-width hero with background image  → hero-standard-apollo
Content section / generic container    → section-apollo
Testimonial / quote section            → section-testimonial-falcon
Accordion / FAQ section                → overlap-accordion-atlas or rds-accordion
Image cards in a grid                  → card-image-article or card-image-full
Testimonial cards                      → card-testimonial-apollo
Degree/program cards                   → card-degree-text or card-degree-search
Icon feature cards                     → card-icon
Ranking/stat display                   → ranking-carousel-apollo
Image carousel/slider                  → carousel-image-apollo
Tab-based content switching            → tab-switcher-apollo or tab-carousel-atlas
Video with captions                    → video-caption-apollo
Video in modal                         → video-modal-atlas
Standard page footer                   → footer-standard
Partner/co-branded footer              → footer-partner
Sticky navigation                      → navbar-sticky-apollo
Fixed navigation                       → navbar-fixed-atlas
Form text input                        → typeinput-text
Form dropdown                          → dropdown-apollo
Form checkbox                          → form-checkbox
Form radio buttons                     → radio-group-apollo
Phone input                            → phone-input-apollo
Date picker                            → date-picker
File upload                            → file-input-apollo
Search with autocomplete               → typeahead-search or typeahead-select
Alert/notification                     → rds-alert
Modal/dialog                           → rds-modal
Breadcrumb navigation                  → breadcrumb-apollo
Loading spinner                        → rds-loader
Parallax section                       → section-parallax-apollo
Step-by-step process                   → section-step-apollo
Timeline/history                       → list-timeline

3. Prop Mapping Guide

Common Props Pattern (all components)

Hero Components

hero-standard-apollo — Full-width hero with image background and gradient overlay.

Slots: #default (main content), #cta (call-to-action area), #overlay (overlay content).

hero-article-atlas — Article-style hero with headline and metadata.

hero-video-apollo — Hero section with embedded video.

Sections

section-apollo — Basic container section. The most commonly used wrapper.

Slots: #default (section content). Use freely for any body HTML/components.

section-card-apollo — Section displaying cards in a grid.

section-testimonial-falcon — Testimonial showcase section.

section-parallax-apollo — Parallax scrolling effect section.

section-step-apollo — Step-by-step process section.

section-intro-falcon — Introduction / featured content section.

Accordions

overlap-accordion-atlas — Overlapping accordion design (primary FAQ/accordion component).

Each item in items:

{
  "title": "Accordion heading",
  "body": "<p>HTML content for the expanded panel</p>",
  "accordionId": "unique-id",
  "image": "images/optional.png"
}

rds-accordion — Core accordion component.

Cards

card-image-article — Article-style card with image.

card-image-full — Full-image card with overlay content.

card-icon — Icon-based feature card.

card-testimonial-apollo — Testimonial card.

card-degree-text — Degree information card.

card-info-horizontal — Horizontal layout info card.

card-info-vertical — Vertical layout info card.

Carousels

carousel-image-apollo — Image carousel/slider.

ranking-carousel-apollo — Ranking/scoring carousel.

tab-carousel-atlas — Carousel with tab navigation.

Navigation

navbar-sticky-apollo — Sticky navigation bar.

navbar-fixed-atlas — Fixed positioning navbar.

Footers

footer-standard — Standard footer with links and branding.

Primarily uses slots for content injection. Minimal props needed.

footer-partner — Partner/sponsor footer.

Forms

typeinput-text — Text input with autocomplete.

dropdown-apollo — Dropdown/select component.

form-checkbox — Styled checkbox.

radio-group-apollo — Group of radio buttons.

date-picker — Date input picker.

phone-input-apollo — Phone number input with formatting.

file-input-apollo — File upload input.

Core UI

rds-alert — Alert notification.

rds-modal — Modal dialog.

rds-loader — Loading spinner.

Videos

video-caption-apollo — Video with caption/subtitle display.

video-modal-atlas — Video in modal dialog.

Lists

list-timeline — Timeline/vertical list display.

Utilities

breadcrumb-apollo — Breadcrumb navigation.

tab-switcher-apollo — Tab navigation component.

4. Composition Patterns

Standard Landing Page Layout

A typical RDS landing page follows this structure:

<template>
  <div>
    <!-- Hero -->
    <HeroStandardApollo
      :bg-image-source="homeData.hero.bgImageSource"
      :display-gradient="true"
      :full-width="true"
    >
      <h1>{{ homeData.hero.title }}</h1>
      <p>{{ homeData.hero.subtitle }}</p>
    </HeroStandardApollo>

    <!-- Intro / Content Section -->
    <SectionApollo :title="homeData.intro.title">
      <div v-html="homeData.intro.body" />
    </SectionApollo>

    <!-- Accordion / FAQ -->
    <OverlapAccordionAtlas
      :items="homeData.accordion"
      :display-label="homeData.accordionLabel"
    />

    <!-- Testimonial -->
    <SectionTestimonialFalcon
      :testimonials="homeData.testimonials"
      :title="homeData.testimonialTitle"
    />

    <!-- Cards Grid -->
    <SectionCardApollo
      :cards="homeData.cards"
      :title="homeData.cardsTitle"
      :columns="3"
    />

    <!-- Footer -->
    <FooterStandard />
  </div>
</template>

<script setup>
import homeData from '~/assets/content/home.json'
</script>

MLB Reference Implementation Pattern

The production MLB landing page uses this proven component stack:

Page: pages/index.vue
├── HeroStandardApollo          ← hero with bg image + gradient
│   └── <h1> + subtitle
├── IntroTextComponent           ← custom component (no RDS equivalent)
├── OverlapAccordionAtlas        ← 4 accordion items from home.json
│   └── analytics tracking on collapse events
├── SectionApollo               ← CTA section with narrative text
│   └── <NuxtLink> to /requestinfo
├── SectionTestimonialFalcon    ← student success story
└── FooterStandard              ← standard footer

Data: assets/content/home.json
Analytics: analyticsComposable.trackEvent() on all interactions

Form Page Pattern

<template>
  <div>
    <HeroStandardApollo :bg-image-source="formHero.image">
      <h1>{{ formHero.title }}</h1>
    </HeroStandardApollo>

    <SectionApollo title="Request Information">
      <form @submit.prevent="handleSubmit">
        <TypeinputText
          v-model="form.firstName"
          placeholder="First Name"
        />
        <TypeinputText
          v-model="form.lastName"
          placeholder="Last Name"
        />
        <TypeinputText
          v-model="form.email"
          placeholder="Email Address"
        />
        <PhoneInputApollo
          v-model="form.phone"
          country-code="US"
        />
        <DropdownApollo
          v-model="form.program"
          :options="programOptions"
          placeholder="Select a Program"
        />
        <FormCheckbox
          v-model="form.consent"
          label="I agree to the terms and conditions"
        />
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </SectionApollo>

    <FooterStandard />
  </div>
</template>

<script setup>
import formData from '~/assets/content/requestinfo.json'

const form = reactive({
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
  program: null,
  consent: false,
})

const formHero = formData.hero
const programOptions = formData.programs
</script>

Card Grid Pattern

<template>
  <SectionApollo :title="sectionTitle">
    <div class="row">
      <div
        v-for="card in cards"
        :key="card.id"
        class="col-md-4 mb-4"
      >
        <CardImageArticle
          :image-source="card.image"
          :title="card.title"
          :description="card.description"
        />
      </div>
    </div>
  </SectionApollo>
</template>

Parallax + Stats Pattern

<template>
  <SectionParallaxApollo
    :image-source="parallaxBg"
    :title="statsTitle"
  >
    <div class="row text-center">
      <div v-for="stat in stats" :key="stat.label" class="col-md-3">
        <h2 class="display-4 fw-bold">{{ stat.value }}</h2>
        <p>{{ stat.label }}</p>
      </div>
    </div>
  </SectionParallaxApollo>
</template>

5. Content JSON Pattern

All page content is driven by JSON files in assets/content/. This separates content from presentation and enables non-developer content updates.

Convention

assets/
└── content/
    ├── home.json           ← Homepage data
    ├── requestinfo.json    ← Form page data
    ├── programs.json       ← Program listings
    └── shared.json         ← Shared content (nav, footer)

JSON Structure

Each JSON file maps directly to the components on its page:

{
  "hero": {
    "title": "Transform Your Future",
    "subtitle": "World-class online education for working professionals",
    "bgImageSource": "images/hero-bg.jpg",
    "displayGradient": true
  },
  "intro": {
    "title": "Why Choose Our Programs?",
    "body": "<p>HTML content goes here with <strong>formatting</strong> preserved.</p>"
  },
  "accordion": [
    {
      "title": "Accessible online learning",
      "body": "<p>Our platforms are designed for flexibility...</p>",
      "accordionId": "acc-1",
      "image": "images/acc1.png"
    },
    {
      "title": "Same faculty, same degree",
      "body": "<p>Online students learn from the same faculty...</p>",
      "accordionId": "acc-2",
      "image": "images/acc2.jpeg"
    }
  ],
  "testimonials": [
    {
      "quote": "This program changed my career trajectory.",
      "author": "Jane Doe",
      "authorTitle": "Class of 2024",
      "image": "images/testimonial-jane.jpg"
    }
  ],
  "cards": [
    {
      "id": "card-1",
      "title": "Business Administration",
      "description": "Build leadership skills...",
      "image": "images/card-business.jpg",
      "link": "/programs/business"
    }
  ],
  "footer": {}
}

Binding JSON to Components

<script setup>
import homeData from '~/assets/content/home.json'

// Direct prop spreading for simple components
const heroProps = homeData.hero
const accordionItems = homeData.accordion
const testimonials = homeData.testimonials
</script>

<template>
  <HeroStandardApollo v-bind="heroProps">
    <h1>{{ heroProps.title }}</h1>
  </HeroStandardApollo>

  <OverlapAccordionAtlas :items="accordionItems" />

  <SectionTestimonialFalcon :testimonials="testimonials" />
</template>

Key Rules

1. All user-facing text lives in JSON, not in .vue templates
2. Images are referenced by relative path from public/ directory (e.g., "images/hero.jpg")
3. HTML in body fields is rendered with v-html — sanitize if content is user-generated
4. Each JSON key corresponds to a page section and maps 1:1 to a component
5. Shared data (navigation, footer, site-wide text) goes in shared.json

6. Fallback Rules

When the 94 RDS components don't cover a specific visual requirement:

Decision Order

1. First: Find the closest RDS component — an approximate match using an RDS component is always preferred over custom HTML. Customize with slots, CSS overrides, and creative prop usage.

2. Second: Compose from multiple RDS components — combine two or more RDS components to achieve the desired layout (e.g., SectionApollo wrapping a custom grid of CardIcon components).

3. Third: Create a minimal custom component in the components/ directory:

<!-- components/IntroTextComponent.vue -->
<!--
  Custom component: No direct RDS equivalent exists for an intro section
  with icon + two-column text layout. Uses Bootstrap 5 grid and RDS
  theme CSS variables for visual consistency.
-->
<template>
  <section class="intro-text py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-4 text-center">
          <img :src="icon" :alt="iconAlt" class="intro-icon" />
        </div>
        <div class="col-md-8">
          <h2>{{ title }}</h2>
          <div v-html="body" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  title: String,
  body: String,
  icon: String,
  iconAlt: { type: String, default: '' },
})
</script>

<style scoped>
.intro-text {
  background-color: var(--rds-bg-primary);
  color: var(--rds-text-primary);
}
.intro-icon {
  max-width: 120px;
}
</style>

Custom Component Requirements

• Must use Bootstrap 5 grid system (container, row, col-*)
• Must use RDS theme CSS variables (e.g., var(--rds-bg-primary), var(--rds-text-primary))
• Must include a comment block explaining why no RDS equivalent exists
• Must follow the same prop-driven, JSON-content pattern as RDS components
• Must be placed in the components/ directory (auto-imported by Nuxt)

7. Import & Configuration Notes

Auto-Import (No Manual Imports Needed)

RDS components are automatically registered via nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  components: [
    {
      path: "~/node_modules/@rds-vue-ui/",
      ignore: ["**/index.ts", "**/index.js", "**/node_modules"],
    }
  ],
  build: {
    transpile: [
      'bootstrap',
      '@rds-vue-ui/',
    ]
  },
  css: [
    "@rds-vue-ui/rds-theme-base/style/rds-theme-base.scss",
    "~/assets/scss/styles.scss"
  ],
})

This means:

• ❌ Do NOT write import { HeroStandardApollo } from '@rds-vue-ui/hero-standard-apollo'
• ✅ Just use <HeroStandardApollo> directly in any template
• ✅ Use PascalCase component names in templates (e.g., <HeroStandardApollo>, <SectionApollo>)
• ✅ Components are resolved automatically from ~/node_modules/@rds-vue-ui/

Installing New Components

yarn add --registry=https://npm.edpl.us @rds-vue-ui/{package-name}

After installation, the component is immediately available in all templates — no config changes needed.

Theme Setup

The base theme must be included in nuxt.config.ts CSS:

css: [
  "@rds-vue-ui/rds-theme-base/style/rds-theme-base.scss",
  // Additional theme overrides:
  // "@rds-vue-ui/rds-theme-apollo/style/rds-theme-apollo.scss",
  // "@rds-vue-ui/rds-theme-atlas/style/rds-theme-atlas.scss",
]

Available themes: rds-theme-base, rds-theme-apollo, rds-theme-atlas, rds-theme-airuniversity, rds-theme-army, rds-theme-dsl, rds-theme-starbucks.

Analytics Composable

The analytics-gs-composable is not a visual component — it's a Vue composable for Google Analytics:

<script setup>
import { useAnalytics } from '@rds-vue-ui/analytics-gs-composable'

const analytics = useAnalytics()

function onAccordionToggle(item) {
  analytics.trackEvent('accordion', 'toggle', item.title)
}
</script>

Note: The analytics composable is the one exception to the "no manual imports" rule — composables must be imported explicitly.

8. Available Themes Reference

9. Component Selection Examples

Example 1: "I need a page with a big hero image, some FAQ questions, and a footer"

Selection:

1. hero-standard-apollo — Full-width hero with background image
2. overlap-accordion-atlas — FAQ accordion
3. footer-standard — Standard footer

Example 2: "Show degree programs in a card layout with images"

Selection:

1. section-card-apollo — Wrapping section for the grid
2. card-image-article — Individual cards with image + title + description
3. Or card-degree-text if text-focused without images

Example 3: "A form page to collect user information"

Selection:

1. hero-standard-apollo — Page hero
2. section-apollo — Form container section
3. typeinput-text — Name, email fields
4. phone-input-apollo — Phone field
5. dropdown-apollo — Program selection
6. form-checkbox — Consent checkbox
7. footer-standard — Page footer

Example 4: "A page with parallax scrolling background and statistics"

Selection:

1. section-parallax-apollo — Parallax background section
2. Custom stats layout inside parallax using Bootstrap grid
3. Or ranking-carousel-apollo if stats are ranking-style

Example 5: "Navigation that stays visible as user scrolls"

Selection:

1. navbar-sticky-apollo — Sticky nav (scrolls with page, sticks at top)
2. Or navbar-fixed-atlas — Fixed nav (always at top of viewport)