diff --git a/landing/competitor-data.js b/landing/competitor-data.js --- a/landing/competitor-data.js +++ b/landing/competitor-data.js @@ -10,7 +10,7 @@ }); export type Competitors = $Values; -type FeatureComparison = { +export type FeatureComparison = { +title: string, +comingSoon: boolean, +competitorDescriptionShort: string, @@ -20,7 +20,7 @@ +furtherReadingLinks?: $ReadOnlyArray, }; -type Competitor = { +export type Competitor = { +id: Competitors, +name: string, +featureComparison: $ReadOnlyArray, diff --git a/landing/competitor-feature.css b/landing/competitor-feature.css --- a/landing/competitor-feature.css +++ b/landing/competitor-feature.css @@ -9,6 +9,8 @@ justify-content: space-between; align-items: center; margin-bottom: 16px; + flex-wrap: wrap; + row-gap: 8px; } .headingText { @@ -40,6 +42,6 @@ .descriptionText { color: var(--white-80); - height: 80px; + min-height: 80px; margin-top: 8px; } diff --git a/landing/feature-modal.css b/landing/feature-modal.css new file mode 100644 --- /dev/null +++ b/landing/feature-modal.css @@ -0,0 +1,44 @@ +.modalContainer { + background-color: var(--comparison-cards); + border-radius: 8px; + padding: 24px 32px; + width: 624px; + max-width: 90vw; + max-height: 90vh; + overflow-y: auto; +} + +.featureContainer { + display: flex; +} + +.closeIconContainer { + margin-left: 22px; + cursor: pointer; +} + +.closeIcon { + color: var(--white-80); +} + +.furtherReadingContainer { + border-top: 1px solid var(--black-80); + padding-top: 24px; + margin-top: 24px; +} + +.furtherReadingsText { + color: var(--white-100); + margin-bottom: 16px; +} + +.linksContainer { + display: flex; + flex-direction: column; + row-gap: 8px; +} + +.linkText { + color: var(--violet-dark-100); + text-decoration: underline; +} diff --git a/landing/feature-modal.react.js b/landing/feature-modal.react.js new file mode 100644 --- /dev/null +++ b/landing/feature-modal.react.js @@ -0,0 +1,76 @@ +// @flow + +import { faTimes } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; +import * as React from 'react'; + +import ModalOverlay from 'lib/components/modal-overlay.react.js'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; + +import type { FeatureComparison, Competitor } from './competitor-data.js'; +import CompetitorFeature from './competitor-feature.react.js'; +import css from './feature-modal.css'; +import typography from './typography.css'; + +type Props = { + +competitor: Competitor, + +feature: FeatureComparison, +}; + +function FeatureModal(props: Props): React.Node { + const { competitor, feature } = props; + + const { popModal } = useModalContext(); + + const furtherReadingClassName = classNames( + typography.paragraph1, + css.furtherReadingsText, + ); + const linkClassName = classNames([typography.paragraph2, css.linkText]); + + const furtherReadingLinks = React.useMemo(() => { + if (!feature.furtherReadingLinks) { + return null; + } + + const links = feature.furtherReadingLinks.map((link, index) => ( + + {link} + + )); + + return ( +
+

Further reading

+
{links}
+
+ ); + }, [feature.furtherReadingLinks, furtherReadingClassName, linkClassName]); + + return ( + +
+
+ +
+ +
+
+ {furtherReadingLinks} +
+
+ ); +} + +export default FeatureModal;