How to use @primer/components - 10 common examples
To help you get started, we’ve selected a few @primer/components examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
primer / doctocat / theme / src / components / nav-subitem.js View on Github 
import {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight, fontSize} from 'styled-system'
const NavSubitem = styled.a`
display: block;
font-size: ${themeGet('fontSizes.1')}px;
padding: ${themeGet('space.2')}px ${themeGet('space.4')}px;
color: inherit;
cursor: pointer;
text-decoration: none;
// color: ${themeGet('colors.blue.5')};
&:hover {
background-color: ${themeGet('colors.gray.1')};
}
&.active {
color: ${themeGet('colors.blue.5')};
// box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
}
${space};
${fontWeight};
${fontSize};
`
export default NavSubitem// This code needs to run at build-time so it can access the file system.
const repositoryUrl = preval`
const readPkgUp = require('read-pkg-up')
const getPkgRepo = require('get-pkg-repo')
try {
const repo = getPkgRepo(readPkgUp.sync().package)
module.exports = \`https://github.com/\${repo.user}/\${repo.project}\`
} catch (error) {
module.exports = ''
}
`
const NavLink = styled(Link)`
&.active {
font-weight: ${themeGet('fontWeights.bold')};
color: ${themeGet('colors.gray.8')};
}
`
function NavItems({items}) {
return (
<>
{items.map(item => (import {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight, fontSize} from 'styled-system'
const NavSubitem = styled.a`
display: block;
font-size: ${themeGet('fontSizes.1')}px;
padding: ${themeGet('space.2')}px ${themeGet('space.4')}px;
color: inherit;
cursor: pointer;
text-decoration: none;
// color: ${themeGet('colors.blue.5')};
&:hover {
background-color: ${themeGet('colors.gray.1')};
}
&.active {
color: ${themeGet('colors.blue.5')};
// box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
}
${space};
${fontWeight};
${fontSize};
`
export default NavSubitem// Extends Link from primer/components to make color primitives available. Ideally I'd use defaultProps here but because we use !important on utilities the theme colors won't override. We could probably add a function to handle this.
import {Link, themeGet} from '@primer/components'
import {display} from 'styled-system'
import styled from 'styled-components'
const LinkDark = styled(Link)`
color: ${themeGet('colors.black')} !important;
${display};
&:hover {
color: ${themeGet('colors.gray.8')};
}
`
export default LinkDarkimport {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight, fontSize} from 'styled-system'
const NavSubitem = styled.a`
display: block;
font-size: ${themeGet('fontSizes.1')}px;
padding: ${themeGet('space.2')}px ${themeGet('space.4')}px;
color: inherit;
cursor: pointer;
text-decoration: none;
// color: ${themeGet('colors.blue.5')};
&:hover {
background-color: ${themeGet('colors.gray.1')};
}
&.active {
color: ${themeGet('colors.blue.5')};
// box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
}
${space};
${fontWeight};import {Box, Heading} from '@primer/components'
import '@primer/css/layout/index.scss'
import {Head, Header} from '@primer/gatsby-theme-doctocat'
import React from 'react'
// FIXME: this works around known issues with Heading's default prop {m: 0}
Object.assign(Heading.defaultProps, {
m: null,
mt: 0,
mb: 0
})
export default function Layout({pageContext, children}) {
return (
<>
<header>
{children}
)
}</header>render() {
// strip the trailing slash
const pathname = this.props.router.pathname.replace(/\/$/, '')
const {Component, initialProps} = this.props
const page = pageMap.get(pathname) || {}
const {meta = {}, requirePath} = page
const Hero = requirePath ? requirePage(requirePath).Hero : null
return (
<title>Primer Presentation{meta.title ? ` / ${meta.title}` : null}</title>
<header title="Primer">
</header>import {themeGet} from '@primer/components'
import styled from 'styled-components'
import {space, fontWeight} from 'styled-system'
const NavItem = styled.a`
display: block;
padding-top: ${themeGet('space.2')}px;
padding-bottom: ${themeGet('space.2')}px;
padding-left: calc(${props => props.depth * 16}px + ${themeGet('space.4')}px);
padding-right: ${themeGet('space.4')}px;
color: inherit;
cursor: pointer;
text-decoration: none;
&:hover {
background-color: ${themeGet('colors.gray.2')};
}
&.active {
color: ${themeGet('colors.blue.5')};
box-shadow: inset 3px 0 ${themeGet('colors.blue.5')};
}
${space};
${fontWeight};const A = styled(Box)`
position: relative;
display: inline-block;
clip-path: url("#clip-${props => props.shape}");
&:after {
content: '';
transition: opacity 0.8s ease;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at top left, ${themeGet('colors.blue.4')}, transparent),
radial-gradient(ellipse at bottom right, ${themeGet('colors.orange.4')}, transparent),
linear-gradient(to right, ${themeGet('colors.orange.5')} 50%, transparent),
linear-gradient(to left, ${themeGet('colors.blue.6')} 50%, transparent);
mix-blend-mode: multiply;
opacity: 0;
}
&:hover:after {
opacity: 1;
}
`
const ShapeOutline = styled(Link)`
padding: 2px;
position: relative;
background: transparent !important;
display: block;
&:before {
content: '';
clip-path: url("#clip-${props => props.shape}");`
const A = styled(Box)`
position: relative;
display: inline-block;
clip-path: url("#clip-${props => props.shape}");
&:after {
content: '';
transition: opacity 0.8s ease;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at top left, ${themeGet('colors.blue.4')}, transparent),
radial-gradient(ellipse at bottom right, ${themeGet('colors.orange.4')}, transparent),
linear-gradient(to right, ${themeGet('colors.orange.5')} 50%, transparent),
linear-gradient(to left, ${themeGet('colors.blue.6')} 50%, transparent);
mix-blend-mode: multiply;
opacity: 0;
}
&:hover:after {
opacity: 1;
}
`
const ShapeOutline = styled(Link)`
padding: 2px;
position: relative;
background: transparent !important;
display: block;
&:before {
