Merge pull request #49 from primer/branch-name

Creating a BranchName component

Author: jonrohan

examples/index.js

@@ -12,6 +12,7 @@ import {
   ButtonPrimary,
   ButtonOutline,
   ButtonLink,
+  BranchName,
   CounterLabel,
   Heading,
   Label,
@@ -67,6 +68,15 @@ const Index = props => (
       <Example name='Box'>
         <Box p={3} bg='gray.1'> Box </Box>
       </Example>
+      <Example name='BranchName'>
+        <BranchName>a_new_feature_branch</BranchName>
+        <Detail>
+          <Heading tag='h3' fontSize={3} mb={2} mt={3}>Linked BranchName</Heading>
+          <BranchName tag='a' href='/'>a_new_feature_branch</BranchName>
+          <Heading tag='h3' fontSize={3} mb={2} mt={3}>BranchName with Octicon</Heading>
+          <BranchName><Octicon name='git-branch' /> a_new_feature_branch</BranchName>
+        </Detail>
+      </Example>
       <Example name='Button'>
         <Button> Button </Button>
       </Example>

src/BranchName.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const BranchName = ({ children, href, tag }) => {
+
+  const Tag = tag === 'a' ? 'a' : 'span'
+
+  // We don't want someone to use href on a non tag
+  if (tag != 'a') {
+    href = null
+  }
+
+  return <Tag
+    href={href}
+    className='branch-name'>
+    { children }
+  </Tag>
+}
+
+export default BranchName

src/index.js

@@ -17,6 +17,7 @@ export { default as ButtonLink } from './ButtonLink'
 
 export { default as Heading } from './Heading'
 export { default as Label } from './Label'
+export { default as BranchName } from './BranchName'
 export { default as Link } from './Link'
 export { default as Text } from './Text'
 export { default as Tooltip } from './Tooltip'