diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index 74e705cd1..669340b68 100644 --- a/app/scripts/components/common/card/index.tsx +++ b/app/scripts/components/common/card/index.tsx @@ -187,15 +187,17 @@ const CardLabel = styled.span` const CardFigure = styled(Figure)` order: -1; - background: ${themeVal('color.primary-100')}; - min-height: ${variableGlsp(12)}; + width: 100%; + ${(props) => !props.isCoverOrFeatured && `aspect-ratio: 2/1;`} + background: ${(props) => + props.src ? 'none' : props.theme.color['primary-100']}; img { height: 100%; width: 100%; object-fit: cover; mix-blend-mode: multiply; - display: ${(props) => (props.src ? 'inline-block' : 'none')}; + display: ${(props) => (props.src ? 'block' : 'none')}; } `; @@ -288,7 +290,7 @@ function CardComponent(props: CardComponentPropsType) { footerContent, hideExternalLinkBadge, onCardClickCapture, - onClick, + onClick } = props; // @TODO: This process is not necessary once all the instances adapt the linkProperties syntax // Consolidate them to use LinkProperties only @@ -300,18 +302,29 @@ function CardComponent(props: CardComponentPropsType) { linkProperties = linkPropertiesProps; } else { const { linkTo } = props; - linkProperties = linkTo ? { - linkTo, - pathAttributeKeyName: 'to', - LinkElement: SmartLink - } : undefined; + linkProperties = linkTo + ? { + linkTo, + pathAttributeKeyName: 'to', + LinkElement: SmartLink + } + : undefined; } - const isExternalLink = linkProperties ? /^https?:\/\//.test(linkProperties.linkTo) : false; + const isExternalLink = linkProperties + ? /^https?:\/\//.test(linkProperties.linkTo) + : false; return ( )} {footerContent && {footerContent}} - + {imgAlt} diff --git a/mock/stories/external-link-example.stories.mdx b/mock/stories/external-link-example.stories.mdx index c6225d964..99b20409f 100644 --- a/mock/stories/external-link-example.stories.mdx +++ b/mock/stories/external-link-example.stories.mdx @@ -3,12 +3,6 @@ featured: true id: 'external-link-test' name: External Link Test description: Story to test external link -media: - src: ::file ./img-placeholder-6.jpg - alt: Generic placeholder by Unsplash - author: - name: Unsplash - url: https://unsplash.com/ pubDate: 2023-02-09 hideExternalLinkBadge: false taxonomy: