Implement PR feedback

examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot

@@ -1,35 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Basics / Component / With Complex Selectors Input Selectors 1`] = `
+<storybook-wrapper>
+  <foo>
+    foo
+  </foo>
+</storybook-wrapper>
+`;
+
 exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = `
 <storybook-wrapper>
   <storybook-attribute-selector
-    foo=""
+    foo="bar"
   >
-    <p>
+    <h3>
       Attribute selector
-    </p>
+    </h3>
+     Selector: "storybook-attribute-selector[foo=bar]" 
+    <br />
+     Generated template: "&lt;storybook-attribute-selector foo="bar"&gt;&lt;/storybook-attribute-selector&gt;" 
   </storybook-attribute-selector>
 </storybook-wrapper>
 `;
 
-exports[`Storyshots Basics / Component / With Complex Selectors attribute value selectors 1`] = `
+exports[`Storyshots Basics / Component / With Complex Selectors class selectors 1`] = `
 <storybook-wrapper>
   <storybook-attribute-value-selector
-    foo="bar"
+    class="foo"
   >
-    <p>
-      Attribute with value
-    </p>
+    <h3>
+      Class selector
+    </h3>
+     Selector: "storybook-class-selector.foo" 
+    <br />
+     Generated template: "&lt;storybook-class-selector class="bar"&gt;&lt;/storybook-class-selector&gt;" 
   </storybook-attribute-value-selector>
 </storybook-wrapper>
 `;
 
 exports[`Storyshots Basics / Component / With Complex Selectors multiple selectors 1`] = `
 <storybook-wrapper>
   <storybook-multiple-selector>
-    <p>
+    <h3>
       Multiple selector
-    </p>
+    </h3>
+     Selector: "storybook-multiple-selector, storybook-multiple-selector2" 
+    <br />
+     Generated template: "&lt;storybook-multiple-selector&gt;&lt;/storybook-multiple-selector&gt;" 
   </storybook-multiple-selector>
 </storybook-wrapper>
 `;

examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'storybook-attribute-selector[foo]',
-  template: '<p>Attribute selector</p>',
+  selector: 'storybook-attribute-selector[foo=bar]',
+  template: `<h3>Attribute selector</h3>
+    Selector: "storybook-attribute-selector[foo=bar]" <br />
+    Generated template: "&lt;storybook-attribute-selector
+    foo="bar">&lt;/storybook-attribute-selector>" `,
 })
 export class AttributeSelectorComponent {}

examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-attribute-value-selector.foo',
+  template: `<h3>Class selector</h3>
+    Selector: "storybook-class-selector.foo" <br />
+    Generated template: "&lt;storybook-class-selector class="bar">&lt;/storybook-class-selector>" `,
+})
+export class ClassSelectorComponent {}

examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts

@@ -1,6 +1,6 @@
 import { MultipleSelectorComponent } from './multiple-selector.component';
 import { AttributeSelectorComponent } from './attribute-selector.component';
-import { AttributeWithValueSelectorComponent } from './attributewithvalue-selector.component';
+import { ClassSelectorComponent } from './class-selector.component';
 
 export default {
   title: 'Basics / Component / With Complex Selectors',
@@ -20,9 +20,9 @@ AttributeSelectors.parameters = {
   component: AttributeSelectorComponent,
 };
 
-export const AttributeValueSelectors = () => ({});
+export const ClassSelectors = () => ({});
 
-AttributeValueSelectors.storyName = 'attribute value selectors';
-AttributeValueSelectors.parameters = {
-  component: AttributeWithValueSelectorComponent,
+ClassSelectors.storyName = 'class selectors';
+ClassSelectors.parameters = {
+  component: ClassSelectorComponent,
 };

examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts

@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'storybook-multiple-selector, storybook-multiple-selector2',
-  template: '<p>Multiple selector</p>',
+  template: `<h3>Multiple selector</h3>
+    Selector: "storybook-multiple-selector, storybook-multiple-selector2" <br />
+    Generated template: "&lt;storybook-multiple-selector>&lt;/storybook-multiple-selector>" `,
 })
 export class MultipleSelectorComponent {}