From d256d95bddba149f1ddf4e1639a227ace3ec8a03 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 6 Oct 2020 17:34:35 +0200
Subject: [PATCH] feat(website): add infobox component

---
 website/src/components/InfoBox/index.js       | 26 +++++++++++++++++++
 .../markdown/docs/getting-started/index.md    |  8 +++++-
 website/src/templates/mdx-renderer/DocMdx.js  |  2 ++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 website/src/components/InfoBox/index.js

diff --git a/website/src/components/InfoBox/index.js b/website/src/components/InfoBox/index.js
new file mode 100644
index 00000000..c0b0a9e6
--- /dev/null
+++ b/website/src/components/InfoBox/index.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Box } from 'reflexbox';
+
+const Wrapper = styled(Box)`
+  padding: 16px;
+  background: ${(p) => p.theme.colors.violetLighten45};
+  color: white;
+  border-radius: 5px;
+  margin: 20px 0;
+`;
+
+const Title = styled(Box)`
+  font-size: 20px;
+  margin-bottom: 4px;
+  font-weight: 900;
+`;
+
+export default ({ title = null, text, ...rest }) => {
+  return (
+    <Wrapper {...rest}>
+      <Title>{title}</Title>
+      <div>{text}</div>
+    </Wrapper>
+  );
+};
diff --git a/website/src/markdown/docs/getting-started/index.md b/website/src/markdown/docs/getting-started/index.md
index 7ceb7ac8..d397fdce 100644
--- a/website/src/markdown/docs/getting-started/index.md
+++ b/website/src/markdown/docs/getting-started/index.md
@@ -49,13 +49,19 @@ const elements = [
   { id: 'e2-3', source: '2', target: '3' },
 ];
 
-export default () => <div style={{ height: 300 }}><ReactFlow elements={elements} /></div>;
+export default () => (
+  <div style={{ height: 300 }}>
+    <ReactFlow elements={elements} />
+  </div>
+);
 ```
 
 import Flow from './index';
 
 <Flow />
 
+<InfoBox title="Attention!" text="The dimensions of your React Flow component depend on the parents dimensions."/>
+
 ## Basic Functionality
 
 We don’t do any state updates besides the positions. This means that you need to pass the functions to remove an element or connect nodes by yourself. You can implement your own ones or use the [helper functions](/docs/api/helper-functions/) that come with the library. Here you see an example of how to use the heler functions `removeElements` and `addEdge`.
diff --git a/website/src/templates/mdx-renderer/DocMdx.js b/website/src/templates/mdx-renderer/DocMdx.js
index 3a02c786..2c049acc 100644
--- a/website/src/templates/mdx-renderer/DocMdx.js
+++ b/website/src/templates/mdx-renderer/DocMdx.js
@@ -6,6 +6,7 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 
 import { H1, H2, H3, H4, Text } from 'components/Typo';
 import CodeBlock from 'components/CodeBlock/Mdx';
+import InfoBox from 'components/InfoBox';
 
 import { getThemeSpacePx } from 'utils/css-utils';
 
@@ -123,6 +124,7 @@ const CustomComponents = {
   p: Text,
   pre: (props) => <div {...props} />,
   code: CodeBlock,
+  InfoBox,
 };
 
 const BlogMdx = ({ content = null }) => {