diff --git a/playwright-tests/tests/home.page.spec.ts b/playwright-tests/tests/home.page.spec.ts index a624bc1..15010c6 100644 --- a/playwright-tests/tests/home.page.spec.ts +++ b/playwright-tests/tests/home.page.spec.ts @@ -90,7 +90,7 @@ test.describe('Validate Home Page', () => { await basePage.verifyURL('/mentorship/mentor-registration'); await basePage.verifyPageContainsText( - 'Welcome to the MentorRegistrationPage', + 'WCC: Registration Form for Mentors', ); }); diff --git a/src/components/ResourcesCard.tsx b/src/components/ResourcesCard.tsx index 70cbb15..6d1d21f 100644 --- a/src/components/ResourcesCard.tsx +++ b/src/components/ResourcesCard.tsx @@ -67,6 +67,8 @@ export const ResourcesCard: React.FC = ({ variant="contained" color="primary" href={link} + target="_blank" + rel="noopener noreferrer" sx={{ textTransform: 'none', borderRadius: 2, diff --git a/src/components/__tests__/ResourcesCard.test.tsx b/src/components/__tests__/ResourcesCard.test.tsx index aea508d..36bd397 100644 --- a/src/components/__tests__/ResourcesCard.test.tsx +++ b/src/components/__tests__/ResourcesCard.test.tsx @@ -10,15 +10,20 @@ describe('ResourcesCard', () => { title: 'Test Card', description: 'This is a test description', buttonText: 'Click Me', - link: '#', + link: 'https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445', }; - it('renders the title, description, button, and image', () => { + it('renders the title, description, button, link, and image', () => { render(); expect(screen.getByText('Test Card')).toBeInTheDocument(); expect(screen.getByText('This is a test description')).toBeInTheDocument(); - expect(screen.getByRole('link', { name: 'Click Me' })).toBeInTheDocument(); + const link = screen.getByRole('link', { name: 'Click Me' }); + expect(link).toBeInTheDocument(); + expect(link).toHaveAttribute( + 'href', + 'https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445', + ); const img = screen.getByRole('img'); expect(img).toHaveAttribute('src', '/test.jpg'); diff --git a/src/lib/api.ts b/src/lib/api.ts index 50317f8..75ce493 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -11,6 +11,7 @@ import mentors from './responses/mentors.json'; import mentorShipPage from './responses/mentorship.json'; import mentorShipCodeOfConduct from './responses/mentorshipCodeOfConduct.json'; import mentorshipFaqPageData from './responses/mentorshipFaqPage.json'; +import mentorshipResourcesPage from './responses/mentorshipResources.json'; import studyGroupsPage from './responses/mentorshipStudyGroupsPage.json'; const apiBaseUrl = process.env.API_BASE_URL; @@ -67,6 +68,7 @@ const pageData = { 'mentorship/code-of-conduct': mentorShipCodeOfConduct, team: aboutUsTeam, 'mentorship/faq': mentorshipFaqPageData, + 'mentorship/resources': mentorshipResourcesPage, 'mentorship/study-groups': studyGroupsPage, }; diff --git a/src/lib/responses/mentorshipResources.json b/src/lib/responses/mentorshipResources.json index ed6cd74..ae1d60d 100644 --- a/src/lib/responses/mentorshipResources.json +++ b/src/lib/responses/mentorshipResources.json @@ -1,28 +1,54 @@ { - "heroTitle": "Mentorship Resources", - "heroDescription": "Whether you’re a mentee looking to navigate your journey, a mentor aiming to provide the best guidance, or a seasoned mentor seeking quick tips, we have the tools you need. Explore our guides for insightful mentorship advice and strategies.", - "resources": [ - { - "image": "/mentee_guideMedia.jpg", - "title": "Mentee’s Guide", - "description": "", - "buttonText": "View Guide", - "link": "#" - }, - { - "image": "/mentor_pocketbookMedia.jpg", - "title": "Mentor’s Pocketbook", - "description": "", - "buttonText": "View Pocketbook", - "link": "#" - }, - { - "image": "/mentor_guideeMedia.jpg", - "title": "Mentor’s Guide", - "description": "", - "buttonText": "View Guide", - "link": "#" - } - ], - "footer": "footerData.json content" + "id": "page:MENTORSHIP_RESOURCES", + "heroSection": { + "title": "Mentorship Resources" + }, + "section": { + "description": "Whether you’re a mentee looking to navigate your journey, a mentor aiming to provide the best guidance, or a seasoned mentor seeking quick tips, we have the tools you need. Explore our guides for insightful mentorship advice and strategies." + }, + "resourcesSection": { + "title": "Available Resources", + "description": "Download and explore our curated mentorship materials", + "items": [ + { + "title": "Mentees Guide", + "description": "A practical guide for mentees to get the most out of mentorship.", + "link": { + "label": "Download PDF", + "uri": "https://drive.google.com/file/d/1xPbW8BlQoLXkuAJ7m0RuvOV02Opyr445" + }, + "image": { + "path": "/mentee_guideMedia.jpg", + "alt": "woman working on a laptop", + "type": "desktop" + } + }, + { + "title": "Mentor's Pocketbook", + "description": "Quick mentor reference notes and useful mentorship tips.", + "link": { + "label": "Download PDF", + "uri": "https://drive.google.com/file/d/1rgoOTqqG4Gu6e4tw45efFspDnoYRgYd9" + }, + "image": { + "path": "/mentor_pocketbookMedia.jpg", + "alt": "Image decorative", + "type": "desktop" + } + }, + { + "title": "Mentor's Guide", + "description": "Guidance and best practices for mentors to support their mentees effectively.", + "link": { + "label": "Download PDF", + "uri": "https://drive.google.com/file/d/1wTkCSG95BVg-0XX4r7FnFiV24_SXlbM_" + }, + "image": { + "path": "/mentor_guideeMedia.jpg", + "alt": "two women sitting by a desk and talking together", + "type": "desktop" + } + } + ] + } } diff --git a/src/pages/mentorship/resources.tsx b/src/pages/mentorship/resources.tsx index 08babfb..e8eeabb 100644 --- a/src/pages/mentorship/resources.tsx +++ b/src/pages/mentorship/resources.tsx @@ -7,7 +7,6 @@ import { Title, ResourcesCard, Footer, BreadCrumbsDynamic } from '@components'; import { useIsMobile } from '@utils/theme-utils'; import { FooterResponse, MentorshipResourcesResponse } from '@utils/types'; import { fetchData } from 'lib/api'; -import footerData from 'lib/responses/footer.json'; import pageData from 'lib/responses/mentorshipResources.json'; type CombinedResponse = { @@ -15,9 +14,18 @@ type CombinedResponse = { footer: FooterResponse; }; -const MentorshipResourcesPage: React.FC = () => { +type MentorshipResourcesPageProps = { + data?: MentorshipResourcesResponse; + footer: FooterResponse; +}; + +const MentorshipResourcesPage: React.FC = ({ + data, + footer, +}) => { const isMobile = useIsMobile(); - const { heroTitle, heroDescription, resources } = pageData; + const page = (data ?? pageData) as MentorshipResourcesResponse; + const { heroSection, section, resourcesSection } = page; return ( <> @@ -27,7 +35,7 @@ const MentorshipResourcesPage: React.FC = () => { sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }} > - + <Title title={heroSection.title} /> <Box sx={{ @@ -44,7 +52,7 @@ const MentorshipResourcesPage: React.FC = () => { lineHeight: 1.5, }} > - {heroDescription} + {section.description} </Typography> </Box> @@ -57,14 +65,14 @@ const MentorshipResourcesPage: React.FC = () => { }} > <Grid container spacing={4}> - {resources.map((res, index) => ( + {resourcesSection.items.map((res, index) => ( <Grid item xs={12} sm={6} md={6} lg={4} key={index}> <ResourcesCard - image={res.image} + image={res.image.path} title={res.title} - description={res.description} - buttonText={res.buttonText} - link={res.link} + description={res.description ?? ''} + buttonText={res.link.label} + link={res.link.uri} buttonIcon={<OpenInNewIcon />} /> </Grid> @@ -72,7 +80,7 @@ const MentorshipResourcesPage: React.FC = () => { </Grid> </Box> </Box> - <Footer {...footerData} /> + <Footer {...footer} /> </Box> </> ); diff --git a/src/utils/types.ts b/src/utils/types.ts index 3db42df..d3c3752 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -409,6 +409,7 @@ export type LongTermTimeLineResponse = { export type ResourceItem = { title: string; + description?: string; link: Link; image: Image; };