feat(components): ✨ created link card component

content/editing/rich_content/custom_components.md

@@ -164,6 +164,21 @@ Some _tip_ text
 <Info>Some **info** text</Info>
 <Error>Some _warning/error_ text</Error>
 
+## Link Card
+
+Link card can be used to distinguish a link and make it
+stand out from the text. 
+
+**Syntax**
+
+```html
+<LinkCard title="This is the best page!" url="/editing/rich_content/custom_components" />
+```
+
+**Example**
+
+<LinkCard title="This is the best page!" url="/editing/rich_content/custom_components" />
+
 ## Badges
 
 **Syntax**

src/components/MdxComponents/index.js

@@ -8,6 +8,7 @@ import Highlights from './highlights';
 import Icon from './icon';
 import Jargon from './jargon';
 import Layout from './layout';
+import LinkCard from './linkCard';
 import { blockquote, pre, table, list } from '../../styles';
 import { useTheme } from 'emotion-theming';
 import emoji from '../../utils/emoji';
@@ -73,5 +74,6 @@ export default {
   Layout,
   Icon,
   Collapsible,
+  LinkCard,
   ...Highlights,
 };

src/components/MdxComponents/linkCard.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from 'emotion-theming';
+import { ArrowRight } from 'react-feather';
+import emoji from '../../utils/emoji';
+import Link from '../Link';
+import { shadowAround } from '../../styles';
+import { decreaseIntensivity } from '../../utils/colors';
+
+const BigLinkWrapper = styled.div`
+display: flex;
+cursor: pointer;
+width: 100%;
+padding: 16px;
+margin: 10px 0;
+border-radius: 4px;
+border: 1px solid transparent;
+align-items: center;
+transition: ${(props) => props.theme.transitions.hover};
+&:hover {
+  border: 1px solid ${(props) => props.theme.colors.primary};
+}
+`;
+
+const LinkPath = styled.div`
+color: ${(props) => decreaseIntensivity(props.theme.colors.fontLight, 0.25)};
+font-size: 9pt;
+padding-left: 16px;
+`;
+
+const Title = styled.div`
+flex: 1 0;
+padding: 0 14px;
+color: ${(props) => props.theme.colors.primary};
+font-size: 12pt;
+font-weight: 500;
+`;
+
+export default ({ title, url }) => {
+    const theme = useTheme();
+    const path = url.replace(/(https:\/\/)|(http:\/\/)/, "");
+    return (
+      <Link to={url}>
+        <BigLinkWrapper css={shadowAround}>
+          <ArrowRight color={theme.colors.primary} size={23} />
+          <Title>{emoji.emojify(title)}</Title>
+          <LinkPath>{path}</LinkPath>
+        </BigLinkWrapper>
+      </Link>
+    );
+};

src/styles/index.js

@@ -32,7 +32,7 @@ export const transparent = css`
 `;
 
 export const shadowAround = (theme) => css`
-  box-shadow: 0 0 4px 0 ${theme.colors.shadow};
+  box-shadow: 0 0 6px 0 ${theme.colors.shadow};
 `;
 
 export const blockquote = (theme) => css`

src/theme/base.js

@@ -1,29 +1,13 @@
 import defaultColors from './defaultColors';
 import colorfn from 'color';
-
-const increaseIntensivity = (color, factor) => {
-  const clr = colorfn(color);
-  const intensified = clr.isDark() ? clr.darken(factor) : clr.lighten(factor);
-  return intensified.hex();
-};
-
-const decreaseIntensivity = (color, factor) => {
-  const clr = colorfn(color);
-  const luminStd = 1 / clr.luminosity();
-  const fc = luminStd > 6 ? factor * 6 : factor * luminStd;
-  const intensified = clr.isDark() ? clr.lighten(fc) : clr.darken(fc);
-  return intensified.hex();
-};
-
-const grayscaleCompatible = (color) => {
-  return increaseIntensivity(colorfn(color).negate().grayscale().hex(), 0.7);
-};
+import { increaseIntensivity, decreaseIntensivity, grayscaleCompatible } from '../utils/colors';
 
 const colors = {
   ...defaultColors,
 
   primary: defaultColors.red,
   primaryDark: defaultColors.blueDark,
+  fontLight: '#efefef',
   font: '#dddddd',
   fontDark: '#8a8a8a',
   background: '#29282A',

src/utils/colors.js

@@ -0,0 +1,19 @@
+import colorfn from 'color';
+
+export const increaseIntensivity = (color, factor) => {
+  const clr = colorfn(color);
+  const intensified = clr.isDark() ? clr.darken(factor) : clr.lighten(factor);
+  return intensified.hex();
+};
+
+export const decreaseIntensivity = (color, factor) => {
+  const clr = colorfn(color);
+  const luminStd = 1 / clr.luminosity();
+  const fc = luminStd > 6 ? factor * 6 : factor * luminStd;
+  const intensified = clr.isDark() ? clr.lighten(fc) : clr.darken(fc);
+  return intensified.hex();
+};
+
+export const grayscaleCompatible = (color) => {
+  return increaseIntensivity(colorfn(color).negate().grayscale().hex(), 0.7);
+};