Merge pull request #214 from primer/image-container-component

Create ImageContainer component

.changeset/hungry-scissors-explode.md

@@ -0,0 +1,5 @@
+---
+"@primer/gatsby-theme-doctocat": minor
+---
+
+Add ImageContainer component

docs/content/components/image-container.mdx

@@ -0,0 +1,22 @@
+---
+title: ImageContainer
+status: New
+source: https://github.com/primer/doctocat/blob/master/theme/src/components/image-container.js
+---
+
+Use the `ImageContainer` component to contain images in documentation pages.
+
+## Usage
+
+`ImageContainer` is a [shortcode](https://mdxjs.com/blog/shortcodes), meaning it's globally available in all `.md` and `.mdx` files. So you can use the `ImageContainer` component in any `.md` or `.mdx` file without importing it.
+
+```jsx live
+<ImageContainer>
+  <img
+    width="290"
+    src="https://user-images.githubusercontent.com/4608155/104243682-cc166c00-5415-11eb-889b-9abe9997481a.png"
+    alt="Star and Unstar buttons"
+  />
+</ImageContainer>
+<Caption>Star and Unstar buttons</Caption>
+```

docs/content/usage/using-images.mdx

@@ -16,10 +16,11 @@ import DemoImage from '../images/demo-image.png'
 
 4. Then use that image name as the `src` value in an img tag:
 
-
 ```
-<img src={DemoImage} alt="a description of your image"/>
-````
+<ImageContainer>
+  <img src={DemoImage} alt="a description of your image"/>
+</ImageContainer>
+```
 
 Make sure to use the `alt` attribute to describe your image for assistive technology, or use the [`Caption` component](/components/caption)
 

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -25,6 +25,8 @@
       url: /components/caption
     - title: Do/Don't
       url: /components/do-dont
+    - title: ImageContainer
+      url: /components/image-container
     - title: Note
       url: /components/note
 - title: Contributing

theme/index.js

@@ -11,3 +11,4 @@ export {default as HeroLayout} from './src/components/hero-layout'
 export {default as Sidebar} from './src/components/sidebar'
 export {default as SourceLink} from './src/components/source-link'
 export {default as StatusLabel} from './src/components/status-label'
+export {default as ImageContainer} from './src/components/image-container'

theme/src/components/image-container.js

@@ -0,0 +1,14 @@
+import {BorderBox, Flex} from '@primer/components'
+import React from 'react'
+
+function ImageContainer({children}) {
+  return (
+    <BorderBox p={6} bg="gray.1">
+      <Flex justifyContent="center" sx={{img: {maxWidth: '100%'}}}>
+        {children}
+      </Flex>
+    </BorderBox>
+  )
+}
+
+export default ImageContainer

theme/src/components/wrap-root-element.js

@@ -10,6 +10,7 @@ import {Do, DoDontContainer, Dont} from './do-dont'
 import {H1, H2, H3, H4, H5, H6} from './heading'
 import HorizontalRule from './horizontal-rule'
 import Image from './image'
+import ImageContainer from './image-container'
 import InlineCode from './inline-code'
 import List from './list'
 import Note from './note'
@@ -42,6 +43,7 @@ const components = {
   Dont,
   DoDontContainer,
   Caption,
+  ImageContainer,
 }
 
 function wrapRootElement({element}) {