[NO-TICKET] Rename web component stories (#3085)

* Rename the web component stories to match the element name and differentiate from React

* Rename storybook-doc snapshot files

* Rename all the VRT snapshot files

* I missed these files

* There's another hyphen in `ds-skip-nav`

* Remove random Pixelmator Pro file

* These were supposed to be excluded

packages/design-system/src/components/web-components/ds-accordion/ds-accordion-item.stories.tsx

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 import './ds-accordion-item';
 
 export default {
-  title: 'Web Components/AccordionItem',
+  title: 'Web Components/ds-accordion-item',
   argTypes: {
     children: {
       table: {

packages/design-system/src/components/web-components/ds-accordion/ds-accordion.stories.tsx

@@ -4,7 +4,7 @@ import './ds-accordion';
 import './ds-accordion-item';
 
 export default {
-  title: 'Web Components/Accordion',
+  title: 'Web Components/ds-accordion',
   argTypes: {
     children: {
       table: {

packages/design-system/src/components/web-components/ds-alert/ds-alert.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-alert';
 
 export default {
-  title: 'Web Components/Alert',
+  title: 'Web Components/ds-alert',
   argTypes: {
     children: {
       table: {

packages/design-system/src/components/web-components/ds-badge/ds-badge.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-badge';
 
 export default {
-  title: 'Web Components/Badge',
+  title: 'Web Components/ds-badge',
   argTypes: {
     children: {
       table: {

packages/design-system/src/components/web-components/ds-button/ds-button.stories.tsx

@@ -5,7 +5,7 @@ import './ds-button';
 import { webComponentDecorator } from '../storybook';
 
 export default {
-  title: 'Web Components/Button',
+  title: 'Web Components/ds-button',
   argTypes: {
     'class-name': {
       description: 'Additional classes to be added to the root button element.',

packages/design-system/src/components/web-components/ds-choice/ds-choice-list.stories.tsx

@@ -16,7 +16,7 @@ const choices = [
 ];
 
 export default {
-  title: 'Web Components/ChoiceList',
+  title: 'Web Components/ds-choice-list',
   argTypes: {
     children: { control: false },
     choices: {

packages/design-system/src/components/web-components/ds-choice/ds-choice.stories.tsx

@@ -6,7 +6,7 @@ import '../ds-alert';
 import { webComponentDecorator } from '../storybook';
 
 export default {
-  title: 'Web Components/Choice',
+  title: 'Web Components/ds-choice',
   argTypes: {
     'default-checked': {
       description:

packages/design-system/src/components/web-components/ds-dropdown/ds-dropdown.stories.tsx

@@ -11,7 +11,7 @@ const options = [
 ];
 
 export default {
-  title: 'Web Components/Dropdown',
+  title: 'Web Components/ds-dropdown',
   argTypes: {
     autofocus: {
       description: 'Sets the focus on the dropdown when it is first added to the document.',

packages/design-system/src/components/web-components/ds-hint/ds-hint.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-hint';
 
 export default {
-  title: 'Web Components/Hint',
+  title: 'Web Components/ds-hint',
   argTypes: {
     'text content': {
       control: 'text',

packages/design-system/src/components/web-components/ds-inline-error/ds-inline-error.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-inline-error';
 
 export default {
-  title: 'Web Components/InlineError',
+  title: 'Web Components/ds-inline-error',
   argTypes: {
     'text content': {
       control: 'text',

packages/design-system/src/components/web-components/ds-label/ds-label.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-label';
 
 export default {
-  title: 'Web Components/Label',
+  title: 'Web Components/ds-label',
   argTypes: {
     'text content': {
       control: 'text',

packages/design-system/src/components/web-components/ds-month-picker/ds-month-picker.stories.tsx

@@ -13,7 +13,7 @@ const elements = (
 );
 
 export default {
-  title: 'Web Components/Month Picker',
+  title: 'Web Components/ds-month-picker',
   argTypes: {
     children: { control: false },
     'button-variation': {

packages/design-system/src/components/web-components/ds-pagination/ds-pagination.stories.tsx

@@ -6,7 +6,7 @@ import { useArgs } from '@storybook/preview-api';
 import './ds-pagination';
 
 export default {
-  title: 'Web Components/Pagination',
+  title: 'Web Components/ds-pagination',
   argTypes: {
     'class-name': {
       description: 'Additional classes to be added to the root element. Optional.',

packages/design-system/src/components/web-components/ds-skip-nav/ds-skip-nav.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-skip-nav';
 
 export default {
-  title: 'Web Components/SkipNav',
+  title: 'Web Components/ds-skip-nav',
   argTypes: {
     'text content': {
       control: 'text',

packages/design-system/src/components/web-components/ds-spinner/ds-spinner.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-spinner';
 
 export default {
-  title: 'Web Components/Spinner',
+  title: 'Web Components/ds-spinner',
   argTypes: {
     'aria-valuetext': {
       control: 'text',

packages/design-system/src/components/web-components/ds-usa-banner/ds-usa-banner.stories.tsx

@@ -3,7 +3,7 @@ import { webComponentDecorator } from '../storybook';
 import './ds-usa-banner';
 
 export default {
-  title: 'Web Components/UsaBanner',
+  title: 'Web Components/ds-usa-banner',
   argTypes: {
     'root-id': {
       description: