From cc6c9f55a39709baabf7d24faf5b303e55668d7a Mon Sep 17 00:00:00 2001 From: igor Date: Sun, 28 Jan 2018 12:03:19 +0200 Subject: [PATCH 1/3] Add option to pass custom styles for angular components --- .../src/client/preview/angular/helpers.ts | 9 ++++---- .../src/client/preview/angular/types.ts | 1 + .../src/stories/custom-styles.stories.ts | 22 +++++++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 examples/angular-cli/src/stories/custom-styles.stories.ts diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 8de90a47f09..69e0e060535 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/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, + styles: 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; } diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts index f24ab7beb2a..d8da614648e 100644 --- a/app/angular/src/client/preview/angular/types.ts +++ b/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 { diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts new file mode 100644 index 00000000000..410bf494252 --- /dev/null +++ b/examples/angular-cli/src/stories/custom-styles.stories.ts @@ -0,0 +1,22 @@ +import { storiesOf } from '@storybook/angular'; +import { action } from '@storybook/addon-actions'; +import { Button } from '@storybook/angular/demo'; + +storiesOf('Custom Style', module).add('Default', () => ({ + template: ``, + moduleMetadata: { + declarations: [Button], + }, + props: { + text: 'Button with custom styles', + onClick: action('log'), + }, + styles: [ + ` + storybook-button-component { + background-color: yellow; + padding: 25px; + } + `, + ], +})); From f71a7e8c1f878e7bd549d202940fe667afc7343b Mon Sep 17 00:00:00 2001 From: igor Date: Sun, 28 Jan 2018 16:17:29 +0200 Subject: [PATCH 2/3] Add snapshot --- .../custom-styles.stories.storyshot | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot new file mode 100644 index 00000000000..eeb8e98df4b --- /dev/null +++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Custom Style Default 1`] = ` + + + + + + + + + + + +`; From 0609f0a02bcfc66a4a7ba2ba83d97823a8ba4504 Mon Sep 17 00:00:00 2001 From: igor Date: Mon, 29 Jan 2018 09:22:46 +0200 Subject: [PATCH 3/3] Support styles with knobs --- addons/knobs/src/angular/helpers.js | 7 ++- .../src/client/preview/angular/helpers.ts | 4 +- .../custom-styles.stories.storyshot | 28 +++++++++ .../src/stories/custom-styles.stories.ts | 57 +++++++++++++------ 4 files changed, 73 insertions(+), 23 deletions(-) diff --git a/addons/knobs/src/angular/helpers.js b/addons/knobs/src/angular/helpers.js index 6e0a7e27bef..3b05496d41d 100644 --- a/addons/knobs/src/angular/helpers.js +++ b/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({ diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 69e0e060535..00f70345346 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -72,8 +72,8 @@ const createComponentFromTemplate = (template: string, styles: string[]): Functi const componentClass = class DynamicComponent {}; return Component({ - template: template, - styles: styles, + template, + styles, })(componentClass); }; diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot index eeb8e98df4b..454a8bf5b98 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot @@ -24,3 +24,31 @@ exports[`Storyshots Custom Style Default 1`] = ` `; + +exports[`Storyshots Custom Style With Knobs 1`] = ` + + + + + + + + + + + +`; diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts index 410bf494252..7bf4e59958c 100644 --- a/examples/angular-cli/src/stories/custom-styles.stories.ts +++ b/examples/angular-cli/src/stories/custom-styles.stories.ts @@ -1,22 +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: ``, - moduleMetadata: { - declarations: [Button], - }, - props: { - text: 'Button with custom styles', - onClick: action('log'), - }, - styles: [ - ` - storybook-button-component { - background-color: yellow; - padding: 25px; - } - `, - ], -})); +storiesOf('Custom Style', module) + .add('Default', () => ({ + template: ``, + 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: ``, + moduleMetadata: { + declarations: [Button], + }, + props: { + text: text('text', 'Button with custom styles'), + onClick: action('log'), + }, + styles: [ + ` + storybook-button-component { + background-color: red; + padding: 25px; + } + `, + ], + }));