Showcase: Convert Form Base Elements to gts

[dchyun]

📌 Summary

If merged, this PR would convert the showcase pages for the Form base elements to gts.

Preview page

🔗 External links

Jira ticket: HDS-5365

---

👀 Component checklist

• Percy was checked for any visual regression

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Sep 26, 2025 5:06pm
hds-website	Ready	Preview	Sep 26, 2025 5:06pm

[Copilot]

Pull Request Overview

This PR converts the showcase pages for Form base elements from HBS templates to the newer GTS format. The conversion involves replacing the traditional HBS template file with GTS components that use TypeScript and Ember's class-based component structure.

Key Changes:

• Migrated from HBS template-based approach to GTS component-based structure
• Created modular sub-section components for better organization (base-elements, field, fieldset)
• Replaced controller logic with component-based state management
• Extracted character count functionality into a reusable code fragment component

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
showcase/app/templates/page-components/form/base-elements.hbs	Removed the old HBS template file (784 lines deleted)
showcase/app/templates/page-components/form/base-elements.gts	Added new GTS template that renders the main component
showcase/app/routes/page-components/form/base-elements.ts	Simplified route by removing model data that's now handled in components
showcase/app/controllers/page-components/form/base-elements.ts	Removed controller as state management moved to components
showcase/app/components/page-components/form/base-elements/index.gts	Main GTS component with page title and sub-section orchestration
showcase/app/components/page-components/form/base-elements/sub-sections/base-elements.gts	Sub-component for base form elements showcase (Label, Helper text, etc.)
showcase/app/components/page-components/form/base-elements/sub-sections/field.gts	Sub-component for field layout demonstrations
showcase/app/components/page-components/form/base-elements/sub-sections/fieldset.gts	Sub-component for fieldset layout demonstrations
showcase/app/components/page-components/form/base-elements/code-fragments/with-character-count.gts	Reusable component for character count examples

[didoo]

Left one suggestion about possibly breaking down the large base-elements.gts file in smaller files (inside a base-elements folder)