From 86ada87bd9e771dfd8104553d843a58fe2f19f2b Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Sat, 1 Sep 2018 22:13:48 -0300
Subject: [PATCH] feat(docz-theme-default): add blockquote component

---
 packages/docz-theme-default/README.md               |  9 +++++++++
 .../src/components/ui/Blockquote.tsx                | 13 +++++++++++++
 .../docz-theme-default/src/components/ui/index.tsx  |  1 +
 packages/docz-theme-default/src/index.tsx           |  1 +
 packages/docz-theme-default/src/styles/index.ts     |  6 ++++++
 packages/docz-theme-default/src/styles/modes.ts     |  6 ++++++
 6 files changed, 36 insertions(+)
 create mode 100644 packages/docz-theme-default/src/components/ui/Blockquote.tsx

diff --git a/packages/docz-theme-default/README.md b/packages/docz-theme-default/README.md
index 79df617e6..2fa787e22 100644
--- a/packages/docz-theme-default/README.md
+++ b/packages/docz-theme-default/README.md
@@ -105,6 +105,9 @@ const config = {
     codeBg: colors.grayExtraLight,
     codeColor: colors.gray,
     preBg: colors.grayExtraLight,
+    blockquoteBg: colors.grayExtraLight,
+    blockquoteBorder: colors.grayLight,
+    blockquoteColor: colors.gray,
   },
   /**
    * Styles
@@ -173,6 +176,12 @@ const config = {
       fontFamily: '"Source Code Pro", monospace',
       fontSize: 14,
     },
+    blockquote: {
+      margin: '25px 0',
+      padding: '20px',
+      fontStyle: 'italic',
+      fontSize: 18,
+    },
   }
 }
 ```
diff --git a/packages/docz-theme-default/src/components/ui/Blockquote.tsx b/packages/docz-theme-default/src/components/ui/Blockquote.tsx
new file mode 100644
index 000000000..74fa809cd
--- /dev/null
+++ b/packages/docz-theme-default/src/components/ui/Blockquote.tsx
@@ -0,0 +1,13 @@
+import styled from 'react-emotion'
+
+export const Blockquote = styled('blockquote')`
+  background: ${p => p.theme.docz.colors.blockquoteBg};
+  border-left: 5px solid ${p => p.theme.docz.colors.blockquoteBorder};
+  color: ${p => p.theme.docz.colors.blockquoteColor};
+  ${p => p.theme.docz.styles.blockquote};
+
+  & > p {
+    margin: 0;
+    color: ${p => p.theme.docz.colors.blockquoteColor};
+  }
+`
diff --git a/packages/docz-theme-default/src/components/ui/index.tsx b/packages/docz-theme-default/src/components/ui/index.tsx
index e81290634..33aeea413 100644
--- a/packages/docz-theme-default/src/components/ui/index.tsx
+++ b/packages/docz-theme-default/src/components/ui/index.tsx
@@ -4,6 +4,7 @@ export { H3 } from './H3'
 export { H4 } from './H4'
 export { H5 } from './H5'
 export { H6 } from './H6'
+export { Blockquote } from './Blockquote'
 export { InlineCode } from './InlineCode'
 export { Link } from './Link'
 export { List } from './List'
diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
index f9d89fc79..ee946db96 100644
--- a/packages/docz-theme-default/src/index.tsx
+++ b/packages/docz-theme-default/src/index.tsx
@@ -19,6 +19,7 @@ const Theme = () => (
             page: components.Page,
             notFound: components.NotFound,
             render: components.Render,
+            blockquote: components.Blockquote,
             h1: components.H1,
             h2: components.H2,
             h3: components.H3,
diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts
index 59a1fa655..588221f22 100644
--- a/packages/docz-theme-default/src/styles/index.ts
+++ b/packages/docz-theme-default/src/styles/index.ts
@@ -62,4 +62,10 @@ export const styles = {
     fontFamily: '"Source Code Pro", monospace',
     fontSize: 14,
   },
+  blockquote: {
+    margin: '25px 0',
+    padding: '20px',
+    fontStyle: 'italic',
+    fontSize: 18,
+  },
 }
diff --git a/packages/docz-theme-default/src/styles/modes.ts b/packages/docz-theme-default/src/styles/modes.ts
index 371d43445..35a59ebe1 100644
--- a/packages/docz-theme-default/src/styles/modes.ts
+++ b/packages/docz-theme-default/src/styles/modes.ts
@@ -19,6 +19,9 @@ export const light = {
   codeBg: lighten(0.02, colors.grayExtraLight),
   codeColor: colors.gray,
   preBg: colors.grayExtraLight,
+  blockquoteBg: colors.grayExtraLight,
+  blockquoteBorder: colors.grayLight,
+  blockquoteColor: colors.gray,
 }
 
 export const dark = {
@@ -39,4 +42,7 @@ export const dark = {
   codeBg: colors.gray,
   codeColor: colors.grayExtraLight,
   preBg: colors.grayDark,
+  blockquoteBg: colors.grayDark,
+  blockquoteBorder: colors.gray,
+  blockquoteColor: colors.gray,
 }