524-refactor: Widget OptionItem

src/widgets/contribute/ui/contribute.tsx

@@ -2,11 +2,11 @@ import image from '@/shared/assets/contribute.webp';
 import { Image } from '@/shared/ui/image';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { WidgetTitle } from '@/shared/ui/widget-title';
-import { OptionItem, OptionItemProps } from '@/widgets/option-item';
+import { OptionItem } from '@/widgets/option-item';
 
 import './contribute.scss';
 
-const contributeOptions: OptionItemProps[] = [
+const contributeOptions = [
   {
     title: 'Mentorship',
     description:

src/widgets/option-item/index.ts

@@ -1 +1 @@
-export { OptionItem, type OptionItemProps } from './ui/option-item';
+export { OptionItem } from './ui/option-item';

src/widgets/option-item/option-item.test.tsx → src/widgets/option-item/ui/option-item.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { OptionItem } from './ui/option-item';
+import { OptionItem } from './option-item';
 import { renderWithRouter } from '@/shared/__tests__/utils';
 
 describe('OptionItem component', () => {

src/widgets/option-item/ui/option-item.tsx

@@ -1,25 +1,23 @@
-// todo it not widget
 import { LinkCustom } from '@/shared/ui/link-custom';
+import { Paragraph } from '@/shared/ui/paragraph';
 
 import './option-item.scss';
 
-export type OptionItemProps = {
+type OptionItemProps = {
   title: string;
   description: string;
   linkLabel?: string;
   href?: string;
 };
 
 export const OptionItem = ({ title, description, linkLabel, href = '' }: OptionItemProps) => (
-  <div key={title} className="option">
+  <article key={title} className="option">
     <h3 className="option-title">{title}</h3>
-    <p className="option-description" role="text">
-      {description}
-    </p>
+    <Paragraph className="option-description">{description}</Paragraph>
     {linkLabel && (
       <LinkCustom href={href} variant="primary" external>
         {linkLabel}
       </LinkCustom>
     )}
-  </div>
+  </article>
 );

src/widgets/study-with-us/constants.ts

@@ -1,6 +1,4 @@
-import { OptionItemProps } from '@/widgets/option-item/ui/option-item';
-
-export const studyOptions: OptionItemProps[] = [
+export const studyOptions = [
   {
     title: 'Teach and empower',
     description:

src/widgets/study-with-us/study-with-us.test.tsx

@@ -27,9 +27,13 @@ describe('School Component', () => {
   });
 
   it('renders the correct description for each study option', () => {
-    const descriptions = screen.getAllByRole('text');
+    const descriptions = screen.getAllByTestId('paragraph');
 
-    descriptions.forEach((description, index) => {
+    const optionDescription = descriptions.filter((paragraph) =>
+      paragraph.classList.contains('option-description'),
+    );
+
+    optionDescription.forEach((description, index) => {
       expect(description.textContent).toBe(studyOptions[index].description);
     });
   });