OPHJOD-287: Rename color card to hero card

lib/components/ColorCard/ColorCard.stories.tsx → lib/components/HeroCard/HeroCard.stories.tsx

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ColorCard } from './ColorCard';
+import { HeroCard } from './HeroCard';
 
 const meta = {
-  title: 'Primitives/Cards/ColorCard',
-  component: ColorCard,
+  title: 'Cards/HeroCard',
+  component: HeroCard,
   tags: ['autodocs'],
-} satisfies Meta<typeof ColorCard>;
+} satisfies Meta<typeof HeroCard>;
 
 export default meta;
 
@@ -25,7 +25,7 @@ export const Primary: Story = {
     },
     docs: {
       description: {
-        story: 'This is a primary color card component.',
+        story: 'This is a primary hero card component.',
       },
     },
     backgrounds: {
@@ -56,7 +56,7 @@ export const Secondary: Story = {
     },
     docs: {
       description: {
-        story: 'This is a secondary color card component.',
+        story: 'This is a secondary hero card component.',
       },
     },
   },
@@ -80,7 +80,7 @@ export const MultipleSecondary: Story = {
     },
     docs: {
       description: {
-        story: 'Multiple color card components.',
+        story: 'Multiple hero card components.',
       },
     },
   },
@@ -106,7 +106,7 @@ export const Hero: Story = {
     },
     docs: {
       description: {
-        story: 'This is a hero component with multiple color card components.',
+        story: 'This is a hero component with multiple hero card components.',
       },
     },
     backgrounds: {

lib/components/ColorCard/ColorCard.test.tsx → lib/components/HeroCard/HeroCard.test.tsx

@@ -2,21 +2,21 @@ import { afterEach, describe, it, expect } from 'vitest';
 import { render, screen, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
-import { ColorCard } from './ColorCard';
+import { HeroCard } from './HeroCard';
 
 afterEach(() => {
   cleanup();
 });
 
-describe('ColorCard', () => {
+describe('HeroCard', () => {
   const title = 'Test Title';
   const content = 'Test Content';
   const actionContent = 'Test Action Content';
   const backgroundColor = '#444BACF2';
 
-  it('renders ColorCard with actionContent', () => {
+  it('renders HeroCard with actionContent', () => {
     render(
-      <ColorCard title={title} content={content} actionContent={actionContent} backgroundColor={backgroundColor} />,
+      <HeroCard title={title} content={content} actionContent={actionContent} backgroundColor={backgroundColor} />,
     );
 
     // Assert title, content, and actionContent are rendered
@@ -25,9 +25,9 @@ describe('ColorCard', () => {
     expect(screen.getByText(actionContent)).toBeInTheDocument();
   });
 
-  it('renders ColorCard with a link when actionContent is provided', () => {
+  it('renders HeroCard with a link when actionContent is provided', () => {
     render(
-      <ColorCard
+      <HeroCard
         title={title}
         content={content}
         actionContent={actionContent}
@@ -36,13 +36,13 @@ describe('ColorCard', () => {
       />,
     );
 
-    // Assert ColorCard is wrapped in a link
+    // Assert HeroCard is wrapped in a link
     const linkElement = screen.getByRole('link');
     expect(linkElement).toBeInTheDocument();
   });
 
-  it('renders ColorCard without actionContent', () => {
-    render(<ColorCard title={title} content={content} backgroundColor={backgroundColor} />);
+  it('renders HeroCard without actionContent', () => {
+    render(<HeroCard title={title} content={content} backgroundColor={backgroundColor} />);
 
     // Assert title and content are rendered
     expect(screen.getByText(title)).toBeInTheDocument();
@@ -52,10 +52,10 @@ describe('ColorCard', () => {
     expect(screen.queryByText(actionContent)).toBeNull();
   });
 
-  it('renders ColorCard with a link when actionContent is not provided', () => {
-    render(<ColorCard title={title} content={content} backgroundColor={backgroundColor} href="/" />);
+  it('renders HeroCard with a link when actionContent is not provided', () => {
+    render(<HeroCard title={title} content={content} backgroundColor={backgroundColor} href="/" />);
 
-    // Assert ColorCard is wrapped in a link
+    // Assert HeroCard is wrapped in a link
     const linkElement = screen.getByRole('link');
     expect(linkElement).toBeInTheDocument();
   });

lib/components/ColorCard/ColorCard.tsx → lib/components/HeroCard/HeroCard.tsx

@@ -1,4 +1,4 @@
-export interface ColorCardProps {
+export interface HeroCardProps {
   /** Title text shown on the card */
   title: string;
   /** Content text shown on the card */
@@ -11,7 +11,7 @@ export interface ColorCardProps {
   href?: string;
 }
 
-export const ColorCard = ({ title, content, actionContent, backgroundColor = '#444BACF2', href }: ColorCardProps) => (
+export const HeroCard = ({ title, content, actionContent, backgroundColor = '#444BACF2', href }: HeroCardProps) => (
   <>
     {actionContent ? (
       <BaseCard
@@ -29,7 +29,7 @@ export const ColorCard = ({ title, content, actionContent, backgroundColor = '#4
   </>
 );
 
-const BaseCard = ({ title, content, actionContent, backgroundColor, href }: ColorCardProps) => {
+const BaseCard = ({ title, content, actionContent, backgroundColor, href }: HeroCardProps) => {
   const Heading = actionContent ? 'h1' : 'h2';
   return (
     <div

lib/main.ts

@@ -1,7 +1,7 @@
 import './index.css';
 
 export { Button } from './components/Button/Button';
-export { ColorCard } from './components/ColorCard/ColorCard';
+export { HeroCard } from './components/HeroCard/HeroCard';
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu';
 export { NavigationBar } from './components/NavigationBar/NavigationBar';
 export { RadioButton } from './components/RadioButton/RadioButton';