551-refactor: Fsd widget merch

dev-data/index.ts

@@ -52,6 +52,7 @@ export { mentorsActivityData } from './mentors-activity.data';
 export { mentorsRegisterData } from './mentors-register.data';
 export { mentorsWantedData } from './mentors-wanted.data';
 export { mentorshipCourses, mentorshipCoursesDefault } from './mentorship.data';
+export { merchData } from './merch.data';
 export { nodejs } from './nodejs.data';
 export { picturesSocialMediaLinks } from './pictures.data';
 export { preSchoolEn, preSchoolRu } from './preSchool.data';

dev-data/merch.data.ts

@@ -0,0 +1,7 @@
+export const merchData = {
+  label: 'merch',
+  title: 'RS merch',
+  mainParagraph: 'Are you an RS sloth fan and looking for RS merch?',
+  description: 'The wait is almost over as we're gearing up for the catalog of free web and print assets where you will find all merch collections and can print your own Rolling Scopes t-shirts, stickers etc.',
+  linkTitle: 'Discover merch assets',
+};

src/shared/__tests__/constants.ts

@@ -137,3 +137,12 @@ export const mockedCourses: Course[] = [
     },
   },
 ];
+
+export const MOCKED_MERCH_DATA = {
+  title: 'RS merch',
+  subtitle: 'Are you an RS sloth fan and looking for RS merch?',
+  paragraph: 'The wait is almost over',
+  buttonText: 'Discover merch assets',
+  buttonLink: 'https://sloths.rs.school/',
+  imageAltText: 'RS School merch',
+};

src/widgets/merch/ui/merch.module.scss

@@ -10,10 +10,11 @@
     }
   }
 
-  .picture {
+  .image {
     width: 680px;
     height: 700px;
     margin: 0 auto;
+    object-fit: cover;
 
     @include media-laptop {
       width: 680px;

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

@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { Merch } from './ui/merch';
+import { Merch } from './merch';
+import { MOCKED_MERCH_DATA } from '@/shared/__tests__/constants';
 import { renderWithRouter } from '@/shared/__tests__/utils';
 
 describe('Merch', () => {
@@ -9,32 +10,32 @@ describe('Merch', () => {
   });
 
   it('renders the title correctly', () => {
-    const titleElement = screen.getByText('RS merch');
+    const titleElement = screen.getByText(MOCKED_MERCH_DATA.title);
 
     expect(titleElement).toBeVisible();
   });
 
   it('renders the subtitle correctly', () => {
-    const subtitleElement = screen.getByText('Are you an RS sloth fan and looking for RS merch?');
+    const subtitleElement = screen.getByText(MOCKED_MERCH_DATA.subtitle);
 
     expect(subtitleElement).toBeVisible();
   });
 
   it('renders the paragraph correctly', () => {
-    const paragraphText = screen.getByText(/The wait is almost over/i);
+    const paragraphText = screen.getByText(new RegExp(MOCKED_MERCH_DATA.paragraph, 'i'));
 
     expect(paragraphText).toBeVisible();
   });
 
   it('renders the merch "Discover merch assets" button with correct href', () => {
-    const buttonElement = screen.getByRole('link', { name: /Discover merch assets/i });
+    const buttonElement = screen.getByRole('link', { name: new RegExp(MOCKED_MERCH_DATA.buttonText, 'i') });
 
     expect(buttonElement).toBeVisible();
-    expect(buttonElement).toHaveAttribute('href', 'https://sloths.rs.school/');
+    expect(buttonElement).toHaveAttribute('href', MOCKED_MERCH_DATA.buttonLink);
   });
 
   it('renders the image with alt text', () => {
-    const imageElement = screen.getByAltText('speakers-wanted');
+    const imageElement = screen.getByAltText(MOCKED_MERCH_DATA.imageAltText);
 
     expect(imageElement).toBeVisible();
   });

src/widgets/merch/ui/merch.tsx

@@ -1,34 +1,30 @@
 import classNames from 'classnames/bind';
 import Image from 'next/image';
 import { LINKS } from '@/core/const';
-import image from '@/shared/assets/merch.webp';
+import rsSchoolMerchImage from '@/shared/assets/merch.webp';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { SectionLabel } from '@/shared/ui/section-label';
 
 import { WidgetTitle } from '@/shared/ui/widget-title';
 
+import { merchData } from 'data';
+
 import styles from './merch.module.scss';
 
 const cx = classNames.bind(styles);
 
 export const Merch = () => (
-  <div id="merch" className={cx('container')}>
+  <section id="merch" className={cx('container')}>
     <div className={cx('content', 'merch', 'column-2')}>
-      <div className={cx('info')}>
-        <SectionLabel>merch</SectionLabel>
-        <WidgetTitle mods="asterisk">RS merch</WidgetTitle>
-        <Paragraph fontSize="large">Are you an RS sloth fan and looking for RS merch?</Paragraph>
-        <Paragraph>
-          The wait is almost over as we&apos;re gearing up for the catalog of free web and print
-          assets where you will find all merch collections and can print your own Rolling Scopes
-          t-shirts, stickers etc.
-        </Paragraph>
-        <LinkCustom href={LINKS.MERCH} variant="primary" external>
-          Discover merch assets
-        </LinkCustom>
-      </div>
-      <Image className={cx('right', 'picture')} src={image} alt="speakers-wanted" />
+      <article className={cx('info')}>
+        <SectionLabel>{merchData.label}</SectionLabel>
+        <WidgetTitle mods="asterisk">{merchData.title}</WidgetTitle>
+        <Paragraph fontSize="large">{merchData.mainParagraph}</Paragraph>
+        <Paragraph>{merchData.description}</Paragraph>
+        <LinkCustom href={LINKS.MERCH} variant="primary" external>{merchData.linkTitle}</LinkCustom>
+      </article>
+      <Image className={cx('image')} src={rsSchoolMerchImage} alt="RS School merch" />
     </div>
-  </div>
+  </section>
 );