(#1) Landing on Card component

src/components/card/card.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { landing } from "../../assets/images";
+import { Link } from "../link";
+
+export const Card = ({
+  title,
+  subTitle: _subTitle,
+  children,
+  image,
+  link,
+  directionReverse,
+}) => (
+  <article className={`card ${directionReverse ? "card__toRight" : ""}`}>
+    <div className="card-text">
+      {title && (
+        <h1 className="h1">
+          <Link href={link}>{title}</Link>
+        </h1>
+      )}
+
+      <p className="p card--text__p">{children}</p>
+    </div>
+    {image && <img className="card--img" src={landing[image]} alt="" />}
+  </article>
+);
+
+Card.defaultProps = {
+  title: void 0,
+  subTitle: void 0,
+  image: void 0,
+  link: void 0,
+  directionReverse: false,
+};

src/components/card/index.ts

@@ -0,0 +1 @@
+export { Card } from './card.jsx'

src/components/link/link.tsx

@@ -3,17 +3,21 @@ import React, { useMemo } from "react";
 import { externalIcon } from '../../assets/icons'
 
 import { StyledLink } from './link.styled'
-// import './style.css'
 
 export const Link = (props) => {
-  // const className = 'link' + (props.contrast ? ' link__contrast' : '')
-  
-  const isExternal = useMemo(() => props.href.startsWith('http'), [props.href]);
+  const isExternal = useMemo(() => props.href?.startsWith('http'), [props.href]);
+
+  const linkProps: any = {}
+
+  if (isExternal) {
+    linkProps.target = '_blank'
+    linkProps.rel = 'noopener noreferrer'
+  }
 
   return (
-    <StyledLink contrast={props.contrast} href={props.href}>
+    <StyledLink contrast={props.contrast} href={props.href} {...linkProps}>
       {props.children}
-      {isExternal && <img src={externalIcon} alt="external" />}
+      {isExternal && <img src={externalIcon} alt="external link icon" />}
     </StyledLink>
   );
 };

src/components/link/style.css

@@ -1,10 +0,0 @@
-.link {
-  font-weight: 400;
-  text-decoration: underline;
-  text-decoration-skip-ink: none;
-  color: var(--dark-link);
-}
-
-.link__contrast {
-  color: var(--text-contrast);
-}