Component Audit: Update move-to-gitlab-from-atlassian components

1. Change Summary

Audit and consolidation of the components in app/components/move-to-gitlab-from-atlassian/ as part of the Component Audit & Consolidation Initiative. Replaces dedicated components with shared common components, removes dead code, and fixes accessibility/semantic issues.

• Related #1664 (closed)
• Part of digital-experience#513

The page previously had four dedicated components (Wrapper, BenefitsCard, PricingCard, Recognition). After this MR, two dedicated components remain (Wrapper, PricingCard) and two have been removed in favor of common components.

Consolidation — dedicated components replaced by common components

Recognition.vue → removed, replaced by CommonRecognitionBadges. The dedicated component duplicated functionality already provided by the shared RecognitionBadges component, including the G2 badges, which it hard-coded inline in the page YAML while RecognitionBadges already sources the identical images from the shared content collection (shared/en-us/g2-badges). The page YAML recognition block was remapped to the RecognitionBadges prop shape (title, subtitle, config.showBadges, cards), the inline badge URLs were removed, and Wrapper.vue now renders CommonRecognitionBadges. The unused stats code path was dropped in the process.

BenefitsCard.vue → removed, replaced by CommonMediaWithCols. The four "Move from …" benefit sections are now four CommonMediaWithCols instances in the page YAML. This migration:

• Preserves the section anchor ids (bitbucket, jira, bamboo, confluence) consumed by CommonSideNavigation.
• Preserves per-button GA tracking (data-ga-name / data-ga-location).
• Keeps resolving icons by name via CommonAsyncIcon (no hard-coded icon map).
• Uses a light purple background (#EEE7FD) for the sections that were previously dark purple, because MediaWithCols renders dark text and a dark background would fail contrast.

Shared common component change

RecognitionBadges.vue — added an opt-in config.preserveLogoColor prop. When true, card logos keep their original colors instead of being forced to black via filter: brightness(0). The default behavior is unchanged, so existing consumers (solutions/*, platform.yml, across all locales) are unaffected. The move-to-gitlab page sets it to true to keep the colored Gartner/Forrester logos. The props interface is now exported as RecognitionBadgesProps.

Cleanup / minor optimizations

Wrapper.vue — removed the unused benefits prop and its import; updated the recognition prop type to RecognitionBadgesProps and the template to CommonRecognitionBadges.

PricingCard.vue — added tag="h2" to the SlpTypography rendering the header (was rendering as <div>, breaking heading hierarchy). Renamed the CSS BEM block from agile-card to pricing-card (leftover name from a previous "Agile Planning" context). Kept as a dedicated component — no common equivalent exists for its pill + feature-checklist pricing layout.

2. QA Checklist

• Code Cleanup: Any messages, linter warnings, and/or deprecation warnings are cleaned up in the console
• Tech Debt: I have created, or documented, any fast follow-up work that needs to be done after this MR is merged
• Common Component Regression Check: MediaWithCols was not modified, so its consumers are unaffected. The RecognitionBadges change is an opt-in prop with the previous behavior as default; other consumers (solutions/*, platform) are unaffected. UX is aware of the visual changes on this page.
• Efficient Code Review: I have tested and reviewed my own changes thoroughly before assigning a reviewer
• Accessibility: Axe tools run and issues addressed
• Cross-browser compatibility: Works on Safari, Chrome, and Firefox
• Analytics and SEO: Compatible with Google Analytics and SEO tools (GA tracking attributes preserved in the migrated YAML)
• Localization checked for regressions
• I have run window.optimizely.get('state').getExperimentStates() on my affected pages and verified no active experiments are targeting these pages.

Steps to verify:

1. Navigate to /move-to-gitlab-from-atlassian/.
2. Confirm the page renders end-to-end with no console errors.
3. Benefits sections (Bitbucket / Jira / Bamboo / Confluence) now render via CommonMediaWithCols: title on top, columns below, icons in accent color, Bitbucket/Bamboo on a light purple background. Confirm each section still has its anchor and the side navigation links jump to it.
4. Recognition section now renders via CommonRecognitionBadges: title + subtitle + G2 badges on the left, Gartner/Forrester cards on the right. Confirm the Gartner and Forrester logos display in color (via preserveLogoColor), not black.
5. Inspect the Pricing card heading → confirm it renders as <h2> in the DOM.
6. Run Lighthouse or axe → heading hierarchy should pass.

Review App

Production	Review app
https://about.gitlab.com/move-to-gitlab-from-atlassian/	https://1664-audit-move-to-gitlab-from-atlassian-components-clean.about.gitlab-review.app/move-to-gitlab-from-atlassian/

3. Deployment Steps

Standard deployment. Content-only YAML updates plus component changes — no configuration changes and no feature flags.