Fix name conflicts by using slugs for routing in isolated mode

examples/sections/src/components/Button/Readme.md

@@ -1,13 +1,15 @@
 Basic button:
 
 ```jsx
-<Button>Push Me</Button>
+const Button = require('./Button').default
+;<Button>Push Me</Button>
 ```
 
 Big pink button:
 
 ```jsx
-<Button size="large" color="deeppink">
+const Button = require('./Button').default
+;<Button size="large" color="deeppink">
   Lick Me
 </Button>
 ```
@@ -17,12 +19,14 @@ And you _can_ **use** `any` [Markdown](http://daringfireball.net/projects/markdo
 Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as an interactive playgrounds:
 
 ```jsx
-<Button>Push Me</Button>
+const Button = require('./Button').default
+;<Button>Push Me</Button>
 ```
 
 You can disable an editor by passing a `noeditor` modifier (` ```js noeditor `):
 
 ```jsx noeditor
+const Button = require('./Button').default;
 <Button>Push Me</Button>
 ```
 

examples/sections/src/components/Toolbar/Button.css

@@ -0,0 +1,15 @@
+.toolbar-button {
+	padding: .5em 1.5em;
+	color: #666;
+	background-color: #fff;
+	border: 2px dashed currentColor;
+	border-radius: .3em;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.toolbar-button[disabled] {
+	opacity: 0.5;
+	cursor: not-allowed;
+}

examples/sections/src/components/Toolbar/Button.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Button.css';
+
+/**
+ * The only true button.
+ */
+export default function Button({ color, size, children, disabled }) {
+	const styles = {
+		color,
+		fontSize: Button.sizes[size],
+	};
+
+	return (
+		<button className="toolbar-button" style={styles} disabled={disabled}>
+			{children}
+		</button>
+	);
+}
+Button.propTypes = {
+	/**
+	 * Button label.
+	 */
+	children: PropTypes.string.isRequired,
+	color: PropTypes.string,
+	size: PropTypes.oneOf(['small', 'normal', 'large']),
+	disabled: PropTypes.bool,
+};
+Button.defaultProps = {
+	color: '#333',
+	size: 'normal',
+};
+Button.sizes = {
+	small: '10px',
+	normal: '14px',
+	large: '18px',
+};

examples/sections/src/components/Toolbar/Readme.md

@@ -0,0 +1,24 @@
+Basic toolbar button:
+
+```jsx
+const Button = require('./Button').default
+;<Button>Push Me</Button>
+```
+
+Big pink toolbar button:
+
+```jsx
+const Button = require('./Button').default
+;<Button size="large" color="deeppink">
+  Lick Me
+</Button>
+```
+
+Disabled toolbar button:
+
+```jsx
+const Button = require('./Button').default
+;<Button size="large" disabled>
+  You can't click me
+</Button>
+```

examples/sections/src/components/Toolbar/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

examples/sections/styleguide.config.js

@@ -34,6 +34,10 @@ module.exports = {
 						'./src/components/WrappedButton/WrappedButton.js',
 					],
 				},
+				{
+					name: 'Toolbar',
+					components: () => ['./src/components/Toolbar/Button.js'],
+				},
 				{
 					name: 'Fields',
 					components: () => [

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

@@ -69,12 +69,12 @@ exports[`should set the correct href for items when isolated links should be use
   items={
     Array [
       Object {
-        "href": "blank#!/Button",
+        "href": "blank#!/button",
         "name": "Button",
         "slug": "button",
       },
       Object {
-        "href": "blank#!/Input",
+        "href": "blank#!/input",
         "name": "Input",
         "slug": "input",
       },

src/rsg-components/Examples/Examples.js

@@ -4,7 +4,7 @@ import Playground from 'rsg-components/Playground';
 import Markdown from 'rsg-components/Markdown';
 import ExamplesRenderer from 'rsg-components/Examples/ExamplesRenderer';
 
-export default function Examples({ examples, name }, { codeRevision }) {
+export default function Examples({ examples, name, slug }, { codeRevision }) {
 	return (
 		<ExamplesRenderer>
 			{examples.map((example, index) => {
@@ -16,6 +16,7 @@ export default function Examples({ examples, name }, { codeRevision }) {
 								evalInContext={example.evalInContext}
 								key={`${codeRevision}/${index}`}
 								name={name}
+								slug={slug}
 								index={index}
 								settings={example.settings}
 							/>
@@ -32,6 +33,7 @@ export default function Examples({ examples, name }, { codeRevision }) {
 Examples.propTypes = {
 	examples: PropTypes.array.isRequired,
 	name: PropTypes.string.isRequired,
+	slug: PropTypes.string.isRequired,
 };
 Examples.contextTypes = {
 	codeRevision: PropTypes.number.isRequired,

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

@@ -16,7 +16,7 @@ const examples = [
 ];
 
 it('should render examples', () => {
-	const actual = shallow(<Examples examples={examples} name="button" />, {
+	const actual = shallow(<Examples examples={examples} name="button" slug="button" />, {
 		context: {
 			codeRevision: 1,
 			displayMode: DisplayModes.example,
@@ -34,7 +34,7 @@ it('should not render a example with unknown type', () => {
 		},
 	];
 
-	const actual = mount(<Examples examples={faultyExample} name="button" />, {
+	const actual = mount(<Examples examples={faultyExample} name="button" slug="button" />, {
 		context: {
 			codeRevision: 1,
 		},

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

@@ -12,6 +12,7 @@ exports[`should render examples 1`] = `
     index={0}
     key="1/0"
     name="button"
+    slug="button"
   />
   <Markdown
     key="1"

src/rsg-components/Playground/Playground.js

@@ -14,6 +14,7 @@ export default class Playground extends Component {
 		evalInContext: PropTypes.func.isRequired,
 		index: PropTypes.number.isRequired,
 		name: PropTypes.string.isRequired,
+		slug: PropTypes.string.isRequired,
 		settings: PropTypes.object,
 	};
 
@@ -63,7 +64,7 @@ export default class Playground extends Component {
 
 	render() {
 		const { code, activeTab } = this.state;
-		const { evalInContext, index, name, settings } = this.props;
+		const { evalInContext, index, name, slug, settings } = this.props;
 		const { displayMode } = this.context;
 		const preview = <Preview code={code} evalInContext={evalInContext} />;
 		if (settings.noeditor) {
@@ -92,7 +93,7 @@ export default class Playground extends Component {
 				toolbar={
 					<Slot
 						name="exampleToolbar"
-						props={{ name, isolated: displayMode === DisplayModes.example, example: index }}
+						props={{ name, slug, isolated: displayMode === DisplayModes.example, example: index }}
 					/>
 				}
 			/>

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

@@ -12,6 +12,7 @@ const newCode = '<button>Not OK</button>';
 const props = {
 	index: 0,
 	name: 'name',
+	slug: 'slug',
 	settings: {},
 	evalInContext,
 	code,

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

@@ -90,6 +90,7 @@ exports[`should render component renderer 1`] = `
           "example": 0,
           "isolated": false,
           "name": "name",
+          "slug": "slug",
         }
       }
     />

src/rsg-components/ReactComponent/ReactComponent.js

@@ -75,7 +75,7 @@ export default class ReactComponent extends Component {
 				}
 				examples={
 					examples.length > 0 ? (
-						<Examples examples={examples} name={name} />
+						<Examples examples={examples} name={name} slug={slug} />
 					) : (
 						<ExamplePlaceholder name={name} />
 					)

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

@@ -28,6 +28,7 @@ exports[`ReactComponent should pass rendered description, usage, examples, etc.
         ]
       }
       name="Foo"
+      slug="foo"
     />
   }
   heading={

src/rsg-components/Section/Section.js

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

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

@@ -141,7 +141,7 @@ it('render should render section', () => {
 			classes={{}}
 			name={section.name}
 			slug={section.slug}
-			content={<Examples name={section.name} examples={section.content} />}
+			content={<Examples name={section.name} slug={section.slug} examples={section.content} />}
 			components={<Components components={[]} depth={3} />}
 			sections={<Sections sections={[]} depth={3} />}
 			depth={3}

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

@@ -34,6 +34,7 @@ exports[`render should render section 1`] = `
             ]
           }
           name="Foo"
+          slug="foo"
         />,
         "depth": 3,
         "name": "Foo",
@@ -66,6 +67,7 @@ exports[`render should render section 1`] = `
       ]
     }
     name="Foo"
+    slug="foo"
   />
   <Sections
     depth={3}
@@ -159,6 +161,7 @@ exports[`should render section renderer 1`] = `
         ]
       }
       name="Foo"
+      slug="foo"
     />
   }
   depth={3}

src/rsg-components/slots/IsolateButton.js

@@ -5,19 +5,19 @@ import MdFullscreenExit from 'react-icons/lib/md/fullscreen-exit';
 import ToolbarButton from 'rsg-components/ToolbarButton';
 import getUrl from '../../utils/getUrl';
 
-const IsolateButton = ({ name, example, isolated }) =>
+const IsolateButton = ({ slug, example, isolated }) =>
 	isolated ? (
 		<ToolbarButton href={getUrl({ anchor: true, slug: '/' })} title="Show all components">
 			<MdFullscreenExit />
 		</ToolbarButton>
 	) : (
-		<ToolbarButton href={getUrl({ name, example, isolated: true })} title="Open isolated">
+		<ToolbarButton href={getUrl({ slug, example, isolated: true })} title="Open isolated">
 			<MdFullscreen />
 		</ToolbarButton>
 	);
 
 IsolateButton.propTypes = {
-	name: PropTypes.string.isRequired,
+	slug: PropTypes.string.isRequired,
 	example: PropTypes.number,
 	isolated: PropTypes.bool,
 };

src/rsg-components/slots/IsolateButton.spec.js

@@ -2,19 +2,19 @@ import React from 'react';
 import IsolateButton from './IsolateButton';
 
 it('should renderer a link to isolated mode', () => {
-	const actual = shallow(<IsolateButton name="Pizza" />);
+	const actual = shallow(<IsolateButton slug="pizza" />);
 
 	expect(actual).toMatchSnapshot();
 });
 
 it('should renderer a link to example isolated mode', () => {
-	const actual = shallow(<IsolateButton name="Pizza" example={3} />);
+	const actual = shallow(<IsolateButton slug="pizza" example={3} />);
 
 	expect(actual).toMatchSnapshot();
 });
 
 it('should renderer a link home in isolated mode', () => {
-	const actual = shallow(<IsolateButton name="Pizza" isolated />);
+	const actual = shallow(<IsolateButton slug="pizza" isolated />);
 
 	expect(actual).toMatchSnapshot();
 });

src/rsg-components/slots/__snapshots__/IsolateButton.spec.js.snap

@@ -11,7 +11,7 @@ exports[`should renderer a link home in isolated mode 1`] = `
 
 exports[`should renderer a link to example isolated mode 1`] = `
 <Styled(ToolbarButton)
-  href="blank#!/Pizza/3"
+  href="blank#!/pizza/3"
   title="Open isolated"
 >
   <MdFullscreen />
@@ -20,7 +20,7 @@ exports[`should renderer a link to example isolated mode 1`] = `
 
 exports[`should renderer a link to isolated mode 1`] = `
 <Styled(ToolbarButton)
-  href="blank#!/Pizza"
+  href="blank#!/pizza"
   title="Open isolated"
 >
   <MdFullscreen />