522-refactor: Widget community

dev-data/community-media.data.tsx

@@ -0,0 +1,56 @@
+import {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedInIcon,
+  TelegramIcon,
+  YouTubeIcon,
+} from '@/shared/icons';
+import { SocialMediaProps } from '@/shared/ui/social-media-item';
+
+export const communityGroups: SocialMediaProps[] = [
+  {
+    title: 'LinkedIn',
+    href: 'https://www.linkedin.com/company/the-rolling-scopes-school/',
+    icon: <LinkedInIcon />,
+  },
+  {
+    title: 'Instagram RU',
+    href: 'https://www.instagram.com/rsschool_news/',
+    icon: <InstagramIcon />,
+  },
+  {
+    title: 'Instagram EN',
+    href: 'https://www.instagram.com/rsschool_en/',
+    icon: <InstagramIcon />,
+  },
+  {
+    title: 'YouTube RU',
+    href: 'https://www.youtube.com/c/RollingScopesSchool',
+    icon: <YouTubeIcon />,
+  },
+  {
+    title: 'YouTube EN',
+    href: 'https://www.youtube.com/c/RSschool',
+    icon: <YouTubeIcon />,
+  },
+  {
+    title: 'Telegram RU',
+    href: 'https://t.me/AfishaRSSchool',
+    icon: <TelegramIcon />,
+  },
+  {
+    title: 'Facebook RU',
+    href: 'https://www.facebook.com/RollingScopesSchool',
+    icon: <FacebookIcon />,
+  },
+  {
+    title: 'Facebook EN',
+    href: 'https://www.facebook.com/rsschoolEN',
+    icon: <FacebookIcon />,
+  },
+  {
+    title: 'Facebook Group RU & EN',
+    href: 'https://www.facebook.com/groups/TheRollingScopes',
+    icon: <FacebookIcon />,
+  },
+];

dev-data/index.ts

@@ -14,6 +14,7 @@ export { awsDevPath } from './aws-dev-path.data';
 export { awsDevops } from './aws-devops.data';
 export { awsFundamentals } from './awsFundamentals.data';
 export { communicationText } from './widget-communication.data';
+export { communityGroups } from './community-media.data';
 export { contentMapAbout } from './about.data';
 export { courseDataMap } from './required.data';
 export { courses } from './courses.data';

src/pages/community.tsx

@@ -3,7 +3,7 @@ import { PAGE_NAMES } from '@/shared/constants';
 import { useTitle } from '@/shared/hooks/use-title';
 import { AboutCommunity } from '@/widgets/about-community';
 import { Breadcrumbs } from '@/widgets/breadcrumbs';
-import { Community as CommunitySection } from '@/widgets/community';
+import { CommunityMedia } from '@/widgets/community-media';
 import { Contribute } from '@/widgets/contribute';
 import { Events } from '@/widgets/events';
 import { HeroPage } from '@/widgets/hero-page';
@@ -28,7 +28,7 @@ export const Community: FC = () => {
       <Events />
       <Speakers />
       <Merch />
-      <CommunitySection />
+      <CommunityMedia />
       <Contribute />
       <Support />
     </>

src/shared/ui/social-media-item/index.ts

@@ -0,0 +1 @@
+export { SocialMediaItem, type SocialMediaProps } from './social-media-item';

src/shared/ui/social-media/social-media.test.tsx → src/shared/ui/social-media-item/social-media-item.test.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { SocialMedia } from './social-media';
+import { SocialMediaItem } from './social-media-item';
 import { renderWithRouter } from '@/shared/__tests__/utils';
 
-describe('SocialMedia component', () => {
+describe('SocialMediaItem component', () => {
   const mockIcon: ReactNode = <div>mockIcon</div>;
 
   const props = {
@@ -16,7 +16,7 @@ describe('SocialMedia component', () => {
   let linkElement: HTMLElement;
 
   beforeEach(() => {
-    renderWithRouter(<SocialMedia {...props} />);
+    renderWithRouter(<SocialMediaItem {...props} />);
     linkElement = screen.getByTestId('social-media');
   });
 

src/shared/ui/social-media/social-media.tsx → src/shared/ui/social-media-item/social-media-item.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import classNames from 'classnames/bind';
 import { LinkCustom } from '../link-custom';
 
-import styles from './social-media.module.scss';
+import styles from './social-media-item.module.scss';
 
 export const cx = classNames.bind(styles);
 
@@ -12,7 +12,7 @@ export type SocialMediaProps = {
   icon: ReactNode;
 };
 
-export const SocialMedia = ({ title, href, icon }: SocialMediaProps) => (
+export const SocialMediaItem = ({ title, href, icon }: SocialMediaProps) => (
   <LinkCustom
     className={cx('social-media')}
     href={href}

src/widgets/community-media/index.ts

@@ -0,0 +1 @@
+export { CommunityMedia } from './ui/community-media';

src/widgets/community-media/ui/community-media.module.scss

@@ -0,0 +1,48 @@
+.community-media-content {
+  @include media-laptop {
+    flex-direction: row;
+    gap: 50px;
+  }
+
+  @include media-tablet-large {
+    flex-direction: column;
+    gap: 16px;
+  }
+}
+
+.community-join-info {
+  width: 640px;
+
+  @include media-laptop {
+    width: 100%;
+  }
+}
+
+.social-media-container {
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  align-items: start;
+  justify-content: space-between;
+
+  width: 416px;
+
+  @include media-tablet {
+    justify-content: space-around;
+    width: 100%;
+  }
+}
+
+.sloth-mascot {
+  width: 390px;
+  height: 390px;
+
+  @include media-laptop {
+    width: 350px;
+    height: 350px;
+  }
+
+  @include media-mobile {
+    width: 100%;
+    height: auto;
+  }
+}

src/widgets/community-media/ui/community-media.test.tsx

@@ -0,0 +1,41 @@
+import { screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { CommunityMedia } from './community-media';
+import { renderWithRouter } from '@/shared/__tests__/utils';
+import image from '@/shared/assets/welcome.webp';
+import { communityGroups } from 'data';
+
+let communityMedia: HTMLElement;
+let title: HTMLElement;
+let paragraph: HTMLElement;
+let socialMediaItems: HTMLElement[];
+let slothImage: HTMLElement;
+
+describe('CommunityMedia component', () => {
+  beforeEach(() => {
+    renderWithRouter(<CommunityMedia />);
+    communityMedia = screen.getByTestId('community-media');
+    title = screen.getByTestId('widget-title');
+    paragraph = screen.getByTestId('paragraph');
+    socialMediaItems = screen.getAllByTestId('social-media');
+    slothImage = screen.getByTestId('welcome-sloth');
+  });
+
+  it('renders the component without crashing', () => {
+    expect(communityMedia).toBeVisible();
+  });
+
+  it('renders the component content correctly', () => {
+    expect(title).toBeVisible();
+    expect(paragraph).toBeVisible();
+    expect(slothImage).toBeVisible();
+
+    expect(socialMediaItems.length).toBe(communityGroups.length);
+
+    expect(title).toHaveTextContent('Join RS Community');
+    expect(paragraph).toHaveTextContent(/If you want to learn coding or be a RS School mentor/i);
+
+    expect(slothImage).toHaveAttribute('src', image);
+    expect(slothImage).toHaveAttribute('alt', 'A sloth mascot with a welcome');
+  });
+});

src/widgets/community-media/ui/community-media.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames/bind';
+import image from '@/shared/assets/welcome.webp';
+import { Image } from '@/shared/ui/image';
+import { Paragraph } from '@/shared/ui/paragraph';
+import { SocialMediaItem } from '@/shared/ui/social-media-item';
+import { WidgetTitle } from '@/shared/ui/widget-title';
+import { communityGroups } from 'data';
+
+import styles from './community-media.module.scss';
+
+const cx = classNames.bind(styles);
+
+export const CommunityMedia = () => (
+  <section className={cx('container')} data-testid="community-media">
+    <div className={cx('content', 'column-2', 'community-media-content')}>
+      <article className={cx('community-join-info')}>
+        <WidgetTitle size="large" mods="lines">
+          Join RS Community
+        </WidgetTitle>
+        <Paragraph fontSize="large">
+          If you want to learn coding or be a RS School mentor, speaking at developers meetups and
+          conferences or taking part in RS clubs welcome to the Rolling Scopes community! Join us in
+          social networks to be in touch!
+        </Paragraph>
+        <div className={cx('social-media-container')}>
+          {communityGroups.map(({ title, href, icon }) => (
+            <SocialMediaItem key={title} title={title} href={href} icon={icon} />
+          ))}
+        </div>
+      </article>
+      <Image className={cx('sloth-mascot')} src={image} alt="A sloth mascot with a welcome" data-testid="welcome-sloth" />
+    </div>
+  </section>
+);