add example stories to test styles pattern

examples/angular-cli/src/stories/component-with-style/styled.component.css

@@ -0,0 +1,3 @@
+.red-color {
+ color: red;
+}

examples/angular-cli/src/stories/component-with-style/styled.component.html

@@ -0,0 +1,5 @@
+<div>
+ <p class="red-color">Styled with scoped CSS</p>
+ <p class="blue-color">Styled with scoped SCSS</p>
+ <p class="green-color">Styled with global CSS</p>
+</div>

examples/angular-cli/src/stories/component-with-style/styled.component.scss

@@ -0,0 +1,5 @@
+div {
+ p.blue-color {
+ color: blue;
+ }
+}

examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts

@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/angular';
+import { StyledComponent } from './styled.component';
+
+storiesOf('Component styles', module).add('Component with styles', () => ({
+ component: StyledComponent,
+}));

examples/angular-cli/src/stories/component-with-style/styled.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'storybook-styled-component',
+ templateUrl: './styled.component.html',
+ styleUrls: ['./styled.component.css', './styled.component.scss'],
+})
+export class StyledComponent {}

examples/angular-cli/src/styles.css

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+
+.green-color {
+ color: green;
+}