1
1
mirror of https://github.com/primer/css.git synced 2024-11-28 04:43:05 +03:00
css/docs/MarkdownHeading.js
2019-04-02 22:59:01 -07:00

32 lines
838 B
JavaScript

import React from 'react'
import styled from 'styled-components'
import {StyledOcticon, Heading, Box, Text} from '@primer/components'
import {Link} from '@githubprimer/octicons-react'
import slugify from 'slugify'
const Anchor = ({id}) => (
<a href={`#${id}`}>
<StyledOcticon color="black" icon={Link} />
</a>
)
const StyledHeading = styled(Heading)`
&:hover .anchorWrapper,
&:focus .anchorWrapper {
display: inline-block;
}
`
const MarkdownHeading = ({children, className, ...rest}) => {
const id = slugify(children.toString())
return (
<StyledHeading id={id} className={className} {...rest}>
<Box as={Text} lineHeight={1} className="anchorWrapper" pr={1} ml={'-20px'} display={'none'}>
<Anchor id={id} />
</Box>
{children}
</StyledHeading>
)
}
export default MarkdownHeading