replace description with children and make it required in RelatedPage

src/components/related-page/__tests__/__snapshots__/related-page.test.js.snap

@@ -127,6 +127,83 @@ exports[`related-page example renders as expected 1`] = `
 </a>
 `;
 
+exports[`related-page fallback with children renders as expected 1`] = `
+<a
+  className="unprose block cursor-pointer color-gray color-gray-dark-on-hover transition mb18"
+  href="https://docs.mapbox.com/"
+>
+  <div
+    className="round flex-parent flex-parent--stretch-cross border border--gray-light border--gray-dark-on-hover border--2 transition"
+  >
+    <div
+      className="flex-child flex-child--grow px18 pt30 pb18"
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <div
+        className="flex-parent flex-parent--row"
+      >
+        <div
+          className="flex-child"
+        >
+          <div
+            className="txt-fancy txt-uppercase txt-s txt-spacing1 mt-neg12 mb6 color-gray-dark"
+            style={
+              Object {
+                "color": undefined,
+              }
+            }
+          >
+            related
+          </div>
+          <div
+            className="color-gray-dark color-black-on-hover transition"
+          >
+            <div
+              className="txt-bold"
+            >
+              See all documentation
+            </div>
+            <p>
+              Browse all Mapbox documentation.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="flex-child flex-child--no-shrink w30 flex-parent flex-parent--center-cross border-l"
+      style={
+        Object {
+          "borderColor": "inherit",
+          "borderLeftWidth": "2px",
+        }
+      }
+    >
+      <svg
+        className="events-none icon"
+        focusable="false"
+        role="presentation"
+        style={
+          Object {
+            "height": 30,
+            "width": 30,
+          }
+        }
+      >
+        <use
+          xlinkHref="#icon-chevron-right"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+        />
+      </svg>
+    </div>
+  </div>
+</a>
+`;
+
 exports[`related-page glossary renders as expected 1`] = `
 <a
   className="unprose block cursor-pointer color-orange color-orange-dark-on-hover transition mb18"

src/components/related-page/__tests__/related-page-test-cases.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import RelatedPage from '../related-page';
 
 const testCases = {};
@@ -8,7 +9,7 @@ testCases.tutorial = {
   props: {
     contentType: 'tutorial',
     title: 'First steps with the Mapbox Maps SDK for Android',
-    description:
+    children:
       'Walk through installing the Mapbox Maps SDK for Android, getting a map on the screen, and changing the map style.',
     url: 'https://docs.mapbox.com/help/tutorials/first-steps-android-sdk/'
   }
@@ -20,7 +21,7 @@ testCases.troubleshooting = {
   props: {
     contentType: 'troubleshooting',
     title: 'Collaboration best practices',
-    description:
+    children:
       'Learn best practices for setting up an account and collaborating on projects.',
     url:
       'https://docs.mapbox.com/help/troubleshooting/collaboration-best-practices/'
@@ -33,7 +34,7 @@ testCases.guide = {
   props: {
     contentType: 'guide',
     title: 'Access tokens',
-    description:
+    children:
       'Learn how access tokens work and how to create and manage your access tokens.',
     url:
       'https://docs.mapbox.com/help/troubleshooting/collaboration-best-practices/'
@@ -46,7 +47,7 @@ testCases.glossary = {
   props: {
     contentType: 'glossary',
     title: 'zoom level',
-    description: 'A zoom level determines how much of a map is visible.',
+    children: 'A zoom level determines how much of a map is visible.',
     url: 'https://docs.mapbox.com/help/glossary/zoom-level/'
   }
 };
@@ -57,7 +58,7 @@ testCases.example = {
   props: {
     contentType: 'example',
     title: 'Add a vector tile source',
-    description: 'Add a vector source to a map and display it as a layer.',
+    children: 'Add a vector source to a map and display it as a layer.',
     url:
       'https://docs.mapbox.com/android/maps/examples/add-a-vector-tile-source/'
   }
@@ -69,7 +70,7 @@ testCases.video = {
   props: {
     contentType: 'video',
     title: 'How to eject a Style Component in Mapbox Studio',
-    description:
+    children:
       'Style Components provide sensible defaults and quick opportunities for customization by optimizing the most common property changes for styles and packaging them into simple drop-down options, sliders, and toggles.',
     vimeoId: '378704089',
     vimeoThumbnail: 'assets/vimeo_thumb.jpg'
@@ -82,7 +83,7 @@ testCases.videoNoImage = {
   props: {
     contentType: 'video',
     title: 'How to eject a Style Component in Mapbox Studio',
-    description:
+    children:
       'Style Components provide sensible defaults and quick opportunities for customization by optimizing the most common property changes for styles and packaging them into simple drop-down options, sliders, and toggles.',
     vimeoId: '378704089'
   }
@@ -94,19 +95,28 @@ testCases.videoNoVimeo = {
   props: {
     contentType: 'video',
     title: 'How to eject a Style Component in Mapbox Studio',
-    description:
+    children:
       'Style Components provide sensible defaults and quick opportunities for customization by optimizing the most common property changes for styles and packaging them into simple drop-down options, sliders, and toggles.',
     url:
       'https://docs.mapbox.com/android/maps/examples/add-a-vector-tile-source/'
   }
 };
 
+testCases.children = {
+  description: 'fallback with children',
+  element: (
+    <RelatedPage title="See all documentation" url="https://docs.mapbox.com/">
+      <p>Browse all Mapbox documentation.</p>
+    </RelatedPage>
+  )
+};
+
 testCases.fallback = {
   component: RelatedPage,
   description: 'fallback',
   props: {
     title: 'See all documentation',
-    description: 'Browse all Mapbox documentation.',
+    children: 'Browse all Mapbox documentation.',
     url: 'https://docs.mapbox.com/'
   }
 };

src/components/related-page/__tests__/related-page.test.js

@@ -89,6 +89,21 @@ describe('related-page', () => {
     });
   });
 
+  describe(testCases.children.description, () => {
+    let testCase;
+    let wrapper;
+    let tree;
+
+    beforeEach(() => {
+      testCase = testCases.children;
+      wrapper = renderer.create(testCase.element);
+      tree = wrapper.toJSON();
+    });
+    test('renders as expected', () => {
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
   describe(testCases.video.description, () => {
     let testCase;
     let wrapper;

src/components/related-page/related-page.js

@@ -136,7 +136,7 @@ class RelatedPage extends React.Component {
                   </div>
                   <div className="color-gray-dark color-black-on-hover transition">
                     <div className="txt-bold">{props.title}</div>
-                    {props.description && props.description}
+                    {props.children}
                   </div>
                 </div>
               </div>
@@ -175,7 +175,7 @@ RelatedPage.propTypes = {
   // Required. Title of the related page in the context of the current page.
   title: PropTypes.string.isRequired,
   // Required. Description of the related page in the context of the current page.
-  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
   // Required if `vimeoId` is not set. The link to the related page.
   url: (props, propName, componentName) => {
     if (props[propName] && typeof props[propName] !== 'string') {