From c992646c037877041ab9130b4778f9e18732ebb4 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 27 Aug 2019 18:02:34 +0800
Subject: [PATCH 1/5] CSF: Transform CSF named exports with a `displayName`
 option

---
 addons/docs/src/mdx/mdx-compiler-plugin.js         |  5 ++---
 .../configurations/options-parameter/index.md      |  8 ++++++++
 lib/client-api/src/client_api.test.ts              | 14 +++++++++++++-
 lib/client-api/src/client_api.ts                   |  7 +++++++
 lib/components/src/blocks/Source.stories.tsx       |  2 --
 lib/core/src/client/preview/start.js               |  5 ++++-
 6 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.js b/addons/docs/src/mdx/mdx-compiler-plugin.js
index cacd34a1fd7c..4d2a2b4ded32 100644
--- a/addons/docs/src/mdx/mdx-compiler-plugin.js
+++ b/addons/docs/src/mdx/mdx-compiler-plugin.js
@@ -72,9 +72,8 @@ function genStoryExport(ast, counter) {
   }
   statements.push(`${storyKey}.story = {};`);
 
-  if (storyName !== storyKey) {
-    statements.push(`${storyKey}.story.name = '${storyName}';`);
-  }
+  // always preserve the name, since CSF exports can get modified by displayName
+  statements.push(`${storyKey}.story.name = '${storyName}';`);
 
   let parameters = getAttr(ast.openingElement, 'parameters');
   parameters = parameters && parameters.expression;
diff --git a/docs/src/pages/configurations/options-parameter/index.md b/docs/src/pages/configurations/options-parameter/index.md
index a4586badd353..fa4972b73905 100644
--- a/docs/src/pages/configurations/options-parameter/index.md
+++ b/docs/src/pages/configurations/options-parameter/index.md
@@ -82,6 +82,14 @@ addParameters({
     * @type {Function}
     */
     storySort: undefined
+
+    /**
+    * Function to transform Component Story Format named exports (typically camel-case
+    * variables) into display names. If the story specifies a `story.name` option, that
+    * will not be transformed and will always take precedence over a named export.
+    * @type {Function}
+    */
+    displayName: lodash.startCase
   },
 });
 ```
diff --git a/lib/client-api/src/client_api.test.ts b/lib/client-api/src/client_api.test.ts
index 42e4ae7a7f76..e19ff1c24233 100644
--- a/lib/client-api/src/client_api.test.ts
+++ b/lib/client-api/src/client_api.test.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { logger } from '@storybook/client-logger';
 import addons, { mockChannel } from '@storybook/addons';
-import ClientApi from './client_api';
+import ClientApi, { defaultDisplayName } from './client_api';
 import ConfigApi from './config_api';
 import StoryStore from './story_store';
 
@@ -26,6 +26,18 @@ jest.mock('@storybook/client-logger', () => ({
 }));
 
 describe('preview.client_api', () => {
+  describe('defaultDisplayName', () => {
+    it('should format CSF with sensible defaults', () => {
+      const testCases = {
+        name: 'Name',
+        someName: 'Some Name',
+        someNAME: 'Some NAME',
+        some_custom_NAME: 'Some Custom NAME',
+      };
+      Object.entries(testCases).forEach(([key, val]) => expect(defaultDisplayName(key)).toBe(val));
+    });
+  });
+
   describe('setAddon', () => {
     it('should register addons', () => {
       const { clientApi } = getContext(undefined);
diff --git a/lib/client-api/src/client_api.ts b/lib/client-api/src/client_api.ts
index 84592f1c2051..0352f723e973 100644
--- a/lib/client-api/src/client_api.ts
+++ b/lib/client-api/src/client_api.ts
@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: 0 */
 import deprecate from 'util-deprecate';
 import isPlainObject from 'is-plain-object';
+import startCase from 'lodash/startCase';
 import { logger } from '@storybook/client-logger';
 import addons, { StoryContext, StoryFn, Parameters, OptionsParameter } from '@storybook/addons';
 import Events from '@storybook/core-events';
@@ -82,6 +83,8 @@ const withSubscriptionTracking = (storyFn: StoryFn) => {
   return result;
 };
 
+export const defaultDisplayName = key => startCase(key);
+
 export default class ClientApi {
   private _storyStore: StoryStore;
 
@@ -123,6 +126,10 @@ export default class ClientApi {
       this._globalParameters.options
     );
 
+  getDisplayName = () =>
+    (this._globalParameters.options && this._globalParameters.options.displayName) ||
+    defaultDisplayName;
+
   addDecorator = (decorator: DecoratorFunction) => {
     this._globalDecorators.push(decorator);
   };
diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx
index 7024c3b21e7e..bad3ea4acaeb 100644
--- a/lib/components/src/blocks/Source.stories.tsx
+++ b/lib/components/src/blocks/Source.stories.tsx
@@ -32,7 +32,5 @@ const cssCode = `
 export const css = () => <Source code={cssCode} language="css" />;
 
 export const noStory = () => <Source error={SourceError.NO_STORY} />;
-noStory.story = { name: 'no story' };
 
 export const sourceUnavailable = () => <Source error={SourceError.SOURCE_UNAVAILABLE} />;
-sourceUnavailable.story = { name: 'source unavailable' };
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index e07dc0fbe803..a867d96a3f25 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -398,6 +398,9 @@ export default function start(render, { decorateStory } = {}) {
       // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
       const kind = clientApi.storiesOf(kindName, true);
 
+      // Transform the CSF named export if the user hasn't specified a name
+      const displayName = clientApi.getDisplayName();
+
       // we should always have a framework, rest optional
       kind.addParameters({ framework, component, ...params });
 
@@ -414,7 +417,7 @@ export default function start(render, { decorateStory } = {}) {
             `${kindName} => ${name || key}: story.parameters.decorators is deprecated; use story.decorators instead.`)();
           }
           const decoratorParams = decorators ? { decorators } : null;
-          kind.add(name || key, storyFn, { ...parameters, ...decoratorParams });
+          kind.add(name || displayName(key), storyFn, { ...parameters, ...decoratorParams });
         }
       });
     });

From dea0634b07c2294bbc25fceb7df6f50d9e6c8a90 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 27 Aug 2019 18:05:36 +0800
Subject: [PATCH 2/5] Update snapshots

---
 .../mdx-compiler-plugin.test.js.snap          |  5 ++
 .../__snapshots__/htmlshots.test.js.snap      | 10 ++--
 .../__snapshots__/svelteshots.test.js.snap    |  6 +-
 .../__snapshots__/vueshots.test.js.snap       | 56 +++++++++----------
 4 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap
index fd74553dda9a..b8012e8691cf 100644
--- a/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap
+++ b/addons/docs/src/mdx/__snapshots__/mdx-compiler-plugin.test.js.snap
@@ -53,6 +53,7 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
+one.story.name = 'one';
 one.story.parameters = { mdxSource: '<Button>One</Button>' };
 one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
 
@@ -177,6 +178,7 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
+one.story.name = 'one';
 one.story.parameters = { mdxSource: '<Button>One</Button>' };
 
 export const helloStory = () => <Button>Hello button</Button>;
@@ -334,6 +336,7 @@ helloButton.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
 
 export const two = () => <Button>Two</Button>;
 two.story = {};
+two.story.name = 'two';
 two.story.parameters = { mdxSource: '<Button>Two</Button>' };
 
 const componentMeta = {
@@ -431,6 +434,7 @@ MDXContent.isMDXComponent = true;
 
 export const text = () => 'Plain text';
 text.story = {};
+text.story.name = 'text';
 text.story.parameters = { mdxSource: \\"'Plain text'\\" };
 
 const componentMeta = { title: 'Text', includeStories: ['text'] };
@@ -487,6 +491,7 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
+one.story.name = 'one';
 one.story.parameters = { mdxSource: '<Button>One</Button>' };
 
 export const helloStory = () => <Button>Hello button</Button>;
diff --git a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
index f4a8859c0f4e..eb7e582bd341 100644
--- a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
+++ b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
@@ -98,7 +98,7 @@ exports[`Storyshots Addons|Events Logger 1`] = `
     
 `;
 
-exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
+exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
 
 exports[`Storyshots Addons|Knobs All knobs 1`] = `
 <div
@@ -209,13 +209,13 @@ exports[`Storyshots Addons|a11y Label 1`] = `
 </button>
 `;
 
-exports[`Storyshots Demo button 1`] = `
+exports[`Storyshots Demo Button 1`] = `
 <button>
   Hello Button
 </button>
 `;
 
-exports[`Storyshots Demo effect 1`] = `
+exports[`Storyshots Demo Effect 1`] = `
 <button
   id="button"
 >
@@ -223,13 +223,13 @@ exports[`Storyshots Demo effect 1`] = `
 </button>
 `;
 
-exports[`Storyshots Demo heading 1`] = `
+exports[`Storyshots Demo Heading 1`] = `
 <h1>
   Hello World
 </h1>
 `;
 
-exports[`Storyshots Demo headings 1`] = `
+exports[`Storyshots Demo Headings 1`] = `
 <section>
   <h1>
     Hello World
diff --git a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
index 380555d1b05e..c732d5c30a82 100644
--- a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
+++ b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
@@ -103,7 +103,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Centered rounded 1`] = `
+exports[`Storyshots Addon|Centered Rounded 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -267,7 +267,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </section>
 `;
 
-exports[`Storyshots Button rounded 1`] = `
+exports[`Storyshots Button Rounded 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -309,7 +309,7 @@ exports[`Storyshots Button rounded 1`] = `
 </section>
 `;
 
-exports[`Storyshots Button square 1`] = `
+exports[`Storyshots Button Square 1`] = `
 <section
   class="storybook-snapshot-container"
 >
diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
index 589366792ca5..bc0b461c4489 100644
--- a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
+++ b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
@@ -48,7 +48,7 @@ exports[`Storyshots Addon|Backgrounds story 2 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Centered rounded 1`] = `
+exports[`Storyshots Addon|Centered Rounded 1`] = `
 <div
   style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
 >
@@ -260,7 +260,7 @@ exports[`Storyshots App App 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button rounded 1`] = `
+exports[`Storyshots Button Rounded 1`] = `
 <button
   class="button rounded"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -269,7 +269,7 @@ exports[`Storyshots Button rounded 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button square 1`] = `
+exports[`Storyshots Button Square 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -293,7 +293,7 @@ exports[`Storyshots Core|Template string only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue render 1`] = `
+exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -310,7 +310,7 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
 </div>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue template 1`] = `
+exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -327,7 +327,7 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
 </div>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue withData 1`] = `
+exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -336,10 +336,10 @@ exports[`Storyshots Custom|Decorator for Vue withData 1`] = `
   >
     <pre>
       {
-  "id": "custom-decorator-for-vue--withdata",
+  "id": "custom-decorator-for-vue--with-data",
   "kind": "Custom|Decorator for Vue",
-  "name": "withData",
-  "story": "withData",
+  "name": "With Data",
+  "story": "With Data",
   "customContext": 52,
   "parameters": {
     "options": {
@@ -368,6 +368,24 @@ exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
 </button>
 `;
 
+exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
 exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
 <p>
   <em>
@@ -393,12 +411,6 @@ exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
-<div>
-  renders a div with some text in it..
-</div>
-`;
-
 exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
 <button
   class="button"
@@ -424,18 +436,6 @@ exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
 </p>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
-<div>
-  <h1>
-    A template
-  </h1>
-   
-  <p>
-    rendered in vue in storybook
-  </p>
-</div>
-`;
-
 exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
 <button
   class="button"
@@ -454,7 +454,7 @@ exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome welcome 1`] = `
+exports[`Storyshots Welcome Welcome 1`] = `
 <div
   class="main"
 >

From 062dc3ba4aa56d505d6e9d4e3f05fca6cd08e410 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 27 Aug 2019 19:18:50 +0800
Subject: [PATCH 3/5] Fix typescript

---
 lib/client-api/src/client_api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/client-api/src/client_api.ts b/lib/client-api/src/client_api.ts
index 0352f723e973..8ca1308f9cac 100644
--- a/lib/client-api/src/client_api.ts
+++ b/lib/client-api/src/client_api.ts
@@ -83,7 +83,7 @@ const withSubscriptionTracking = (storyFn: StoryFn) => {
   return result;
 };
 
-export const defaultDisplayName = key => startCase(key);
+export const defaultDisplayName = (key: string) => startCase(key);
 
 export default class ClientApi {
   private _storyStore: StoryStore;

From 061d7813726453d7734108fd14f3c86ba4a0eb10 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 27 Aug 2019 20:32:49 +0800
Subject: [PATCH 4/5] CSF: Use displayName param for nav display to preserve ID
 stability

---
 .../__snapshots__/htmlshots.test.js.snap      | 102 ++++++++--------
 examples/official-storybook/config.js         |   2 +
 examples/official-storybook/package.json      |   1 +
 .../__snapshots__/preactshots.test.js.snap    |  42 +++----
 .../__snapshots__/riotshots.test.js.snap      |  62 +++++-----
 .../__snapshots__/svelteshots.test.js.snap    |  20 ++--
 .../__snapshots__/vueshots.test.js.snap       | 113 +++++++++---------
 lib/core/src/client/preview/start.js          |   5 +-
 lib/ui/src/components/sidebar/SidebarItem.tsx |   5 +-
 9 files changed, 181 insertions(+), 171 deletions(-)

diff --git a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
index eb7e582bd341..ca0e2dec3aa7 100644
--- a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
+++ b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
+exports[`Storyshots Addons|Actions story1 1`] = `
 <button
   type="button"
 >
@@ -8,7 +8,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
+exports[`Storyshots Addons|Actions story2 1`] = `
 <button
   type="button"
 >
@@ -16,7 +16,7 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Hello World 1`] = `
+exports[`Storyshots Addons|Actions story3 1`] = `
 <button
   type="button"
 >
@@ -24,7 +24,7 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
+exports[`Storyshots Addons|Actions story4 1`] = `
 <button
   type="button"
 >
@@ -32,7 +32,12 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+exports[`Storyshots Addons|Actions story5 1`] = `
+
+        
+`;
+
+exports[`Storyshots Addons|Actions story6 1`] = `
 <button
   type="button"
 >
@@ -40,7 +45,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
+exports[`Storyshots Addons|Actions story7 1`] = `
 <button
   type="button"
 >
@@ -48,7 +53,7 @@ exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addons|Actions story8 1`] = `
 <button
   type="button"
 >
@@ -56,12 +61,7 @@ exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
-
-        
-`;
-
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
+exports[`Storyshots Addons|Backgrounds story1 1`] = `
 <span
   style="color: white"
 >
@@ -69,7 +69,7 @@ exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 </span>
 `;
 
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds story2 1`] = `
 <span
   style="color: white"
 >
@@ -77,7 +77,7 @@ exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 </span>
 `;
 
-exports[`Storyshots Addons|Centered button in center 1`] = `
+exports[`Storyshots Addons|Centered story1 1`] = `
 <div
   id="sb-addon-centered-wrapper"
   style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
@@ -98,9 +98,29 @@ exports[`Storyshots Addons|Events Logger 1`] = `
     
 `;
 
-exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
+exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
 
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+<p>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs story3 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs story4 1`] = `
 <div
   style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
 >
@@ -147,29 +167,9 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
-<p
-  style="transition: color 0.5s ease-out; color: orangered;"
->
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs DOM 1`] = `
-<p>
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
+exports[`Storyshots Addons|Knobs story5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
 
-exports[`Storyshots Addons|Notes Simple note 1`] = `
+exports[`Storyshots Addons|Notes story1 1`] = `
 <p>
   
       
@@ -185,8 +185,6 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
 
 exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
 
-exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
-
 exports[`Storyshots Addons|a11y Disabled 1`] = `
 <button
   disabled=""
@@ -195,27 +193,29 @@ exports[`Storyshots Addons|a11y Disabled 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
-<button
-  style="color: black; background-color: brown;"
->
+exports[`Storyshots Addons|a11y Label 1`] = `
+<button>
   Testing the a11y addon
 </button>
 `;
 
-exports[`Storyshots Addons|a11y Label 1`] = `
-<button>
+exports[`Storyshots Addons|a11y story4 1`] = `
+<button
+  style="color: black; background-color: brown;"
+>
   Testing the a11y addon
 </button>
 `;
 
-exports[`Storyshots Demo Button 1`] = `
+exports[`Storyshots Addons|a11y story5 1`] = `<div />`;
+
+exports[`Storyshots Demo button 1`] = `
 <button>
   Hello Button
 </button>
 `;
 
-exports[`Storyshots Demo Effect 1`] = `
+exports[`Storyshots Demo effect 1`] = `
 <button
   id="button"
 >
@@ -223,13 +223,13 @@ exports[`Storyshots Demo Effect 1`] = `
 </button>
 `;
 
-exports[`Storyshots Demo Heading 1`] = `
+exports[`Storyshots Demo heading 1`] = `
 <h1>
   Hello World
 </h1>
 `;
 
-exports[`Storyshots Demo Headings 1`] = `
+exports[`Storyshots Demo headings 1`] = `
 <section>
   <h1>
     Hello World
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 7cabbbb918de..2e61f87c49dc 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import startCase from 'lodash/startCase';
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 import { withCssResources } from '@storybook/addon-cssresources';
@@ -52,6 +53,7 @@ addParameters({
     theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
     storySort: (a, b) =>
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
+    displayName: key => startCase(key).toLowerCase(),
   },
   backgrounds: [
     { name: 'storybook app', value: themes.light.appBg, default: true },
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 141129452149..8e138f93799a 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -53,6 +53,7 @@
     "global": "^4.3.2",
     "graphql": "^14.1.1",
     "jest-emotion": "^10.0.11",
+    "lodash": "^4.17.11",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
diff --git a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
index b2a8566165f5..03e16240ac8a 100644
--- a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
+++ b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Actions Action and method 1`] = `
+exports[`Storyshots Addons|Actions actionAndMethod 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -9,7 +9,7 @@ exports[`Storyshots Addons|Actions Action and method 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Action only 1`] = `
+exports[`Storyshots Addons|Actions actionOnly 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -18,7 +18,7 @@ exports[`Storyshots Addons|Actions Action only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+exports[`Storyshots Addons|Actions multipleActions 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -28,7 +28,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addons|Actions multipleActionsObject 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -38,7 +38,7 @@ exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
+exports[`Storyshots Addons|Backgrounds example1 1`] = `
 <button
   class="button"
 >
@@ -46,7 +46,7 @@ exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
+exports[`Storyshots Addons|Backgrounds example2 1`] = `
 <button
   class="button"
 >
@@ -54,7 +54,7 @@ exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Centered Button  1`] = `
+exports[`Storyshots Addons|Centered button 1`] = `
 <div
   style={
     Object {
@@ -86,7 +86,7 @@ exports[`Storyshots Addons|Centered Button  1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
+exports[`Storyshots Addons|Contexts simpleCssTheming 1`] = `
 <div
   style={
     Object {
@@ -103,7 +103,13 @@ exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs allKnobs 1`] = `
 <div
   style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
 >
@@ -136,13 +142,7 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Links Go to welcome 1`] = `
+exports[`Storyshots Addons|Links goToWelcome 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -151,7 +151,7 @@ exports[`Storyshots Addons|Links Go to welcome 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Notes Note with HTML 1`] = `
+exports[`Storyshots Addons|Notes noteWithHtml 1`] = `
 <p>
   <span>
     🤔😳😯😮
@@ -167,7 +167,7 @@ exports[`Storyshots Addons|Notes Note with HTML 1`] = `
 </p>
 `;
 
-exports[`Storyshots Addons|Notes Simple note 1`] = `
+exports[`Storyshots Addons|Notes simpleNote 1`] = `
 <p>
   <strong>
     Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
@@ -175,7 +175,7 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
 </p>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button withSomeEmoji 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -189,7 +189,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button withText 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -198,7 +198,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome toStorybook 1`] = `
 <article
   style={
     Object {
diff --git a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
index 30ef3f9f04b4..08882fbc3063 100644
--- a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
+++ b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions actionOnly 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -14,7 +14,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+exports[`Storyshots Addon|Actions multipleActions 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -28,7 +28,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <div
   data-is="root"
   id="root"
@@ -44,7 +44,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+exports[`Storyshots Addon|Backgrounds story2 1`] = `
 <div
   data-is="root"
   id="root"
@@ -60,7 +60,18 @@ exports[`Storyshots Addon|Backgrounds story 2 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    I am John Doe and I'm 44 years old.
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs allKnobs 1`] = `
 <div
   data-is="root"
   id="root"
@@ -115,18 +126,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    I am John Doe and I'm 44 years old.
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+exports[`Storyshots Addon|Knobs xssSafety 1`] = `
 <div
   data-is="root"
   id="root"
@@ -137,7 +137,7 @@ exports[`Storyshots Addon|Knobs XSS safety 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
+exports[`Storyshots Addon|Links goToWelcome 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -151,7 +151,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <div
   data-is="root"
   id="root"
@@ -168,7 +168,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <div
   data-is="root"
   id="root"
@@ -181,18 +181,18 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </div>
 `;
 
-exports[`Storyshots Core|Parameters passed to story 1`] = `
+exports[`Storyshots Core|Parameters passedToStory 1`] = `
 <div
   data-is="parameters"
   id="root"
 >
   <div>
-    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
   </div>
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built as string 1`] = `
+exports[`Storyshots Story|How to create a story builtAsString 1`] = `
 <div
   data-is="root"
   id="root"
@@ -205,7 +205,7 @@ exports[`Storyshots Story|How to create a story built as string 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from raw import 1`] = `
+exports[`Storyshots Story|How to create a story builtFromRawImport 1`] = `
 <div
   data-is="simpletest"
   id="root"
@@ -216,7 +216,7 @@ exports[`Storyshots Story|How to create a story built from raw import 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from tags and template 1`] = `
+exports[`Storyshots Story|How to create a story builtFromTagsAndTemplate 1`] = `
 <div
   data-is="root"
   id="root"
@@ -231,7 +231,7 @@ exports[`Storyshots Story|How to create a story built from tags and template 1`]
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from the precompilation 1`] = `
+exports[`Storyshots Story|How to create a story builtFromThePrecompilation 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -242,7 +242,7 @@ exports[`Storyshots Story|How to create a story built from the precompilation 1`
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built with tag 1`] = `
+exports[`Storyshots Story|How to create a story builtWithTag 1`] = `
 <div
   data-is="test"
   id="root"
@@ -253,7 +253,7 @@ exports[`Storyshots Story|How to create a story built with tag 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story tags, template and tagConstructor at once 1`] = `
+exports[`Storyshots Story|How to create a story tagsTemplateAndTagConstructorAtOnce 1`] = `
 <div
   data-is="root"
   id="root"
@@ -269,7 +269,7 @@ exports[`Storyshots Story|How to create a story tags, template and tagConstructo
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story the mount instruction is not necessary 1`] = `
+exports[`Storyshots Story|How to create a story theMountInstructionIsNotNecessary 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -280,7 +280,7 @@ exports[`Storyshots Story|How to create a story the mount instruction is not nec
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story the opts value is not necessary 1`] = `
+exports[`Storyshots Story|How to create a story theOptsValueIsNotNecessary 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -349,7 +349,7 @@ exports[`Storyshots Story|Nest tags Matriochka 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|Nest tags Three tags 1`] = `
+exports[`Storyshots Story|Nest tags threeTags 1`] = `
 <div
   data-is="root"
   id="root"
diff --git a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
index c732d5c30a82..097fee75a552 100644
--- a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
+++ b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action on component method 1`] = `
+exports[`Storyshots Addon|Actions actionOnComponentMethod 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -19,7 +19,7 @@ exports[`Storyshots Addon|Actions Action on component method 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Actions Action on view method 1`] = `
+exports[`Storyshots Addon|Actions actionOnViewMethod 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -61,7 +61,7 @@ exports[`Storyshots Addon|Actions Action on view method 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -103,7 +103,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Centered Rounded 1`] = `
+exports[`Storyshots Addon|Centered rounded 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -122,7 +122,7 @@ exports[`Storyshots Addon|Centered Rounded 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Centered with action 1`] = `
+exports[`Storyshots Addon|Centered withAction 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -155,7 +155,7 @@ exports[`Storyshots Addon|Knobs Simple 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome view 1`] = `
+exports[`Storyshots Addon|Links goToWelcomeView 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -183,7 +183,7 @@ exports[`Storyshots Addon|Links Go to welcome view 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -225,7 +225,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -267,7 +267,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </section>
 `;
 
-exports[`Storyshots Button Rounded 1`] = `
+exports[`Storyshots Button rounded 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -309,7 +309,7 @@ exports[`Storyshots Button Rounded 1`] = `
 </section>
 `;
 
-exports[`Storyshots Button Square 1`] = `
+exports[`Storyshots Button square 1`] = `
 <section
   class="storybook-snapshot-container"
 >
diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
index bc0b461c4489..159ad8a0a3f6 100644
--- a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
+++ b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action and method 1`] = `
+exports[`Storyshots Addon|Actions actionAndMethod 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -9,7 +9,7 @@ exports[`Storyshots Addon|Actions Action and method 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions actionOnly 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -18,7 +18,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+exports[`Storyshots Addon|Actions multipleActions 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -27,7 +27,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addon|Actions multipleActionsObject 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -36,19 +36,19 @@ exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <button>
   You should be able to switch backgrounds for this story
 </button>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+exports[`Storyshots Addon|Backgrounds story2 1`] = `
 <button>
   This one too!
 </button>
 `;
 
-exports[`Storyshots Addon|Centered Rounded 1`] = `
+exports[`Storyshots Addon|Centered rounded 1`] = `
 <div
   style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
 >
@@ -77,7 +77,7 @@ exports[`Storyshots Addon|Contexts Languages 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
+exports[`Storyshots Addon|Contexts simpleCssTheming 1`] = `
 <div
   style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
 >
@@ -87,7 +87,13 @@ exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 40 years old.
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs allKnobs 1`] = `
 <div
   style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
 >
@@ -125,19 +131,13 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 40 years old.
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+exports[`Storyshots Addon|Knobs xssSafety 1`] = `
 <div>
   &lt;img src=x onerror="alert('XSS Attack')" &gt;
 </div>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
+exports[`Storyshots Addon|Links goToWelcome 1`] = `
 <button
   class="button rounded"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -146,7 +146,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <p>
   🤔😳😯😮
   <br />
@@ -156,7 +156,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </p>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <p>
   <strong>
     Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
@@ -164,7 +164,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </p>
 `;
 
-exports[`Storyshots App App 1`] = `
+exports[`Storyshots App app 1`] = `
 <div
   id="app"
 >
@@ -260,7 +260,7 @@ exports[`Storyshots App App 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button Rounded 1`] = `
+exports[`Storyshots Button rounded 1`] = `
 <button
   class="button rounded"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -269,7 +269,7 @@ exports[`Storyshots Button Rounded 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button Square 1`] = `
+exports[`Storyshots Button square 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -278,13 +278,13 @@ exports[`Storyshots Button Square 1`] = `
 </button>
 `;
 
-exports[`Storyshots Core|Parameters passed to story 1`] = `
+exports[`Storyshots Core|Parameters passedToStory 1`] = `
 <div>
-  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
 </div>
 `;
 
-exports[`Storyshots Core|Template string only 1`] = `
+exports[`Storyshots Core|Template stringOnly 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -293,7 +293,7 @@ exports[`Storyshots Core|Template string only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
+exports[`Storyshots Custom|Decorator for Vue render 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -310,7 +310,7 @@ exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
 </div>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
+exports[`Storyshots Custom|Decorator for Vue template 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -327,7 +327,7 @@ exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
 </div>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
+exports[`Storyshots Custom|Decorator for Vue withData 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -336,10 +336,10 @@ exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
   >
     <pre>
       {
-  "id": "custom-decorator-for-vue--with-data",
+  "id": "custom-decorator-for-vue--withdata",
   "kind": "Custom|Decorator for Vue",
-  "name": "With Data",
-  "story": "With Data",
+  "name": "withData",
+  "story": "withData",
   "customContext": 52,
   "parameters": {
     "options": {
@@ -351,6 +351,7 @@ exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
     },
     "globalParameter": "globalParameter",
     "framework": "vue",
+    "displayName": "With Data",
     "customParameter": 42
   }
 }
@@ -368,25 +369,7 @@ exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
-<div>
-  renders a div with some text in it..
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
-<div>
-  <h1>
-    A template
-  </h1>
-   
-  <p>
-    rendered in vue in storybook
-  </p>
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue preRegisteredComponent 1`] = `
 <p>
   <em>
     This component was pre-registered in .storybook/config.js
@@ -402,7 +385,13 @@ exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`]
 </p>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue renderComponent 1`] = `
 <button
   class="button"
   style="color: pink; border-color: pink;"
@@ -411,7 +400,19 @@ exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue templateComponent 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -420,7 +421,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue templateMethods 1`] = `
 <p>
   <em>
     Clicking the button will navigate to another story using the 'addon-links'
@@ -436,7 +437,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
 </p>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue vuexActions 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -445,7 +446,7 @@ exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue whateverYouWant 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -454,7 +455,7 @@ exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome Welcome 1`] = `
+exports[`Storyshots Welcome welcome 1`] = `
 <div
   class="main"
 >
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index a867d96a3f25..a33fed58da9d 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -417,7 +417,10 @@ export default function start(render, { decorateStory } = {}) {
             `${kindName} => ${name || key}: story.parameters.decorators is deprecated; use story.decorators instead.`)();
           }
           const decoratorParams = decorators ? { decorators } : null;
-          kind.add(name || displayName(key), storyFn, { ...parameters, ...decoratorParams });
+          const displayNameParams = {
+            displayName: name || displayName(key),
+          };
+          kind.add(key, storyFn, { ...parameters, ...decoratorParams, ...displayNameParams });
         }
       });
     });
diff --git a/lib/ui/src/components/sidebar/SidebarItem.tsx b/lib/ui/src/components/sidebar/SidebarItem.tsx
index 7673a82f0076..36767a030628 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.tsx
+++ b/lib/ui/src/components/sidebar/SidebarItem.tsx
@@ -135,6 +135,9 @@ const SidebarItem = ({
     iconName = 'folder';
   }
 
+  // eslint-disable-next-line react/destructuring-assignment
+  const displayName = (props.parameters && props.parameters.displayName) || name;
+
   return (
     <Item
       isSelected={isSelected}
@@ -143,7 +146,7 @@ const SidebarItem = ({
     >
       <Expander className="sidebar-expander" isExpandable={!isLeaf} isExpanded={isExpanded} />
       <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
-      <span>{name}</span>
+      <span>{displayName}</span>
     </Item>
   );
 };

From b1a872ba349af82c0dee74f3c4c6cc9a14f12ba5 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 27 Aug 2019 23:41:34 +0800
Subject: [PATCH 5/5] CSF: displayName => makeDisplayName per review feedback

---
 .../pages/configurations/options-parameter/index.md    |  2 +-
 examples/official-storybook/config.js                  |  2 +-
 lib/client-api/src/client_api.test.ts                  | 10 ++++++----
 lib/client-api/src/client_api.ts                       |  8 ++++----
 lib/core/src/client/preview/start.js                   |  4 ++--
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/configurations/options-parameter/index.md b/docs/src/pages/configurations/options-parameter/index.md
index fa4972b73905..2adaaee66b15 100644
--- a/docs/src/pages/configurations/options-parameter/index.md
+++ b/docs/src/pages/configurations/options-parameter/index.md
@@ -89,7 +89,7 @@ addParameters({
     * will not be transformed and will always take precedence over a named export.
     * @type {Function}
     */
-    displayName: lodash.startCase
+    makeDisplayName: lodash.startCase
   },
 });
 ```
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 2e61f87c49dc..560b8dbc3cd7 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -53,7 +53,7 @@ addParameters({
     theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
     storySort: (a, b) =>
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
-    displayName: key => startCase(key).toLowerCase(),
+    makeDisplayName: key => startCase(key).toLowerCase(),
   },
   backgrounds: [
     { name: 'storybook app', value: themes.light.appBg, default: true },
diff --git a/lib/client-api/src/client_api.test.ts b/lib/client-api/src/client_api.test.ts
index e19ff1c24233..e4f7f906d90b 100644
--- a/lib/client-api/src/client_api.test.ts
+++ b/lib/client-api/src/client_api.test.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { logger } from '@storybook/client-logger';
 import addons, { mockChannel } from '@storybook/addons';
-import ClientApi, { defaultDisplayName } from './client_api';
+import ClientApi, { defaultMakeDisplayName } from './client_api';
 import ConfigApi from './config_api';
 import StoryStore from './story_store';
 
@@ -26,15 +26,17 @@ jest.mock('@storybook/client-logger', () => ({
 }));
 
 describe('preview.client_api', () => {
-  describe('defaultDisplayName', () => {
-    it('should format CSF with sensible defaults', () => {
+  describe('defaultMakeDisplayName', () => {
+    it('should format CSF exports with sensible defaults', () => {
       const testCases = {
         name: 'Name',
         someName: 'Some Name',
         someNAME: 'Some NAME',
         some_custom_NAME: 'Some Custom NAME',
       };
-      Object.entries(testCases).forEach(([key, val]) => expect(defaultDisplayName(key)).toBe(val));
+      Object.entries(testCases).forEach(([key, val]) =>
+        expect(defaultMakeDisplayName(key)).toBe(val)
+      );
     });
   });
 
diff --git a/lib/client-api/src/client_api.ts b/lib/client-api/src/client_api.ts
index 8ca1308f9cac..0cae9c05feef 100644
--- a/lib/client-api/src/client_api.ts
+++ b/lib/client-api/src/client_api.ts
@@ -83,7 +83,7 @@ const withSubscriptionTracking = (storyFn: StoryFn) => {
   return result;
 };
 
-export const defaultDisplayName = (key: string) => startCase(key);
+export const defaultMakeDisplayName = (key: string) => startCase(key);
 
 export default class ClientApi {
   private _storyStore: StoryStore;
@@ -126,9 +126,9 @@ export default class ClientApi {
       this._globalParameters.options
     );
 
-  getDisplayName = () =>
-    (this._globalParameters.options && this._globalParameters.options.displayName) ||
-    defaultDisplayName;
+  getMakeDisplayName = () =>
+    (this._globalParameters.options && this._globalParameters.options.makeDisplayName) ||
+    defaultMakeDisplayName;
 
   addDecorator = (decorator: DecoratorFunction) => {
     this._globalDecorators.push(decorator);
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index a33fed58da9d..fb05b23e415d 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -399,7 +399,7 @@ export default function start(render, { decorateStory } = {}) {
       const kind = clientApi.storiesOf(kindName, true);
 
       // Transform the CSF named export if the user hasn't specified a name
-      const displayName = clientApi.getDisplayName();
+      const makeDisplayName = clientApi.getMakeDisplayName();
 
       // we should always have a framework, rest optional
       kind.addParameters({ framework, component, ...params });
@@ -418,7 +418,7 @@ export default function start(render, { decorateStory } = {}) {
           }
           const decoratorParams = decorators ? { decorators } : null;
           const displayNameParams = {
-            displayName: name || displayName(key),
+            displayName: name || makeDisplayName(key),
           };
           kind.add(key, storyFn, { ...parameters, ...decoratorParams, ...displayNameParams });
         }