Merge pull request #608 from reportportal/hotfix/external-links-arrows

Hotfix. Add external links arrows

Author: AmsterGet

src/components/Layout/Navigation/NavMenu/CommunityMenu/CommunityMenu.tsx

@@ -34,9 +34,10 @@ export const CommunityMenu: FC<MenuProps> = ({ isDesktop = true, isOpen, menuCon
 
   const communityList = (
     <SectionList
-      className={classNames('community-list', { 'section-list-secondary': isDesktop })}
+      className="community-list"
       title="Our social medias"
       items={communities}
+      mode={isDesktop ? 'secondary' : 'primary'}
     />
   );
 

src/components/Layout/Navigation/NavMenu/OfferingsMenu/OfferingsMenu.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import classNames from 'classnames';
 import { Link } from '@app/components/Link';
 import { createBemBlockBuilder } from '@app/utils';
 import { useMenuList } from '@app/hooks/useMenuList';
@@ -26,9 +25,10 @@ export const OfferingsMenu: FC<MenuProps> = ({ isDesktop = true, isOpen, menuCon
 
   const pricingForSolutionsList = (
     <SectionList
-      className={classNames('pricing-solutions-list', { 'section-list-secondary': isDesktop })}
+      className="pricing-solutions-list"
       title="Pricing for Solutions"
       items={pricing}
+      mode={isDesktop ? 'secondary' : 'primary'}
     />
   );
 

src/components/Layout/Navigation/NavMenu/ProductMenu/ProductMenu.tsx

@@ -38,9 +38,10 @@ export const ProductMenu: FC<MenuProps> = ({ isDesktop = true, isOpen, menuConta
 
   const integrationsList = (
     <SectionList
-      className="section-list-secondary integrations-list"
+      className="integrations-list"
       title="Integrations"
       items={integrations}
+      mode="secondary"
     />
   );
 

src/components/Layout/Navigation/NavMenu/SectionList/SectionItem/SectionItem.tsx

@@ -2,7 +2,14 @@ import React, { CSSProperties, FC, ReactElement } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { Link } from '@app/components/Link';
-import { ContentfulAsset, createBemBlockBuilder, isContentfulRecord, LinkDto } from '@app/utils';
+import {
+  ContentfulAsset,
+  createBemBlockBuilder,
+  isAbsoluteURL,
+  isContentfulRecord,
+  LinkDto,
+} from '@app/utils';
+import ArrowIcon from '@app/svg/arrow.inline.svg';
 
 interface SectionItemBaseProps {
   title: string;
@@ -14,16 +21,18 @@ interface SectionItemBaseProps {
   iconClass?: string;
   className?: string;
   isDataFromContentful?: boolean;
+  mode?: 'primary' | 'secondary';
 }
 
 export type SectionItemProps =
   | (SectionItemBaseProps & { iconClass: string; icon?: never })
   | (SectionItemBaseProps & { icon: ContentfulAsset | ReactElement | string; iconClass?: never });
 
 export const SectionItem: FC<SectionItemProps> = props => {
-  const { title, link, icon, hoverIcon, iconClass, text, className = '' } = props;
+  const { title, link, icon, hoverIcon, iconClass, text, className = '', mode = 'primary' } = props;
 
   const getBlocksWith = createBemBlockBuilder(['section-item', className]);
+  const shouldDisplayArrow = mode === 'secondary' && isAbsoluteURL(link.url);
 
   const renderIcon = () => {
     const isDataFromContentful = isContentfulRecord(props);
@@ -59,7 +68,10 @@ export const SectionItem: FC<SectionItemProps> = props => {
     >
       {renderIcon()}
       <div>
-        <p className={getBlocksWith('-title')}>{title}</p>
+        <p className={getBlocksWith('-title')}>
+          {title}
+          {shouldDisplayArrow && <ArrowIcon className={getBlocksWith('-arrow')} />}
+        </p>
         {text && <p className={getBlocksWith('-text')}>{text}</p>}
       </div>
     </Link>

src/components/Layout/Navigation/NavMenu/SectionList/SectionList.scss

@@ -67,12 +67,16 @@
     }
   }
 
+  &:has(.section-item-arrow) {
+    padding-right: 25px;
+  }
+
   &--no-text {
     padding-top: 16px;
     padding-bottom: 16px;
     line-height: 20px;
 
-    svg,
+    & > svg,
     .section-item-icon {
       top: 8px;
     }
@@ -95,19 +99,28 @@
     color: var(--text-primary);
   }
 
-  & svg,
+  & > svg,
   &-icon {
     position: absolute;
     top: 8px;
     left: 8px;
     width: 36px;
     height: 36px;
   }
+
+  &-arrow {
+    position: absolute;
+    top: 0;
+    right: 12px;
+    bottom: 0;
+    margin: auto;
+    color: var(--text-service);
+  }
 }
 
 .section-list-secondary {
   &__col {
-    width: 200px;
+    width: 210px;
   }
 
   .section-item {

src/components/Layout/Navigation/NavMenu/SectionList/SectionList.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import chunk from 'lodash/chunk';
+import compact from 'lodash/compact';
 import { createBemBlockBuilder } from '@app/utils';
 
 import { SectionItem, SectionItemProps } from './SectionItem';
@@ -12,6 +13,7 @@ interface SectionListProps {
   className?: string;
   showTitle?: boolean;
   itemsPerRow?: number;
+  mode?: 'primary' | 'secondary';
 }
 
 export const SectionList: FC<SectionListProps> = ({
@@ -20,12 +22,18 @@ export const SectionList: FC<SectionListProps> = ({
   items,
   itemsPerRow = items.length,
   className = '',
+  mode = 'primary',
 }) => {
-  const getBlocksWith = createBemBlockBuilder(['section-list', className]);
+  const bemClasses = compact([
+    'section-list',
+    mode === 'secondary' ? 'section-list-secondary' : undefined,
+    className,
+  ]);
+  const getBlocksWith = createBemBlockBuilder(bemClasses);
   const columns = chunk(items, itemsPerRow).map((column, columnIndex) => (
     <div key={columnIndex} className={getBlocksWith('__col')}>
       {column.map(data => (
-        <SectionItem key={data.title} className={getBlocksWith('__item')} {...data} />
+        <SectionItem key={data.title} className={getBlocksWith('__item')} {...data} mode={mode} />
       ))}
     </div>
   ));