fix: structure

sbb-design-systems · Apr 18, 2024 · d37c484 · d37c484
1 parent 0024b06
commit d37c484
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 deletions.
diff --git a/src/storybook/testing/chromatic.ts b/src/storybook/testing/chromatic.ts
@@ -9,8 +9,6 @@ import type {
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import { withBackgroundDecorator } from './with-background-decorator.js';
-
 import '../../components/title.js';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -23,25 +21,24 @@ export function combineStories(config: Meta, stories: StoryParameter): StoryObj[
   const decorators = (name: string, story: StoryObj): Decorator[] =>
     (
       [
-        (story) =>
+        (story, context) =>
           html`<div style="margin-block-end: 2rem;">
             <sbb-title
               level="5"
               style="margin-block-end: 1rem; margin-block-start: 0; text-transform: capitalize;"
             >
-              ${unCamelCase(name)} ${story()}
+              ${unCamelCase(name)}
             </sbb-title>
-          </div>`,
-        withBackgroundDecorator,
-        (story, context) => html`
-            <div style="outline: 1px solid #ad00ff;${
-              context.parameters.originalLayout !== 'fullscreen' ? 'padding: 2rem' : ''
-            }"
+            <div
+              style="outline: 1px solid #ad00ff;${context.parameters.originalLayout !== 'fullscreen'
+                ? 'padding: 2rem;'
+                : ''}${context.parameters.backgroundColor
+                ? `background-color:${context.parameters.backgroundColor(context)};`
+                : ''}"
             >
               ${story()}
             </div>
-          </div>
-        `,
+          </div> `,
       ] as Decorator[]
     )
       .concat(config.decorators || [])

diff --git a/src/storybook/testing/with-background-decorator.ts b/src/storybook/testing/with-background-decorator.ts
@@ -11,18 +11,16 @@ export const withBackgroundDecorator = makeDecorator({
 
     // For Chromatic we need to return html
     if (context.name === 'Chromatic Stories') {
-      if (!backgroundColor) {
+      const isChromaticStoriesMain = !(
+        getStory(context) as { strings: string[] }
+      ).strings[0].includes('outline');
+
+      if (!backgroundColor || isChromaticStoriesMain) {
         return getStory(context);
       } else {
-        const isChromaticStoriesMain = !(
-          getStory(context) as { strings: string[] }
-        ).strings[0].includes('outline');
-
-        return !isChromaticStoriesMain
-          ? html`<div style="background-color: ${backgroundColor(context)}">
-              ${getStory(context)}
-            </div>`
-          : getStory(context);
+        return html`<div style="background-color: ${backgroundColor(context)}">
+          ${getStory(context)}
+        </div>`;
       }
     } else {
       // For standard case we manipulate the body