feat(docz-theme-default): add style for hr component

doczjs · Nov 1, 2018 · 5b24400 · 5b24400
1 parent 0ccda92
commit 5b24400
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/packages/docz-theme-default/src/components/ui/Hr.tsx b/packages/docz-theme-default/src/components/ui/Hr.tsx
@@ -0,0 +1,12 @@
+import styled from 'react-emotion'
+import { get } from '@utils/theme'
+
+export const Hr = styled('hr')`
+  border: none;
+  border-top: 1px dashed ${get('colors.border')};
+
+  ${p =>
+    p.theme.docz.mq({
+      margin: ['30px 0', '50px 0'],
+    })};
+`
diff --git 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 { Hr } from './Hr'
 export { Blockquote } from './Blockquote'
 export { InlineCode } from './InlineCode'
 export { Link } from './Link'

diff --git a/packages/docz-theme-default/src/index.tsx b/packages/docz-theme-default/src/index.tsx
@@ -33,6 +33,7 @@ const Theme = () => (
             h4: components.H4,
             h5: components.H5,
             h6: components.H6,
+            hr: components.Hr,
             ul: components.List,
             p: components.Paragraph,
             a: components.Link,