Merge pull request sparkdesignsystem#2201 from sparkdesignsystem/angu…

…lar-decorator-individually Add Angular SB containers individually instead of globally
afebbraro · Oct 24, 2019 · c17c73a · c17c73a
2 parents 68f55f6 + f6c9925
commit c17c73a
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 16 deletions.
diff --git a/angular/.storybook/config.js b/angular/.storybook/config.js
@@ -3,21 +3,6 @@ import { withA11y } from '@storybook/addon-a11y';
 import sparkTheme from "./storybook-spark-theme";
 import '../src/polyfills';
 
-const storyWrapper = templateFn => storyFn => {
-  const story = storyFn();
-  return {
-    ...story,
-    template: templateFn(story.template)
-  };
-};
-
-addDecorator(
-  storyWrapper(
-    storyContent => (
-      `<div class="sprk-o-Box">${ storyContent }<div>`
-    )
-  )
-);
 
 addDecorator(withA11y);
 

diff --git a/angular/.storybook/helpers/storyWrapper.js b/angular/.storybook/helpers/storyWrapper.js
@@ -0,0 +1,11 @@
+const storyWrapper = templateFn => storyFn => {
+  const story = storyFn();
+  return {
+    ...story,
+    template: templateFn(story.template)
+  };
+};
+
+export {
+  storyWrapper,
+};
diff --git a/angular/projects/spark-angular/src/lib/components/sprk-accordion/sprk-accordion.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-accordion/sprk-accordion.stories.ts
@@ -1,3 +1,4 @@
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 import { SprkAccordionModule } from './sprk-accordion.module';
 import { SprkAccordionItemModule } from '../sprk-accordion-item/sprk-accordion-item.module';
 import { RouterModule } from '@angular/router';
@@ -8,6 +9,13 @@ import { SprkAccordionComponent } from './sprk-accordion.component';
 export default {
   title: 'Components|Accordions',
   component: SprkAccordionModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ],
 };
 
 const modules = {

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-alert/sprk-alert.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-alert/sprk-alert.stories.ts
@@ -1,8 +1,16 @@
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 import { SprkAlertModule } from './sprk-alert.module';
 
 export default {
   title: 'Components|Alerts',
   component: SprkAlertModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ],
 };
 
 const modules = {

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-divider/sprk-divider.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-divider/sprk-divider.stories.ts
@@ -1,8 +1,16 @@
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 import { SprkDividerModule } from './sprk-divider.module';
 
 export default {
   title: 'Components|Divider',
   component: SprkDividerModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ],
 };
 
 const modules = {

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-dropdown/sprk-dropdown.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-dropdown/sprk-dropdown.stories.ts
@@ -2,10 +2,18 @@ import { SprkDropdownModule } from './sprk-dropdown.module';
 import { RouterModule } from '@angular/router';
 import { APP_BASE_HREF } from '@angular/common';
 import { SprkDropdownComponent } from './sprk-dropdown.component';
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 
 export default {
   title: 'Components|Dropdown',
   component: SprkDropdownModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ],
 };
 
 const modules = {

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-icon/sprk-icon.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-icon/sprk-icon.stories.ts
@@ -1,8 +1,16 @@
 import { SprkIconModule } from './sprk-icon.module';
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 
 export default {
   title: 'Components|Icons',
   component: SprkIconModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ],
 };
 
 const modules = {

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-toggle/sprk-toggle.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-toggle/sprk-toggle.stories.ts
@@ -1,4 +1,5 @@
 import { RouterModule } from '@angular/router';
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 import { APP_BASE_HREF } from '@angular/common';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SprkToggleModule } from './sprk-toggle.module';
@@ -7,6 +8,13 @@ import { SprkToggleComponent } from './sprk-toggle.component';
 export default {
   title: 'Components|Toggle',
   component: SprkToggleModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ],
 };
 
 const modules = {

diff --git a/angular/projects/spark-angular/src/lib/directives/inputs/sprk-button/sprk-button.stories.ts b/angular/projects/spark-angular/src/lib/directives/inputs/sprk-button/sprk-button.stories.ts
@@ -1,8 +1,16 @@
 import { SprkButtonModule } from './sprk-button.module';
+import { storyWrapper } from '../../../../../../../.storybook/helpers/storyWrapper';
 
 export default {
   title: 'Components|Buttons',
   component: SprkButtonModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ],
  };
 
 const modules = {
@@ -18,7 +26,7 @@ export const primary = () => ({
       data-id="button-primary"
       sprkButton
     >
-      Button
+      Buttons
     </button>
   `,
 });