feat(documentation): adds visual regression tests for the text input (#…

…1921)

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

@@ -0,0 +1,26 @@
+const BASEURL = '/iframe.html?id=snapshots--input';
+const types = [
+  'text',
+  'number',
+  'email',
+  'tel',
+  'url',
+  'password',
+  'date',
+  'datetime-local',
+  'month',
+  'week',
+  'time',
+  'color',
+];
+
+describe('Input', () => {
+  describe('types', () => {
+    types.forEach(type => {
+      it(type, () => {
+        cy.visit(`${BASEURL}${type}`);
+        cy.percySnapshot(`Inputs-${type}`, { widths: [320, 1024] });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,116 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import meta from './input.stories';
+import { html } from 'lit';
+import { getCombinations, COMBINATIONS } from '../../../utils/inputComponentsGetCombinations';
+
+export default {
+  ...meta,
+  title: 'Snapshots',
+  render: renderInputSnapshot,
+};
+
+function renderInputSnapshot(_args: Args, context: StoryContext) {
+  const combinations = [
+    ...COMBINATIONS,
+    {
+      label: `Label - no Placeholder`,
+      placeholder: null,
+    },
+    {
+      label: `Label - with Value`,
+      value: 'Lorem Ipsum',
+    },
+  ];
+  return html`
+    <div class="d-flex flex-wrap align-items-start gap-regular">
+      ${['bg-white', 'bg-dark'].map(
+        bg => html`
+          <div class="${bg} d-flex gap-3 flex-column p-3">
+            <h3>Sizes</h3>
+            ${getCombinations('size', context.argTypes.size.options, combinations)
+              .filter(
+                (args: Args) =>
+                  !args.value ||
+                  (args.value &&
+                    (context.args.type === 'text' || context.args.type === 'password')),
+              )
+              .map(
+                (args: Args) =>
+                  html`
+                    <div>
+                      ${args.title !== undefined && args.title
+                        ? html`
+                            <h4>
+                              ${Object.entries(context.argTypes.size.control.labels)
+                                .filter(([key, value]) => key === args.size)
+                                .map(s => s[1])}
+                            </h4>
+                          `
+                        : ''}
+                      <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
+                    </div>
+                  `,
+              )}
+            <h3>Floating Label</h3>
+            ${getCombinations('floatingLabel', [true], combinations)
+              .filter(
+                (args: Args) =>
+                  !args.value ||
+                  (args.value &&
+                    (context.args.type === 'text' || context.args.type === 'password')),
+              )
+              .map(
+                (args: Args) =>
+                  html`
+                    <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
+                  `,
+              )}
+          </div>
+        `,
+      )}
+    </div>
+  `;
+}
+
+type Story = StoryObj;
+
+export const Inputtext: Story = {
+  args: {
+    type: 'text',
+  },
+};
+export const Inputpassword: Story = {
+  args: {
+    type: 'password',
+  },
+};
+export const Inputdate: Story = {
+  args: {
+    type: 'date',
+  },
+};
+export const Inputdatetimelocal: Story = {
+  args: {
+    type: 'datetime-local',
+  },
+};
+export const Inputmonth: Story = {
+  args: {
+    type: 'month',
+  },
+};
+export const Inputweek: Story = {
+  args: {
+    type: 'week',
+  },
+};
+export const Inputtime: Story = {
+  args: {
+    type: 'time',
+  },
+};
+export const Inputcolor: Story = {
+  args: {
+    type: 'color',
+  },
+};

packages/documentation/src/stories/components/input/input.stories.ts

@@ -210,6 +210,7 @@ function render(args: Args, context: StoryContext) {
       ?disabled="${args.disabled}"
       aria-label="${useAriaLabel ? args.label : nothing}"
       ?aria-invalid="${VALIDATION_STATE_MAP[args.validation]}"
+      value=${args.value ? args.value : nothing}
     />
   `;
   if (args.floatingLabel) {

packages/documentation/src/utils/inputComponentsGetCombinations.ts

@@ -0,0 +1,53 @@
+const SHORT_HINT =
+  'Hintus ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.';
+const LONG_HINT =
+  'Hintus ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi. Quia quod eligendi ab voluptas modi id distinctio iure vel possimus deserunt, amet, dolores laboriosam quas qui aut laborum? Et numquam esse laboriosam totam quod sapiente recusandae consectetur optio, quaerat quia.';
+const SHORT_LABEL = 'Label';
+const LONG_TEXT =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi';
+
+export const COMBINATIONS = [
+  {
+    title: true, // This property is true when a heading should be rendered above the story
+    label: `${SHORT_LABEL} - no Hint`,
+    hint: null,
+  },
+  {
+    label: `${SHORT_LABEL} - short Hint`,
+    hint: SHORT_HINT,
+  },
+  {
+    label: `${SHORT_LABEL} - long - ${LONG_TEXT}`,
+    hint: LONG_HINT,
+  },
+  {
+    label: `${SHORT_LABEL} - Disabled`,
+    disabled: true,
+  },
+  {
+    label: `${SHORT_LABEL} - Valid`,
+    validation: 'is-valid',
+  },
+  {
+    label: `${SHORT_LABEL} - Invalid`,
+    validation: 'is-invalid',
+  },
+];
+
+export function getCombinations(
+  argumentName: string,
+  argumentValues: Array<unknown>,
+  combinations: Array<{ label: string; [propName: string]: any }>,
+) {
+  let result: Array<Object> = [];
+  for (const argumentValue of argumentValues) {
+    result = [
+      ...result,
+      ...combinations.map(c => ({
+        ...c,
+        [argumentName]: argumentValue,
+      })),
+    ];
+  }
+  return result;
+}