test(documentation): implement schemes wrapper around all snapshot st…

…ories (#4109)

packages/documentation/src/shared/snapshots/schemes.ts

@@ -0,0 +1,24 @@
+import { html, TemplateResult } from 'lit';
+
+interface IOptions {
+  filter?: (scheme: string) => boolean;
+  additionalSchemes?: string[];
+}
+
+export const COLOR_SCHEMES = {
+  light: 'light',
+  // dark: 'dark',
+};
+
+export function schemes(renderFn: (scheme: string) => TemplateResult, options: IOptions = {}) {
+  const filter = options.filter || (() => true);
+  const additionalSchemes = options.additionalSchemes ?? [];
+
+  return html`${[...additionalSchemes, ...Object.values(COLOR_SCHEMES)]
+    .filter(filter)
+    .map(
+      scheme => html` <div data-color-scheme="${scheme}" class="p-16 palette-default">
+        ${renderFn(scheme)}
+      </div>`,
+    )}`;
+}

packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts

@@ -1,6 +1,7 @@
 import type { StoryContext, StoryObj } from '@storybook/web-components';
 import meta from './accordion.stories';
 import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -16,16 +17,10 @@ export const Accordion: Story = {
     _args: HTMLPostAccordionElement,
     context: StoryContext<HTMLPostAccordionElement & HTMLPostCollapsibleElementEventMap>,
   ) => {
-    return html`
-      <div>
-        ${['bg-white', 'bg-light', 'bg-dark'].map(
-          bg => html`
-            <div class="${bg} d-flex flex-column gap-16 p-16 mt-16">
-              ${meta.render?.({ ...context.args }, context)}
-            </div>
-          `,
-        )}
-      </div>
-    `;
+    return schemes(
+      () => html`
+        <div class="d-flex flex-column gap-16">${meta.render?.({ ...context.args }, context)}</div>
+      `,
+    );
   },
 };

packages/documentation/src/stories/components/app-store-badge/app-store-badge.snapshot.stories.ts

@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/web-components';
 import meta, { renderBadge } from './app-store-badge.stories';
 import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -13,29 +14,21 @@ type Story = StoryObj;
 
 export const AppStoreBadge: Story = {
   render: () => {
-    const appStoreLightBadge = '/assets/images/apple-store-badge-white.svg';
-
-    return html`
-      <div class="d-flex flex-wrap gap-4 align-items-start flex-column">
-        ${['bg-white', 'bg-dark'].map(
-          bg => html`
-            <div
-              class="${bg} d-flex gap-4 p-4 m-4"
-              data-color-mode="${bg === 'bg-white' ? 'light' : 'dark'}"
-            >
-              ${bg === 'bg-white'
-                ? renderBadge('apple-store')
-                : html`
-                    <a class="app-store-badge" href="#">
-                      <img src="${appStoreLightBadge}" alt="Apple App Store badge (white)" />
-                      <span class="visually-hidden">Download the App on the Apple Store</span>
-                    </a>
-                  `}
-              ${renderBadge('google-play')}
-            </div>
-          `,
-        )}
-      </div>
-    `;
+    return schemes(
+      scheme => html`
+        ${scheme === 'light'
+          ? renderBadge('apple-store')
+          : html`
+              <a class="app-store-badge" href="#">
+                <img
+                  src="/assets/images/apple-store-badge-white.svg"
+                  alt="Apple App Store badge (white)"
+                />
+                <span class="visually-hidden">Download the App on the Apple Store</span>
+              </a>
+            `}
+        ${renderBadge('google-play')}
+      `,
+    );
   },
 };

packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts

@@ -1,6 +1,7 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta, { Default } from './avatar.stories';
 import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
 import { bombArgs } from '@/utils';
 
 const { id, ...metaWithoutId } = meta;
@@ -10,43 +11,38 @@ export default {
   title: 'Snapshots',
 };
 
-type Story = StoryObj<HTMLPostAvatarPictureElement>;
+type Story = StoryObj;
 
 export const AvatarPicture: Story = {
-  render: (args: Args, context: StoryContext<HTMLPostAvatarPictureElement>) => {
-    return html`
-      <div id="Snapshots">
-        <h1 class="h4">Avatar</h1>
-        ${['bg-white', 'bg-dark'].map(
-          bg => html`
-            <div class="${bg} mt-16 p-16">
-              <div class="d-flex flex-column gap-regular">
-                  ${bombArgs({
-                    lastname: [null, 'Source'],
-                    firstname: ['Open'],
-                  }).map(
-                    (bombArgs: Args) =>
-                      html`<div class="py-8">
-                        ${Default.render?.({ ...context.args, ...bombArgs }, context)}
-                      </div>`,
-                  )}
+  render: (args: Args, context: StoryContext) => {
+    return schemes(
+      () => html`
+        <div class="mt-16">
+          <div class="d-flex flex-column gap-regular">
+              ${bombArgs({
+                lastname: [null, 'Source'],
+                firstname: ['Open'],
+              }).map(
+                (bombArgs: Args) =>
+                  html`<div class="py-8">
+                    ${Default.render?.({ ...context.args, ...bombArgs }, context)}
+                  </div>`,
+              )}
 
-                  <div class="py-8">
-                    ${Default.render?.({ ...args, email: '[email protected]' }, context)}
-                  </div>
+              <div class="py-8">
+                ${Default.render?.({ ...args, email: '[email protected]' }, context)}
+              </div>
 
-                  <div class="py-8">
-                    ${Default.render?.(
-                      { ...args, imageSrc: '/assets/images/logo-swisspost.svg' },
-                      context,
-                    )}
-                  </div>
-                </div>
+              <div class="py-8">
+                ${Default.render?.(
+                  { ...args, imageSrc: '/assets/images/logo-swisspost.svg' },
+                  context,
+                )}
               </div>
             </div>
-          `,
-        )}
-      </div>
-    `;
+          </div>
+        </div>
+      `,
+    );
   },
 };

packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts

@@ -1,6 +1,7 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta from './badge.stories';
 import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
 import { bombArgs } from '@/utils';
 
 const { id, ...metaWithoutId } = meta;
@@ -14,22 +15,18 @@ type Story = StoryObj;
 
 export const Badge: Story = {
   render: (_args: Args, context: StoryContext) => {
-    return html`
-      <div class="d-flex flex-wrap gap-4 align-items-start">
-        ${['bg-white', 'bg-dark'].map(
-          bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
-              ${bombArgs({
-                showNumber: [true, false],
-                size: context.argTypes.size.options,
-                background: context.argTypes.background.options,
-              })
-                .filter(args => !(!args.showNumber && args.size === 'small'))
-                .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
-            </div>
-          `,
-        )}
-      </div>
-    `;
+    return schemes(
+      () => html`
+        <div class="d-flex flex-wrap align-items-start gap-16">
+          ${bombArgs({
+            showNumber: [true, false],
+            size: context.argTypes.size.options,
+            background: context.argTypes.background.options,
+          })
+            .filter(args => !(!args.showNumber && args.size === 'small'))
+            .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
+        </div>
+      `,
+    );
   },
 };