Merge pull request #97 from primer/upgrade-components

Upgrade Primer Components

Author: Emily

theme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -21,7 +21,7 @@
     "@babel/preset-react": "^7.0.0",
     "@mdx-js/mdx": "^1.0.21",
     "@mdx-js/react": "^1.0.21",
-    "@primer/components": "^13.3.1",
+    "@primer/components": "^15.1.0",
     "@primer/octicons-react": "^9.1.1",
     "@styled-system/theme-get": "^5.0.12",
     "@testing-library/jest-dom": "^4.1.0",

theme/src/components/blockquote.js

@@ -2,8 +2,8 @@ import styled from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 
 const Blockquote = styled.blockquote`
-  margin: 0 0 ${themeGet('space.3')}px;
-  padding: 0 ${themeGet('space.3')}px;
+  margin: 0 0 ${themeGet('space.3')};
+  padding: 0 ${themeGet('space.3')};
   color: ${themeGet('colors.gray.5')};
   border-left: 0.25em solid ${themeGet('colors.gray.2')};
 

theme/src/components/dark-text-input.js

@@ -6,7 +6,7 @@ const DarkTextInput = styled(TextInput)`
    * Otherwise, iOS browsers will zoom in when the input is focused.
    * TODO: Update font-size of TextInput in @primer/components.
    */
-  font-size: ${themeGet('fontSizes.2')}px !important;
+  font-size: ${themeGet('fontSizes.2')} !important;
   color: ${themeGet('colors.white')};
   background-color: rgba(255, 255, 255, 0.07);
   border: 1px solid transparent;

theme/src/components/description-list.js

@@ -6,15 +6,15 @@ const DescriptionList = styled.dl`
 
   dt {
     padding: 0;
-    margin-top: ${themeGet('space.3')}px;
+    margin-top: ${themeGet('space.3')};
     font-size: 1em;
     font-style: italic;
     font-weight: ${themeGet('fontWeights.bold')};
   }
 
   dd {
-    padding: 0 ${themeGet('space.3')}px;
-    margin: 0 0 ${themeGet('space.3')}px;
+    padding: 0 ${themeGet('space.3')};
+    margin: 0 0 ${themeGet('space.3')};
   }
 `
 

theme/src/components/heading.js

@@ -7,8 +7,8 @@ import textContent from 'react-addons-text-content'
 import styled from 'styled-components'
 
 const StyledHeading = styled(Heading)`
-  margin-top: ${themeGet('space.4')}px;
-  margin-bottom: ${themeGet('space.3')}px;
+  margin-top: ${themeGet('space.4')};
+  margin-bottom: ${themeGet('space.3')};
 
   & .octicon-link {
     visibility: hidden;
@@ -46,31 +46,31 @@ function MarkdownHeading({children, ...props}) {
 }
 
 const StyledH1 = styled(StyledHeading).attrs({as: 'h1'})`
-  padding-bottom: ${themeGet('space.1')}px;
-  font-size: ${themeGet('fontSizes.5')}px;
+  padding-bottom: ${themeGet('space.1')};
+  font-size: ${themeGet('fontSizes.5')};
   border-bottom: 1px solid ${themeGet('colors.gray.2')};
 `
 
 const StyledH2 = styled(StyledHeading).attrs({as: 'h2'})`
-  padding-bottom: ${themeGet('space.1')}px;
-  font-size: ${themeGet('fontSizes.4')}px;
+  padding-bottom: ${themeGet('space.1')};
+  font-size: ${themeGet('fontSizes.4')};
   border-bottom: 1px solid ${themeGet('colors.gray.2')};
 `
 
 const StyledH3 = styled(StyledHeading).attrs({as: 'h3'})`
-  font-size: ${themeGet('fontSizes.3')}px;
+  font-size: ${themeGet('fontSizes.3')};
 `
 
 const StyledH4 = styled(StyledHeading).attrs({as: 'h4'})`
-  font-size: ${themeGet('fontSizes.2')}px;
+  font-size: ${themeGet('fontSizes.2')};
 `
 
 const StyledH5 = styled(StyledHeading).attrs({as: 'h5'})`
-  font-size: ${themeGet('fontSizes.1')}px;
+  font-size: ${themeGet('fontSizes.1')};
 `
 
 const StyledH6 = styled(StyledHeading).attrs({as: 'h6'})`
-  font-size: ${themeGet('fontSizes.1')}px;
+  font-size: ${themeGet('fontSizes.1')};
   color: ${themeGet('colors.gray.5')};
 `
 

theme/src/components/horizontal-rule.js

@@ -2,9 +2,9 @@ import styled from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 
 const HorizontalRule = styled.hr`
-  height: ${themeGet('space.1')}px;
+  height: ${themeGet('space.1')};
   padding: 0;
-  margin: ${themeGet('space.4')}px 0;
+  margin: ${themeGet('space.4')} 0;
   background-color: ${themeGet('colors.gray.2')};
   border: 0;
 `

theme/src/components/inline-code.js

@@ -6,7 +6,7 @@ const InlineCode = styled.code`
   font-family: ${themeGet('fonts.mono')};
   font-size: 85%;
   background-color: ${themeGet('colors.gray.1')};
-  border-radius: ${themeGet('radii.1')}px;
+  border-radius: ${themeGet('radii.1')};
 `
 
 export default InlineCode

theme/src/components/list.js

@@ -15,11 +15,11 @@ const List = styled.ul`
   }
 
   li > p {
-    margin-top: ${themeGet('space.3')}px;
+    margin-top: ${themeGet('space.3')};
   }
 
   li + li {
-    margin-top: ${themeGet('space.1')}px;
+    margin-top: ${themeGet('space.1')};
   }
 `
 

theme/src/components/nav-dropdown.js

@@ -38,7 +38,7 @@ function NavDropdown({title, children}) {
 
 export const NavDropdownItem = styled.a`
   display: block;
-  padding: ${themeGet('space.2')}px ${themeGet('space.3')}px;
+  padding: ${themeGet('space.2')} ${themeGet('space.3')};
   color: inherit;
   text-decoration: none;
 

theme/src/components/paragraph.js

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import themeGet from '@styled-system/theme-get'
 
 const Paragraph = styled.p`
-  margin: 0 0 ${themeGet('space.3')}px;
+  margin: 0 0 ${themeGet('space.3')};
 `
 
 export default Paragraph