Better examples separation

examples/angular-cli/.storybook/addons.js

@@ -4,3 +4,4 @@ import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-options/register';

examples/angular-cli/.storybook/config.js

@@ -1,15 +1,20 @@
 import { configure } from '@storybook/angular';
+import { setOptions } from '@storybook/addon-options';
 import addCssWarning from '../src/cssWarning';
 
 addCssWarning();
 
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
+
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
   require('../src/stories');
 
   // automatically import all story ts files that end with *.stories.ts
-  const req = require.context('../src/stories', true, /\.stories\.ts$/)
-  req.keys().forEach((filename) => req(filename))
+  const req = require.context('../src/stories', true, /\.stories\.ts$/);
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);

examples/angular-cli/package.json

@@ -33,6 +33,7 @@
     "@storybook/addon-actions": "^3.4.0-alpha.8",
     "@storybook/addon-links": "^3.4.0-alpha.8",
     "@storybook/addon-notes": "^3.4.0-alpha.8",
+    "@storybook/addon-options": "^3.4.0-alpha.8",
     "@storybook/addon-storyshots": "^3.4.0-alpha.8",
     "@storybook/addons": "^3.4.0-alpha.8",
     "@storybook/angular": "^3.4.0-alpha.8",

examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Actions Action and method 1`] = `
+exports[`Storyshots Addon|Actions Action and method 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c5=""
+    _nghost-c4=""
   >
 
 
     <button
-      _ngcontent-c5=""
+      _ngcontent-c4=""
     >
       Action and Method
     </button>
@@ -22,19 +22,19 @@ exports[`Storyshots Addon Actions Action and method 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions Action only 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c4=""
+    _nghost-c3=""
   >
 
 
     <button
-      _ngcontent-c4=""
+      _ngcontent-c3=""
     >
       Action only
     </button>

examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs All knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -84,7 +84,7 @@ exports[`Storyshots Addon Knobs All knobs 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon Knobs Simple 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}

examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Another Button button with link to another story 1`] = `
+exports[`Storyshots Addon|Links button with link to another story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c6=""
+    _nghost-c5=""
   >
 
 
     <button
-      _ngcontent-c6=""
+      _ngcontent-c5=""
     >
       Go to Welcome Story
     </button>

examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c8=""
+    _nghost-c7=""
   >
 
 
     <button
-      _ngcontent-c8=""
+      _ngcontent-c7=""
     >
       Notes with HTML
     </button>
@@ -22,19 +22,19 @@ exports[`Storyshots Addon Notes Note with HTML 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes Simple note 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-c7=""
+    _nghost-c6=""
   >
 
 
     <button
-      _ngcontent-c7=""
+      _ngcontent-c6=""
     >
       Notes on some Button
     </button>

examples/angular-cli/src/stories/__snapshots__/custom-ng-content.stories.storyshot

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|ng-content Default 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <storybook-with-ng-content>
+      <div
+        style="color: #1e88e5;"
+      >
+        <h1>
+          This is rendered in ng-content
+        </h1>
+      </div>
+    </storybook-with-ng-content>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Custom|Pipes Simple 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Custom|Pipes With Knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-name>
+    <h1>
+      CustomPipe: foobar
+    </h1>
+  </storybook-name>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot → examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot

@@ -1,34 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom Pipe Default 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-name>
-    <h1>
-      CustomPipe: foobar
-    </h1>
-  </storybook-name>
-</storybook-dynamic-app-root>
-`;
-
-exports[`Storyshots Custom Pipe/With Knobs NameComponent 1`] = `
-<storybook-dynamic-app-root
-  cfr={[Function CodegenComponentFactoryResolver]}
-  data={[Function Object]}
-  target={[Function ViewContainerRef_]}
->
-  <storybook-name>
-    <h1>
-      CustomPipe: foobar
-    </h1>
-  </storybook-name>
-</storybook-dynamic-app-root>
-`;
-
-exports[`Storyshots Custom ngModule metadata simple 1`] = `
+exports[`Storyshots Custom|Providers Simple 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -55,7 +27,7 @@ exports[`Storyshots Custom ngModule metadata simple 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom ngModule metadata with knobs 1`] = `
+exports[`Storyshots Custom|Providers With knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}

examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot

@@ -1,20 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom Style Default 1`] = `
+exports[`Storyshots Custom|Style Default 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <ng-component>
     <storybook-button-component
-      _nghost-c9=""
+      _nghost-c8=""
       ng-reflect-text="Button with custom styles"
     >
 
 
       <button
-        _ngcontent-c9=""
+        _ngcontent-c8=""
       >
         Button with custom styles
       </button>
@@ -25,24 +25,24 @@ exports[`Storyshots Custom Style Default 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom Style With Knobs 1`] = `
+exports[`Storyshots Custom|Style With Knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <ng-component
-    _nghost-c10=""
+    _nghost-c9=""
   >
     <storybook-button-component
-      _ngcontent-c10=""
-      _nghost-c11=""
+      _ngcontent-c9=""
+      _nghost-c10=""
       ng-reflect-text="Button with custom styles"
     >
 
 
       <button
-        _ngcontent-c11=""
+        _ngcontent-c10=""
       >
         Button with custom styles
       </button>