Differential D8024 Diff 29732 landing/competitor-feature-card.react.js

Changeset View

Standalone View

landing/competitor-feature-card.react.js

This file was copied to landing/competitor-feature.react.js.

	// @flow			// @flow

	import { faWrench } from '@fortawesome/free-solid-svg-icons';
	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 type { Competitors } from './competitor-data.js';			import type { Competitors } from './competitor-data.js';
	import css from './competitor-feature-card.css';			import css from './competitor-feature-card.css';
	import CompetitorLogo from './competitor-logo.react.js';			import CompetitorFeature from './competitor-feature.react.js';
	import typography from './typography.css';			import typography from './typography.css';

	type Props = {			type Props = {
	+competitorID: Competitors,			+competitorID: Competitors,
	+title: string,			+title: string,
	+comingSoon: boolean,			+comingSoon: boolean,
	+competitorDescription: string,			+competitorDescription: string,
	+commDescription: string,			+commDescription: string,
	+onClick: () => mixed,			+onClick: () => mixed,
	};			};

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

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

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

	return (			return (
	<a className={css.container} onClick={onClick}>			<a className={css.container} onClick={onClick}>
	<div className={css.headingContainer}>			<CompetitorFeature
	<p className={headingClassName}>{title}</p>			competitorID={competitorID}
	{comingSoonBadge}			title={title}
	</div>			comingSoon={comingSoon}
	<CompetitorLogo name={competitorID} size={30} />			competitorDescription={competitorDescription}
	<p className={descriptionClassName}>{competitorDescription}</p>			commDescription={commDescription}
	<hr />			/>
	<CommLogo size={30} />
	<p className={descriptionClassName}>{commDescription}</p>
	<p className={readMoreClassName}>Read more</p>			<p className={readMoreClassName}>Read more</p>
	</a>			</a>
	);			);
	}			}

	export default CompetitorFeatureCard;			export default CompetitorFeatureCard;