Merge pull request #501 from rolling-scopes/refactor/499-widget-alumni

499-refactor: Widget alumni

src/widgets/alumni/constants.ts

@@ -1,4 +1,3 @@
-import { AlumniProps } from './ui/alumni';
 import aesoft from '@/shared/assets/alumni/aesoft.svg';
 import andersen from '@/shared/assets/alumni/andersen.svg';
 import coherent from '@/shared/assets/alumni/coherent.svg';
@@ -18,7 +17,7 @@ import sberbank from '@/shared/assets/alumni/sberbank.svg';
 import toptal from '@/shared/assets/alumni/toptal.svg';
 import visualfabriq from '@/shared/assets/alumni/visualfabriq.svg';
 
-export const alumni: AlumniProps[] = [
+export const alumni = [
   {
     id: 'epam',
     image: epam,
@@ -91,4 +90,4 @@ export const alumni: AlumniProps[] = [
     id: 'aesoft',
     image: aesoft,
   },
-];
+] as const;

src/widgets/alumni/ui/alumni.module.scss

@@ -0,0 +1,49 @@
+.alumni {
+  p {
+    width: 640px;
+    margin-top: 0;
+
+    @include media-tablet {
+      width: 100%;
+    }
+  }
+}
+
+.alumni-list {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  row-gap: 48px;
+  place-items: center;
+
+  padding: 40px 0 48px;
+}
+
+.logo-container {
+  display: block;
+  grid-column: span 2;
+
+  @include media-laptop {
+    grid-column: span 3;
+
+    &:nth-child(n + 13) {
+      display: none;
+    }
+  }
+
+  @include media-tablet {
+    grid-column: span 6;
+
+    &:nth-child(n + 7) {
+      display: none;
+    }
+  }
+
+  @include media-mobile {
+    grid-column: span 12;
+  }
+}
+
+.logo {
+  width: 136px;
+  height: 40px;
+}

src/widgets/alumni/ui/alumni.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Alumni } from './alumni';
+
+describe('Alumni', () => {
+  beforeEach(() => {
+    render(<Alumni />);
+  });
+
+  it('renders the title correctly', () => {
+    const titleElement = screen.getByText('Our alumni');
+
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it('renders the paragraph correctly', () => {
+    const paragraphElement = screen.getByText(/We are immensely proud of RS School alumni/i);
+
+    expect(paragraphElement).toBeInTheDocument();
+  });
+
+  it('renders all images for large screens', () => {
+    const imageElements = screen.getAllByRole('img');
+
+    expect(imageElements).toHaveLength(18);
+  });
+});

src/widgets/alumni/ui/alumni.tsx

@@ -1,41 +1,26 @@
+import classNames from 'classnames/bind';
 import { alumni } from '../constants';
-import { useWindowSize } from '@/shared/hooks/use-window-size';
 import { Image } from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { WidgetTitle } from '@/shared/ui/widget-title';
 
-import './alumni.scss';
+import styles from './alumni.module.scss';
 
-export interface AlumniProps {
-  id: string;
-  image: string;
-}
+const cx = classNames.bind(styles);
 
 export const Alumni = () => {
-  const size = useWindowSize();
-
-  let alumniArr = [];
-
-  if (size.width <= 1440 && size.width > 810) {
-    alumniArr = alumni.slice(0, 12);
-  } else if (size.width <= 810) {
-    alumniArr = alumni.slice(0, 6);
-  } else {
-    alumniArr = [...alumni];
-  }
-
   return (
-    <article className="alumni container">
-      <section className="alumni content">
+    <article className={cx('container')}>
+      <section className={cx('content', 'alumni')}>
         <WidgetTitle mods="asterisk">Our alumni</WidgetTitle>
-        <Paragraph className="alumni-paragraph">
+        <Paragraph>
           We are immensely proud of RS School alumni who build their successful careers in ambitious
           IT companies
         </Paragraph>
-        <section className="alumni">
-          {alumniArr.map(({ id, image }) => (
-            <figure key={id} className="alumni-logo-container">
-              <Image className="alumni-logo" src={image} alt={id} />
+        <section className={cx('alumni-list')}>
+          {alumni.map(({ id, image }) => (
+            <figure key={id} className={cx('logo-container')}>
+              <Image className={cx('logo')} src={image} alt={id} />
             </figure>
           ))}
         </section>