Differential D8079 Diff 29755 landing/info-block.react.js

Changeset View

Standalone View

landing/info-block.react.js

	// @flow			// @flow

				import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
				import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
				import classNames from 'classnames';
	import * as React from 'react';			import * as React from 'react';
				import { NavLink } from 'react-router-dom';

	import css from './info-block.css';			import css from './info-block.css';
	import Picture from './Picture.react.js';			import typography from './typography.css';

	type InfoBlockProps = {			type InfoBlockProps = {
	+title: string,			+containerClassName: string,
	+description: string,			+colorHeader: boolean,
	+url: string,			+headerTextContent: string,
	+alt: string,			+infoBlockContent: React.Node,
	+imageStyle: string,			+navLinkDestination: string,
	+infoStyle: string,			+linkTextContent: string,
	};			};
	function InfoBlock(props: InfoBlockProps): React.Node {			function InfoBlock(props: InfoBlockProps): React.Node {
	const { title, description, url, alt, imageStyle, infoStyle } = props;			const {
				containerClassName,
				headerTextContent,
				colorHeader,
				infoBlockContent,
				navLinkDestination,
				linkTextContent,
				} = props;

	return (			const headerClassName = classNames([typography.heading1, css.header]);

				const linkClassName = classNames([typography.paragraph1, css.link]);

				let headerText;
				if (colorHeader) {
				const lastSpaceIndex = headerTextContent.lastIndexOf(' ');
				const remainingSentence = headerTextContent.substring(0, lastSpaceIndex);
				const lastWord = headerTextContent.substring(lastSpaceIndex + 1);

				headerText = (
	<>			<>
	<div className={imageStyle}>			{remainingSentence}
	<Picture alt={alt} url={url} />			<span> {lastWord}</span>
	</div>
	<div className={`${css.info_block} ${infoStyle}`}>
	<p className={css.title}>{title}</p>
	<p className={css.description}>{description}</p>
	</div>
	</>			</>
	);			);
				} else {
				headerText = headerTextContent;
				}

				return (
				<section className={containerClassName}>
				<div className={css.textContainer}>
				<h1 className={headerClassName}>{headerText}</h1>
				{infoBlockContent}
				<NavLink to={navLinkDestination} exact className={css.linkContainer}>
				<p className={linkClassName}>{linkTextContent}</p>
				<FontAwesomeIcon
				size="sm"
				className={css.icon}
				icon={faExternalLinkAlt}
				/>
				</NavLink>
				</div>
				</section>
				);
	}			}

	export default InfoBlock;			export default InfoBlock;