feat: add linkTarget to <RelatedComponents> (#125)

src/components/information-box-title/information-box-title.tsx

@@ -1,22 +1,28 @@
 import { FC } from 'react';
 import cx from 'classnames';
-import { ElementContent } from '../../types';
+import { ElementContent, withStaticProps } from '../../types';
 import Link from '../link/link';
+import { LinkTarget } from '../link/LinkConstants';
 import styles from './information-box-title.module.scss';
 
 type InformationBoxTitleProps = {
   children: ElementContent;
   href?: string;
+  linkTarget?: LinkTarget;
 };
 
-const InformationBoxTitle: FC<InformationBoxTitleProps> = ({ children, href }) => {
+const InformationBoxTitle: FC<InformationBoxTitleProps> & { linkTargets?: typeof LinkTarget } = ({
+  children,
+  href,
+  linkTarget,
+}) => {
   return href && typeof children === 'string' ? (
-    <Link className={cx(styles.informationBoxTitle)} href={href} withoutSpacing>
+    <Link className={cx(styles.informationBoxTitle)} href={href} withoutSpacing target={linkTarget}>
       {children}
     </Link>
   ) : (
     <h4 className={cx(styles.informationBoxTitle, { [styles.titleLink]: href })}>{children}</h4>
   );
 };
 
-export default InformationBoxTitle;
+export default withStaticProps(InformationBoxTitle, { linkTargets: LinkTarget });

src/components/information-box/information-box.tsx

@@ -1,18 +1,32 @@
 import { FC } from 'react';
 import InformationBoxTitle from '../information-box-title/information-box-title';
-import { ElementContent } from '../../types';
+import { ElementContent, withStaticProps } from '../../types';
+import { LinkTarget } from '../link/LinkConstants';
 import styles from './information-box.module.scss';
 
 type InformationBoxProps = {
   component?: ElementContent;
   title?: ElementContent;
   description?: string;
   href?: string;
+  linkTarget?: LinkTarget;
 };
 
-const InformationBox: FC<InformationBoxProps> = ({ component = null, title = '', description = '', href }) => {
+const InformationBox: FC<InformationBoxProps> & { linkTargets?: typeof LinkTarget } = ({
+  component = null,
+  title = '',
+  description = '',
+  href,
+  linkTarget,
+}) => {
   const overrideTitle =
-    typeof title === 'string' ? <InformationBoxTitle href={href}>{title}</InformationBoxTitle> : title;
+    typeof title === 'string' ? (
+      <InformationBoxTitle href={href} linkTarget={linkTarget}>
+        {title}
+      </InformationBoxTitle>
+    ) : (
+      title
+    );
 
   return (
     <section className={styles.informationBox}>
@@ -23,4 +37,4 @@ const InformationBox: FC<InformationBoxProps> = ({ component = null, title = '',
   );
 };
 
-export default InformationBox;
+export default withStaticProps(InformationBox, { linkTargets: LinkTarget });

src/components/related-component/related-component.tsx

@@ -1,22 +1,35 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import InformationBox from '../information-box/information-box';
-import { ElementContent } from '../../types';
+import { LinkTarget } from '../link/LinkConstants';
+import { ElementContent, withStaticProps } from '../../types';
+import { RelatedComponentsContext } from '../related-components/related-components-context';
 import styles from './related-component.module.scss';
 
 interface RelatedComponentProps {
   component?: ElementContent;
   title?: string;
   description?: string;
   href: string;
+  linkTarget?: LinkTarget;
 }
 
-const RelatedComponent: React.FC<RelatedComponentProps> = ({ component, title = '', description = '', href }) => (
-  <InformationBox
-    component={<div className={styles.relatedComponentComponent}>{component}</div>}
-    title={title}
-    description={description}
-    href={href}
-  />
-);
+const RelatedComponent: React.FC<RelatedComponentProps> & { linkTargets?: typeof LinkTarget } = ({
+  component,
+  title = '',
+  description = '',
+  href,
+  linkTarget,
+}) => {
+  const overrideLinkTarget = linkTarget || useContext(RelatedComponentsContext).linkTarget;
+  return (
+    <InformationBox
+      component={<div className={styles.relatedComponentComponent}>{component}</div>}
+      title={title}
+      description={description}
+      href={href}
+      linkTarget={overrideLinkTarget}
+    />
+  );
+};
 
-export default RelatedComponent;
+export default withStaticProps(RelatedComponent, { linkTargets: LinkTarget });

src/components/related-components/related-components-context.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LinkTarget } from '../link/LinkConstants';
+
+type RelatedComponentsContextType = {
+  linkTarget?: LinkTarget;
+};
+
+export const RelatedComponentsContext = React.createContext<RelatedComponentsContextType>({
+  linkTarget: LinkTarget.NEW_WINDOW,
+});

src/components/related-components/related-components.tsx

@@ -1,12 +1,20 @@
 import React, { useMemo } from 'react';
+import { LinkTarget } from '../link/LinkConstants';
+import { withStaticProps } from '../../types';
+import { RelatedComponentsContext } from './related-components-context';
 import styles from './related-components.module.scss';
 
 interface RelatedComponentsProps {
   componentsNames: string[];
   descriptionComponentsMap: Map<string, JSX.Element>;
+  linkTarget?: LinkTarget;
 }
 
-const RelatedComponents: React.FC<RelatedComponentsProps> = ({ componentsNames = [], descriptionComponentsMap }) => {
+const RelatedComponents: React.FC<RelatedComponentsProps> & { linkTargets?: typeof LinkTarget } = ({
+  componentsNames = [],
+  descriptionComponentsMap,
+  linkTarget,
+}) => {
   const componentsDataElements = useMemo(
     () =>
       componentsNames.map((componentName, index) => {
@@ -17,7 +25,11 @@ const RelatedComponents: React.FC<RelatedComponentsProps> = ({ componentsNames =
     [componentsNames, descriptionComponentsMap],
   );
 
-  return <article className={styles.relatedComponents}>{componentsDataElements}</article>;
+  return (
+    <RelatedComponentsContext.Provider value={{ linkTarget }}>
+      <article className={styles.relatedComponents}>{componentsDataElements}</article>
+    </RelatedComponentsContext.Provider>
+  );
 };
 
-export default RelatedComponents;
+export default withStaticProps(RelatedComponents, { linkTargets: LinkTarget });