chore(documentation): update snapshot stories (#1844)

Author: alizedebray

packages/documentation/cypress/snapshots/components/choice-card.snapshot.ts

@@ -0,0 +1,6 @@
+describe('Choice card', () => {
+  it('default', () => {
+    cy.visit('./iframe.html?id=snapshots--choice-card');
+    cy.percySnapshot('Choice cards', { widths: [1440] });
+  });
+});

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

@@ -13,12 +13,11 @@ type Story = StoryObj;
 export const Blockquote: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div style="display: 'flex'; flexWrap: 'wrap'; gap: '1rem'; alignItems: 'start';">
+      <div class="d-flex flex-wrap align-items-start gap-regular">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div
-              class=${bg}
-              style="padding: '1rem'; display: 'flex'; gap: '1rem'; flexWrap: 'wrap'; alignItems: 'start;"
+              class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular"
             >
               ${bombArgs({
                 text: [

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

@@ -17,8 +17,7 @@ export const Button: Story = {
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div
-              class="${bg}"
-              style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: start; padding: 1rem;"
+              class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular"
             >
               ${bombArgs({
                 variant: context.argTypes.variant.options,

packages/documentation/src/stories/components/choice-card/checkbox-card.stories.ts

@@ -1,5 +1,5 @@
 import { BADGE } from '../../../../.storybook/constants';
-import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-control';
+import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-card';
 
 export default {
   ...choiceCardMeta,

packages/documentation/src/stories/components/choice-card/choice-control.snapshot.stories.ts renamed to packages/documentation/src/stories/components/choice-card/choice-card.snapshot.stories.ts

@@ -1,5 +1,5 @@
 import { bombArgs } from '../../../utils/bombArgs';
-import { choiceCardMeta, choiceCardDefault } from './choice-control';
+import { choiceCardMeta, choiceCardDefault } from './choice-card';
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 

packages/documentation/src/stories/components/choice-card/choice-control.ts renamed to packages/documentation/src/stories/components/choice-card/choice-card.ts

@@ -1,5 +1,5 @@
 import { BADGE } from '../../../../.storybook/constants';
-import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-control';
+import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-card';
 
 export default {
   ...choiceCardMeta,

packages/documentation/src/stories/components/choice-card/radiobutton-card.stories.ts

@@ -17,8 +17,7 @@ export const Heading: Story = {
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div
-              class="${bg} mt-3"
-              style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem;"
+              class="${bg} d-flex flex-column gap-regular p-regular mt-regular"
             >
               ${bombArgs({
                 title: [