feat(components): ✨ add file download card component

BREAKING CHANGE: Release 1.0.0

content/editing/rich_content.md

@@ -15,7 +15,8 @@ Available components:
 - highlights
 - badges
 - cards
-- link cards
+- link, cards
+- file download cards
 - image cards
 - graphs and diagrams
 - code snippets / code highlighting
@@ -24,7 +25,6 @@ Available components:
   Codesandbox, Pinterest, Spotify, Twitch, Twitter, Youtube
 
 Components which are planned:
-- file download card
 - tabs
 - math formulas
 - embedded code snippets from public repositories on Github, Gitlab, Bitbucket

content/editing/rich_content/custom_components.md

@@ -214,6 +214,21 @@ stand out from the text.
 
 <LinkCard title="This is the best page!" url="/editing/rich_content/custom_components" />
 
+## File Download Card
+
+Download card can be used to distinguish a download file link and make it
+stand out from the text. 
+
+**Syntax**
+
+```html
+<DownloadCard title="Download this awesome PDF!" url="/assets/example.pdf" />
+```
+
+**Example**
+
+<DownloadCard title="Download this awesome PDF!" url="/assets/example.pdf" />
+
 ## Image Card
 
 Image card can be used to distinguish an image 

src/components/MdxComponents/fileDownloadCard.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from 'emotion-theming';
+import { Download } from 'react-feather';
+import emoji from '../../utils/emoji';
+import { decreaseIntensivity } from '../../utils/colors';
+import Card from './card';
+
+const DownloadCard = styled(Card)`
+  cursor: pointer;
+  flex-direction: row;
+  align-items: center;
+  &:hover {
+    border: 1px solid ${(props) => props.theme.colors.primary};
+  }
+`;
+
+const DownloadPath = styled.div`
+  color: ${(props) => decreaseIntensivity(props.theme.colors.fontLight, 0.25)};
+  font-size: 9pt;
+  padding-left: 16px;
+  text-align: right;
+`;
+
+const Title = styled.div`
+  padding: 0 14px;
+  color: ${(props) => props.theme.colors.primary};
+  font-size: 12pt;
+  font-weight: 500;
+  flex: 1;
+`;
+
+export default ({ title, url }) => {
+  const theme = useTheme();
+  const splitted = url.split('/')
+  const filename = splitted[splitted.length - 1]
+  return (
+    <a href={url} download>
+      <DownloadCard title={`Download file ${filename}`}>
+        <Download color={theme.colors.primary} size={23} />
+        <Title>{emoji.emojify(title)}</Title>
+        <DownloadPath>{filename}</DownloadPath>
+      </DownloadCard>
+    </a>
+  );
+};

src/components/MdxComponents/index.js

@@ -5,6 +5,7 @@ import AnchorTag from './anchor';
 import Badge from './badge';
 import Card from './card';
 import CodeBlock from './codeBlock';
+import DownloadCard from './fileDownloadCard';
 import Highlights from './highlights';
 import Icon from './icon';
 import ImageCard from './imageCard';
@@ -87,5 +88,6 @@ export default {
   Card,
   LinkCard,
   ImageCard,
+  DownloadCard,
   ...Highlights,
 };