primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

improve PackageHeader

Browse Source
This commit is contained in:
Shawn Allen 2018-12-07 11:09:29 -08:00
parent d691c2454c
commit b183d91cbc
1 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
docs/src/PackageHeader.js
View File

@ -4,16 +4,31 @@ import {Comment, Info, FileCode, PrimitiveDot} from '@githubprimer/octicons-reac
import {BorderBox, Box, Flex, Link, StyledOcticon as Octicon, Text} from '@primer/components'
export default function PackageHeader(props) {
const {
description,
'package': pkg,
source,
status,
status_issue: issue,
...rest
} = props
const {description, package: pkg, source = '', status, status_issue: issue, ...rest} = props
const isPrivate = source && source.indexOf('https://github.com/github/github') === 0
const isPackage = pkg && source.indexOf('/modules/') > -1
const isPrivate = source.indexOf('https://github.com/github/github') === 0
let info
if (isPackage && isPrivate) {
info = <Text fontWeight="bold">Not yet part of Primer CSS</Text>
} else if (isPackage) {
info = (
<>
<Text fontWeight="bold" mr={2}>
Package:
</Text>
<Link href={`https://npm.im/${pkg.name}`}>{pkg.name}</Link>
</>
)
} else if (description) {
info = (
<Text color="gray.5">
<Octicon icon={Info} mr={2} />
{description}
</Text>
)
}
return (
<Flex justifyContent="space-between" mb={4} {...rest}>
@ -24,27 +39,19 @@ export default function PackageHeader(props) {
{status}
</BorderBox>
) : null}
<Text fontSize={1}>
{isPrivate ? (
<Text fontWeight="bold">
Not yet part of Primer CSS
</Text>
) : pkg ? (
<>
<Text fontWeight="bold" mr={2}>Package:</Text>
<Link href={`https://npm.im/${pkg.name}`}>{pkg.name}</Link>
</>
) : (
<Text color="gray.5">
<Octicon icon={Info} mr={2} />
{description}
</Text>
)}
</Text>
<Text fontSize={1}>{info}</Text>
</Box>
<Box>
{issue ? <Link href={issue} ml={2}><Octicon icon={Comment} /></Link> : null}
{source ? <Link href={source} ml={2}><Octicon icon={FileCode} /></Link> : null}
{issue ? (
<Link href={issue} ml={2}>
<Octicon icon={Comment} />
</Link>
) : null}
{source ? (
<Link href={source} ml={2}>
<Octicon icon={FileCode} />
</Link>
) : null}
</Box>
</Flex>
)
@ -59,10 +66,12 @@ PackageHeader.propTypes = {
}
function getStatusColor(status) {
return {
'stable': 'green.6',
'new release': 'yellow.7',
'deprecated': 'red.7',
'experimental': 'orange.5'
}[status.toLowerCase()] || 'gray.5'
return (
{
stable: 'green.6',
'new release': 'yellow.7',
deprecated: 'red.7',
experimental: 'orange.5'
}[status.toLowerCase()] || 'gray.5'
)
}