feat: support widget description content (#90)

Author: bitpshr

src/Example.tsx

@@ -88,6 +88,12 @@ export default factory(function Example({
 	const isFullscreen = icache.get('isFullscreen');
 	const isCodeShowing = icache.getOrSet('isCodeShowing', true);
 
+	let description;
+	if (example.description) {
+		description =
+			typeof example.description === 'string' ? example.description : <example.description />;
+	}
+
 	return (
 		<div>
 			{isOverview && <div innerHTML={widgetReadme} />}
@@ -157,6 +163,13 @@ export default factory(function Example({
 					</a>
 				</div>
 			)}
+			{description && (
+				<virtual>
+					<HorizontalRule />
+					<h2 classes="text-2xl mb-4">Description</h2>
+					{description}
+				</virtual>
+			)}
 			{isOverview && widgetProperty && <InterfaceTable props={widgetProperty} />}
 			{isOverview && widgetChildren && widgetChildren.length && (
 				<InterfaceTable props={widgetChildren} tableName="Children" />

src/example/config.ts

@@ -8,6 +8,11 @@ import NamedClassButtonExample from './NamedClassButtonExample';
 import red from './theme/red';
 import blue from './theme/blue';
 import InheritingButtonExample from './InheritingButtonExample';
+import { create } from '@dojo/framework/core/vdom';
+
+const ExampleDescription = create()(
+	() => 'This is an example of an optional description that is a widget.'
+);
 
 export default {
 	name: '@dojo/widgets',
@@ -30,7 +35,8 @@ export default {
 			overview: {
 				example: {
 					filename: 'ButtonExample',
-					module: ButtonExample
+					module: ButtonExample,
+					description: 'This is an example of an optional description that is a string.'
 				}
 			},
 			examples: [
@@ -75,7 +81,8 @@ export default {
 			overview: {
 				example: {
 					filename: 'NamedClassButtonExample',
-					module: NamedClassButtonExample
+					module: NamedClassButtonExample,
+					description: ExampleDescription
 				}
 			}
 		},