Unverified Commit 8af5b60e authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Use related articles for About pages (#550)

parent e9b90331
Pipeline #184303 passed with stages
in 4 minutes and 33 seconds
......@@ -21,6 +21,7 @@ import useApiService from 'src/shared/hooks/useApiService';
import {
TextArticle,
RelatedArticles,
HelpArticleGrid
} from 'src/shared/components/help-article';
import {
......@@ -59,11 +60,19 @@ const About = () => {
</div>
)}
<aside className={styles.aside}>
{menu && (
<>
<div className={styles.asideTitle}>More about...</div>
<SideMenu menu={menu} currentUrl={location.pathname} />
</>
{article?.related_articles.length ? (
<RelatedArticles
title="More about…"
articles={article.related_articles}
highlightActiveArticle={true}
/>
) : (
menu && (
<>
<div className={styles.asideTitle}>More about…</div>
<SideMenu menu={menu} currentUrl={location.pathname} />
</>
)
)}
</aside>
</HelpArticleGrid>
......
......@@ -158,3 +158,7 @@ $textColumnWidth: 450px;
fill: white;
}
}
.relatedArticleActive {
color: $black;
}
......@@ -16,7 +16,9 @@
import React from 'react';
import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { push } from 'connected-react-router';
import classNames from 'classnames';
import { ReactComponent as VideoIcon } from 'static/img/shared/video.svg';
......@@ -27,10 +29,12 @@ import styles from './HelpArticle.scss';
type Props = {
articles: RelatedArticleData[];
title?: string;
highlightActiveArticle?: boolean;
onArticleClick?: (article: RelatedArticleData) => void;
};
const RelatedArticles = (props: Props) => {
const location = useLocation();
const dispatch = useDispatch();
const onArticleClick = (article: RelatedArticleData) => {
......@@ -42,10 +46,13 @@ const RelatedArticles = (props: Props) => {
};
const relatedArticles = props.articles.map((relatedArticle) => {
const relatedItemClassName =
relatedArticle.type === 'article'
? styles.relatedArticle
: styles.relatedVideo;
const relatedItemClassName = classNames({
[styles.relatedArticle]: relatedArticle.type === 'article',
[styles.relatedVideo]: relatedArticle.type === 'video',
[styles.relatedArticleActive]:
props.highlightActiveArticle && relatedArticle.url === location.pathname
});
return (
<a
href={relatedArticle.url}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment