Merge pull request #10 from snide/callout/title-only

Callouts can be title only
elastic · Oct 23, 2017 · 80e66a4 · 80e66a4
2 parents b5817ca + 76ecd88
commit 80e66a4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git 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
@@ -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>
   );
 };