feat(documentation): add snapshot test for badge (#1887)

packages/documentation/cypress/snapshots/components/badge.snapshot.ts

@@ -0,0 +1,6 @@
+describe('Badge', () => {
+    it('default', () => {
+      cy.visit('./iframe.html?id=snapshots--badge');
+      cy.percySnapshot('Badges', { widths: [400] });
+    });
+  });

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

@@ -0,0 +1,39 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './badge.stories';
+import { html } from 'lit';
+import { bombArgs } from '../../../utils/bombArgs';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Badge: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`
+      <div class="d-flex flex-wrap gap-1 align-items-start">
+        ${['bg-white', 'bg-dark'].map(
+          bg => html`
+            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+              ${bombArgs({
+                text: [
+                  'Malakceptebla Insigno',
+                  'Contentus momentus vero siteos et accusam iretea et justo.',
+                ],
+                size: context.argTypes.size.options,
+                interactionType: context.argTypes.interactionType.options,
+                nestedBadge: [false, true],
+                checked: [false, true],
+                dismissed: [false],
+              })
+                .filter(args => !(args.interactionType !== 'checkable' && args.checked === true))
+                .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};