Add visual regression tests

packages/documentation/cypress/snapshots/foundation/layout/containers.snapshot.ts

@@ -0,0 +1,9 @@
+describe('Containers', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--containers');
+    cy.get('.container', { timeout: 30000 }).should('be.visible');
+
+    // takes a screenshot for each breakpoint
+    cy.percySnapshot('Containers', { widths: [320, 720, 960, 1080, 1440] });
+  });
+});

packages/documentation/src/stories/foundation/layout/containers/containers.snapshot.stories.ts

@@ -0,0 +1,26 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './containers.stories';
+import { html } from 'lit';
+import { StoryFn } from '@storybook/web-components';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Containers: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    return html`${['container', 'container-fluid'].map(containerClass =>
+      meta.render({ containerClass }, context),
+    )}`;
+  },
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html`
+      <div class="container-snapshots">${story(context.args, context)}</div>
+    `,
+  ],
+};

packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts

@@ -14,7 +14,7 @@ const meta: MetaExtended = {
   `,
   decorators: [
     (story: StoryFn, context: StoryContext) => html`
-      <div class="containers-example">${story(context.args, context)}</div>
+      <div class="container-examples">${story(context.args, context)}</div>
     `,
   ],
 };

packages/documentation/src/stories/foundation/layout/containers/containers.styles.scss

@@ -5,7 +5,7 @@ $padding-bg: #B8E2F3;
 $content-bg: #A69CE1;
 $content-fg: #59718B;
 
-.containers-example {
+.container-examples {
   background: $margin-bg;
 
   .container,
@@ -19,3 +19,17 @@ $content-fg: #59718B;
     }
   }
 }
+
+.container-snapshots {
+  .container {
+    &::before {
+      content: "Container";
+    }
+  }
+
+  .container-fluid {
+    &::before {
+      content: "Container fluid";
+    }
+  }
+}