Repository: styleguidist/react-styleguidist
Pull request #743 (2017-12-19 15:40:46)

Pass description in sections
In the project I am currently in we want to show section descriptions in the header of the section.

Also changed one of the styleguide configs to show this

Is this okay ?

SaraVieira: docs changed
codecov-io: # [Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/pull/743?src=pr&el=h1) Report
> Merging [#743](https://codecov.io/gh/styleguidist/react-styleguidist/pull/743?src=pr&el=desc) into [master](https://codecov.io/gh/styleguidist/react-styleguidist/commit/8ce0912b2a02ced2e69e4fa031ab69851f5c9411?src=pr&el=desc) will **increase** coverage by `<.01%`.
> The diff coverage is `100%`.

| [Impacted Files](https://codecov.io/gh/styleguidist/react-styleguidist/pull/743?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [loaders/utils/getSections.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/743/diff?src=pr&el=tree#diff-bG9hZGVycy91dGlscy9nZXRTZWN0aW9ucy5qcw==) | `100% <ø> (ø)` | :arrow_up: |
| [src/rsg-components/Section/Section.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/743/diff?src=pr&el=tree#diff-c3JjL3JzZy1jb21wb25lbnRzL1NlY3Rpb24vU2VjdGlvbi5qcw==) | `100% <100%> (ø)` | :arrow_up: |
| [src/rsg-components/Section/SectionRenderer.js](https://codecov.io/gh/styleguidist/react-styleguidist/pull/743/diff?src=pr&el=tree#diff-c3JjL3JzZy1jb21wb25lbnRzL1NlY3Rpb24vU2VjdGlvblJlbmRlcmVyLmpz) | `100% <100%> (ø)` | :arrow_up: |

SaraVieira: So we got them Node 4 failing again :(
sapegin: Try to merge master, I’ve made it optional.
SaraVieira: Passed 😍

Patch:
diff --git a/docs/Components.md b/docs/Components.md
index 07fb6583..388c447e 100644
--- a/docs/Components.md
+++ b/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',
diff --git a/examples/sections/styleguide.config.js b/examples/sections/styleguide.config.js
index 35286096..32e66fad 100644
--- a/examples/sections/styleguide.config.js
+++ b/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',
diff --git a/loaders/utils/getSections.js b/loaders/utils/getSections.js
index a7042856..76bf6c5d 100644
--- a/loaders/utils/getSections.js
+++ b/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),
diff --git a/src/rsg-components/Section/Section.js b/src/rsg-components/Section/Section.js
index 91865829..87b7e933 100644
--- a/src/rsg-components/Section/Section.js
+++ b/src/rsg-components/Section/Section.js
@@ -7,7 +7,7 @@ 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} />;
@@ -15,6 +15,7 @@ export default function Section({ section, depth }, { displayMode }) {
 
 	return (
 		<SectionRenderer
+			description={description}
 			name={name}
 			slug={slug}
 			content={contentJsx}
diff --git a/src/rsg-components/Section/Section.spec.js b/src/rsg-components/Section/Section.spec.js
index 85a43333..427de234 100644
--- a/src/rsg-components/Section/Section.spec.js
+++ b/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',
diff --git a/src/rsg-components/Section/SectionRenderer.js b/src/rsg-components/Section/SectionRenderer.js
index 35bb84e6..c39b47cf 100644
--- a/src/rsg-components/Section/SectionRenderer.js
+++ b/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,7 +11,8 @@ 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 && (
@@ -18,6 +20,7 @@ export function SectionRenderer(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,
diff --git a/src/rsg-components/Section/__snapshots__/Section.spec.js.snap b/src/rsg-components/Section/__snapshots__/Section.spec.js.snap
index 16984dd0..9901f1c3 100644
--- a/src/rsg-components/Section/__snapshots__/Section.spec.js.snap
+++ b/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={


Test patch:
diff --git a/loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap b/loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap
index 4aeb213b..693d9c77 100644
--- a/loaders/utils/__tests__/__snapshots__/getSections.spec.js.snap
+++ b/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",