From 8fe441d41106bfa41893e664d9ae94dd4dc68a9f Mon Sep 17 00:00:00 2001
From: "brett.upton" <brett.upton@standardbank.co.za>
Date: Tue, 16 Mar 2021 10:13:12 +0200
Subject: [PATCH] Implement PR feedback

---
 ...tiple-selector.component.stories.storyshot | 37 ++++++++++++++-----
 .../attribute-selector.component.ts           |  7 +++-
 .../attributewithvalue-selector.component.ts  |  7 ----
 .../class-selector.component.ts               |  9 +++++
 .../multiple-selector.component.stories.ts    | 10 ++---
 .../multiple-selector.component.ts            |  4 +-
 6 files changed, 49 insertions(+), 25 deletions(-)
 delete mode 100644 examples/angular-cli/src/stories/basics/component-with-complex-selectors/attributewithvalue-selector.component.ts
 create mode 100644 examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts

diff --git a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
index 792390e45ead..b33394622764 100644
--- a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
@@ -1,25 +1,39 @@
 // 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>
 `;
@@ -27,9 +41,12 @@ exports[`Storyshots Basics / Component / With Complex Selectors attribute value
 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>
 `;
diff --git a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
index ddf00681476a..41cce5c36a27 100644
--- a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
+++ b/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 {}
diff --git a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attributewithvalue-selector.component.ts b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attributewithvalue-selector.component.ts
deleted file mode 100644
index df105ff3290e..000000000000
--- a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attributewithvalue-selector.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'storybook-attribute-value-selector[foo=bar]',
-  template: '<p>Attribute with value</p>',
-})
-export class AttributeWithValueSelectorComponent {}
diff --git a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts
new file mode 100644
index 000000000000..4d73fb43ebe4
--- /dev/null
+++ b/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 {}
diff --git a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
index 4de7db3ed96e..52633a23fe65 100644
--- a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
+++ b/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,
 };
diff --git a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
index f12a75765f90..8c9648efa007 100644
--- a/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
+++ b/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 {}