282-feat: Standardize links designation

src/app/styles/_constants.scss

@@ -41,6 +41,9 @@ $color-gray-400: hsl(0deg 0% 69%); // #afafaf
 $color-gray-200: hsl(0deg 0% 90%); // #e6e6e6
 $color-gray-100: hsl(0deg 0% 95%); // #f2f2f2
 
+// Link color
+$color-blue: hsl(202deg 89% 65%);
+
 // OPACITY
 $opacity-100: 1;
 $opacity-80: 0.8;

src/entities/courses/ui/general/general.scss

@@ -62,17 +62,6 @@
           padding: 0;
           font-size: 18px;
           line-height: 28px;
-
-          a {
-            @extend %transition-all;
-
-            color: $color-gray-600;
-            text-decoration: underline;
-
-            &:hover {
-              color: $color-gray-400;
-            }
-          }
         }
       }
 

src/entities/courses/ui/general/general.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { LinkCustom } from '@/shared/ui/link-custom';
 import { WidgetTitle } from '@/shared/ui/widget-title';
 
 import './general.scss';
@@ -13,9 +13,9 @@ export const General = () => {
             <h2 className="title">Materials</h2>
             <ul className="description">
               <li>
-                <Link to="https://docs.rs.school" target="_blank" rel="noopener noreferrer">
+                <LinkCustom href="https://docs.rs.school" external>
                   School documentation
-                </Link>
+                </LinkCustom>
               </li>
               <li>All materials are publicly available on YouTube and GitHub</li>
               <li>

src/entities/events/ui/event-card/event-card.tsx

@@ -60,7 +60,7 @@ export const EventCard = ({
           <br />
           {city}
         </address>
-        <LinkCustom href={href} variant="rounded" target="_blank">
+        <LinkCustom href={href} variant="rounded" external>
           View details
         </LinkCustom>
       </div>

src/shared/icons/text-link-icon.tsx

@@ -2,5 +2,5 @@ import textLinkIcon from '@/shared/assets/svg/text-link.svg';
 import { Image } from '@/shared/ui/image';
 
 export const TextLinkIcon = () => {
-  return <Image src={textLinkIcon} width="25px" height="25px" alt="external link icon" />;
+  return <Image src={textLinkIcon} width="20px" height="20px" alt="external link icon" />;
 };

src/shared/ui/link-custom/link-custom.module.scss

@@ -81,15 +81,10 @@
 .text-link {
   @extend %transition-all;
 
-  @include media-tablet {
-    font-size: 16px;
-  }
-
-  font-size: 20px;
-  font-weight: 600;
-  color: $color-gray-600;
+  color: $color-blue;
+  text-decoration: underline;
 
   &:hover {
-    color: $color-black;
+    text-decoration: none;
   }
 }

src/shared/ui/link-custom/link-custom.test.tsx

@@ -29,12 +29,20 @@ describe('LinkCustom', () => {
     expect(link.textContent).toContain(label);
   });
 
-  it('should have attribute', () => {
-    const { getByRole } = renderWithRouter(<LinkCustom href={href}>{label}</LinkCustom>);
+  it('should be external', () => {
+    const { getByRole } = renderWithRouter(<LinkCustom href={href} external>{label}</LinkCustom>);
     const link = getByRole('link');
 
     expect(link).toHaveAttribute('rel', 'noopener noreferrer');
     expect(link).toHaveTextContent('Click me');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('should be inner', () => {
+    const { getByRole } = renderWithRouter(<LinkCustom href={href}>{label}</LinkCustom>);
+    const link = getByRole('link');
+
+    expect(link).not.toHaveAttribute('rel', 'noopener noreferrer');
     expect(link).not.toHaveAttribute('target', '_blank');
   });
 

src/shared/ui/link-custom/link-custom.tsx

@@ -2,18 +2,20 @@ import { AnchorHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 import classNames from 'classnames/bind';
 import { Link } from 'react-router-dom';
+import { TextLinkIcon } from '@/shared/icons';
 
 import styles from './link-custom.module.scss';
 
 export const cx = classNames.bind(styles);
 
-type LinkCustomProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'rel'> &
+type LinkCustomProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'rel' | 'target'> &
   VariantProps<typeof linkCustomVariants> &
   LinkCustomAdditionalProps;
 
 type LinkCustomAdditionalProps = {
   href: string;
   icon?: ReactNode;
+  external?: boolean;
 };
 
 const linkCustomVariants = cva('', {
@@ -25,17 +27,24 @@ const linkCustomVariants = cva('', {
       textLink: cx('textLink'),
     },
   },
-  defaultVariants: { variant: 'textLink' },
 });
 
+const externalLinkAttributes = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+};
+
 export const LinkCustom = ({
   children,
   href,
   icon = <></>,
   className = '',
-  variant,
+  variant = 'textLink',
+  external = false,
   ...props
 }: LinkCustomProps) => {
+  const iconElement = external && variant === 'textLink' ? <TextLinkIcon /> : icon;
+
   return (
     <Link
       className={linkCustomVariants({
@@ -44,10 +53,10 @@ export const LinkCustom = ({
       })}
       to={href}
       {...props}
-      rel="noopener noreferrer"
+      {...(external && externalLinkAttributes)}
     >
       {children}
-      {icon}
+      {iconElement}
     </Link>
   );
 };

src/shared/ui/text-with-link/text-with-link.tsx

@@ -1,9 +1,7 @@
 import { Fragment } from 'react/jsx-runtime';
-import { Link } from 'react-router-dom';
+import { LinkCustom } from '../link-custom';
 import { LinkList } from '@/widgets/required/required.types';
 
-import './text-with-link.scss';
-
 interface TextWithLinkProps {
   data: LinkList;
 }
@@ -12,9 +10,7 @@ export const TextWithLink = ({ data }: TextWithLinkProps) => {
   return data.map(({ id, text, link, title }) => (
     <Fragment key={id}>
       {text && <span>{text}</span>}
-      <Link className="required-link" to={link}>
-        {title}
-      </Link>
+      {link && <LinkCustom href={link} external>{title}</LinkCustom>}
     </Fragment>
   ));
 };

src/widgets/about/about.data.ts → src/widgets/about/about.data.tsx

@@ -6,11 +6,12 @@ import personIcon from '@/shared/assets/icons/person-icon.webp';
 import planetIcon from '@/shared/assets/icons/planet.webp';
 import type { CourseNames } from '@/shared/data/communication.data';
 import { DISCORD_LINKS } from '@/shared/data/communication.data';
+import { LinkCustom } from '@/shared/ui/link-custom';
 
 type AboutInfo = {
   id: number;
   title: string;
-  info: string;
+  info: string | JSX.Element;
   icon: string;
 };
 
@@ -66,7 +67,15 @@ const javaScriptEN: () => AboutInfo[] = () => {
     {
       id: 2,
       title: 'Worldwide mentors and trainers',
-      info: 'The Mentors and trainers of our school are front-end and javascript developers from different companies/countries. How to become a <a href="/courses#mentors-wanted">mentor</a>?',
+      info: (
+        <p>
+          The Mentors and trainers of our school are front-end and javascript developers from
+          different companies/countries. How to
+          {' '}
+          <LinkCustom href="/courses#mentors-wanted">become a mentor</LinkCustom>
+          ?
+        </p>
+      ),
       icon: planetIcon,
     },
     {
@@ -146,14 +155,30 @@ const reactEn: AboutInfo[] = javaScriptEN().map((item) => {
     return {
       ...item,
       title: 'Materials',
-      info: `<li>School <a href='https://docs.rs.school'>documentation</a></li><li>All materials are publicly available on the YouTube channel and GitHub</li>`,
+      info: (
+        <ul>
+          <li>
+            School
+            {' '}
+            <LinkCustom href="https://docs.rs.school" external>documentation</LinkCustom>
+          </li>
+          <li>All materials are publicly available on the YouTube channel and GitHub</li>
+        </ul>
+      ),
       icon: paperIcon,
     };
   }
   if (item.id === 5) {
     return {
       ...item,
-      info: `Throughout the course, we mostly use <a href=${DISCORD_LINKS['react']}>Discord chat</a>.`,
+      info: (
+        <p>
+          Throughout the course, we mostly use
+          {' '}
+          <LinkCustom href={DISCORD_LINKS['react']} external>Discord chat</LinkCustom>
+          .
+        </p>
+      ),
     };
   }
   return item;

src/widgets/about/ui/about.tsx

@@ -68,7 +68,7 @@ export const About = ({ courseName, type = 'en' }: AboutProps) => {
           <Paragraph>{localizedContent[type].paragraph}</Paragraph>
         )}
         <InfoGrid items={infoList} hasTitle />
-        <LinkCustom href={course.enroll} icon={<ArrowIcon />} variant="primary" target="_blank">
+        <LinkCustom href={course.enroll} icon={<ArrowIcon />} variant="primary" external>
           {localizedContent[type].linkLabel}
         </LinkCustom>
       </div>

src/widgets/about/ui/info-grid/info-grid.tsx

@@ -6,7 +6,7 @@ interface InfoGridProps {
   items: {
     id: number;
     title: string;
-    info: string;
+    info: string | JSX.Element;
     icon: string;
   }[];
   hasTitle?: boolean;
@@ -21,7 +21,7 @@ export const InfoGrid = ({ items }: InfoGridProps) => {
             <Image src={icon} alt={title} />
             <h2>{title}</h2>
           </div>
-          <p dangerouslySetInnerHTML={{ __html: info }} />
+          { typeof info === 'string' ? <p>{info}</p> : info }
         </div>
       ))}
     </div>

src/widgets/communication/ui/communication.tsx

@@ -5,7 +5,6 @@ import {
   RS_DOCS_COMMUNICATION_LINK,
   RS_DOCS_TELEGRAM_CHATS_LINK,
 } from '@/shared/data/communication.data';
-import { TextLinkIcon } from '@/shared/icons';
 import { DiscordLogo } from '@/shared/icons/discord-logo';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
@@ -64,7 +63,7 @@ export const Communication = ({ courseName, lang = 'en' }: RequiredProps) => {
             <Subtitle text={localizedContent[lang].subTitle} />
             <Paragraph>
               {localizedContent[lang].firstParagraphFirstHalf}{' '}
-              <LinkCustom href={DISCORD_LINKS[courseName]} icon={<TextLinkIcon />} target="_blank">
+              <LinkCustom href={DISCORD_LINKS[courseName]} external>
                 {localizedContent[lang].discordLink}
               </LinkCustom>
               {localizedContent[lang].firstParagraphSecondHalf}
@@ -73,16 +72,15 @@ export const Communication = ({ courseName, lang = 'en' }: RequiredProps) => {
               {localizedContent[lang].secondParagraphFirstHalf}{' '}
               <LinkCustom
                 href={RS_DOCS_TELEGRAM_CHATS_LINK}
-                icon={<TextLinkIcon />}
-                target="_blank"
+                external
               >
                 {localizedContent[lang].telegramLink}
               </LinkCustom>
               {localizedContent[lang].secondParagraphSecondHalf}
             </Paragraph>
             <Paragraph>
               {localizedContent[lang].thirdParagraphFirstHalf}{' '}
-              <LinkCustom href={RS_DOCS_COMMUNICATION_LINK} icon={<TextLinkIcon />} target="_blank">
+              <LinkCustom href={RS_DOCS_COMMUNICATION_LINK} external>
                 {localizedContent[lang].rsDocsLink}
               </LinkCustom>
               {localizedContent[lang].thirdParagraphSecondHalf}

src/widgets/course-main/course-main.tsx

@@ -50,7 +50,7 @@ export const CourseMain = ({ courseName, lang = 'en', type }: CourseMainProps) =
           <WidgetTitle>{`${altTitle || title} Course`}</WidgetTitle>
           {type && <Subtitle text={type} type="course-main" />}
           <DateLang startDate={date} language={language} mode={mode} withMargin />
-          <LinkCustom href={enroll} icon={<ArrowIcon />} variant="secondary" target="_blank">
+          <LinkCustom href={enroll} icon={<ArrowIcon />} variant="secondary" external>
             {localizedContent[lang].linkLabel}
           </LinkCustom>
         </div>

src/widgets/mentors-wanted/ui/mentors-wanted.module.scss

@@ -13,11 +13,6 @@
     text-align: left;
   }
 
-  .link {
-    font-size: 18px;
-    text-decoration: underline;
-  }
-
   .content {
     display: flex;
     align-items: start;

src/widgets/mentors-wanted/ui/mentors-wanted.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
-import { Link } from 'react-router-dom';
 import mentorImg from '@/shared/assets/mentors-wanted-poster.webp';
 import { Image } from '@/shared/ui/image';
+import { LinkCustom } from '@/shared/ui/link-custom';
 import { Paragraph } from '@/shared/ui/paragraph';
 import { WidgetTitle } from '@/shared/ui/widget-title';
 
@@ -11,7 +11,6 @@ import styles from './mentors-wanted.module.scss';
 const cx = classNamesBind.bind(styles);
 
 export const MentorsWanted = () => {
-  // todo use custom link
   return (
     <section className={cx('mentors-wanted', 'container')}>
       <article className={classNames('content', cx('content'))}>
@@ -20,13 +19,12 @@ export const MentorsWanted = () => {
           <Paragraph>
             If&nbsp;you are interested in mentoring our students, please go through the
             {' '}
-            <Link
-              className={cx('link')}
-              to="https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring"
-              target="blank"
+            <LinkCustom
+              href="https://github.com/rolling-scopes-school/tasks/tree/master/angular/mentoring"
+              external
             >
               Mentoring Documentation
-            </Link>
+            </LinkCustom>
             {' '}
             for&nbsp;the Angular Course.
           </Paragraph>

src/widgets/mentors/ui/mentors.tsx

@@ -26,7 +26,7 @@ export const Mentors = () => {
             href={LINKS.BECOME_MENTOR}
             icon={<ArrowIcon />}
             variant="primary"
-            target="_blank"
+            external
           >
             Become a mentor
           </LinkCustom>

src/widgets/merch/ui/merch.tsx

@@ -25,7 +25,7 @@ export const Merch = () => (
           assets where you will find all merch collections and can print your own Rolling Scopes
           t-shirts, stickers etc.
         </Paragraph>
-        <LinkCustom href={LINKS.MERCH} icon={<ArrowIcon />} variant="primary" target="_blank">
+        <LinkCustom href={LINKS.MERCH} icon={<ArrowIcon />} variant="primary" external>
           Discover merch assets
         </LinkCustom>
       </div>