Differential D8537 Diff 29734 landing/competitor-feature.react.js

Changeset View

Standalone View

landing/competitor-feature.react.js

	// @flow			// @flow

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

	import CommLogo from './assets/comm-logo.react.js';			import CommLogo from './assets/comm-logo.react.js';
	import type { Competitors } from './competitor-data.js';			import type { Competitors } from './competitor-data.js';
	import css from './competitor-feature.css';			import css from './competitor-feature.css';
	import CompetitorLogo from './competitor-logo.react.js';			import CompetitorLogo from './competitor-logo.react.js';
	import typography from './typography.css';			import typography from './typography.css';

				function useDescriptionContent(
				description: string \| $ReadOnlyArray<string>,
				descriptionClassName,
				descriptionMultiClassName,
				) {
				return React.useMemo(() => {
				if (typeof description === 'string') {
				return <p className={descriptionClassName}>{description}</p>;
				}
				const paragraphs = description.map((paragraph, index) => {
				const className =
				index > 0 ? descriptionMultiClassName : descriptionClassName;

				return (
				<p className={className} key={paragraph}>
				{paragraph}
				</p>
				);
				});
				return <>{paragraphs}</>;
				}, [description, descriptionClassName, descriptionMultiClassName]);
				}

	type Props = {			type Props = {
	+competitorID: Competitors,			+competitorID: Competitors,
	+title: string,			+title: string,
	+comingSoon: boolean,			+comingSoon: boolean,
	+competitorDescription: string,			+competitorDescription: string \| $ReadOnlyArray<string>,
	+commDescription: string,			+commDescription: string \| $ReadOnlyArray<string>,
	};			};

	function CompetitorFeature(props: Props): React.Node {			function CompetitorFeature(props: Props): React.Node {
	const {			const {
	competitorID,			competitorID,
	title,			title,
	comingSoon,			comingSoon,
	competitorDescription,			competitorDescription,
	commDescription,			commDescription,
	} = props;			} = props;

	const headingClassName = classNames([typography.heading3, css.headingText]);			const headingClassName = classNames([typography.heading3, css.headingText]);
	const comingSoonClassName = classNames([			const comingSoonClassName = classNames([
	typography.paragraph3,			typography.paragraph3,
	css.comingSoonText,			css.comingSoonText,
	]);			]);
	const descriptionClassName = classNames([			const descriptionClassName = classNames([
	typography.paragraph1,			typography.paragraph1,
	css.descriptionText,			css.descriptionText,
	]);			]);
				const descriptionMultiClassName = classNames([
				typography.paragraph1,
				css.descriptionTextMutli,
				]);

	let comingSoonBadge;			let comingSoonBadge;
	if (comingSoon) {			if (comingSoon) {
	comingSoonBadge = (			comingSoonBadge = (
	<div className={css.comingSoonBadge}>			<div className={css.comingSoonBadge}>
	<FontAwesomeIcon			<FontAwesomeIcon
	size="sm"			size="sm"
	className={css.comingSoonIcon}			className={css.comingSoonIcon}
	icon={faWrench}			icon={faWrench}
	/>			/>
	<span className={comingSoonClassName}>Coming Soon</span>			<span className={comingSoonClassName}>Coming Soon</span>
	</div>			</div>
	);			);
	}			}

				const competitorInfo = useDescriptionContent(
				competitorDescription,
				descriptionClassName,
				descriptionMultiClassName,
				);
				const commInfo = useDescriptionContent(
				commDescription,
				descriptionClassName,
				descriptionMultiClassName,
				);

	return (			return (
	<div className={css.container}>			<div className={css.container}>
	<div className={css.headingContainer}>			<div className={css.headingContainer}>
	<p className={headingClassName}>{title}</p>			<p className={headingClassName}>{title}</p>
	{comingSoonBadge}			{comingSoonBadge}
	</div>			</div>
	<CompetitorLogo name={competitorID} size={30} />			<CompetitorLogo name={competitorID} size={30} />
	<p className={descriptionClassName}>{competitorDescription}</p>			{competitorInfo}
	<hr />			<hr />
	<CommLogo size={30} />			<CommLogo size={30} />
	<p className={descriptionClassName}>{commDescription}</p>			{commInfo}
	</div>			</div>
	);			);
	}			}

	export default CompetitorFeature;			export default CompetitorFeature;