feat: add linkTarget to RelatedComponents [prerelease]

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 });