From 76ecd889220b64698e1f5dfbc0f469e8e3d8f5c5 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Mon, 23 Oct 2017 11:41:06 -0700
Subject: [PATCH] title only callouts

---
 docs/src/views/call_out/info.js     | 34 +++++++++++++++++++----------
 src/components/call_out/call_out.js | 13 ++++++++---
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/docs/src/views/call_out/info.js b/docs/src/views/call_out/info.js
index 94980111935..208263dcce9 100644
--- a/docs/src/views/call_out/info.js
+++ b/docs/src/views/call_out/info.js
@@ -3,19 +3,29 @@ import React from 'react';
 import {
   KuiCallOut,
   KuiLink,
+  KuiSpacer,
 } from '../../../../src/components';
 
 export default () => (
-  <KuiCallOut
-    title="Check it out, here's a really long title that will wrap within a narrower browser"
-    iconType="search"
-  >
-    <p>
-      Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
-      when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
-    </p>
-    <p>
-      And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
-    </p>
-  </KuiCallOut>
+  <div>
+    <KuiCallOut
+      title="Check it out, here's a really long title that will wrap within a narrower browser"
+      iconType="search"
+    >
+      <p>
+        Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
+        when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
+      </p>
+      <p>
+        And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
+      </p>
+    </KuiCallOut>
+
+    <KuiSpacer size="m" />
+
+    <KuiCallOut
+      title="Callouts can exist as just a title. Simply omit the child content."
+      iconType="gear"
+    />
+  </div>
 );
diff --git a/src/components/call_out/call_out.js b/src/components/call_out/call_out.js
index f413324cdc0..cd9b6fb2e95 100644
--- a/src/components/call_out/call_out.js
+++ b/src/components/call_out/call_out.js
@@ -37,6 +37,15 @@ export const KuiCallOut = ({ title, type, iconType, children, className, ...rest
     );
   }
 
+  let optionalChildren;
+  if (children) {
+    optionalChildren = (
+      <KuiText size="s">
+        {children}
+      </KuiText>
+    );
+  }
+
   return (
     <div
       className={classes}
@@ -50,9 +59,7 @@ export const KuiCallOut = ({ title, type, iconType, children, className, ...rest
         </span>
       </div>
 
-      <KuiText size="s">
-        {children}
-      </KuiText>
+      {optionalChildren}
     </div>
   );
 };