Pass description in sections

docs/Components.md

@@ -49,6 +49,7 @@ Each section consists of (all fields are optional):
 * `content` — location of a Markdown file containing the overview content.
 * `components` — a glob pattern string or a function returning a list of components. The same rules apply as for the root `components` option.
 * `sections` — array of subsections (can be nested).
+* `description` — A small description of this section.
 * `ignore` — string/array of globs that should not be included in the section.
 
 Configuring a style guide with textual documentation section and a list of components would look like:
@@ -65,7 +66,8 @@ module.exports = {
       sections: [
         {
           name: 'Installation',
-          content: 'docs/installation.md'
+          content: 'docs/installation.md',
+          description: 'The description for the installation section',
         },
         {
           name: 'Configuration',

examples/sections/styleguide.config.js

@@ -12,6 +12,7 @@ module.exports = {
 						{
 							name: 'First File',
 							content: 'docs/One.md',
+							description: 'This is the first section description',
 						},
 						{
 							name: 'Second File',

loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap

@@ -7,6 +7,7 @@ Array [
     "content": Object {
       "require": "!!~/loaders/examples-loader.js!~/test/components/Button/Readme.md",
     },
+    "description": undefined,
     "name": "Readme",
     "sections": Array [],
     "slug": "readme-1",
@@ -69,6 +70,7 @@ Array [
       },
     ],
     "content": undefined,
+    "description": undefined,
     "name": "Components",
     "sections": Array [],
     "slug": "components-1",
@@ -118,6 +120,7 @@ Array [
       },
     ],
     "content": undefined,
+    "description": undefined,
     "name": "Ignore",
     "sections": Array [],
     "slug": "ignore-1",
@@ -184,6 +187,7 @@ Object {
     },
   ],
   "content": undefined,
+  "description": undefined,
   "name": "Components",
   "sections": Array [],
   "slug": "components",
@@ -196,6 +200,7 @@ Object {
   "content": Object {
     "require": "!!~/loaders/examples-loader.js!~/test/components/Button/Readme.md",
   },
+  "description": undefined,
   "name": "Readme",
   "sections": Array [],
   "slug": "readme",
@@ -248,6 +253,7 @@ Object {
     },
   ],
   "content": undefined,
+  "description": undefined,
   "name": "Ignore",
   "sections": Array [],
   "slug": "ignore",

loaders/utils/getSections.js

@@ -48,6 +48,7 @@ function processSection(section, config) {
 
 	return {
 		name: section.name,
+		description: section.description,
 		slug: slugger.slug(section.name),
 		components: getComponents(
 			getComponentFiles(section.components, config.configDir, ignore),

src/rsg-components/Section/Section.js

@@ -7,14 +7,15 @@ import SectionRenderer from 'rsg-components/Section/SectionRenderer';
 import { DisplayModes } from '../../consts';
 
 export default function Section({ section, depth }, { displayMode }) {
-	const { name, slug, content, components, sections } = section;
+	const { name, slug, content, components, sections, description } = section;
 
 	const contentJsx = content && <Examples examples={content} name={name} />;
 	const componentsJsx = components && <Components components={components} depth={depth + 1} />;
 	const sectionsJsx = sections && <Sections sections={sections} depth={depth + 1} />;
 
 	return (
 		<SectionRenderer
+			description={description}
 			name={name}
 			slug={slug}
 			content={contentJsx}

src/rsg-components/Section/Section.spec.js

@@ -16,6 +16,7 @@ const options = {
 const section = {
 	name: 'Foo',
 	slug: 'foo',
+	description: 'This is a description',
 	content: [
 		{
 			type: 'code',

src/rsg-components/Section/SectionRenderer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
 import SectionHeading from 'rsg-components/SectionHeading';
+import Markdown from 'rsg-components/Markdown';
 
 const styles = ({ space }) => ({
 	root: {
@@ -10,14 +11,16 @@ const styles = ({ space }) => ({
 });
 
 export function SectionRenderer(allProps) {
-	const { classes, name, slug, content, components, sections, depth } = allProps;
+	const { classes, name, slug, content, components, sections, depth, description } = allProps;
+
 	return (
 		<section className={classes.root}>
 			{name && (
 				<SectionHeading depth={depth} id={slug} slotName="sectionToolbar" slotProps={allProps}>
 					{name}
 				</SectionHeading>
 			)}
+			{description && <Markdown text={description} />}
 			{content}
 			{components}
 			{sections}
@@ -28,6 +31,7 @@ export function SectionRenderer(allProps) {
 SectionRenderer.propTypes = {
 	classes: PropTypes.object.isRequired,
 	name: PropTypes.string,
+	description: PropTypes.string,
 	slug: PropTypes.string,
 	content: PropTypes.node,
 	components: PropTypes.node,

src/rsg-components/Section/__snapshots__/Section.spec.js.snap

@@ -162,6 +162,7 @@ exports[`should render section renderer 1`] = `
     />
   }
   depth={3}
+  description="This is a description"
   isolated={false}
   name="Foo"
   sections={