Octicon → StyledOcticon, export, tests

pages/components/docs/StyledOcticon.md

@@ -0,0 +1,29 @@
+
+# StyledOcticon
+
+StyledOcticon renders an Octicon with common system props, including `color`, margin, and padding.
+
+## Default example
+
+```.jsx
+<StyledOcticon icon={Check} size={32} color="green.5" mr={2} />
+<StyledOcticon icon={X} size={32} color="red.5" />
+```
+
+## System props
+
+StyledOcticon components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
+
+## Component props
+
+StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including:
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| ariaLabel | String | | Specifies the `aria-label` attribute, which is read verbatim by screen readers |
+| icon | Octicon | | Octicon component used in the component |
+| size | Number | 16 | Sets the uniform `width` and `height` of the SVG element |
+| verticalAlign | String | `text-bottom` | Sets the `text-align` CSS property |
+
+
+export const meta = {displayName: 'StyledOcticon'}

pages/components/docs/index.js

@@ -18,7 +18,8 @@ export {meta as Link} from './Link.md'
 export {meta as PointerBox} from './PointerBox.md'
 export {meta as Position} from './Position.md'
 export {meta as StateLabel} from './StateLabel.md'
-export {meta as Text} from './Text.md'
+export {meta as StyledOcticon} from './StyledOcticon.md'
 export {meta as TextInput} from './TextInput.md'
+export {meta as Text} from './Text.md'
 export {meta as Tooltip} from './Tooltip.md'
 export {meta as UnderlineNav} from './UnderlineNav.md'

src/Dropdown.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Octicon from './Octicon'
+import StyledOcticon from './StyledOcticon'
 import {TriangleDown} from '@githubprimer/octicons-react'
 import Button from './Button'
 import Box from './Box'
@@ -19,7 +19,7 @@ function Dropdown({title, scheme, children, className, ...rest}) {
           <React.Fragment>
             <Button is="summary" scheme={scheme} grouped onClick={toggle}>
               {title}
-              <Octicon icon={TriangleDown} size={14} ml={title ? 2 : 0} />
+              <StyledOcticon icon={TriangleDown} size={14} ml={title ? 2 : 0} />
             </Button>
             <Box
               bg="white"

src/StateLabel.js

@@ -4,7 +4,7 @@ import styled from 'react-emotion'
 import {GitMerge, GitPullRequest, IssueClosed, IssueOpened} from '@githubprimer/octicons-react'
 import theme, {colors} from './theme'
 import {withSystemProps, COMMON} from './system-props'
-import Octicon from './Octicon'
+import StyledOcticon from './StyledOcticon'
 
 const schemeMap = {
   issueClosed: colors.red[6],
@@ -27,7 +27,7 @@ function StateLabel({className, scheme, small = false, children}) {
   const octiconProps = small ? {width: '1em'} : {}
   return (
     <span className={className}>
-      {scheme && <Octicon mr={1} {...octiconProps} icon={octiconMap[scheme]} />}
+      {scheme && <StyledOcticon mr={1} {...octiconProps} icon={octiconMap[scheme]} />}
       {children}
     </span>
   )

src/Octicon.js → src/StyledOcticon.js

@@ -1,4 +1,6 @@
 import Octicon from '@githubprimer/octicons-react'
 import {withSystemProps, COMMON} from './system-props'
 
-export default withSystemProps(Octicon, COMMON)
+const StyledOcticon = withSystemProps(Octicon, COMMON)
+
+export default StyledOcticon

src/__tests__/StyledOcticon.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import {X} from '@githubprimer/octicons-react'
+import StyledOcticon from '../StyledOcticon'
+import {render} from '../utils/testing'
+import {COMMON} from '../system-props'
+
+describe('StyledOcticon', () => {
+  it('is a system component', () => {
+    expect(StyledOcticon.systemComponent).toEqual(true)
+  })
+
+  it('implements layout system props', () => {
+    expect(StyledOcticon).toImplementSystemProps(COMMON)
+  })
+
+  it('matches the snapshot', () => {
+    expect(render(<StyledOcticon icon={X} />)).toMatchSnapshot()
+  })
+})

src/__tests__/__snapshots__/StyledOcticon.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledOcticon matches the snapshot 1`] = `
+<svg
+  aria-hidden="true"
+  className="emotion-0"
+  height={16}
+  role="img"
+  style={
+    Object {
+      "display": "inline-block",
+      "fill": "currentColor",
+      "userSelect": "none",
+      "verticalAlign": "text-bottom",
+    }
+  }
+  viewBox="0 0 12 16"
+  width={12}
+>
+  <path
+    d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"
+    fillRule="evenodd"
+  />
+</svg>
+`;

src/index.js

@@ -13,40 +13,34 @@ export {default as BaseStyles} from './BaseStyles'
 // Layout
 export {default as BorderBox} from './BorderBox'
 export {default as Box} from './Box'
+export {default as Flex} from './Flex'
 export {Position, Absolute, Fixed, Relative, Sticky} from './Position'
 
 // Components
 export {default as Avatar} from './Avatar'
-
-export {default as Button} from './Button'
+export {default as BranchName} from './BranchName'
 export {default as ButtonDanger} from './ButtonDanger'
-export {default as ButtonPrimary} from './ButtonPrimary'
-export {default as ButtonOutline} from './ButtonOutline'
 export {default as ButtonLink} from './ButtonLink'
-export {default as OcticonButton} from './OcticonButton'
-
+export {default as ButtonOutline} from './ButtonOutline'
+export {default as ButtonPrimary} from './ButtonPrimary'
+export {default as Button} from './Button'
 export {default as Caret} from './Caret'
-export {default as PointerBox} from './PointerBox'
-export {default as CircleOcticon} from './CircleOcticon'
 export {default as CircleBadge} from './CircleBadge'
-
+export {default as CircleOcticon} from './CircleOcticon'
+export {default as CounterLabel} from './CounterLabel'
 export {default as Details} from './Details'
-export {default as Dropdown} from './Dropdown'
-
 export {default as Donut} from './Donut'
+export {default as Dropdown} from './Dropdown'
 export {default as FilterList} from './FilterList'
-export {default as Flex} from './Flex'
-
-export {default as TextInput} from './TextInput'
-
+export {default as Flash} from './Flash'
 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 OcticonButton} from './OcticonButton'
+export {default as PointerBox} from './PointerBox'
+export {default as StateLabel} from './StateLabel'
+export {default as StyledOcticon} from './StyledOcticon'
+export {default as TextInput} from './TextInput'
 export {default as Text} from './Text'
 export {default as Tooltip} from './Tooltip'
-export {default as CounterLabel} from './CounterLabel'
-export {default as Flash} from './Flash'
-export {default as StateLabel} from './StateLabel'
-
 export {default as UnderlineNav} from './UnderlineNav'