fix(docz-core): autolink headings

doczjs · Jun 10, 2018 · 0b8369d · 0b8369d
1 parent eb98beb
commit 0b8369d
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 4 deletions.
diff --git a/examples/basic/src/components/Alert.mdx b/examples/basic/src/components/Alert.mdx
@@ -8,6 +8,8 @@ import Alert from './Alert'
 
 # Alert
 
+## Properties
+
 <PropsTable of={Alert} />
 
 ## Basic usage

diff --git a/examples/basic/src/components/Button.mdx b/examples/basic/src/components/Button.mdx
@@ -17,6 +17,8 @@ Buttons make common actions more obvious and help users more easily perform them
 - The main action of a group set can be a primary button.
 - Select a single button variation and do not mix them.
 
+## Properties
+
 <PropsTable of={Button} />
 
 ## Basic usage

diff --git a/examples/flow/src/components/Alert.mdx b/examples/flow/src/components/Alert.mdx
@@ -8,6 +8,8 @@ import Alert from './Alert'
 
 # Alert
 
+## Properties
+
 <PropsTable of={Alert} />
 
 ## Basic usage
@@ -34,5 +36,6 @@ import Alert from './Alert'
     return (
       <Alert>{message}</Alert>
     )
-  }}
+
+}}
 </Playground>
diff --git a/examples/flow/src/components/Button.mdx b/examples/flow/src/components/Button.mdx
@@ -17,6 +17,8 @@ Buttons make common actions more obvious and help users more easily perform them
 - The main action of a group set can be a primary button.
 - Select a single button variation and do not mix them.
 
+## Properties
+
 <PropsTable of={Button} />
 
 ## Basic usage
@@ -52,4 +54,3 @@ Buttons make common actions more obvious and help users more easily perform them
   <Button kind="dark" outline>Click me</Button>
   <Button kind="gray" outline>Click me</Button>
 </Playground>
-
diff --git a/examples/typescript/src/components/Alert.mdx b/examples/typescript/src/components/Alert.mdx
@@ -8,6 +8,8 @@ import Alert from './Alert.tsx'
 
 # Alert
 
+## Properties
+
 <PropsTable of={Alert} />
 
 ## Basic usage

diff --git a/examples/typescript/src/components/Button.mdx b/examples/typescript/src/components/Button.mdx
@@ -17,6 +17,8 @@ Buttons make common actions more obvious and help users more easily perform them
 - The main action of a group set can be a primary button.
 - Select a single button variation and do not mix them.
 
+## Properties
+
 <PropsTable of={Button} />
 
 ## Basic usage

diff --git a/packages/docz-core/src/bundlers/webpack/loaders.ts b/packages/docz-core/src/bundlers/webpack/loaders.ts
@@ -100,6 +100,22 @@ export const mdx = (config: Config, args: Args) => {
     .options({
       type: 'yaml',
       marker: '-',
+      properties: {
+        'aria-hidden': true,
+      },
+      content: {
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: ['icon-link'],
+        },
+        children: [
+          {
+            type: 'text',
+            value: '#',
+          },
+        ],
+      },
       mdPlugins: mdPlugins.concat([matter, mdastPlugin]),
       hastPlugins: hastPlugins.concat([hastPlugin, slug, headings]),
     })

diff --git a/packages/docz-theme-default/src/components/ui/H2.tsx b/packages/docz-theme-default/src/components/ui/H2.tsx
@@ -1,5 +1,19 @@
 import styled from 'react-emotion'
 
 export const H2 = styled('h2')`
+  position: relative;
   ${p => p.theme.styles.h2};
+
+  .icon-link {
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    left: -25px;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &:hover .icon-link {
+    opacity: 1;
+  }
 `
diff --git a/packages/docz-theme-default/src/styles/base.ts b/packages/docz-theme-default/src/styles/base.ts
@@ -17,6 +17,10 @@ export const base = (config: any) => {
       box-sizing: border-box;
     }
 
+    .icon-link {
+      display: none;
+    }
+
     ::-moz-selection {
       ${selection(config.colors.link)}
     }

diff --git a/packages/docz/src/components/PropsTable.tsx b/packages/docz/src/components/PropsTable.tsx
@@ -89,7 +89,6 @@ export const PropsTable: SFC<PropsTable> = ({ of: component, components }) => {
     return null
   }
 
-  const H2 = components.h2 || 'h2'
   const Table = components.table || 'table'
   const Thead = components.thead || 'thead'
   const Tr = components.tr || 'tr'
@@ -100,7 +99,6 @@ export const PropsTable: SFC<PropsTable> = ({ of: component, components }) => {
 
   return (
     <Fragment>
-      <H2>Properties</H2>
       <Table className="PropsTable">
         <Thead>
           <Tr>