[Storybook] Add ability to auto capture variations of a Story

[omacranger]

Description

This PR adds the ability to test additional variations of a story by supplying custom args which will be appended to the initial args state prior to each capture. For example, you could have a single Storybook Story with a Button component with controls to toggle the size and primary props so users could see the story in their playground and still take snapshots of each state.

With that example, here we could have a single Story to not clutter the UI, but still take snapshots of numerous states when using Sauce Visual. Below tests numerous size, disabled, and primary states. Each StoryVariation allows customizing the name and overriding the args for a story. It will reset the args to the default initialArgs state prior to each snapshot variation.

See the parameters.sauceVisual.variations property below.

const meta = {
  title: "Example/Button",
  component: Button,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: "centered",
    sauceVisual: {
      variations: [
        {
          prefix: '[disabled] ',
          args: {
            disabled: true,
          },
        },
        {
          prefix: '[small] ',
          args: {
            size: "small",
          },
        },
        {
          prefix: '[medium] ',
          args: {
            size: "medium",
          },
        },
        {
          prefix: '[large] ',
          args: {
            size: "large",
          },
        },
        {
          prefix: 'Primary ',
          args: {
            primary: true,
          },
        },
      ],
    } satisfies SauceVisualParams,
  },
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: "color" },
  },
} satisfies Meta<typeof Button>;

Output of this example in the UI. Though difficult to see in this preview since the thumbnails stretch to fit the cards, each button has a different size depending on the 'size' prop, as well as the values of the primary / disabled props.

Types of Changes

• New feature (non-breaking change which adds functionality)