Changeset View
Changeset View
Standalone View
Standalone View
landing/competitor-feature-card.react.js
- This file was added.
// @flow | |||||
import { faWrench } from '@fortawesome/free-solid-svg-icons'; | |||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | |||||
import classNames from 'classnames'; | |||||
import * as React from 'react'; | |||||
import { assetsCacheURLPrefix } from './asset-meta-data.js'; | |||||
import css from './competitor-feature-card.css'; | |||||
import typography from './typography.css'; | |||||
type Props = { | |||||
+competitorName: string, | |||||
+competitorLogoImageURL: string, | |||||
atul: Would it make sense to include vectors of competitor logos in repo similar to `background… | |||||
+title: string, | |||||
+comingSoon: boolean, | |||||
+competitorDescription: string, | |||||
+commDescription: string, | |||||
+onClick: () => mixed, | |||||
}; | |||||
function CompetitorFeatureCard(props: Props): React.Node { | |||||
const { | |||||
competitorName, | |||||
competitorLogoImageURL, | |||||
title, | |||||
comingSoon, | |||||
competitorDescription, | |||||
commDescription, | |||||
onClick, | |||||
} = props; | |||||
const headingClasName = classNames([typography.heading3, css.headingText]); | |||||
atulUnsubmitted Not Done Inline Actionstypo here atul: typo here | |||||
const comingSoonClassName = classNames([ | |||||
typography.paragraph3, | |||||
css.comingSoonText, | |||||
]); | |||||
const descriptionClassName = classNames([ | |||||
typography.paragraph1, | |||||
css.descriptionText, | |||||
]); | |||||
const readMoreClassName = classNames([ | |||||
typography.paragraph2, | |||||
css.readMoreText, | |||||
]); | |||||
let comingSoonBadge; | |||||
if (comingSoon) { | |||||
comingSoonBadge = ( | |||||
<div className={css.comingSoonBadge}> | |||||
<FontAwesomeIcon size="sm" color="#DCA008" icon={faWrench} /> | |||||
atulUnsubmitted Not Done Inline ActionsCan we color via CSS instead so we can use color names from design system instead of hardcoding color prop? You can look at expand-buttons.react.js as an example. atul: Can we color via CSS instead so we can use color names from design system instead of hardcoding… | |||||
<span className={comingSoonClassName}>Coming Soon</span> | |||||
</div> | |||||
); | |||||
} | |||||
return ( | |||||
<a className={css.container} onClick={onClick}> | |||||
<div className={css.headingContainer}> | |||||
<h1 className={headingClasName}>{title}</h1> | |||||
{comingSoonBadge} | |||||
</div> | |||||
<img | |||||
src={competitorLogoImageURL} | |||||
alt={`${competitorName} logo`} | |||||
className={css.compeitorLogo} | |||||
/> | |||||
<p className={descriptionClassName}>{competitorDescription}</p> | |||||
<hr /> | |||||
<img | |||||
src={`${assetsCacheURLPrefix}/competitors/comm.png`} | |||||
alt="comm logo" | |||||
className={css.compeitorLogo} | |||||
atulUnsubmitted Not Done Inline ActionsShould we have a separate name here since this isn't a "competitor logo"? Alternatively, we could rename from competitor logo, to service logo or something along those lines? atul: Should we have a separate name here since this isn't a "competitor logo"?
Alternatively, we… | |||||
/> | |||||
<p className={descriptionClassName}>{commDescription}</p> | |||||
<p className={readMoreClassName}>Read more</p> | |||||
</a> | |||||
); | |||||
} | |||||
export default CompetitorFeatureCard; |
Would it make sense to include vectors of competitor logos in repo similar to background-illustration.react.js so they're included in bundle instead of having to fetch asset from network?
Based on super quick google search SVGs of logos are pretty accessible:
https://github.com/signalapp/Signal-Desktop/blob/87d6a55ce87a3f09e34da1dbc9e69f400ac7e32d/images/signal-logo.svg
etc