changed caption to paragraph and added a CaptionWithLink Component

Tiko · Tiko · commit aa974a75fd66 · 2020-12-24T11:54:41.000+01:00
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import theme from '../styles/theme';
 import { QuoteProps } from './Typography.types';
 
@@ -35,14 +35,21 @@ export const Subtitle = styled.p`
     margin-bottom: 0.5em;
 `;
 
-export const Caption = styled.a`
+const captionStyle = css`
     font-size: ${caption.size};
     line-height: ${caption.height};
     letter-spacing: ${caption.spacing};
     font-family: ${caption.font};
     font-weight: ${caption.weight};
     color: ${caption.color};
 `;
+export const CaptionWithLink = styled.a`
+    ${captionStyle}
+`;
+
+export const Caption = styled.p`
+    ${captionStyle}
+`;
 
 export const Quote: React.FC<QuoteProps> = ({ author, url, children }) => {
     return (
diff --git a/src/containers/TeamMember/TeamMember.tsx b/src/containers/TeamMember/TeamMember.tsx
@@ -6,6 +6,7 @@ import {
     TeamMemberPhoto,
     TeamMemberWrapper,
 } from './TeamMember.components';
+import { Caption } from '../../components/Typography';
 
 const getAltText = (name: string, alt?: string) => {
     if (alt) {
@@ -48,7 +49,7 @@ const TeamMember: React.FC<TeamMemberProps> = ({
                     <img src={img} alt={getAltText(name, alt)} />
                 </TeamMemberPhoto>
                 <TeamMemberName>{name}</TeamMemberName>
-                <p className="caption">{title}</p>
+                <Caption>{title}</Caption>
                 <AllSocials
                     link={link}
                     email={email}
diff --git a/src/containers/Thumbnails/PostThumbnail.tsx b/src/containers/Thumbnails/PostThumbnail.tsx
@@ -5,7 +5,7 @@ import {
     ThumbnailContent,
     ThumbnailImg,
 } from './PostThumbnail.components';
-import { Caption } from '../../components/Typography';
+import { CaptionWithLink } from '../../components/Typography';
 
 const cutOffText = (string: string, maxLength: number) => {
     if (string.length > maxLength) {
@@ -35,7 +35,7 @@ const PostThumbnail: React.FC<PostThumbnailProps> = ({
             <ThumbnailContent big={big}>
                 <StyledSubtitle>{category}</StyledSubtitle>
                 <h5>{cutOffText(title, 80)}</h5>
-                <Caption href={slug}>Lees meer</Caption>
+                <CaptionWithLink href={slug}>Lees meer</CaptionWithLink>
             </ThumbnailContent>
         </ThumbnailBase>
     );
