From 29c0b3c7b1aef6025ccfa69527618c21ded6a708 Mon Sep 17 00:00:00 2001
From: Joe D'Arcangelo <joedarc@gmail.com>
Date: Wed, 2 Oct 2019 11:10:58 -0400
Subject: [PATCH] Render example sections (#158)

---
 client/src/document.js             | 6 ++++--
 client/src/ingredients/examples.js | 8 ++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/document.js b/client/src/document.js
index 1f936516c5a1..fb9a8c8309d1 100644
--- a/client/src/document.js
+++ b/client/src/document.js
@@ -4,7 +4,7 @@ import { Link } from "@reach/router";
 import { NoMatch } from "./routing";
 import { InteractiveExample } from "./ingredients/interactive-example";
 import { Attributes } from "./ingredients/attributes";
-import { Examples } from "./ingredients/examples";
+import { Example, Examples } from "./ingredients/examples";
 import { BrowserCompatibilityTable } from "./ingredients/browser-compatibility-table";
 
 export class Document extends React.Component {
@@ -149,7 +149,7 @@ function RenderDocumentBody({ doc }) {
     if (section.type === "prose") {
       // Only exceptional few should use the <Prose/> component,
       // as opposed to <ProseWithHeading/>.
-      if (PROSE_NO_HEADING.includes(section.value.id)) {
+      if (!section.value.id || PROSE_NO_HEADING.includes(section.value.id)) {
         return <Prose key={section.value.id} section={section.value} />;
       } else {
         return (
@@ -180,6 +180,8 @@ function RenderDocumentBody({ doc }) {
       );
     } else if (section.type === "examples") {
       return <Examples key={`examples${i}`} examples={section.value} />;
+    } else if (section.type === "example") {
+      return <Example key={`example${i}`} example={section.value} />;
     } else if (section.type === "info_box") {
       // XXX Unfinished!
       // https://github.com/mdn/stumptown-content/issues/106
diff --git a/client/src/ingredients/examples.js b/client/src/ingredients/examples.js
index ee51976e5dd5..c36d7024dc8f 100644
--- a/client/src/ingredients/examples.js
+++ b/client/src/ingredients/examples.js
@@ -54,7 +54,7 @@ function RenderLiveSample({ example }) {
         className="live-sample-frame"
         srcDoc={srcdoc}
         title={example.description.title || "Live sample"}
-        width={example.description.width}
+        width={example.description.width || "100%"}
         height={example.description.height}
         frameBorder={0}
       />
@@ -62,7 +62,7 @@ function RenderLiveSample({ example }) {
   );
 }
 
-function RenderExample({ example }) {
+export function Example({ example }) {
   return (
     <>
       {example.description.title && <h3>{example.description.title}</h3>}
@@ -77,7 +77,7 @@ function RenderExample({ example }) {
 
       {/* At the moment the author implicitly signals that an example is live
         by including width and height values for the iframe */}
-      {example.description.width && <RenderLiveSample example={example} />}
+      {example.description.height && <RenderLiveSample example={example} />}
     </>
   );
 }
@@ -87,7 +87,7 @@ export function Examples({ examples }) {
     <>
       <h2>Examples</h2>
       {examples.map((example, i) => (
-        <RenderExample key={i} example={example} />
+        <Example key={i} example={example} />
       ))}
     </>
   );