564-refactor: Widget speakers

src/shared/constants.ts

@@ -1,5 +1,6 @@
 export const RS_INTRO_URL = 'https://www.youtube.com/embed/n4unZLVpnaU';
 export const RS_FOUNDATION_YEAR = '2013';
+export const RS_EMAIL = '[email protected]';
 export const TO_BE_DETERMINED = 'TBD';
 
 export const PAGE_NAMES = {

src/shared/icons/index.tsx

@@ -2,7 +2,6 @@ export { AngularIcon } from './angular-icon';
 export { ArrowIcon } from './arrow-icon';
 export { AwsLogo } from './aws';
 export { DiscordIcon } from './discord-icon';
-export { EmailIcon } from './email';
 export { EpamLogo } from './epam';
 export { FacebookIcon } from './facebook';
 export { GithubLogo } from './github';

src/widgets/speakers/ui/speakers.module.scss

@@ -0,0 +1,51 @@
+.speakers {
+  display: flex;
+  gap: 50px;
+  justify-content: space-between;
+  background-color: $color-gray-100;
+
+  .info {
+    width: 640px;
+
+    .name {
+      margin-top: 16px;
+    }
+
+    .email-wrapper {
+      display: flex;
+      gap: 8px;
+
+      margin-top: 8px;
+
+      font-size: 18px;
+      font-style: normal;
+      line-height: 24px;
+
+      @include media-tablet {
+        font-size: 16px;
+        line-height: 20px;
+      }
+    }
+
+    @include media-laptop {
+      width: 100%;
+    }
+  }
+
+  .picture {
+    width: 294px;
+    height: 300px;
+
+    @include media-laptop {
+      width: 235px;
+      height: 240px;
+      padding: 16px 0 0 0;
+    }
+  }
+
+  @include media-tablet {
+    flex-direction: column;
+    gap: 0;
+    align-items: center;
+  }
+}

src/widgets/speakers/speakers.test.tsx → src/widgets/speakers/ui/speakers.test.tsx

@@ -1,40 +1,28 @@
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { Speakers } from './ui/speakers';
+import speakersWanted from '@/shared/assets/speakers-wanted.webp';
+import { Speakers } from '@/widgets/speakers';
 
 describe('Speakers', () => {
   beforeEach(() => {
     render(<Speakers />);
   });
 
-  it('renders the title correctly', () => {
+  it('renders the content correctly', () => {
     const titleElement = screen.getByText('Speakers wanted');
-
-    expect(titleElement).toBeVisible();
-  });
-
-  it('renders both paragraphs correctly', () => {
     const paragraphs = screen.getAllByTestId('paragraph');
+    const nameElement = screen.getByTestId('subtitle');
+    const emailElement = screen.getByText('[email protected]');
+    const imageElement = screen.getByTestId('sloth-image');
 
+    expect(titleElement).toBeVisible();
     expect(paragraphs.length).toBe(2);
-  });
-
-  it('renders the name correctly', () => {
-    const nameElement = screen.getByTestId('contact-name');
 
     expect(nameElement).toBeInTheDocument();
     expect(nameElement).toBeVisible();
-  });
-
-  it('renders the email correctly', () => {
-    const emailElement = screen.getByText('[email protected]');
-
     expect(emailElement).toBeVisible();
-  });
-
-  it('renders the image correctly', () => {
-    const imageElement = screen.getByAltText('speakers-wanted');
 
     expect(imageElement).toBeInTheDocument();
+    expect(imageElement).toHaveAttribute('src', speakersWanted.src);
   });
 });

src/widgets/speakers/ui/speakers.tsx

@@ -1,15 +1,21 @@
+import classNames from 'classnames/bind';
 import Image from 'next/image';
-import image from '@/shared/assets/speakers-wanted.webp';
-import { EmailIcon } from '@/shared/icons';
+import speakersWanted from '@/shared/assets/speakers-wanted.webp';
+import email from '@/shared/assets/svg/email.svg';
+import { RS_EMAIL } from '@/shared/constants';
+import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
+import { Subtitle } from '@/shared/ui/subtitle';
 import { WidgetTitle } from '@/shared/ui/widget-title';
 
-import './speakers.scss';
+import styles from './speakers.module.scss';
+
+const cx = classNames.bind(styles);
 
 export const Speakers = () => (
-  <div className="speakers container">
-    <div className="speakers content">
-      <div className="info">
+  <div className={cx('speakers', 'container')}>
+    <div className={cx('speakers', 'content')}>
+      <article className={cx('info')}>
         <WidgetTitle size="large" mods="lines">
           Speakers wanted
         </WidgetTitle>
@@ -21,15 +27,20 @@ export const Speakers = () => (
           So don&apos;t hesitate to drop a short synopsis to RS Head
         </Paragraph>
 
-        <div className="name" data-testid="contact-name">
+        <Subtitle color="black" className={cx('name')}>
           Dzmitry Varabei
-        </div>
-        <div className="email">
-          <EmailIcon />
-          <span>[email protected]</span>
-        </div>
-      </div>
-      <Image className="right picture" src={image} alt="speakers-wanted" />
+        </Subtitle>
+        <address className={cx('email-wrapper')}>
+          <Image src={email} alt="" aria-hidden="true" />
+          <LinkCustom href={`mailto:${RS_EMAIL}`}>{RS_EMAIL}</LinkCustom>
+        </address>
+      </article>
+      <Image
+        className={cx('right', 'picture')}
+        src={speakersWanted}
+        alt="Cartoon sloth wearing a yellow shirt, gesturing with a speech bubble"
+        data-testid="sloth-image"
+      />
     </div>
   </div>
 );