887-refactor: Partners refactor

src/shared/icons/aws.tsx

@@ -3,7 +3,5 @@ import Image from 'next/image';
 import aws from '@/shared/assets/icons/aws-gray.svg';
 
 export const AwsLogo = () => {
-  return (
-    <Image src={aws} alt="AWS icon" />
-  );
+  return <Image src={aws} alt="AWS icon" data-testid="AWS icon" />;
 };

src/shared/icons/github.tsx

@@ -3,7 +3,5 @@ import Image from 'next/image';
 import github from '@/shared/assets/svg/github.svg';
 
 export const GithubLogo = () => {
-  return (
-    <Image src={github} alt="github icon" />
-  );
+  return <Image src={github} alt="github icon" data-testid="github icon" />;
 };

src/shared/icons/jetbrains.tsx

@@ -9,6 +9,7 @@ export const JetBrainsLogo = () => {
       style={{ filter: 'grayscale(100%) contrast(15%)' }}
       width={200}
       alt="jetbrains icon"
+      data-testid="jetbrains icon"
     />
   );
 };

src/widgets/alumni/ui/alumni.tsx

@@ -11,21 +11,21 @@ const cx = classNames.bind(styles);
 
 export const Alumni = () => {
   return (
-    <article className={cx('container')}>
-      <section className={cx('content', 'alumni')}>
+    <section className={cx('container')}>
+      <div className={cx('content', 'alumni')}>
         <WidgetTitle mods="asterisk">Our alumni</WidgetTitle>
         <Paragraph>
           We are immensely proud of RS School alumni who build their successful careers in ambitious
           IT companies
         </Paragraph>
-        <section className={cx('alumni-list')}>
+        <ul className={cx('alumni-list')}>
           {alumni.map(({ id, image }) => (
-            <figure key={id} className={cx('logo-container')}>
+            <li key={id} className={cx('logo-container')}>
               <Image className={cx('logo')} src={image} alt={id} />
-            </figure>
+            </li>
           ))}
-        </section>
-      </section>
-    </article>
+        </ul>
+      </div>
+    </section>
   );
 };

src/widgets/partnered/constants.ts

@@ -0,0 +1,19 @@
+import { AwsLogo, GithubLogo, JetBrainsLogo } from '@/shared/icons';
+
+export const partners = [
+  {
+    id: 'jetbrains',
+    href: 'https://www.jetbrains.com',
+    Component: JetBrainsLogo,
+  },
+  {
+    id: 'aws',
+    href: 'https://aws.amazon.com/',
+    Component: AwsLogo,
+  },
+  {
+    id: 'github',
+    href: 'https://github.com/',
+    Component: GithubLogo,
+  },
+];

src/widgets/partnered/index.ts

@@ -1 +1 @@
-export { Partnered } from './partnered';
+export { Partnered } from './ui/partnered';

src/widgets/partnered/ui/partnered.module.scss

@@ -0,0 +1,35 @@
+.partnered-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .partners {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    align-self: center;
+    justify-content: space-between;
+
+    width: 100%;
+    max-width: 600px;
+
+    .partner-logo-container {
+      display: flex;
+      flex-basis: 20%;
+      align-items: center;
+      justify-content: center;
+
+      @include media-mobile {
+        flex-basis: 50%;
+      }
+    }
+
+    @include media-tablet {
+      row-gap: 16px;
+    }
+
+    @include media-mobile {
+      row-gap: 48px;
+    }
+  }
+}

src/widgets/partnered/ui/partnered.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Partnered } from './partnered';
+import { partners } from '../constants';
+import aws from '@/shared/assets/icons/aws-gray.svg';
+import github from '@/shared/assets/svg/github.svg';
+import jetbrains from '@/shared/assets/svg/jetbrains.svg';
+
+const partnersLogoData = [
+  {
+    testId: 'jetbrains icon',
+    alt: 'jetbrains icon',
+    src: jetbrains.src,
+  },
+  {
+    testId: 'AWS icon',
+    alt: 'AWS icon',
+    src: aws.src,
+  },
+  {
+    testId: 'github icon',
+    alt: 'github icon',
+    src: github.src,
+  },
+];
+
+describe('Partnered component', () => {
+  beforeEach(() => {
+    render(<Partnered />);
+  });
+  it('renders correct content for component', async () => {
+    const title = await screen.findByTestId('widget-title');
+    const partnersList = await screen.findByTestId('partners-list');
+
+    expect(title).toBeVisible();
+    expect(title.textContent).toBe('Partnered with');
+
+    expect(partnersList).toBeVisible();
+    expect(partnersList.children).toHaveLength(partners.length);
+  });
+
+  it.each(partnersLogoData)(
+    'renders $testId logo with correct attributes',
+    ({ testId, alt, src }) => {
+      const logo = screen.getByTestId(testId);
+
+      expect(logo).toHaveAttribute('alt', alt);
+      expect(logo).toHaveAttribute('src', src);
+    },
+  );
+});

src/widgets/partnered/ui/partnered.tsx

@@ -0,0 +1,26 @@
+import classNames from 'classnames/bind';
+
+import { partners } from '../constants';
+import { LinkCustom } from '@/shared/ui/link-custom';
+import { WidgetTitle } from '@/shared/ui/widget-title';
+
+import styles from './partnered.module.scss';
+
+const cx = classNames.bind(styles);
+
+export const Partnered = () => (
+  <section className={cx('container')} data-testid="partnered">
+    <div className={cx('partnered-content', 'content')}>
+      <WidgetTitle size="small">Partnered with</WidgetTitle>
+      <ul className={cx('partners')} data-testid="partners-list">
+        {partners.map(({ id, Component, href }) => (
+          <li key={id} className={cx('partner-logo-container')}>
+            <LinkCustom href={href} external icon={null}>
+              <Component />
+            </LinkCustom>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </section>
+);