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'; ...@@ -21,6 +21,7 @@ import useApiService from 'src/shared/hooks/useApiService';
import { import {
TextArticle, TextArticle,
RelatedArticles,
HelpArticleGrid HelpArticleGrid
} from 'src/shared/components/help-article'; } from 'src/shared/components/help-article';
import { import {
...@@ -59,11 +60,19 @@ const About = () => { ...@@ -59,11 +60,19 @@ const About = () => {
</div> </div>
)} )}
<aside className={styles.aside}> <aside className={styles.aside}>
{menu && ( {article?.related_articles.length ? (
<> <RelatedArticles
<div className={styles.asideTitle}>More about...</div> title="More about…"
<SideMenu menu={menu} currentUrl={location.pathname} /> articles={article.related_articles}
</> highlightActiveArticle={true}
/>
) : (
menu && (
<>
<div className={styles.asideTitle}>More about…</div>
<SideMenu menu={menu} currentUrl={location.pathname} />
</>
)
)} )}
</aside> </aside>
</HelpArticleGrid> </HelpArticleGrid>
......
...@@ -158,3 +158,7 @@ $textColumnWidth: 450px; ...@@ -158,3 +158,7 @@ $textColumnWidth: 450px;
fill: white; fill: white;
} }
} }
.relatedArticleActive {
color: $black;
}
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
import React from 'react'; import React from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { useLocation } from 'react-router-dom';
import { push } from 'connected-react-router'; import { push } from 'connected-react-router';
import classNames from 'classnames';
import { ReactComponent as VideoIcon } from 'static/img/shared/video.svg'; import { ReactComponent as VideoIcon } from 'static/img/shared/video.svg';
...@@ -27,10 +29,12 @@ import styles from './HelpArticle.scss'; ...@@ -27,10 +29,12 @@ import styles from './HelpArticle.scss';
type Props = { type Props = {
articles: RelatedArticleData[]; articles: RelatedArticleData[];
title?: string; title?: string;
highlightActiveArticle?: boolean;
onArticleClick?: (article: RelatedArticleData) => void; onArticleClick?: (article: RelatedArticleData) => void;
}; };
const RelatedArticles = (props: Props) => { const RelatedArticles = (props: Props) => {
const location = useLocation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const onArticleClick = (article: RelatedArticleData) => { const onArticleClick = (article: RelatedArticleData) => {
...@@ -42,10 +46,13 @@ const RelatedArticles = (props: Props) => { ...@@ -42,10 +46,13 @@ const RelatedArticles = (props: Props) => {
}; };
const relatedArticles = props.articles.map((relatedArticle) => { const relatedArticles = props.articles.map((relatedArticle) => {
const relatedItemClassName = const relatedItemClassName = classNames({
relatedArticle.type === 'article' [styles.relatedArticle]: relatedArticle.type === 'article',
? styles.relatedArticle [styles.relatedVideo]: relatedArticle.type === 'video',
: styles.relatedVideo; [styles.relatedArticleActive]:
props.highlightActiveArticle && relatedArticle.url === location.pathname
});
return ( return (
<a <a
href={relatedArticle.url} 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