Merge pull request #2856 from storybooks/angular-custom-styles

Add option to pass custom styles for angular components

addons/knobs/src/angular/helpers.js

@@ -86,11 +86,12 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
   return KnobWrapperComponent;
 };
 
-const createComponentFromTemplate = template => {
+const createComponentFromTemplate = (template, styles) => {
   const componentClass = class DynamicComponent {};
 
   return Component({
     template,
+    styles,
   })(componentClass);
 };
 
@@ -106,10 +107,10 @@ export function prepareComponent({ getStory, context, channel, knobStore }) {
   resetKnobs(knobStore, channel);
   const story = getStory(context);
   let { component } = story;
-  const { template } = story;
+  const { template, styles } = story;
 
   if (!component) {
-    component = createComponentFromTemplate(template);
+    component = createComponentFromTemplate(template, styles);
   }
 
   const { componentMeta, props, params, moduleMetadata } = getComponentMetadata({

app/angular/src/client/preview/angular/helpers.ts

@@ -68,26 +68,27 @@ const getModule = (
   return NgModule(moduleMeta)(moduleClass);
 };
 
-const createComponentFromTemplate = (template: string): Function => {
+const createComponentFromTemplate = (template: string, styles: string[]): Function => {
   const componentClass = class DynamicComponent {};
 
   return Component({
-    template: template,
+    template,
+    styles,
   })(componentClass);
 };
 
 const initModule = (
   currentStory: IGetStoryWithContext,
   context: IContext,
-  reRender: boolean = false,
+  reRender: boolean = false
 ): Function => {
   const storyObj = currentStory(context);
-  const { component, template, props, moduleMetadata = {} } = storyObj;
+  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
   let AnnotatedComponent;
 
   if (template) {
-    AnnotatedComponent = createComponentFromTemplate(template);
+    AnnotatedComponent = createComponentFromTemplate(template, styles);
   } else {
     AnnotatedComponent = component;
   }

app/angular/src/client/preview/angular/types.ts

@@ -16,6 +16,7 @@ export interface NgStory {
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;
   template?: string;
+  styles?: string[];
 }
 
 export interface NgError {

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

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

examples/angular-cli/src/stories/custom-styles.stories.ts

@@ -0,0 +1,43 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, text } from '@storybook/addon-knobs/angular';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Custom Style', module)
+  .add('Default', () => ({
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    moduleMetadata: {
+      declarations: [Button],
+    },
+    props: {
+      text: 'Button with custom styles',
+      onClick: action('log'),
+    },
+    styles: [
+      `
+      storybook-button-component {
+        background-color: yellow;
+        padding: 25px;
+      }
+    `,
+    ],
+  }))
+  .addDecorator(withKnobs)
+  .add('With Knobs', () => ({
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    moduleMetadata: {
+      declarations: [Button],
+    },
+    props: {
+      text: text('text', 'Button with custom styles'),
+      onClick: action('log'),
+    },
+    styles: [
+      `
+      storybook-button-component {
+        background-color: red;
+        padding: 25px;
+      }
+    `,
+    ],
+  }));