13.04 components + maps

src/components/link/index.ts

@@ -0,0 +1 @@
+export { Link } from './link'

src/components/link/link.styled.ts

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled"
+import { css } from '@emotion/react'
+
+export const StyledLink = styled.a`
+  font-weight: 400;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  color: ${(props: any) => props.contrast ? 'var(--text-contrast)' : 'var(--dark-link)'};
+
+  ${props => {
+    if (props.contrast) {
+     return css`
+       &:hover {
+         color: var(--dark-link);
+       }
+     `
+   }
+  }}
+`;

src/components/link/link.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+// import './style.css'
+import { StyledLink } from './link.styled'
+
+export const Link = (props) => {
+  // const className = 'link' + (props.contrast ? ' link__contrast' : '')
+  return (
+    <StyledLink contrast={props.contrast} href={props.href}>
+      {props.children}
+    </StyledLink>
+  );
+};

src/components/link/style.css

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