569-refactor: Widget training program

dev-data/index.ts

@@ -33,7 +33,7 @@ export { awsFundamentals } from './awsFundamentals.data';
 export { benefitMentorshipHome, benefitMentorshipMentors } from './benefit-mentorship.data';
 export { communicationText } from './widget-communication.data';
 export { communityGroups } from './community-media.data';
-export { contentMap } from './training-program.data';
+export { contentMap, trainingProgramLink } from './training-program.data';
 export { contentMapAbout, introLocalizedContent } from './about-course.data';
 export { contributeOptions } from './contribute-options.data';
 export { courseDataMap } from './required.data';

dev-data/training-program.data.tsx

@@ -304,3 +304,8 @@ export const contentMap: ContentMap = {
     image: awsDevImg,
   },
 };
+
+export const trainingProgramLink = {
+  en: { linkLabel: 'Register' },
+  ru: { linkLabel: 'Зарегистрироваться' },
+};

src/widgets/training-program/ui/training-program.module.scss

@@ -0,0 +1,91 @@
+.training-program {
+  &.column-2 {
+    display: flex;
+    flex-direction: row;
+    gap: 100px;
+    align-items: center;
+    justify-content: flex-start;
+
+    .left {
+      display: flex;
+      flex: 1 1 55%;
+      flex-direction: column;
+      gap: 26px;
+
+      max-width: 55%;
+
+      & span {
+        font-weight: $font-weight-bold;
+      }
+
+      div {
+        padding-bottom: 18px;
+
+        p {
+          padding-bottom: 0;
+          font-weight: $font-weight-bold;
+        }
+      }
+
+      & > .button {
+        margin-top: 24px;
+      }
+
+      @include media-laptop-medium {
+        max-width: 100%;
+      }
+    }
+
+    .image {
+      flex: 1 1 30%;
+      max-width: 30%;
+      height: auto;
+
+      &.badge {
+        max-width: 276px;
+        height: auto;
+
+        @include media-tablet-large {
+          max-width: 220px;
+        }
+
+        @include media-tablet {
+          max-width: 175px;
+        }
+
+        @include media-mobile {
+          max-width: 135px;
+        }
+      }
+
+      img {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+      }
+
+      @include media-tablet-large {
+        align-self: center;
+
+        width: 320px;
+        max-width: 60%;
+        height: auto;
+        max-height: 511px;
+      }
+    }
+
+    @include media-tablet-large {
+      flex-direction: column;
+      gap: 40px;
+      align-items: flex-start;
+    }
+  }
+
+  @include media-laptop {
+    padding: 75px 40px 40px;
+  }
+
+  @include media-tablet {
+    padding: 16px;
+  }
+}

src/widgets/training-program/ui/training-program.test.tsx

@@ -1,50 +1,13 @@
 import { screen } from '@testing-library/react';
 import { beforeEach } from 'vitest';
-import { ROUTES } from '@/core/const';
 import { Course } from '@/entities/course';
-import { MOCKED_IMAGE_PATH } from '@/shared/__tests__/constants';
+import { mockedCourses } from '@/shared/__tests__/constants';
 import { renderWithRouter } from '@/shared/__tests__/utils';
-import { COURSE_ALIASES, TO_BE_DETERMINED } from '@/shared/constants';
 import { TrainingProgram } from '@/widgets/training-program';
 import { COURSE_TITLES } from 'data';
 
-const mockedCourseAngular: Course = {
-  id: '1',
-  title: COURSE_TITLES.ANGULAR,
-  alias: COURSE_ALIASES.ANGULAR,
-  startDate: '16 Oct, 2023',
-  registrationEndDate: '16 Oct, 2024',
-  iconSmall: MOCKED_IMAGE_PATH,
-  iconSrc: MOCKED_IMAGE_PATH,
-  secondaryIcon: MOCKED_IMAGE_PATH,
-  language: ['en'],
-  mode: 'online',
-  detailsUrl: `/${ROUTES.COURSES}/${ROUTES.ANGULAR}`,
-  enroll: 'https://wearecommunity.io/events/rs-angular-2023q4',
-  backgroundStyle: {
-    backgroundColor: '#F4F1FA',
-    accentColor: '#F4AFA7',
-  },
-};
-
-const mockedCourseAws: Course = {
-  id: '8',
-  language: ['en'],
-  iconSmall: MOCKED_IMAGE_PATH,
-  iconSrc: MOCKED_IMAGE_PATH,
-  secondaryIcon: MOCKED_IMAGE_PATH,
-  mode: 'online',
-  startDate: '',
-  registrationEndDate: TO_BE_DETERMINED,
-  title: COURSE_TITLES.AWS_CLOUD_DEVELOPER,
-  alias: COURSE_ALIASES.AWS_CLOUD_DEVELOPER,
-  detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_DEVELOPER}`,
-  enroll: 'https://wearecommunity.io/events/aws-cloud-dev-rs2023q4',
-  backgroundStyle: {
-    backgroundColor: '#F4F1FA',
-    accentColor: '#F4AFA7',
-  },
-};
+const mockedCourseAngular: Course = mockedCourses[4];
+const mockedCourseAws: Course = mockedCourses[5];
 
 describe('TrainingProgram', () => {
   describe('with "angular" props', () => {
@@ -74,7 +37,7 @@ describe('TrainingProgram', () => {
     it('renders Button with correct url', () => {
       const button = screen.getByRole('link', { name: /register/i });
 
-      expect(button).toHaveAttribute('href', 'https://wearecommunity.io/events/rs-angular-2023q4');
+      expect(button).toHaveAttribute('href', '/enroll');
     });
 
     it('renders correct image with alt text', () => {
@@ -114,16 +77,13 @@ describe('TrainingProgram', () => {
     it('renders Button with correct url', () => {
       const button = screen.getByRole('link', { name: /register/i });
 
-      expect(button).toHaveAttribute(
-        'href',
-        'https://wearecommunity.io/events/aws-cloud-dev-rs2023q4',
-      );
+      expect(button).toHaveAttribute('href', '/enroll');
     });
 
     it('renders correct image with alt text', () => {
-      const image = screen.getByRole('img', { name: 'AWS Cloud Developer' });
+      const image = screen.getByRole('img', { name: 'AWS Fundamentals' });
 
-      expect(image).toHaveAttribute('alt', expect.stringContaining('AWS Cloud Developer'));
+      expect(image).toHaveAttribute('alt', expect.stringContaining('AWS Fundamentals'));
     });
   });
 });

src/widgets/training-program/ui/training-program.tsx

@@ -1,45 +1,46 @@
 import { cloneElement } from 'react';
+import classNames from 'classnames/bind';
 import Image from 'next/image';
 import type { Course } from '@/entities/course';
+import { Language } from '@/shared/types';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { WidgetTitle } from '@/shared/ui/widget-title';
-import { TrainingProgramType, contentMap } from 'data';
+import { TrainingProgramType, contentMap, trainingProgramLink } from 'data';
 
-import './training-program.scss';
+import styles from './training-program.module.scss';
+
+const cx = classNames.bind(styles);
 
 type TrainingProgramProps = {
   courseName: TrainingProgramType;
-  lang?: 'ru' | 'en';
+  lang?: Language;
   course: Course;
 };
 
-const localizedContent = {
-  en: { linkLabel: 'Register' },
-  ru: { linkLabel: 'Зарегистрироваться' },
-};
-
 export const TrainingProgram = ({ courseName, lang = 'en', course }: TrainingProgramProps) => {
   const { title, content, image } = contentMap[courseName];
-
-  // TODO remove 'cloneElement' on 37 line due 'Using cloneElement is uncommon and can lead to fragile code' https://react.dev/reference/react/cloneElement
+  const isCourseWithBadge = courseName.includes('badge');
 
   return (
-    <section className="training-program container">
-      <div className="training-program content column-2">
-        <div className="left">
+    <section className={cx('training-program', 'container')}>
+      <div className={cx('training-program', 'content', 'column-2')}>
+        <article className={cx('left')}>
           <WidgetTitle mods="asterisk">{title}</WidgetTitle>
 
           {content.map((component, index) => cloneElement(component, { key: index }))}
 
           {course && (
             <LinkCustom href={course?.enroll} variant="primary" external>
-              {localizedContent[lang].linkLabel}
+              {trainingProgramLink[lang].linkLabel}
             </LinkCustom>
           )}
-        </div>
-        <div className={`right ${courseName.includes('badge') ? 'badge' : ''}`}>
-          <Image src={image} alt={course?.title} />
-        </div>
+        </article>
+
+        <Image
+          src={image}
+          alt={course?.title}
+          className={cx('image', { badge: isCourseWithBadge })}
+        />
       </div>
     </section>
   );