535-refactor: Widget School Courses

src/entities/course/index.ts

@@ -1,2 +1,3 @@
-export type { Course, CourseStatus } from './types';
+export type { Course, CourseItemData, CourseStatus } from './types';
 export { CourseCard } from './ui/course-card/course-card';
+export { CourseItem } from './ui/course-item/course-item';

src/entities/course/types.ts

@@ -17,3 +17,8 @@ export type Course = {
 };
 
 export type CourseStatus = 'planned' | 'available' | 'upcoming';
+
+export type CourseItemData = Pick<Course, 'title' | 'language' | 'startDate' | 'detailsUrl'> & {
+  buttonText: string;
+  iconSrc: string;
+};

src/entities/course/ui/course-card/course-card.tsx

@@ -42,6 +42,7 @@ export const CourseCard = ({
           href={detailsUrl}
           variant="rounded"
           aria-label="View course details"
+          data-testid="course-link"
         >
           View details
         </LinkCustom>

src/entities/course/ui/course-item/course-item.module.scss

@@ -0,0 +1,44 @@
+.course-item {
+  @extend %transition-all;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+
+    .course-icon {
+      width: 48px;
+      height: 36px;
+      object-fit: contain;
+    }
+  }
+
+  .course-info {
+    width: 100%;
+
+    .date {
+      margin-top: 8px;
+      margin-bottom: 0;
+
+      font-size: 14px;
+      line-height: 20px;
+      color: $color-gray-600;
+    }
+  }
+
+  .details-link {
+    margin: 16px;
+  }
+
+  @include media-hover {
+    &:hover {
+      box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
+    }
+  }
+}

src/entities/course/ui/course-item/course-item.test.tsx

@@ -0,0 +1,41 @@
+import { screen } from '@testing-library/react';
+import dayjs from 'dayjs';
+import { CourseItem, CourseItemData } from '@/entities/course';
+import { renderWithRouter } from '@/shared/__tests__/utils';
+
+const mockedProps: CourseItemData = {
+  title: 'Introduction to React',
+  language: ['en'],
+  startDate: '2024-05-01',
+  detailsUrl: '/courses/react-intro',
+  buttonText: 'View Details',
+  iconSrc: '/images/react-icon.png',
+};
+
+const expectedDate = dayjs(mockedProps.startDate).toISOString();
+
+describe('CourseItem Component', () => {
+  beforeEach(() => {
+    renderWithRouter(<CourseItem {...mockedProps} />);
+  });
+
+  it('renders the component data as expected', () => {
+    const titleElement = screen.getByText(mockedProps.title);
+    const languageInitial = mockedProps.language[0].toUpperCase();
+    const dateElement = screen.getByTestId('course-language');
+    const courseDate = screen.getByTestId('course-date');
+
+    expect(titleElement).toBeInTheDocument();
+    expect(dateElement).toBeInTheDocument();
+    expect(dateElement).toHaveTextContent(`• ${languageInitial}`);
+    expect(courseDate).toHaveAttribute('datetime', expectedDate);
+  });
+
+  it('renders the LinkCustom component with correct href and text', () => {
+    const link = screen.getByTestId('course-link');
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', mockedProps.detailsUrl);
+    expect(link).toHaveTextContent(mockedProps.buttonText);
+  });
+});

src/entities/course/ui/course-item/course-item.tsx

@@ -0,0 +1,55 @@
+import classNames from 'classnames/bind';
+import dayjs from 'dayjs';
+import { CourseItemData } from '@/entities/course';
+import { Image } from '@/shared/ui/image';
+import { LinkCustom } from '@/shared/ui/link-custom';
+import { Subtitle } from '@/shared/ui/subtitle';
+
+import styles from './course-item.module.scss';
+
+const cx = classNames.bind(styles);
+
+export const CourseItem = ({
+  title,
+  language,
+  startDate,
+  detailsUrl,
+  buttonText,
+  iconSrc,
+}: CourseItemData) => {
+  const dateTime = dayjs(startDate).toISOString();
+
+  return (
+    <section className={cx('course-item')}>
+      <figure className={cx('icon-container')}>
+        <Image
+          className={cx('course-icon')}
+          src={iconSrc}
+          alt=""
+          aria-hidden="true"
+          data-testid="course-image"
+        />
+      </figure>
+      <article className={cx('course-info')}>
+        <Subtitle color="black" fontSize="extra-small">
+          {title}
+        </Subtitle>
+        <p className={cx('date')}>
+          <time dateTime={dateTime} data-testid="course-date">
+            {startDate}
+          </time>
+          <span data-testid="course-language">{` • ${language[0].toUpperCase()}`}</span>
+        </p>
+      </article>
+      <LinkCustom
+        className={cx('details-link')}
+        href={detailsUrl}
+        variant="rounded"
+        aria-label="More details"
+        data-testid="course-link"
+      >
+        {buttonText}
+      </LinkCustom>
+    </section>
+  );
+};

src/pages/home.tsx

@@ -4,13 +4,13 @@ import { useTitle } from '@/shared/hooks/use-title';
 import { AboutSchool } from '@/widgets/about-school';
 import { Alumni } from '@/widgets/alumni';
 import { Breadcrumbs } from '@/widgets/breadcrumbs';
-import { Courses } from '@/widgets/courses-school';
 import { HeroPage } from '@/widgets/hero-page';
 import { Mentoring } from '@/widgets/mentoring';
 import { Mentors } from '@/widgets/mentors';
 import { Principles } from '@/widgets/principles';
 import { Requirements } from '@/widgets/requirements';
 import { StudyWithUs } from '@/widgets/study-with-us';
+import { UpcomingCourses } from '@/widgets/upcoming-courses';
 
 export const Home: FC = () => {
   useTitle('Home · The Rolling Scopes School');
@@ -22,7 +22,7 @@ export const Home: FC = () => {
       <AboutSchool />
       <Principles />
       <StudyWithUs />
-      <Courses />
+      <UpcomingCourses />
       <Alumni />
       <Mentors />
       <Mentoring />

src/shared/icons/index.tsx

@@ -14,7 +14,6 @@ export { NodeJsIcon } from './nodejs-icon';
 export { OpenSourcePhilosophyIcon } from './open-source-philosophy-icon';
 export { OpenToEveryoneIcon } from './open-to-everyone-icon';
 export { ReactIcon } from './react-icon';
-export { RsBanner } from './rs-banner';
 export { TeachItForwardIcon } from './teach-It-forward-icon';
 export { TelegramIcon } from './telegram';
 export { TextLinkIcon } from './text-link-icon';

src/widgets/upcoming-courses/constants.ts

@@ -0,0 +1,2 @@
+export const tabletScreenBreakPoint = 810;
+export const maxUpcomingCoursesQuantity = 5;

src/widgets/upcoming-courses/index.ts

@@ -0,0 +1 @@
+export { UpcomingCourses } from './ui/upcoming-courses';

src/widgets/upcoming-courses/ui/upcoming-courses.module.scss

@@ -0,0 +1,22 @@
+.rs-banner {
+  width: 300px;
+  height: 200px;
+
+  @include media-laptop {
+    margin-top: 24px;
+  }
+}
+
+.course-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  width: 800px;
+
+  @include media-laptop {
+    width: 100%;
+  }
+}