feat(documentation-v7): migrate snapshot test for collapsible (#1823)

packages/documentation-v7/cypress/snapshots/components/collapsible.snapshot.ts

@@ -0,0 +1,7 @@
+describe('Collapsible', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--collapsible');
+    cy.get('post-collapsible.hydrated').should('be.visible');
+    cy.percySnapshot('Collapsible');
+  });
+});

packages/documentation-v7/src/stories/components/collapsible/collapsible.snapshot.stories.tsx

@@ -0,0 +1,41 @@
+import { html } from 'lit';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { bombArgs } from '../../../utils/bombArgs';
+
+import meta, { Default } from './collapsible.stories';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj<HTMLPostCollapsibleElement>;
+
+export const collapsible: Story = {
+  render: (_args: Args, context: StoryContext<HTMLPostCollapsibleElement>) => {
+    const templateVariants = bombArgs({
+      innerHTML: [
+        `<span slot="header">Titulum</span><p>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
+        `<p>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
+      ],
+      collapsed: [false, true],
+      headingLevel: [1, 2, 3, 4, 5, 6],
+    }).map((args: Args) => {
+      return html`
+        <div class="col-6 p-3">
+          ${meta.render?.({ ...context.args, ...Default.args, ...args }, context)}
+        </div>
+      `;
+    });
+
+    return html`
+      <div>
+        ${['white', 'dark'].map(
+          bg => html`
+            <div class=${'row bg-' + bg}>${templateVariants}</div>
+          `,
+        )}
+      </div>
+    `;
+  },
+};