chore: Responsive Card Section button on cards (WEB-15)

src/app/components/button/__snapshots__/button.test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with primary variant 1`] = `
+<DocumentFragment>
+ <button
+ class="button undefined"
+ data-testid="button-primary"
+ >
+ Primary Button
+ </button>
+</DocumentFragment>
+`;

src/app/components/button/button.module.css

@@ -0,0 +1,21 @@
+.button--primary {
+ background-color: #3c3db9;
+ padding: 0 15px 0 15px;
+ height: 45px;
+ border-radius: 15px;
+ font-size: 18px;
+ font-weight: 900;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ text-decoration: none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ outline: none;
+ text-decoration: none;
+}
+
+.button__icon {
+ padding-left: 5px;
+}

src/app/components/button/button.test.js

@@ -0,0 +1,41 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from './Button';
+import styles from './button.module.css';
+
+jest.mock('./button.module.css', () => ({
+ button: 'button',
+ buttonPrimary: 'button--primary',
+ buttonIcon: 'button__icon',
+}));
+
+test('renders correct text', () => {
+ render(<Button buttonText='Click me' />);
+ const buttonElement = screen.getByText(/click me/i);
+ expect(buttonElement).toBeInTheDocument();
+});
+
+test('calls onClick prop when clicked', () => {
+ const handleClick = jest.fn();
+ render(<Button buttonText='Click me' onClick={handleClick} />);
+ fireEvent.click(screen.getByText(/click me/i));
+ expect(handleClick).toHaveBeenCalledTimes(1);
+});
+
+test('renders correctly with primary variant', () => {
+ const { asFragment } = render(
+ <Button buttonText='Primary Button' variant='primary' />
+ );
+ expect(asFragment()).toMatchSnapshot();
+});
+
+// test('has the correct class when variant is primary', () => {
+// render(<Button buttonText='Primary Button' variant='primary' />);
+// const buttonElement = screen.getByTestId('button-primary');
+// expect(buttonElement).toHaveStyle('background-color: #3c3db9');
+// });
+
+test('shows icon when showIcon is true', () => {
+ render(<Button buttonText='Button with Icon' showIcon />);
+ const iconElement = screen.getByTestId('button-icon');
+ expect(iconElement).toBeInTheDocument();
+});

src/app/components/button/button.tsx

@@ -0,0 +1,35 @@
+import styles from './button.module.css';
+
+export type ButtonVariant = 'primary';
+
+export interface ButtonProps {
+ buttonText: string;
+ variant?: ButtonVariant;
+ onClick?: () => void;
+ showIcon?: boolean;
+}
+
+export default function Button({
+ buttonText,
+ variant = 'primary',
+ onClick,
+ showIcon,
+}: ButtonProps) {
+ const buttonClass = variant === 'primary' ? styles['button--primary'] : '';
+ const testId = `button-${variant}`;
+
+ return (
+ <button
+ className={`${styles.button} ${buttonClass}`}
+ onClick={onClick}
+ data-testid={testId}
+ >
+ {buttonText}
+ {showIcon && (
+ <span className={styles.button__icon} data-testid='button-icon'>
+ &rarr;
+ </span>
+ )}
+ </button>
+ );
+}

src/app/components/cardsSection/cardsSection.tsx

@@ -1,10 +1,13 @@
 import Card from './card';
 import styles from './cards.module.css';
-
+import Button from '../button/button';
+import Link from 'next/link';
 interface CardData {
  id: number;
  title: string;
  content: string;
+ buttonText: string;
+ href: string;
 }
 
 interface CardsSectionProps {
@@ -15,6 +18,12 @@ interface CardsSectionProps {
  lblWorkshopsContent: string;
  lblSupportContent: string;
  lblCohortsContent: string;
+ btnTextMeetup: string;
+ btnTextCommunity: string;
+ btnTextCohort: string;
+ meetupUrl: string;
+ communityUrl: string;
+ cohortUrl: string;
  };
 }
 
@@ -24,9 +33,23 @@ export default function CardsSection({ label }: CardsSectionProps) {
  id: 1,
  title: label.lblWorkshopsTitle,
  content: label.lblWorkshopsContent,
+ buttonText: label.btnTextMeetup,
+ href: label.meetupUrl,
+ },
+ {
+ id: 2,
+ title: label.lblSupportTitle,
+ content: label.lblSupportContent,
+ buttonText: label.btnTextCommunity,
+ href: label.communityUrl,
+ },
+ {
+ id: 3,
+ title: label.lblCohortsTitle,
+ content: label.lblCohortsContent,
+ buttonText: label.btnTextCohort,
+ href: label.cohortUrl,
  },
- { id: 2, title: label.lblSupportTitle, content: label.lblSupportContent },
- { id: 3, title: label.lblCohortsTitle, content: label.lblCohortsContent },
  ];
 
  return (
@@ -35,6 +58,9 @@ export default function CardsSection({ label }: CardsSectionProps) {
  <Card key={card.id}>
  <header className={styles.cardHeader}>{card.title}</header>
  <p className={styles.cardContent}>{card.content}</p>
+ <Link href={card.href} passHref>
+ <Button buttonText={card.buttonText} showIcon />
+ </Link>
  </Card>
  ))}
  </div>

src/app/page.tsx

@@ -21,6 +21,12 @@ export default function Home() {
  'No matter your level, you have a community that has your back! Dallas Software Developers are focused on supporting our local community while also trying to support the developers who need our help and support!',
  lblCohortsContent:
  'A 6-week program that is completely free to pair developers working on a project being guided by a developer working in the industry. The focus is to help give you something interesting to showcase in an interview and give you real-world skills!',
+ btnTextMeetup: 'Go To A Meetup',
+ btnTextCommunity: 'Community Impact',
+ btnTextCohort: 'Join Our Cohort',
+ meetupUrl: 'https://www.meetup.com/dallas-software-developers-meetup/',
+ communityUrl: '/',
+ cohortUrl: '/',
  };
 
  return (