Fix: Only use primary style for top level sections (styleguidist#555)

Fixes styleguidist#554

Author: dylankiss

src/rsg-components/Section/Section.js

@@ -5,7 +5,7 @@ import Components from 'rsg-components/Components';
 import Sections from 'rsg-components/Sections';
 import SectionRenderer from 'rsg-components/Section/SectionRenderer';
 
-export default function Section({ section }, { isolatedSection = false }) {
+export default function Section({ section, primary }, { isolatedSection = false }) {
 	const { name, slug, content, components, sections } = section;
 
 	const contentJsx = content && <Examples examples={content} name={name} />;
@@ -20,12 +20,14 @@ export default function Section({ section }, { isolatedSection = false }) {
 			components={componentsJsx}
 			sections={sectionsJsx}
 			isolated={isolatedSection}
+			primary={primary}
 		/>
 	);
 }
 
 Section.propTypes = {
 	section: PropTypes.object.isRequired,
+	primary: PropTypes.bool,
 };
 
 Section.contextTypes = {

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

@@ -30,6 +30,12 @@ it('should render component renderer', () => {
 	expect(actual).toMatchSnapshot();
 });
 
+it('should render component renderer with primary title', () => {
+	const actual = shallow(<Section section={section} primary />);
+
+	expect(actual).toMatchSnapshot();
+});
+
 it('should render components list', () => {
 	const actual = shallow(
 		<Section
@@ -110,3 +116,9 @@ it('render should render title if name is set', () => {
 
 	expect(actual).toMatchSnapshot();
 });
+
+it('render should render primary title if primary is set', () => {
+	const actual = shallow(<SectionRenderer classes={{}} name="test" slug="test" primary />);
+
+	expect(actual).toMatchSnapshot();
+});

src/rsg-components/Section/SectionRenderer.js

@@ -10,11 +10,11 @@ const styles = ({ space }) => ({
 });
 
 export function SectionRenderer(allProps) {
-	const { classes, name, slug, content, components, sections } = allProps;
+	const { classes, name, slug, content, components, sections, primary } = allProps;
 	return (
 		<section className={classes.root}>
 			{name &&
-				<SectionHeading primary id={slug} slotName="sectionToolbar" slotProps={allProps}>
+				<SectionHeading primary={primary} id={slug} slotName="sectionToolbar" slotProps={allProps}>
 					{name}
 				</SectionHeading>}
 			{content}

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

@@ -6,7 +6,6 @@ exports[`render should render component 1`] = `
 <section>
   <SectionHeading
     id="foo"
-    primary={true}
     slotName="sectionToolbar"
     slotProps={
       Object {
@@ -65,12 +64,31 @@ exports[`render should render component 1`] = `
 </section>
 `;
 
-exports[`render should render title if name is set 1`] = `
+exports[`render should render primary title if primary is set 1`] = `
 <section>
   <SectionHeading
     id="test"
     primary={true}
     slotName="sectionToolbar"
+    slotProps={
+      Object {
+        "classes": Object {},
+        "name": "test",
+        "primary": true,
+        "slug": "test",
+      }
+    }
+  >
+    test
+  </SectionHeading>
+</section>
+`;
+
+exports[`render should render title if name is set 1`] = `
+<section>
+  <SectionHeading
+    id="test"
+    slotName="sectionToolbar"
     slotProps={
       Object {
         "classes": Object {},
@@ -136,6 +154,43 @@ exports[`should render component renderer 1`] = `
 />
 `;
 
+exports[`should render component renderer with primary title 1`] = `
+<Styled(Section)
+  components={
+    <Components
+      components={Array []}
+    />
+  }
+  content={
+    <Examples
+      examples={
+        Array [
+          Object {
+            "content": "<button>OK</button>",
+            "evalInContext": [Function],
+            "type": "code",
+          },
+          Object {
+            "content": "Hello *world*!",
+            "type": "markdown",
+          },
+        ]
+      }
+      name="Foo"
+    />
+  }
+  isolated={false}
+  name="Foo"
+  primary={true}
+  sections={
+    <Sections
+      sections={Array []}
+    />
+  }
+  slug="foo"
+/>
+`;
+
 exports[`should render components list 1`] = `
 <Styled(Section)
   components={

src/rsg-components/Sections/Sections.js

@@ -3,14 +3,15 @@ import PropTypes from 'prop-types';
 import Section from 'rsg-components/Section';
 import SectionsRenderer from 'rsg-components/Sections/SectionsRenderer';
 
-export default function Sections({ sections }) {
+export default function Sections({ sections, root }) {
 	return (
 		<SectionsRenderer>
-			{sections.map((section, idx) => <Section key={idx} section={section} />)}
+			{sections.map((section, idx) => <Section key={idx} section={section} primary={root} />)}
 		</SectionsRenderer>
 	);
 }
 
 Sections.propTypes = {
 	sections: PropTypes.array.isRequired,
+	root: PropTypes.bool,
 };

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

@@ -46,6 +46,12 @@ it('should render component renderer', () => {
 	expect(actual).toMatchSnapshot();
 });
 
+it('should render component renderer with primary sections if root is true', () => {
+	const actual = shallow(<Sections sections={sections} root />);
+
+	expect(actual).toMatchSnapshot();
+});
+
 it('render should render styled component', () => {
 	const actual = shallow(
 		<StyledSectionsRenderer classes={{}}>

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

@@ -155,3 +155,56 @@ exports[`should render component renderer 1`] = `
   />
 </Styled(Sections)>
 `;
+
+exports[`should render component renderer with primary sections if root is true 1`] = `
+<Styled(Sections)>
+  <Section
+    primary={true}
+    section={
+      Object {
+        "components": Array [],
+        "content": Array [
+          Object {
+            "content": "<button>OK</button>",
+            "evalInContext": [Function],
+            "type": "code",
+          },
+        ],
+        "name": "Foo",
+      }
+    }
+  />
+  <Section
+    primary={true}
+    section={
+      Object {
+        "components": Array [],
+        "content": Array [
+          Object {
+            "content": "Hello *world*!",
+            "type": "markdown",
+          },
+        ],
+        "name": "Bar",
+      }
+    }
+  />
+  <Section
+    primary={true}
+    section={
+      Object {
+        "sections": Array [
+          Object {
+            "content": Array [],
+            "name": "One",
+          },
+          Object {
+            "content": Array [],
+            "name": "Two",
+          },
+        ],
+      }
+    }
+  />
+</Styled(Sections)>
+`;

src/rsg-components/StyleGuide/StyleGuide.js

@@ -57,7 +57,7 @@ export default class StyleGuide extends Component {
 				toc={<TableOfContents sections={sections} />}
 				hasSidebar={config.showSidebar && !isolatedComponent}
 			>
-				<Sections sections={sections} />
+				<Sections sections={sections} root />
 			</StyleGuideRenderer>
 		);
 	}

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

@@ -85,6 +85,7 @@ exports[`should render components list 1`] = `
   }
 >
   <Sections
+    root={true}
     sections={
       Array [
         Object {