diff --git a/.yarn/cache/@typescript-eslint-experimental-utils-npm-5.9.0-e979f37bae-731b278406.zip b/.yarn/cache/@typescript-eslint-experimental-utils-npm-5.9.0-e979f37bae-731b278406.zip
new file mode 100644
index 000000000000..5255144dac4a
Binary files /dev/null and b/.yarn/cache/@typescript-eslint-experimental-utils-npm-5.9.0-e979f37bae-731b278406.zip differ
diff --git a/.yarn/cache/@typescript-eslint-scope-manager-npm-5.9.0-576df9f165-46e7ab0cef.zip b/.yarn/cache/@typescript-eslint-scope-manager-npm-5.9.0-576df9f165-46e7ab0cef.zip
new file mode 100644
index 000000000000..502ef813333c
Binary files /dev/null and b/.yarn/cache/@typescript-eslint-scope-manager-npm-5.9.0-576df9f165-46e7ab0cef.zip differ
diff --git a/.yarn/cache/@typescript-eslint-types-npm-5.9.0-78ae7b90b4-7c4e142600.zip b/.yarn/cache/@typescript-eslint-types-npm-5.9.0-78ae7b90b4-7c4e142600.zip
new file mode 100644
index 000000000000..0e92833e4715
Binary files /dev/null and b/.yarn/cache/@typescript-eslint-types-npm-5.9.0-78ae7b90b4-7c4e142600.zip differ
diff --git a/.yarn/cache/@typescript-eslint-typescript-estree-npm-5.9.0-b94ae1d939-71e3f720e3.zip b/.yarn/cache/@typescript-eslint-typescript-estree-npm-5.9.0-b94ae1d939-71e3f720e3.zip
new file mode 100644
index 000000000000..9a82365e1fe0
Binary files /dev/null and b/.yarn/cache/@typescript-eslint-typescript-estree-npm-5.9.0-b94ae1d939-71e3f720e3.zip differ
diff --git a/.yarn/cache/@typescript-eslint-visitor-keys-npm-5.9.0-48c4a8bb3d-34a595b83b.zip b/.yarn/cache/@typescript-eslint-visitor-keys-npm-5.9.0-48c4a8bb3d-34a595b83b.zip
new file mode 100644
index 000000000000..b800112e4b1b
Binary files /dev/null and b/.yarn/cache/@typescript-eslint-visitor-keys-npm-5.9.0-48c4a8bb3d-34a595b83b.zip differ
diff --git a/.yarn/cache/eslint-plugin-storybook-npm-0.5.5-df0b7df3f8-97160cdda0.zip b/.yarn/cache/eslint-plugin-storybook-npm-0.5.5-df0b7df3f8-97160cdda0.zip
new file mode 100644
index 000000000000..37bdfb166e2e
Binary files /dev/null and b/.yarn/cache/eslint-plugin-storybook-npm-0.5.5-df0b7df3f8-97160cdda0.zip differ
diff --git a/.yarn/cache/requireindex-npm-1.2.0-483c52ddaf-50d8b10a1f.zip b/.yarn/cache/requireindex-npm-1.2.0-483c52ddaf-50d8b10a1f.zip
new file mode 100644
index 000000000000..4da9164077f5
Binary files /dev/null and b/.yarn/cache/requireindex-npm-1.2.0-483c52ddaf-50d8b10a1f.zip differ
diff --git a/config/eslint-config-carbon/internal.js b/config/eslint-config-carbon/internal.js
index e1a699218820..aab51b497ab3 100644
--- a/config/eslint-config-carbon/internal.js
+++ b/config/eslint-config-carbon/internal.js
@@ -12,5 +12,6 @@ module.exports = {
     require.resolve('./base'),
     require.resolve('./plugins/jest'),
     require.resolve('./plugins/react'),
+    require.resolve('./plugins/storybook'),
   ],
 };
diff --git a/config/eslint-config-carbon/package.json b/config/eslint-config-carbon/package.json
index 4cd694ff46c8..819fddbbf967 100644
--- a/config/eslint-config-carbon/package.json
+++ b/config/eslint-config-carbon/package.json
@@ -44,6 +44,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.5.5",
     "eslint-restricted-globals": "^0.2.0"
   },
   "devDependencies": {
diff --git a/config/eslint-config-carbon/plugins/storybook.js b/config/eslint-config-carbon/plugins/storybook.js
new file mode 100644
index 000000000000..a674786c4f1f
--- /dev/null
+++ b/config/eslint-config-carbon/plugins/storybook.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+/**
+ * ESLint configuration for eslint-plugin-storybook
+ *
+ * @see https://github.com/storybookjs/eslint-plugin-storybook
+ */
+module.exports = {
+  plugins: ['storybook'],
+  overrides: [
+    {
+      files: ['*.stories.js', '*-story.js'],
+      extends: ['plugin:storybook/recommended'],
+      rules: {
+        // Interactions should be awaited
+        'storybook/await-interactions': 'error',
+
+        // Pass a context when invoking play function of another story
+        'storybook/context-in-play-function': 'error',
+
+        // The component property should be set
+        'storybook/csf-component': 'error',
+
+        // Story files should have a default export
+        'storybook/default-exports': 'error',
+
+        // Deprecated hierachy separator in title property
+        'storybook/hierarchy-separator': 'error',
+
+        'storybook/no-redundant-story-name': 'error',
+
+        // storiesOf is deprecated and should not be used
+        'storybook/no-stories-of': 'error',
+
+        // Do not define a title in meta
+        'storybook/no-title-property-in-meta': 'off',
+
+        // Stories should use PascalCase
+        'storybook/prefer-pascal-case': 'error',
+
+        // A story file must contain at least one story export
+        'storybook/story-exports': 'error',
+
+        // Use expect from @storybook/jest
+        'storybook/use-storybook-expect': 'error',
+
+        // Do not use testing-library directly on stories
+        'storybook/use-storybook-testing-library': 'error',
+      },
+    },
+  ],
+};
diff --git a/packages/carbon-react/.storybook/main.js b/packages/carbon-react/.storybook/main.js
index 18dbf9565528..1352640a42ea 100644
--- a/packages/carbon-react/.storybook/main.js
+++ b/packages/carbon-react/.storybook/main.js
@@ -29,6 +29,9 @@ module.exports = {
   core: {
     builder: 'webpack5',
   },
+  features: {
+    previewCsfV3: true,
+  },
   stories: [
     './Welcome/Welcome.stories.js',
     '../src/**/*.stories.js',
diff --git a/packages/carbon-react/src/components/Grid/Grid.stories.js b/packages/carbon-react/src/components/Grid/Grid.stories.js
index 10deab9926b2..3dd702410a69 100644
--- a/packages/carbon-react/src/components/Grid/Grid.stories.js
+++ b/packages/carbon-react/src/components/Grid/Grid.stories.js
@@ -71,7 +71,7 @@ export const Condensed = () => {
   );
 };
 
-export const fullWidth = () => (
+export const FullWidth = () => (
   <Grid fullWidth>
     <Column sm={4} />
     <Column sm={4} />
diff --git a/packages/carbon-react/src/components/Icons/Icons.stories.js b/packages/carbon-react/src/components/Icons/Icons.stories.js
index e9bc3c0795af..4c0b8b8d3b60 100644
--- a/packages/carbon-react/src/components/Icons/Icons.stories.js
+++ b/packages/carbon-react/src/components/Icons/Icons.stories.js
@@ -9,6 +9,7 @@ import './Icons.stories.scss';
 import React from 'react';
 import { Bee, Bicycle, ChevronUp } from '../../../icons';
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'Elements/Icons',
 };
diff --git a/packages/carbon-react/src/components/Plex/Plex.stories.js b/packages/carbon-react/src/components/Plex/Plex.stories.js
index dbd1fce7bc54..341a3bf7dee1 100644
--- a/packages/carbon-react/src/components/Plex/Plex.stories.js
+++ b/packages/carbon-react/src/components/Plex/Plex.stories.js
@@ -9,6 +9,7 @@ import './story.scss';
 
 import React from 'react';
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'Elements/IBM Plex',
   argTypes: {
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index 7ee823360545..c435267dd6a8 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -40,6 +40,10 @@ module.exports = {
     builder: 'webpack5',
   },
 
+  features: {
+    previewCsfV3: true,
+  },
+
   staticDirs: [path.join(__dirname, 'assets')],
 
   stories: glob.sync(
diff --git a/packages/react/src/components/Accordion/Accordion-story.js b/packages/react/src/components/Accordion/Accordion-story.js
index e42442ab1794..b338ad8eed4f 100644
--- a/packages/react/src/components/Accordion/Accordion-story.js
+++ b/packages/react/src/components/Accordion/Accordion-story.js
@@ -39,7 +39,7 @@ export default {
   },
 };
 
-export const accordion = () => (
+export const AccordionStory = () => (
   <Accordion>
     <AccordionItem title="Section 1 title">
       <p>
@@ -76,9 +76,11 @@ export const accordion = () => (
   </Accordion>
 );
 
-export const skeleton = () => <AccordionSkeleton open count={4} />;
+AccordionStory.storyName = 'Accordion';
 
-skeleton.decorators = [
+export const Skeleton = () => <AccordionSkeleton open count={4} />;
+
+Skeleton.decorators = [
   (story) => <div style={{ width: '500px' }}>{story()}</div>,
 ];
 
@@ -93,7 +95,7 @@ const sizes = {
   'Large  (lg)': 'lg',
 };
 
-export const playground = () => (
+export const Playground = () => (
   <Accordion
     disabled={boolean('Disable entire Accordion (disabled)', false)}
     size={
@@ -146,7 +148,7 @@ export const playground = () => (
   </Accordion>
 );
 
-export const skeletonPlayground = () => (
+export const SkeletonPlayground = () => (
   <div style={{ width: '500px' }}>
     <AccordionSkeleton
       align={select(
diff --git a/packages/react/src/components/AspectRatio/AspectRatio-story.js b/packages/react/src/components/AspectRatio/AspectRatio-story.js
index 12f8dde356ce..7ca588cd1507 100644
--- a/packages/react/src/components/AspectRatio/AspectRatio-story.js
+++ b/packages/react/src/components/AspectRatio/AspectRatio-story.js
@@ -27,7 +27,7 @@ export default {
   },
 };
 
-export const aspectRatio = () => {
+export const AspectRatioStory = () => {
   return (
     <Grid>
       <Row>
@@ -48,7 +48,9 @@ export const aspectRatio = () => {
   );
 };
 
-export const playground = () => {
+AspectRatioStory.storyName = 'AspectRatio';
+
+export const Playground = () => {
   const ratio = select(
     'ratio',
     ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
index 9e8736c73c3b..0dfa1de75d2e 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
@@ -30,7 +30,7 @@ export default {
   },
 };
 
-export const breadcrumb = () => (
+export const BreadcrumbStory = () => (
   <Breadcrumb>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>
@@ -41,7 +41,9 @@ export const breadcrumb = () => (
   </Breadcrumb>
 );
 
-export const breadcrumbWithOverflowMenu = () => (
+BreadcrumbStory.storyName = 'Breadcrumb';
+
+export const BreadcrumbWithOverflowMenu = () => (
   <Breadcrumb>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>
@@ -58,7 +60,7 @@ export const breadcrumbWithOverflowMenu = () => (
   </Breadcrumb>
 );
 
-export const skeleton = () => <BreadcrumbSkeleton />;
+export const Skeleton = () => <BreadcrumbSkeleton />;
 
 const props = () => ({
   className: 'some-class',
@@ -66,7 +68,7 @@ const props = () => ({
   onClick: action('onClick'),
 });
 
-export const playground = () => (
+export const Playground = () => (
   <Breadcrumb {...props()}>
     <BreadcrumbItem>
       <a href="/#">Breadcrumb 1</a>
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 51ea235169ae..73d6ff54878d 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -135,13 +135,13 @@ const props = {
 
 export default {
   title: 'Components/Button',
+  component: Button,
+  subcomponents: {
+    ButtonSet,
+    ButtonSkeleton,
+  },
   decorators: [withKnobs],
   parameters: {
-    component: Button,
-    subcomponents: {
-      ButtonSet,
-      ButtonSkeleton,
-    },
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Button/next/Button.stories.js b/packages/react/src/components/Button/next/Button.stories.js
index c0de89a35f72..833edd118079 100644
--- a/packages/react/src/components/Button/next/Button.stories.js
+++ b/packages/react/src/components/Button/next/Button.stories.js
@@ -13,12 +13,10 @@ import ButtonSet from '../../ButtonSet';
 
 export default {
   title: 'Components/Button',
-  parameters: {
-    component: Button,
-    subcomponents: {
-      ButtonSet,
-      ButtonSkeleton,
-    },
+  component: Button,
+  subcomponents: {
+    ButtonSet,
+    ButtonSkeleton,
   },
 };
 
diff --git a/packages/react/src/components/Checkbox/Checkbox-story.js b/packages/react/src/components/Checkbox/Checkbox-story.js
index 212a62f762fa..f9a75676aeee 100644
--- a/packages/react/src/components/Checkbox/Checkbox-story.js
+++ b/packages/react/src/components/Checkbox/Checkbox-story.js
@@ -32,7 +32,7 @@ export default {
   },
 };
 
-export const checkboxNativeValidation = () => {
+export const CheckboxNativeValidation = () => {
   function onSubmit(e) {
     e.preventDefault();
     var cb = e.target.querySelector('input[type=checkbox]');
@@ -57,7 +57,7 @@ export const checkboxNativeValidation = () => {
   );
 };
 
-export const checkbox = () => {
+export const CheckboxStory = () => {
   return (
     <fieldset className={`${prefix}--fieldset`}>
       <legend className={`${prefix}--label`}>Checkbox heading</legend>
@@ -67,7 +67,9 @@ export const checkbox = () => {
   );
 };
 
-export const unstable_Checkbox = () => {
+CheckboxStory.storyName = 'Checkbox';
+
+export const UnstableCheckbox = () => {
   return (
     <FeatureFlags flags={{ 'enable-v11-release': true }}>
       <fieldset className={`${prefix}--fieldset`}>
@@ -87,11 +89,11 @@ export const unstable_Checkbox = () => {
   );
 };
 
-unstable_Checkbox.story = {
+UnstableCheckbox.story = {
   name: 'unstable_Checkbox',
 };
 
-export const skeleton = () => <CheckboxSkeleton />;
+export const Skeleton = () => <CheckboxSkeleton />;
 
 const props = () => ({
   checked: boolean('Checked (checked)', false),
@@ -104,7 +106,7 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
-export const playground = () => (
+export const Playground = () => (
   <fieldset className={`${prefix}--fieldset`}>
     <legend
       className={classNames(`${prefix}--label`, {
diff --git a/packages/react/src/components/Checkbox/next/Checkbox.stories.js b/packages/react/src/components/Checkbox/next/Checkbox.stories.js
index 70a04702ea6d..79d45bc6c2cc 100644
--- a/packages/react/src/components/Checkbox/next/Checkbox.stories.js
+++ b/packages/react/src/components/Checkbox/next/Checkbox.stories.js
@@ -18,7 +18,7 @@ export default {
   },
 };
 
-export const checkbox = () => {
+export const CheckboxStory = () => {
   return (
     <fieldset className={`${prefix}--fieldset`}>
       <legend className={`${prefix}--label`}>Checkbox heading</legend>
@@ -28,4 +28,6 @@ export const checkbox = () => {
   );
 };
 
-export const skeleton = () => <CheckboxSkeleton />;
+CheckboxStory.storyName = 'Checkbox';
+
+export const Skeleton = () => <CheckboxSkeleton />;
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
index 443dcd707a61..9f3064f06c6a 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -106,13 +106,13 @@ const props = () => ({
   ),
 });
 
-export const inline = () => (
+export const Inline = () => (
   <CodeSnippet type="inline" feedback="Copied to clipboard">
     {'node -v'}
   </CodeSnippet>
 );
 
-export const multiline = () => (
+export const Multiline = () => (
   <CodeSnippet type="multi" feedback="Copied to clipboard">
     {`  "scripts": {
     "build": "lerna run build --stream --prefix --npm-client yarn",
@@ -146,14 +146,14 @@ export const multiline = () => (
   </CodeSnippet>
 );
 
-export const singleline = () => (
+export const Singleline = () => (
   <CodeSnippet type="single" feedback="Copied to clipboard">
     yarn add carbon-components@latest carbon-components-react@latest
     @carbon/icons-react@latest carbon-icons@latest
   </CodeSnippet>
 );
 
-export const skeleton = () => (
+export const Skeleton = () => (
   <div>
     <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
     <CodeSnippetSkeleton type="multi" />
@@ -180,7 +180,7 @@ const lightPropMessage = (
   </small>
 );
 
-export const withChildrenNodes = () => (
+export const WithChildrenNodes = () => (
   <CodeSnippet {...props()} type="multi" copyText={snippetText().multi}>
     {snippetText()
       .multi.split('\n')
@@ -193,7 +193,7 @@ export const withChildrenNodes = () => (
   </CodeSnippet>
 );
 
-export const playground = () => (
+export const Playground = () => (
   <div className={props().light ? 'bx--tile' : ''}>
     {props().light && lightPropMessage}
     <br />
diff --git a/packages/react/src/components/CodeSnippet/next/CodeSnippet.stories.js b/packages/react/src/components/CodeSnippet/next/CodeSnippet.stories.js
index edf71e9f01d8..da4c030fb576 100644
--- a/packages/react/src/components/CodeSnippet/next/CodeSnippet.stories.js
+++ b/packages/react/src/components/CodeSnippet/next/CodeSnippet.stories.js
@@ -14,13 +14,13 @@ export default {
   component: CodeSnippet,
 };
 
-export const inline = () => (
+export const Inline = () => (
   <CodeSnippet type="inline" feedback="Copied to clipboard">
     {'node -v'}
   </CodeSnippet>
 );
 
-export const multiline = () => (
+export const Multiline = () => (
   <CodeSnippet type="multi" feedback="Copied to clipboard">
     {`  "scripts": {
     "build": "lerna run build --stream --prefix --npm-client yarn",
@@ -54,14 +54,14 @@ export const multiline = () => (
   </CodeSnippet>
 );
 
-export const singleline = () => (
+export const Singleline = () => (
   <CodeSnippet type="single" feedback="Copied to clipboard">
     yarn add carbon-components@latest carbon-components-react@latest
     @carbon/icons-react@latest carbon-icons@latest
   </CodeSnippet>
 );
 
-export const inlineWithLayer = () => {
+export const InlineWithLayer = () => {
   return (
     <>
       <CodeSnippet type="inline" feedback="Copied to clipboard">
@@ -81,7 +81,7 @@ export const inlineWithLayer = () => {
   );
 };
 
-export const multilineWithLayer = () => {
+export const MultilineWithLayer = () => {
   return (
     <>
       <CodeSnippet type="multi" feedback="Copied to clipboard">
@@ -185,7 +185,7 @@ export const multilineWithLayer = () => {
   );
 };
 
-export const singlelineWithLayer = () => {
+export const SinglelineWithLayer = () => {
   return (
     <>
       <CodeSnippet type="single" feedback="Copied to clipboard">
@@ -208,7 +208,7 @@ export const singlelineWithLayer = () => {
   );
 };
 
-export const skeleton = () => (
+export const Skeleton = () => (
   <div>
     <CodeSnippetSkeleton type="single" style={{ marginBottom: 8 }} />
     <CodeSnippetSkeleton type="multi" />
diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
index ec1407b8e8fe..5c21236a20b2 100644
--- a/packages/react/src/components/ComboBox/ComboBox-story.js
+++ b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -61,7 +61,7 @@ export default {
   },
 };
 
-export const combobox = () => (
+export const ComboboxStory = () => (
   <div style={{ width: 300 }}>
     <ComboBox
       onChange={() => {}}
@@ -75,6 +75,8 @@ export const combobox = () => (
   </div>
 );
 
+ComboboxStory.storyName = 'Combobox';
+
 const props = () => ({
   id: text('Combobox ID (id)', 'carbon-combobox-example'),
   placeholder: text('Placeholder text (placeholder)', 'Filter...'),
@@ -117,7 +119,7 @@ export const Playground = () => {
   );
 };
 
-export const disabled = () => (
+export const Disabled = () => (
   <div style={{ width: 300 }}>
     <ComboBox
       onChange={() => {}}
@@ -132,7 +134,7 @@ export const disabled = () => (
   </div>
 );
 
-export const light = () => (
+export const Light = () => (
   <div style={{ width: 300 }}>
     <ComboBox
       onChange={() => {}}
diff --git a/packages/react/src/components/ComboBox/next/ComboBox.stories.js b/packages/react/src/components/ComboBox/next/ComboBox.stories.js
index 57d15cf77b5d..e4bf0d88832f 100644
--- a/packages/react/src/components/ComboBox/next/ComboBox.stories.js
+++ b/packages/react/src/components/ComboBox/next/ComboBox.stories.js
@@ -57,7 +57,7 @@ export const Combobox = () => (
   </div>
 );
 
-export const withLayer = () => (
+export const WithLayer = () => (
   <div style={{ width: 300 }}>
     <ComboBox
       onChange={() => {}}
diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js
index 312ad95c6014..2765668f831a 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal-story.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal-story.js
@@ -185,14 +185,14 @@ const scrollingContent = (
 
 export default {
   title: 'Components/ComposedModal',
+  component: ComposedModal,
+  subcomponents: {
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+  },
   decorators: [withKnobs],
   parameters: {
-    component: ComposedModal,
-    subcomponents: {
-      ModalHeader,
-      ModalBody,
-      ModalFooter,
-    },
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/ComposedModal/next/ComposedModal.stories.js b/packages/react/src/components/ComposedModal/next/ComposedModal.stories.js
index b13a38867777..88cc66a8ab65 100644
--- a/packages/react/src/components/ComposedModal/next/ComposedModal.stories.js
+++ b/packages/react/src/components/ComposedModal/next/ComposedModal.stories.js
@@ -183,14 +183,14 @@ const scrollingContent = (
 
 export default {
   title: 'Components/ComposedModal',
+  component: ComposedModal,
+  subcomponents: {
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+  },
   decorators: [withKnobs],
   parameters: {
-    component: ComposedModal,
-    subcomponents: {
-      ModalHeader,
-      ModalBody,
-      ModalFooter,
-    },
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
index a712e70153ca..3229043d6021 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -43,14 +43,12 @@ const props = {
 
 export default {
   title: 'Components/ContentSwitcher',
+  component: ContentSwitcher,
+  subcomponents: {
+    Switch,
+  },
   decorators: [withKnobs],
-
   parameters: {
-    component: ContentSwitcher,
-
-    subcomponents: {
-      Switch,
-    },
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js
index 05ff72a32041..c0cf8ff5ea84 100644
--- a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js
+++ b/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable storybook/story-exports */
+
 import React from 'react';
 import {
   ContentSwitcher,
@@ -16,6 +18,13 @@ import {
 
 export default {
   title: 'Experimental/unstable_ContentSwitcher',
+  component: ContentSwitcher,
+  subcomponents: {
+    ContentTabs,
+    ContentTab,
+    ContentPanels,
+    ContentPanel,
+  },
   includeStories: [],
 };
 
diff --git a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher.stories.js b/packages/react/src/components/ContentSwitcher/next/ContentSwitcher.stories.js
index 33e656bf35d3..3190f27295f4 100644
--- a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher.stories.js
+++ b/packages/react/src/components/ContentSwitcher/next/ContentSwitcher.stories.js
@@ -12,13 +12,9 @@ import { Layer } from '../../Layer';
 
 export default {
   title: 'Components/ContentSwitcher',
-
-  parameters: {
-    component: ContentSwitcher,
-
-    subcomponents: {
-      Switch,
-    },
+  component: ContentSwitcher,
+  subcomponents: {
+    Switch,
   },
 };
 
@@ -30,7 +26,7 @@ export const Default = () => (
   </ContentSwitcher>
 );
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <>
       <ContentSwitcher onChange={() => {}}>
diff --git a/packages/react/src/components/ContextMenu/ContextMenu-story.js b/packages/react/src/components/ContextMenu/ContextMenu-story.js
index 1b356c76c303..3c2348335208 100644
--- a/packages/react/src/components/ContextMenu/ContextMenu-story.js
+++ b/packages/react/src/components/ContextMenu/ContextMenu-story.js
@@ -15,9 +15,7 @@ import { useContextMenu } from './index';
 
 export default {
   title: 'Experimental/unstable_Menu/ContextMenu',
-  parameters: {
-    component: Menu,
-  },
+  component: Menu,
 };
 
 const Story = (items) => {
diff --git a/packages/react/src/components/CopyButton/CopyButton-story.js b/packages/react/src/components/CopyButton/CopyButton-story.js
index 584233d13274..21bae81367a1 100644
--- a/packages/react/src/components/CopyButton/CopyButton-story.js
+++ b/packages/react/src/components/CopyButton/CopyButton-story.js
@@ -27,10 +27,9 @@ const props = () => ({
 
 export default {
   title: 'Components/CopyButton',
+  component: CopyButton,
   decorators: [withKnobs],
-
   parameters: {
-    component: CopyButton,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js
index 1a8738e454a1..102e58eebb87 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js
@@ -53,6 +53,7 @@ const tableProps = {
   },
 };
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'Components/DataTable/Development',
   decorators: [withKnobs],
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
index 5b19a73a1274..5104f3086a98 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
@@ -21,12 +21,9 @@ const props = () => ({
 });
 
 export default {
-  title: 'Components/DataTable',
+  title: 'Components/DataTable/Skeleton',
+  component: DataTableSkeleton,
   decorators: [withKnobs],
-
-  parameters: {
-    component: DataTableSkeleton,
-  },
 };
 
 export const Skeleton = () => {
diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js
index 614212645a68..535811bf8f0f 100644
--- a/packages/react/src/components/DatePicker/DatePicker-story.js
+++ b/packages/react/src/components/DatePicker/DatePicker-story.js
@@ -95,15 +95,13 @@ const props = {
 
 export default {
   title: 'Components/DatePicker',
+  component: DatePicker,
+  subcomponents: {
+    DatePickerInput,
+    DatePickerSkeleton,
+  },
   decorators: [withKnobs],
-
   parameters: {
-    component: DatePicker,
-
-    subcomponents: {
-      DatePickerInput,
-      DatePickerSkeleton,
-    },
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/DatePicker/next/DatePicker.stories.js b/packages/react/src/components/DatePicker/next/DatePicker.stories.js
index 3b17ae76fd5e..017ce468f972 100644
--- a/packages/react/src/components/DatePicker/next/DatePicker.stories.js
+++ b/packages/react/src/components/DatePicker/next/DatePicker.stories.js
@@ -59,14 +59,10 @@ const props = {
 
 export default {
   title: 'Components/DatePicker',
-
-  parameters: {
-    component: DatePicker,
-
-    subcomponents: {
-      DatePickerInput,
-      DatePickerSkeleton,
-    },
+  component: DatePicker,
+  subcomponents: {
+    DatePickerInput,
+    DatePickerSkeleton,
   },
 };
 
diff --git a/packages/react/src/components/Dialog/Dialog-story.js b/packages/react/src/components/Dialog/Dialog-story.js
index 00461a685795..3c4b4751ffca 100644
--- a/packages/react/src/components/Dialog/Dialog-story.js
+++ b/packages/react/src/components/Dialog/Dialog-story.js
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable storybook/story-exports */
+
 import * as React from 'react';
 import { FocusScope } from '../FocusScope';
 import { Dialog } from '../Dialog';
@@ -13,6 +15,7 @@ import { Portal } from '../Portal';
 
 export default {
   title: 'Experimental/unstable_Dialog',
+  component: Dialog,
   includeStories: [],
 };
 
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
index 17f28e5b0418..1c47959327d9 100644
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -100,14 +100,12 @@ const props = () => ({
 
 export default {
   title: 'Components/Dropdown',
+  component: Dropdown,
+  subcomponents: {
+    DropdownSkeleton,
+  },
   decorators: [withKnobs],
-
   parameters: {
-    component: Dropdown,
-
-    subcomponents: {
-      DropdownSkeleton,
-    },
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Dropdown/next/Dropdown.stories.js b/packages/react/src/components/Dropdown/next/Dropdown.stories.js
index 0ab3f7ee4f15..210917102ed4 100644
--- a/packages/react/src/components/Dropdown/next/Dropdown.stories.js
+++ b/packages/react/src/components/Dropdown/next/Dropdown.stories.js
@@ -9,6 +9,14 @@ import React from 'react';
 import { default as Dropdown, DropdownSkeleton } from '../';
 import { Layer } from '../../Layer';
 
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  subcomponents: {
+    DropdownSkeleton,
+  },
+};
+
 const items = [
   {
     id: 'option-0',
@@ -37,18 +45,6 @@ const items = [
   },
 ];
 
-export default {
-  title: 'Components/Dropdown',
-
-  parameters: {
-    component: Dropdown,
-
-    subcomponents: {
-      DropdownSkeleton,
-    },
-  },
-};
-
 export const Default = () => (
   <div style={{ width: 400 }}>
     <Dropdown
@@ -75,7 +71,7 @@ export const Inline = () => (
   </div>
 );
 
-export const withLayer = () => (
+export const WithLayer = () => (
   <div style={{ width: 400 }}>
     <Dropdown
       id="default"
diff --git a/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js b/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js
index 75c7e441db7f..08e228ccef1f 100644
--- a/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js
+++ b/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js
@@ -12,10 +12,7 @@ import Button from '../Button';
 
 export default {
   title: 'Components/ErrorBoundary',
-
-  parameters: {
-    component: ErrorBoundary,
-  },
+  component: ErrorBoundary,
 };
 
 export const Default = () => {
diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
index a897693167c5..3e9622b675e6 100644
--- a/packages/react/src/components/FileUploader/FileUploader-story.js
+++ b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -150,20 +150,18 @@ const props = {
 
 export default {
   title: 'Components/FileUploader',
+  component: FileUploader,
+  subcomponents: {
+    FileUploaderButton,
+    FileUploaderSkeleton,
+    FileUploaderItem,
+    FileUploaderDropContainer,
+  },
   decorators: [withKnobs],
-
   parameters: {
-    component: FileUploader,
     docs: {
       page: mdx,
     },
-
-    subcomponents: {
-      FileUploaderButton,
-      FileUploaderSkeleton,
-      FileUploaderItem,
-      FileUploaderDropContainer,
-    },
   },
 };
 
diff --git a/packages/react/src/components/FileUploader/next/FileUploader.stories.js b/packages/react/src/components/FileUploader/next/FileUploader.stories.js
index c593ce502984..f0cfdd0d7147 100644
--- a/packages/react/src/components/FileUploader/next/FileUploader.stories.js
+++ b/packages/react/src/components/FileUploader/next/FileUploader.stories.js
@@ -25,19 +25,17 @@ const filenameStatuses = ['edit', 'complete', 'uploading'];
 
 export default {
   title: 'Components/FileUploader',
-
+  component: FileUploader,
+  subcomponents: {
+    FileUploaderButton,
+    FileUploaderSkeleton,
+    FileUploaderItem,
+    FileUploaderDropContainer,
+  },
   parameters: {
-    component: FileUploader,
     docs: {
       page: mdx,
     },
-
-    subcomponents: {
-      FileUploaderButton,
-      FileUploaderSkeleton,
-      FileUploaderItem,
-      FileUploaderDropContainer,
-    },
   },
 };
 
diff --git a/packages/react/src/components/FluidForm/FluidForm-story.js b/packages/react/src/components/FluidForm/FluidForm-story.js
index afbe11ec3667..fc923ba2bc66 100644
--- a/packages/react/src/components/FluidForm/FluidForm-story.js
+++ b/packages/react/src/components/FluidForm/FluidForm-story.js
@@ -38,11 +38,8 @@ const InvalidPasswordProps = {
 
 export default {
   title: 'Experimental/FluidForm',
+  component: FluidForm,
   decorators: [withKnobs],
-
-  parameters: {
-    component: FluidForm,
-  },
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/Form/Form-story.js b/packages/react/src/components/Form/Form-story.js
index 73cc21295a96..99b1044b4c3f 100644
--- a/packages/react/src/components/Form/Form-story.js
+++ b/packages/react/src/components/Form/Form-story.js
@@ -136,17 +136,15 @@ RadioButton.displayName = 'RadioButton';
 
 export default {
   title: 'Components/Form',
+  component: Form,
+  subcomponents: {
+    FormGroup,
+  },
   decorators: [withKnobs],
-
   parameters: {
-    component: Form,
     docs: {
       page: mdx,
     },
-
-    subcomponents: {
-      FormGroup,
-    },
   },
 };
 
diff --git a/packages/react/src/components/FormGroup/FormGroup-story.js b/packages/react/src/components/FormGroup/FormGroup-story.js
index be5b2aba5af6..96e7f8bbf3e3 100644
--- a/packages/react/src/components/FormGroup/FormGroup-story.js
+++ b/packages/react/src/components/FormGroup/FormGroup-story.js
@@ -23,9 +23,8 @@ const props = () => ({
 
 export default {
   title: 'Components/FormGroup',
-
+  component: FormGroup,
   parameters: {
-    component: FormGroup,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/FormLabel/FormLabel-story.js b/packages/react/src/components/FormLabel/FormLabel-story.js
index a9c6c4d413e3..1b230ebcdf2b 100644
--- a/packages/react/src/components/FormLabel/FormLabel-story.js
+++ b/packages/react/src/components/FormLabel/FormLabel-story.js
@@ -13,9 +13,8 @@ import mdx from './FormLabel.mdx';
 
 export default {
   title: 'Components/FormLabel',
-
+  component: FormLabel,
   parameters: {
-    component: FormLabel,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Grid/Grid-story.js b/packages/react/src/components/Grid/Grid-story.js
index 4d20d2e71008..f409994b4cc4 100644
--- a/packages/react/src/components/Grid/Grid-story.js
+++ b/packages/react/src/components/Grid/Grid-story.js
@@ -28,7 +28,7 @@ function DemoContent({ children }) {
   );
 }
 
-export const experimentalCSSGrid = () => (
+export const ExperimentalCSSGrid = () => (
   <FeatureFlags flags={{ 'enable-css-grid': true }}>
     <Heading>Wide</Heading>
     <Grid>
@@ -88,7 +88,7 @@ export const experimentalCSSGrid = () => (
   </FeatureFlags>
 );
 
-export const autoColumns = () => (
+export const AutoColumns = () => (
   <Grid>
     <Row>
       <Column>
@@ -107,7 +107,7 @@ export const autoColumns = () => (
   </Grid>
 );
 
-export const responsiveGrid = () => (
+export const ResponsiveGrid = () => (
   <Grid>
     <Row>
       <Column sm={2} md={4} lg={6}>
@@ -135,7 +135,7 @@ export const responsiveGrid = () => (
   </Grid>
 );
 
-export const offset = () => (
+export const Offset = () => (
   <Grid>
     <Row>
       <Column sm={{ span: 1, offset: 3 }}>
@@ -154,7 +154,7 @@ export const offset = () => (
   </Grid>
 );
 
-export const condensed = () => (
+export const Condensed = () => (
   <Grid condensed>
     <Row>
       <Column>
@@ -173,7 +173,7 @@ export const condensed = () => (
   </Grid>
 );
 
-export const condensedColumns = () => (
+export const CondensedColumns = () => (
   <Grid>
     <Row>
       <Column>
@@ -220,7 +220,7 @@ export const condensedColumns = () => (
   </Grid>
 );
 
-export const narrow = () => (
+export const Narrow = () => (
   <Grid narrow>
     <Row>
       <Column>
@@ -239,7 +239,7 @@ export const narrow = () => (
   </Grid>
 );
 
-export const narrowColumns = () => (
+export const NarrowColumns = () => (
   <Grid>
     <Row>
       <Column>
@@ -286,7 +286,7 @@ export const narrowColumns = () => (
   </Grid>
 );
 
-export const fullWidth = () => (
+export const FullWidth = () => (
   <Grid fullWidth>
     <Row>
       <Column>
@@ -305,7 +305,7 @@ export const fullWidth = () => (
   </Grid>
 );
 
-export const mixedGridModes = () => (
+export const MixedGridModes = () => (
   <Grid>
     <Row>
       <Column>
diff --git a/packages/react/src/components/Heading/Heading-story.js b/packages/react/src/components/Heading/Heading-story.js
index 991a2b8c000a..4bdea541a7cf 100644
--- a/packages/react/src/components/Heading/Heading-story.js
+++ b/packages/react/src/components/Heading/Heading-story.js
@@ -22,7 +22,7 @@ export default {
   },
 };
 
-export const heading = () => {
+export const HeadingStory = () => {
   return (
     <>
       <Heading>h1</Heading>
@@ -35,3 +35,5 @@ export const heading = () => {
     </>
   );
 };
+
+HeadingStory.storyName = 'Heading';
diff --git a/packages/react/src/components/Icon/Icon-story.js b/packages/react/src/components/Icon/Icon-story.js
index 052073e148f0..432737df2325 100644
--- a/packages/react/src/components/Icon/Icon-story.js
+++ b/packages/react/src/components/Icon/Icon-story.js
@@ -65,11 +65,8 @@ const propsSkeleton2 = {
 
 export default {
   title: 'Deprecated/Icon',
+  component: Icon,
   decorators: [withKnobs],
-
-  parameters: {
-    component: Icon,
-  },
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
index e8a5680c4617..db876a6b4f16 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading-story.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading-story.js
@@ -35,10 +35,9 @@ const props = () => ({
 
 export default {
   title: 'Components/InlineLoading',
+  component: InlineLoading,
   decorators: [withKnobs],
-
   parameters: {
-    component: InlineLoading,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/InlineLoading/next/InlineLoading.stories.js b/packages/react/src/components/InlineLoading/next/InlineLoading.stories.js
index 6e3117170e3f..252d1c63f53f 100644
--- a/packages/react/src/components/InlineLoading/next/InlineLoading.stories.js
+++ b/packages/react/src/components/InlineLoading/next/InlineLoading.stories.js
@@ -11,10 +11,7 @@ import InlineLoading from '../';
 
 export default {
   title: 'Components/InlineLoading',
-
-  parameters: {
-    component: InlineLoading,
-  },
+  component: InlineLoading,
 };
 
 export const _InlineLoading = () => (
diff --git a/packages/react/src/components/Link/Link-story.js b/packages/react/src/components/Link/Link-story.js
index 477fc02b42b7..bbc5faafc8e9 100644
--- a/packages/react/src/components/Link/Link-story.js
+++ b/packages/react/src/components/Link/Link-story.js
@@ -35,10 +35,9 @@ const props = () => ({
 
 export default {
   title: 'Components/Link',
+  component: Link,
   decorators: [withKnobs],
-
   parameters: {
-    component: Link,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Loading/Loading-story.js b/packages/react/src/components/Loading/Loading-story.js
index 2924d5a7b882..393a94c755e0 100644
--- a/packages/react/src/components/Loading/Loading-story.js
+++ b/packages/react/src/components/Loading/Loading-story.js
@@ -19,10 +19,9 @@ const props = () => ({
 
 export default {
   title: 'Components/Loading',
+  component: Loading,
   decorators: [withKnobs],
-
   parameters: {
-    component: Loading,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
index ddf291cc4d24..a4e3ed173ce0 100644
--- a/packages/react/src/components/Modal/Modal-story.js
+++ b/packages/react/src/components/Modal/Modal-story.js
@@ -133,9 +133,9 @@ const props = {
 
 export default {
   title: 'Components/Modal',
+  component: Modal,
   decorators: [withKnobs],
   parameters: {
-    component: Modal,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Modal/next/Modal.stories.js b/packages/react/src/components/Modal/next/Modal.stories.js
index e21a1ace95fe..ef7afcbc0d44 100644
--- a/packages/react/src/components/Modal/next/Modal.stories.js
+++ b/packages/react/src/components/Modal/next/Modal.stories.js
@@ -83,8 +83,8 @@ const props = {
 
 export default {
   title: 'Components/Modal',
+  component: Modal,
   parameters: {
-    component: Modal,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
index 146ce9a30430..b95243a22785 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect-story.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -112,16 +112,15 @@ const props = () => ({
 
 export default {
   title: 'Components/MultiSelect',
+  component: MultiSelect,
+  subcomponents: {
+    FilterableMultiSelect,
+  },
   decorators: [withKnobs],
-
   parameters: {
-    component: MultiSelect,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      FilterableMultiSelect,
-    },
   },
 };
 
@@ -144,7 +143,7 @@ export const Default = withReadme(readme, () => {
   );
 });
 
-export const controlled = withReadme(readme, () => {
+export const Controlled = withReadme(readme, () => {
   const {
     listBoxMenuIconTranslationIds,
     selectionFeedback,
diff --git a/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js
index 180293490f2c..35db3888fa05 100644
--- a/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js
+++ b/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js
@@ -10,6 +10,14 @@ import MultiSelect from '../';
 import FilterableMultiSelect from './FilterableMultiSelect';
 import { Layer } from '../../Layer';
 
+export default {
+  title: 'Components/MultiSelect',
+  component: MultiSelect,
+  subcomponents: {
+    'MultiSelect.Filterable': MultiSelect.Filterable,
+  },
+};
+
 const items = [
   {
     id: 'downshift-1-item-0',
@@ -39,17 +47,6 @@ const items = [
   },
 ];
 
-export default {
-  title: 'Components/MultiSelect',
-
-  parameters: {
-    component: MultiSelect,
-    subcomponents: {
-      'MultiSelect.Filterable': MultiSelect.Filterable,
-    },
-  },
-};
-
 export const Default = () => {
   return (
     <div style={{ width: 300 }}>
@@ -98,7 +95,7 @@ export const _Filterable = () => {
   );
 };
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <div style={{ width: 300 }}>
       <MultiSelect
diff --git a/packages/react/src/components/Notification/Notification-story.js b/packages/react/src/components/Notification/Notification-story.js
index 4c482ca7420e..962b6c4c09bd 100644
--- a/packages/react/src/components/Notification/Notification-story.js
+++ b/packages/react/src/components/Notification/Notification-story.js
@@ -58,16 +58,15 @@ const toastNotificationProps = () => ({
 
 export default {
   title: 'Components/Notifications',
+  component: ToastNotification,
   decorators: [withKnobs],
-
+  subcomponents: {
+    InlineNotification,
+  },
   parameters: {
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      ToastNotification,
-      InlineNotification,
-    },
   },
 };
 
diff --git a/packages/react/src/components/Notification/next/Notification.stories.js b/packages/react/src/components/Notification/next/Notification.stories.js
index 8432ec33d731..c3242d10fb49 100644
--- a/packages/react/src/components/Notification/next/Notification.stories.js
+++ b/packages/react/src/components/Notification/next/Notification.stories.js
@@ -16,6 +16,11 @@ import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'Components/Notifications',
+  component: ToastNotification,
+  subscomponents: {
+    ActionableNotification,
+    InlineNotification,
+  },
   decorators: [
     (Story) => (
       <FeatureFlags flags={{ 'enable-v11-release': true }}>
diff --git a/packages/react/src/components/OrderedList/OrderedList-story.js b/packages/react/src/components/OrderedList/OrderedList-story.js
index 8142bede00be..d81beb168f1f 100644
--- a/packages/react/src/components/OrderedList/OrderedList-story.js
+++ b/packages/react/src/components/OrderedList/OrderedList-story.js
@@ -14,16 +14,15 @@ const props = {
 
 export default {
   title: 'Components/OrderedList',
+  component: OrderedList,
   decorators: [withKnobs],
   parameters: {
-    component: OrderedList,
     docs: {
       page: mdx,
     },
-
-    subcomponents: {
-      ListItem,
-    },
+  },
+  subcomponents: {
+    ListItem,
   },
 };
 
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
index 893f5f31f163..99894d6c409c 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
@@ -59,8 +59,8 @@ OverflowMenu.displayName = 'OverflowMenu';
 
 export default {
   title: 'Components/OverflowMenu',
-  decorators: [withKnobs],
   component: OverflowMenu,
+  decorators: [withKnobs],
   subcomponents: {
     OverflowMenuItem,
   },
diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js
index 718784081371..2291ff80bcd6 100644
--- a/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js
+++ b/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js
@@ -15,9 +15,7 @@ import OverflowMenu from './OverflowMenu';
 
 export default {
   title: 'Experimental/unstable_Menu/OverflowMenu',
-  parameters: {
-    component: Menu,
-  },
+  component: Menu,
 };
 
 const Story = (items, props = {}) => (
diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js
index 045d61041914..50b26d47368c 100644
--- a/packages/react/src/components/Pagination/Pagination-story.js
+++ b/packages/react/src/components/Pagination/Pagination-story.js
@@ -58,13 +58,12 @@ const props = () => ({
 
 export default {
   title: 'Components/Pagination',
+  component: Pagination,
   decorators: [
     withKnobs,
     (story) => <div style={{ maxWidth: '800px' }}>{story()}</div>,
   ],
-
   parameters: {
-    component: Pagination,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Pagination/experimental/Pagination-story.js b/packages/react/src/components/Pagination/experimental/Pagination-story.js
index f47170750841..e94c6ab852d1 100644
--- a/packages/react/src/components/Pagination/experimental/Pagination-story.js
+++ b/packages/react/src/components/Pagination/experimental/Pagination-story.js
@@ -40,6 +40,10 @@ const props = () => ({
 
 export default {
   title: 'Experimental/unstable_Pagination',
+  component: Pagination,
+  subcomponents: {
+    PageSelector,
+  },
   decorators: [
     withKnobs,
     (story) => <div style={{ width: '800px' }}>{story()}</div>,
diff --git a/packages/react/src/components/Pagination/next/Pagination.stories.js b/packages/react/src/components/Pagination/next/Pagination.stories.js
index deb04ee437fb..80f9dc820f5c 100644
--- a/packages/react/src/components/Pagination/next/Pagination.stories.js
+++ b/packages/react/src/components/Pagination/next/Pagination.stories.js
@@ -58,13 +58,12 @@ const props = () => ({
 
 export default {
   title: 'Components/Pagination',
+  component: Pagination,
   decorators: [
     withKnobs,
     (story) => <div style={{ maxWidth: '800px' }}>{story()}</div>,
   ],
-
   parameters: {
-    component: Pagination,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/PaginationNav/PaginationNav-story.js b/packages/react/src/components/PaginationNav/PaginationNav-story.js
index 08061717ec8d..676cf5c8c5d8 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav-story.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav-story.js
@@ -27,14 +27,11 @@ const props = () => ({
 
 export default {
   title: 'Components/PaginationNav',
+  component: PaginationNav,
   decorators: [
     withKnobs,
     (story) => <div style={{ width: '800px' }}>{story()}</div>,
   ],
-
-  parameters: {
-    component: PaginationNav,
-  },
 };
 
 export const _PaginationNav = () => <PaginationNav {...props()} />;
diff --git a/packages/react/src/components/PaginationNav/next/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/next/PaginationNav.stories.js
index c86510bb1e5f..a03fff6a1200 100644
--- a/packages/react/src/components/PaginationNav/next/PaginationNav.stories.js
+++ b/packages/react/src/components/PaginationNav/next/PaginationNav.stories.js
@@ -17,11 +17,8 @@ const props = () => ({
 
 export default {
   title: 'Components/PaginationNav',
+  component: PaginationNav,
   decorators: [(story) => <div style={{ width: '800px' }}>{story()}</div>],
-
-  parameters: {
-    component: PaginationNav,
-  },
 };
 
 export const _PaginationNav = () => <PaginationNav {...props()} />;
diff --git a/packages/react/src/components/ProgressBar/ProgressBar-story.js b/packages/react/src/components/ProgressBar/ProgressBar-story.js
index c5c503ca3035..9cac9f3ac278 100644
--- a/packages/react/src/components/ProgressBar/ProgressBar-story.js
+++ b/packages/react/src/components/ProgressBar/ProgressBar-story.js
@@ -20,11 +20,8 @@ const props = () => ({
 
 export default {
   title: 'Experimental/unstable_ProgressBar',
+  component: ProgressBar,
   decorators: [withKnobs],
-
-  parameters: {
-    component: ProgressBar,
-  },
 };
 
 export const _ProgressBar = () => (
diff --git a/packages/react/src/components/ProgressBar/next/ProgressBar.stories.js b/packages/react/src/components/ProgressBar/next/ProgressBar.stories.js
index 090f124379ff..5c5f9c4641df 100644
--- a/packages/react/src/components/ProgressBar/next/ProgressBar.stories.js
+++ b/packages/react/src/components/ProgressBar/next/ProgressBar.stories.js
@@ -11,10 +11,7 @@ import ProgressBar from '../';
 
 export default {
   title: 'Experimental/unstable_ProgressBar',
-
-  parameters: {
-    component: ProgressBar,
-  },
+  component: ProgressBar,
 };
 
 export const _ProgressBar = () => (
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
index 702911855a52..2cc7913e5734 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
@@ -18,17 +18,15 @@ const { prefix } = settings;
 
 export default {
   title: 'Components/ProgressIndicator',
+  component: ProgressIndicator,
   decorators: [withKnobs],
-
   parameters: {
-    component: ProgressIndicator,
     docs: {
       page: mdx,
     },
-
-    subcomponents: {
-      ProgressStep,
-    },
+  },
+  subcomponents: {
+    ProgressStep,
   },
 };
 
diff --git a/packages/react/src/components/ProgressIndicator/next/ProgressIndicator.stories.js b/packages/react/src/components/ProgressIndicator/next/ProgressIndicator.stories.js
index 53c62a25eb42..8ac8ecb64e01 100644
--- a/packages/react/src/components/ProgressIndicator/next/ProgressIndicator.stories.js
+++ b/packages/react/src/components/ProgressIndicator/next/ProgressIndicator.stories.js
@@ -15,6 +15,11 @@ import Tooltip from '../../Tooltip';
 
 export default {
   title: 'Components/ProgressIndicator',
+  component: ProgressIndicator,
+  subcomponents: {
+    ProgressStep,
+    ProgressIndicatorSkeleton,
+  },
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/RadioButton/RadioButton-story.js b/packages/react/src/components/RadioButton/RadioButton-story.js
index db44219b7b2d..c9578819a1bd 100644
--- a/packages/react/src/components/RadioButton/RadioButton-story.js
+++ b/packages/react/src/components/RadioButton/RadioButton-story.js
@@ -65,17 +65,15 @@ const props = {
 
 export default {
   title: 'Components/RadioButton',
+  component: RadioButtonGroup,
   decorators: [withKnobs],
-
   parameters: {
-    component: RadioButtonGroup,
     docs: {
       page: mdx,
     },
-
-    subcomponents: {
-      RadioButton,
-    },
+  },
+  subcomponents: {
+    RadioButton,
   },
 };
 
diff --git a/packages/react/src/components/RadioButton/next/RadioButton.stories.js b/packages/react/src/components/RadioButton/next/RadioButton.stories.js
index c7d123c6f4fa..55d6300b7959 100644
--- a/packages/react/src/components/RadioButton/next/RadioButton.stories.js
+++ b/packages/react/src/components/RadioButton/next/RadioButton.stories.js
@@ -9,7 +9,13 @@ import RadioButton from '../';
 import RadioButtonGroup from '../../RadioButtonGroup';
 import React from 'react';
 
-export default { title: 'Components/RadioButton' };
+export default {
+  title: 'Components/RadioButton',
+  component: RadioButton,
+  subcomponents: {
+    RadioButtonGroup,
+  },
+};
 
 export const Default = () => {
   return (
diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
index a48c1e04a00e..c4c1e7d0b5c7 100644
--- a/packages/react/src/components/Search/Search-story.js
+++ b/packages/react/src/components/Search/Search-story.js
@@ -51,20 +51,18 @@ const props = () => ({
 
 export default {
   title: 'Components/Search',
+  component: Search,
   decorators: [withKnobs],
-
   parameters: {
-    component: Search,
     docs: {
       page: mdx,
     },
-
-    subcomponents: {
-      SearchSkeleton,
-      SearchFilterButton,
-      SearchLayoutButton,
-      ExpandableSearch,
-    },
+  },
+  subcomponents: {
+    SearchSkeleton,
+    SearchFilterButton,
+    SearchLayoutButton,
+    ExpandableSearch,
   },
 };
 
@@ -147,5 +145,3 @@ Skeleton.parameters = {
 export const Expandable = () => (
   <ExpandableSearch {...props()} id="search-expandable-1" />
 );
-
-Expandable.storyName = 'Expandable';
diff --git a/packages/react/src/components/Search/next/Search.stories.js b/packages/react/src/components/Search/next/Search.stories.js
index f7f5f2b72214..981d6b725133 100644
--- a/packages/react/src/components/Search/next/Search.stories.js
+++ b/packages/react/src/components/Search/next/Search.stories.js
@@ -9,7 +9,13 @@ import { Search, ExpandableSearch } from 'carbon-components-react';
 import React from 'react';
 import { Layer } from '../../Layer';
 
-export default { title: 'Components/Search' };
+export default {
+  title: 'Components/Search',
+  component: Search,
+  subcomponents: {
+    ExpandableSearch,
+  },
+};
 
 export const Default = () => (
   <Search
@@ -47,7 +53,7 @@ export const Expandable = () => (
   />
 );
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <>
       <Search
diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js
index 885ed947c42e..561472673342 100644
--- a/packages/react/src/components/Select/Select-story.js
+++ b/packages/react/src/components/Select/Select-story.js
@@ -54,10 +54,9 @@ const props = {
 
 export default {
   title: 'Components/Select',
+  component: Select,
   decorators: [withKnobs],
-
   parameters: {
-    component: Select,
     docs: {
       page: mdx,
     },
@@ -127,7 +126,7 @@ Skeleton.parameters = {
   },
 };
 
-export const classNameChangeTest = () => {
+export const ClassNameChangeTest = () => {
   return (
     <div style={{ width: 400 }}>
       <Select
diff --git a/packages/react/src/components/Select/next/Select.stories.js b/packages/react/src/components/Select/next/Select.stories.js
index d64ed5e2dc19..3050aeaeca66 100644
--- a/packages/react/src/components/Select/next/Select.stories.js
+++ b/packages/react/src/components/Select/next/Select.stories.js
@@ -13,14 +13,12 @@ import { Layer } from '../../Layer';
 
 export default {
   title: 'Components/Select',
+  component: Select,
   decorators: [(story) => <div style={{ width: '400px' }}>{story()}</div>],
-  parameters: {
-    component: Select,
-    subcomponents: {
-      SelectItem,
-      SelectItemGroup,
-      SelectSkeleton,
-    },
+  subcomponents: {
+    SelectItem,
+    SelectItemGroup,
+    SelectSkeleton,
   },
 };
 
@@ -90,7 +88,7 @@ export const _Skeleton = () => (
   </div>
 );
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <>
       <Select
diff --git a/packages/react/src/components/Skeleton/next/Skeleton.stories.js b/packages/react/src/components/Skeleton/next/Skeleton.stories.js
index f2cbfc586941..fedceb323bf4 100644
--- a/packages/react/src/components/Skeleton/next/Skeleton.stories.js
+++ b/packages/react/src/components/Skeleton/next/Skeleton.stories.js
@@ -38,7 +38,11 @@ const textProps = () => ({
 
 export default {
   title: 'Components/Skeleton',
+  component: SkeletonText,
   decorators: [withKnobs],
+  subcomponents: {
+    SkeletonPlaceholder,
+  },
 };
 
 export const _SkeletonPlaceholder = () => {
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
index 74623c0c1814..3816f017bcbb 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
@@ -25,10 +25,9 @@ const props = () => ({
 
 export default {
   title: 'Components/Skeleton/SkeletonPlaceholder',
+  component: SkeletonPlaceholder,
   decorators: [withKnobs],
-
   parameters: {
-    component: SkeletonPlaceholder,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/SkeletonText/SkeletonText-story.js b/packages/react/src/components/SkeletonText/SkeletonText-story.js
index b52854a4a13b..bc4af9693597 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText-story.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText-story.js
@@ -31,10 +31,9 @@ const props = () => ({
 
 export default {
   title: 'Components/Skeleton/SkeletonText',
+  component: SkeletonText,
   decorators: [withKnobs],
-
   parameters: {
-    component: SkeletonText,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/Slider/Slider-story.js b/packages/react/src/components/Slider/Slider-story.js
index f2a34bc12a00..13611d0ace83 100644
--- a/packages/react/src/components/Slider/Slider-story.js
+++ b/packages/react/src/components/Slider/Slider-story.js
@@ -41,16 +41,15 @@ const props = () => ({
 
 export default {
   title: 'Components/Slider',
+  component: Slider,
   decorators: [withKnobs],
-
+  subcomponents: {
+    SliderSkeleton,
+  },
   parameters: {
-    component: Slider,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      SliderSkeleton,
-    },
   },
 };
 
diff --git a/packages/react/src/components/Slider/next/Slider.stories.js b/packages/react/src/components/Slider/next/Slider.stories.js
index 097b376934dc..1f46254cfb7e 100644
--- a/packages/react/src/components/Slider/next/Slider.stories.js
+++ b/packages/react/src/components/Slider/next/Slider.stories.js
@@ -16,15 +16,14 @@ import mdx from './Slider.mdx';
 
 export default {
   title: 'Components/Slider',
-
+  component: Slider,
+  subcomponents: {
+    SliderSkeleton,
+  },
   parameters: {
-    component: Slider,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      SliderSkeleton,
-    },
   },
 };
 
@@ -64,7 +63,7 @@ export const ControlledSlider = () => {
   );
 };
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <>
       <Slider
diff --git a/packages/react/src/components/StructuredList/StructuredList-story.js b/packages/react/src/components/StructuredList/StructuredList-story.js
index f657d07968f8..18febf2eabe5 100644
--- a/packages/react/src/components/StructuredList/StructuredList-story.js
+++ b/packages/react/src/components/StructuredList/StructuredList-story.js
@@ -30,20 +30,19 @@ const props = () => ({
 
 export default {
   title: 'Components/StructuredList',
+  component: StructuredListWrapper,
   decorators: [withKnobs],
-
+  subcomponents: {
+    StructuredListHead,
+    StructuredListBody,
+    StructuredListRow,
+    StructuredListInput,
+    StructuredListCell,
+  },
   parameters: {
-    component: StructuredListWrapper,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      StructuredListHead,
-      StructuredListBody,
-      StructuredListRow,
-      StructuredListInput,
-      StructuredListCell,
-    },
   },
 };
 
diff --git a/packages/react/src/components/StructuredList/next/StructuredList.stories.js b/packages/react/src/components/StructuredList/next/StructuredList.stories.js
index 6d41bb8068f8..53ebcf2ba965 100644
--- a/packages/react/src/components/StructuredList/next/StructuredList.stories.js
+++ b/packages/react/src/components/StructuredList/next/StructuredList.stories.js
@@ -30,20 +30,19 @@ const props = () => ({
 
 export default {
   title: 'Components/StructuredList',
+  component: StructuredListWrapper,
   decorators: [withKnobs],
-
+  subcomponents: {
+    StructuredListHead,
+    StructuredListBody,
+    StructuredListRow,
+    StructuredListInput,
+    StructuredListCell,
+  },
   parameters: {
-    component: StructuredListWrapper,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      StructuredListHead,
-      StructuredListBody,
-      StructuredListRow,
-      StructuredListInput,
-      StructuredListCell,
-    },
   },
 };
 
@@ -192,8 +191,6 @@ export const Skeleton = () => (
   </div>
 );
 
-Skeleton.storyName = 'Skeleton';
-
 Skeleton.parameters = {
   info: {
     text: `
diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index 617bcfdb301f..28a75cab47b6 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -109,16 +109,16 @@ const TabContentRenderedOnlyWhenSelected = ({
 
 export default {
   title: 'Components/Tabs',
+  component: Tabs,
   decorators: [withKnobs],
+  subcomponents: {
+    Tab,
+    TabsSkeleton,
+  },
   parameters: {
-    component: Tabs,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      Tab,
-      TabsSkeleton,
-    },
   },
 };
 
diff --git a/packages/react/src/components/Tabs/next/Tabs.stories.js b/packages/react/src/components/Tabs/next/Tabs.stories.js
index afbc1f9c8344..77cc087d6929 100644
--- a/packages/react/src/components/Tabs/next/Tabs.stories.js
+++ b/packages/react/src/components/Tabs/next/Tabs.stories.js
@@ -23,6 +23,7 @@ import { unstable_FeatureFlags as FeatureFlags } from 'carbon-components-react';
 
 export default {
   title: 'Components/Tabs',
+  component: Tabs,
   decorators: [
     (Story) => (
       <FeatureFlags flags={{ 'enable-v11-release': true }}>
@@ -30,15 +31,13 @@ export default {
       </FeatureFlags>
     ),
   ],
-  parameters: {
-    component: Tabs,
-    subcomponents: {
-      TabList,
-      Tab,
-      TabPanels,
-      TabPanel,
-    },
+  subcomponents: {
+    TabList,
+    Tab,
+    TabPanels,
+    TabPanel,
   },
+  parameters: {},
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 2b6ebd8ae816..f77af4e987ff 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -65,16 +65,15 @@ const props = {
 
 export default {
   title: 'Components/Tag',
+  component: Tag,
   decorators: [withKnobs],
-
+  subcomponents: {
+    TagSkeleton,
+  },
   parameters: {
-    component: Tag,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      TagSkeleton,
-    },
   },
 };
 
diff --git a/packages/react/src/components/Tag/next/Tag.stories.js b/packages/react/src/components/Tag/next/Tag.stories.js
index 276852248d96..d320a2481d57 100644
--- a/packages/react/src/components/Tag/next/Tag.stories.js
+++ b/packages/react/src/components/Tag/next/Tag.stories.js
@@ -10,9 +10,7 @@ import { Tag } from 'carbon-components-react';
 
 export default {
   title: 'Components/Tag',
-  parameters: {
-    component: Tag,
-  },
+  component: Tag,
 };
 
 export const Default = () => {
diff --git a/packages/react/src/components/Text/Text-story.js b/packages/react/src/components/Text/Text-story.js
index 6ca7b7c79f4a..6bcab168385f 100644
--- a/packages/react/src/components/Text/Text-story.js
+++ b/packages/react/src/components/Text/Text-story.js
@@ -19,8 +19,8 @@ import mdx from './Text.mdx';
 
 export default {
   title: 'Experimental/unstable_Text',
+  component: Text,
   parameters: {
-    component: Text,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
index d9914b8e8ad3..3d9a22f247c2 100644
--- a/packages/react/src/components/TextArea/TextArea-story.js
+++ b/packages/react/src/components/TextArea/TextArea-story.js
@@ -36,16 +36,15 @@ const TextAreaProps = () => ({
 
 export default {
   title: 'Components/TextArea',
+  component: TextArea,
   decorators: [withKnobs],
-
+  subcomponents: {
+    TextAreaSkeleton,
+  },
   parameters: {
-    component: TextArea,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      TextAreaSkeleton,
-    },
   },
 };
 
@@ -53,7 +52,7 @@ export const Default = () => <TextArea {...TextAreaProps()} />;
 
 export const Skeleton = () => <TextAreaSkeleton />;
 
-export const classNameChangeTest = () => (
+export const ClassNameChangeTest = () => (
   <>
     <TextArea
       labelText="Text area label"
diff --git a/packages/react/src/components/TextArea/next/TextArea.stories.js b/packages/react/src/components/TextArea/next/TextArea.stories.js
index 57bee4e66a50..e9f8cac025bb 100644
--- a/packages/react/src/components/TextArea/next/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/next/TextArea.stories.js
@@ -11,11 +11,9 @@ import { Layer } from '../../Layer';
 
 export default {
   title: 'Components/TextArea',
-  parameters: {
-    component: TextArea,
-    subcomponents: {
-      TextAreaSkeleton,
-    },
+  component: TextArea,
+  subcomponents: {
+    TextAreaSkeleton,
   },
 };
 
@@ -30,7 +28,7 @@ export const Default = () => (
   />
 );
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <>
       <TextArea
diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
index 58f69d162b97..6c21497256a1 100644
--- a/packages/react/src/components/TextInput/TextInput-story.js
+++ b/packages/react/src/components/TextInput/TextInput-story.js
@@ -110,21 +110,20 @@ TextInput.displayName = 'TextInput';
 
 export default {
   title: 'Components/TextInput',
+  component: TextInput,
   decorators: [withKnobs],
-
+  subcomponents: {
+    TextInputSkeleton,
+    'TextInput.PasswordInput': TextInput.PasswordInput,
+  },
   parameters: {
-    component: TextInput,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      TextInputSkeleton,
-      'TextInput.PasswordInput': TextInput.PasswordInput,
-    },
   },
 };
 
-export const classNameChangeTest = () => (
+export const ClassNameChangeTest = () => (
   <>
     <TextInput
       defaultValue="The class should be added to the label"
diff --git a/packages/react/src/components/TextInput/next/TextInput.stories.js b/packages/react/src/components/TextInput/next/TextInput.stories.js
index bb8b7958288e..6f4fe7acb746 100644
--- a/packages/react/src/components/TextInput/next/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/next/TextInput.stories.js
@@ -13,16 +13,15 @@ import mdx from './TextInput.mdx';
 
 export default {
   title: 'Components/TextInput',
-
+  component: TextInput,
+  subcomponents: {
+    TextInputSkeleton,
+    'TextInput.PasswordInput': TextInput.PasswordInput,
+  },
   parameters: {
-    component: TextInput,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      TextInputSkeleton,
-      'TextInput.PasswordInput': TextInput.PasswordInput,
-    },
   },
 };
 
@@ -55,7 +54,7 @@ export const TogglePasswordVisibility = () => {
   );
 };
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <>
       <TextInput
diff --git a/packages/react/src/components/Tile/Tile-story.js b/packages/react/src/components/Tile/Tile-story.js
index ecd39a9ef17e..1ce69f0c55f6 100644
--- a/packages/react/src/components/Tile/Tile-story.js
+++ b/packages/react/src/components/Tile/Tile-story.js
@@ -85,22 +85,21 @@ const props = {
 
 export default {
   title: 'Components/Tile',
+  component: Tile,
   decorators: [withKnobs],
-
+  subcomponents: {
+    ClickableTile,
+    SelectableTile,
+    ExpandableTile,
+    RadioTile,
+    TileGroup,
+    TileAboveTheFoldContent,
+    TileBelowTheFoldContent,
+  },
   parameters: {
-    component: Tile,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      ClickableTile,
-      SelectableTile,
-      ExpandableTile,
-      RadioTile,
-      TileGroup,
-      TileAboveTheFoldContent,
-      TileBelowTheFoldContent,
-    },
   },
 };
 
diff --git a/packages/react/src/components/Tile/next/Tile.stories.js b/packages/react/src/components/Tile/next/Tile.stories.js
index 11aed93be756..042bd19cd3d0 100644
--- a/packages/react/src/components/Tile/next/Tile.stories.js
+++ b/packages/react/src/components/Tile/next/Tile.stories.js
@@ -23,17 +23,15 @@ import './tile-story.scss';
 
 export default {
   title: 'Components/Tile',
-  parameters: {
-    component: Tile,
-    subcomponents: {
-      ClickableTile,
-      SelectableTile,
-      ExpandableTile,
-      RadioTile,
-      TileGroup,
-      TileAboveTheFoldContent,
-      TileBelowTheFoldContent,
-    },
+  component: Tile,
+  subcomponents: {
+    ClickableTile,
+    SelectableTile,
+    ExpandableTile,
+    RadioTile,
+    TileGroup,
+    TileAboveTheFoldContent,
+    TileBelowTheFoldContent,
   },
 };
 
diff --git a/packages/react/src/components/TimePicker/TimePicker-story.js b/packages/react/src/components/TimePicker/TimePicker-story.js
index d32f3b13251d..47fc748a173d 100644
--- a/packages/react/src/components/TimePicker/TimePicker-story.js
+++ b/packages/react/src/components/TimePicker/TimePicker-story.js
@@ -64,16 +64,16 @@ const props = {
 
 export default {
   title: 'Components/TimePicker',
+  component: TimePicker,
   decorators: [withKnobs],
+  subcomponents: {
+    TimePickerSelect,
+    SelectItem,
+  },
   parameters: {
-    component: TimePicker,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      TimePickerSelect,
-      SelectItem,
-    },
   },
 };
 
diff --git a/packages/react/src/components/TimePicker/next/TimePicker.stories.js b/packages/react/src/components/TimePicker/next/TimePicker.stories.js
index 68849fba92bb..c27532ec2bec 100644
--- a/packages/react/src/components/TimePicker/next/TimePicker.stories.js
+++ b/packages/react/src/components/TimePicker/next/TimePicker.stories.js
@@ -53,12 +53,10 @@ import { Layer } from '../../Layer';
 
 export default {
   title: 'Components/TimePicker',
-  parameters: {
-    component: TimePicker,
-    subcomponents: {
-      TimePickerSelect,
-      SelectItem,
-    },
+  component: TimePicker,
+  subcomponents: {
+    TimePickerSelect,
+    SelectItem,
   },
 };
 
@@ -77,7 +75,7 @@ export const Default = () => {
   );
 };
 
-export const withLayer = () => {
+export const WithLayer = () => {
   return (
     <>
       <TimePicker id="time-picker" labelText="First layer">
diff --git a/packages/react/src/components/Toggle/Toggle-story.js b/packages/react/src/components/Toggle/Toggle-story.js
index 364182b6333e..d9c45c10bca5 100644
--- a/packages/react/src/components/Toggle/Toggle-story.js
+++ b/packages/react/src/components/Toggle/Toggle-story.js
@@ -33,12 +33,8 @@ const toggleProps = () => ({
 
 export default {
   title: 'Components/Toggle',
+  component: Toggle,
   decorators: [withKnobs],
-
-  parameters: {
-    component: Toggle,
-    subcomponents: {},
-  },
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/Toggle/next/Toggle.stories.js b/packages/react/src/components/Toggle/next/Toggle.stories.js
index a43fba84b8c4..f9d95c465700 100644
--- a/packages/react/src/components/Toggle/next/Toggle.stories.js
+++ b/packages/react/src/components/Toggle/next/Toggle.stories.js
@@ -10,9 +10,7 @@ import { Toggle, ToggleSkeleton } from 'carbon-components-react';
 
 export default {
   title: 'Components/Toggle',
-  parameters: {
-    component: Toggle,
-  },
+  component: Toggle,
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
index 3b3dfdff5b39..1957da4f1f92 100644
--- a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
+++ b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
@@ -25,12 +25,8 @@ const toggleProps = () => ({
 
 export default {
   title: 'Deprecated/ToggleSmall',
+  component: ToggleSmall,
   decorators: [withKnobs],
-
-  parameters: {
-    component: ToggleSmall,
-    subcomponents: {},
-  },
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/Toolbar/Toolbar-story.js b/packages/react/src/components/Toolbar/Toolbar-story.js
index b7fa156f5959..f3f2ce740d57 100644
--- a/packages/react/src/components/Toolbar/Toolbar-story.js
+++ b/packages/react/src/components/Toolbar/Toolbar-story.js
@@ -30,16 +30,12 @@ const inputProps = {
 
 export default {
   title: 'Deprecated/Toolbar',
-
-  parameters: {
-    component: Toolbar,
-
-    subcomponents: {
-      ToolbarItem,
-      ToolbarTitle,
-      ToolbarOption,
-      ToolbarDivider,
-    },
+  component: Toolbar,
+  subcomponents: {
+    ToolbarItem,
+    ToolbarTitle,
+    ToolbarOption,
+    ToolbarDivider,
   },
 };
 
diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
index 35af805f69b6..009b271c58b4 100644
--- a/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
+++ b/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
@@ -41,10 +41,9 @@ const props = () => ({
 
 export default {
   title: 'Components/TooltipDefinition',
+  component: TooltipDefinition,
   decorators: [withKnobs],
-
   parameters: {
-    component: TooltipDefinition,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/TooltipIcon/TooltipIcon-story.js b/packages/react/src/components/TooltipIcon/TooltipIcon-story.js
index 2752946a3260..5e9c560bb30f 100644
--- a/packages/react/src/components/TooltipIcon/TooltipIcon-story.js
+++ b/packages/react/src/components/TooltipIcon/TooltipIcon-story.js
@@ -60,10 +60,9 @@ const props = () => {
 
 export default {
   title: 'Components/TooltipIcon',
+  component: TooltipIcon,
   decorators: [withKnobs],
-
   parameters: {
-    component: TooltipIcon,
     docs: {
       page: mdx,
     },
diff --git a/packages/react/src/components/TreeView/TreeView-story.js b/packages/react/src/components/TreeView/TreeView-story.js
index 3bedf17d6a26..9dbbb9eb795f 100644
--- a/packages/react/src/components/TreeView/TreeView-story.js
+++ b/packages/react/src/components/TreeView/TreeView-story.js
@@ -251,8 +251,8 @@ function renderTree({ nodes, expanded, withIcons = false }) {
 
 export default {
   title: 'Experimental/unstable_TreeView',
+  component: TreeView,
   decorators: [withKnobs],
-  parameters: { component: TreeView },
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/TreeView/next/Treeview.stories.js b/packages/react/src/components/TreeView/next/Treeview.stories.js
index e2a18164d069..c7e1b5b3834d 100644
--- a/packages/react/src/components/TreeView/next/Treeview.stories.js
+++ b/packages/react/src/components/TreeView/next/Treeview.stories.js
@@ -191,7 +191,7 @@ function renderTree({ nodes, expanded, withIcons = false }) {
 
 export default {
   title: 'Experimental/unstable_TreeView',
-  parameters: { component: TreeView },
+  component: TreeView,
 };
 
 export const Default = () => (
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
index abf309dcb68c..38f9800b3748 100644
--- a/packages/react/src/components/UIShell/UIShell-story.js
+++ b/packages/react/src/components/UIShell/UIShell-story.js
@@ -148,36 +148,36 @@ const StoryContent = ({ useResponsiveOffset = true }) => {
   );
 };
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'Components/UI Shell',
-
+  subcomponents: {
+    Content,
+    Header,
+    HeaderMenuButton,
+    HeaderName,
+    HeaderNavigation,
+    HeaderMenu,
+    HeaderMenuItem,
+    HeaderGlobalBar,
+    HeaderGlobalAction,
+    HeaderPanel,
+    HeaderSideNavItems,
+    SkipToContent,
+    SideNav,
+    SideNavItems,
+    SideNavDivider,
+    SideNavLink,
+    SideNavMenu,
+    SideNavMenuItem,
+    Switcher,
+    SwitcherItem,
+    SwitcherDivider,
+  },
   parameters: {
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      Content,
-      Header,
-      HeaderMenuButton,
-      HeaderName,
-      HeaderNavigation,
-      HeaderMenu,
-      HeaderMenuItem,
-      HeaderGlobalBar,
-      HeaderGlobalAction,
-      HeaderPanel,
-      HeaderSideNavItems,
-      SkipToContent,
-      SideNav,
-      SideNavItems,
-      SideNavDivider,
-      SideNavLink,
-      SideNavMenu,
-      SideNavMenuItem,
-      Switcher,
-      SwitcherItem,
-      SwitcherDivider,
-    },
   },
 };
 
diff --git a/packages/react/src/components/UIShell/next/UIShell.stories.js b/packages/react/src/components/UIShell/next/UIShell.stories.js
index fb5102ccb30d..f6bff7d1d16d 100644
--- a/packages/react/src/components/UIShell/next/UIShell.stories.js
+++ b/packages/react/src/components/UIShell/next/UIShell.stories.js
@@ -127,33 +127,31 @@ const StoryContent = ({ useResponsiveOffset = true }) => {
   );
 };
 
+// eslint-disable-next-line storybook/csf-component
 export default {
   title: 'Components/UI Shell',
-
-  parameters: {
-    subcomponents: {
-      Content,
-      Header,
-      HeaderMenuButton,
-      HeaderName,
-      HeaderNavigation,
-      HeaderMenu,
-      HeaderMenuItem,
-      HeaderGlobalBar,
-      HeaderGlobalAction,
-      HeaderPanel,
-      HeaderSideNavItems,
-      SkipToContent,
-      SideNav,
-      SideNavItems,
-      SideNavDivider,
-      SideNavLink,
-      SideNavMenu,
-      SideNavMenuItem,
-      Switcher,
-      SwitcherItem,
-      SwitcherDivider,
-    },
+  subcomponents: {
+    Content,
+    Header,
+    HeaderMenuButton,
+    HeaderName,
+    HeaderNavigation,
+    HeaderMenu,
+    HeaderMenuItem,
+    HeaderGlobalBar,
+    HeaderGlobalAction,
+    HeaderPanel,
+    HeaderSideNavItems,
+    SkipToContent,
+    SideNav,
+    SideNavItems,
+    SideNavDivider,
+    SideNavLink,
+    SideNavMenu,
+    SideNavMenuItem,
+    Switcher,
+    SwitcherItem,
+    SwitcherDivider,
   },
 };
 
diff --git a/packages/react/src/components/UnorderedList/UnorderedList-story.js b/packages/react/src/components/UnorderedList/UnorderedList-story.js
index 64da5fc16340..f8a017e00836 100644
--- a/packages/react/src/components/UnorderedList/UnorderedList-story.js
+++ b/packages/react/src/components/UnorderedList/UnorderedList-story.js
@@ -22,16 +22,15 @@ const props = {
 
 export default {
   title: 'Components/UnorderedList',
+  component: UnorderedList,
+  subcomponents: {
+    ListItem,
+  },
   decorators: [withKnobs],
-
   parameters: {
-    component: UnorderedList,
     docs: {
       page: mdx,
     },
-    subcomponents: {
-      ListItem,
-    },
   },
 };
 
diff --git a/yarn.lock b/yarn.lock
index c0bbc71d9c92..f4e73d6e7dc7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6445,7 +6445,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:0.0.1":
+"@storybook/csf@npm:0.0.1, @storybook/csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/csf@npm:0.0.1"
   dependencies:
@@ -7854,7 +7854,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:5.7.0, @typescript-eslint/experimental-utils@npm:^5.0.0, @typescript-eslint/experimental-utils@npm:^5.5.0":
+"@typescript-eslint/experimental-utils@npm:5.7.0":
   version: 5.7.0
   resolution: "@typescript-eslint/experimental-utils@npm:5.7.0"
   dependencies:
@@ -7870,6 +7870,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/experimental-utils@npm:^5.0.0, @typescript-eslint/experimental-utils@npm:^5.3.0, @typescript-eslint/experimental-utils@npm:^5.5.0":
+  version: 5.9.0
+  resolution: "@typescript-eslint/experimental-utils@npm:5.9.0"
+  dependencies:
+    "@types/json-schema": ^7.0.9
+    "@typescript-eslint/scope-manager": 5.9.0
+    "@typescript-eslint/types": 5.9.0
+    "@typescript-eslint/typescript-estree": 5.9.0
+    eslint-scope: ^5.1.1
+    eslint-utils: ^3.0.0
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 731b27840642b644e65f4ae321ed47e973ffadacd1aa24a19b02b4b298b5bcfbfa16c2d3d034e87a08c3c45f942c5b974f7619cb143eb23fb950f37418dce791
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/parser@npm:^5.5.0":
   version: 5.7.0
   resolution: "@typescript-eslint/parser@npm:5.7.0"
@@ -7897,6 +7913,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/scope-manager@npm:5.9.0":
+  version: 5.9.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.9.0"
+  dependencies:
+    "@typescript-eslint/types": 5.9.0
+    "@typescript-eslint/visitor-keys": 5.9.0
+  checksum: 46e7ab0cef558e7faf1aa8d122a265e196566c0073292f5b2f9cede1f63f52860be8e4ef90251c15e0922339c15852584cb5337382035baff87f1203c0c8d1b5
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/types@npm:5.7.0":
   version: 5.7.0
   resolution: "@typescript-eslint/types@npm:5.7.0"
@@ -7904,6 +7930,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:5.9.0":
+  version: 5.9.0
+  resolution: "@typescript-eslint/types@npm:5.9.0"
+  checksum: 7c4e142600aec266b41418dab1d0cee8cace980b6990692df6522de6eab6705bf515aef36180e4a38c62acb10c92fb474269ac6856a4266d6b035068cd83fad3
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:5.7.0":
   version: 5.7.0
   resolution: "@typescript-eslint/typescript-estree@npm:5.7.0"
@@ -7922,6 +7955,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/typescript-estree@npm:5.9.0":
+  version: 5.9.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.9.0"
+  dependencies:
+    "@typescript-eslint/types": 5.9.0
+    "@typescript-eslint/visitor-keys": 5.9.0
+    debug: ^4.3.2
+    globby: ^11.0.4
+    is-glob: ^4.0.3
+    semver: ^7.3.5
+    tsutils: ^3.21.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 71e3f720e335fb08e66950d32b723484aa4d1f4a3163e82259f4be2d11091545070c2e71472be470403cb6f82bf1abe84fa89c1d0b1d47adc8550b3f70aabfb5
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:5.7.0":
   version: 5.7.0
   resolution: "@typescript-eslint/visitor-keys@npm:5.7.0"
@@ -7932,6 +7983,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:5.9.0":
+  version: 5.9.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.9.0"
+  dependencies:
+    "@typescript-eslint/types": 5.9.0
+    eslint-visitor-keys: ^3.0.0
+  checksum: 34a595b83b0e7d4f387d6c81b272804b94a1a91478c5f856fdfdd227595bf8562bf3f5d732606d10b4522c3f2617d09d4bacd2193f757a324ea66b3144a68903
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.11.1":
   version: 1.11.1
   resolution: "@webassemblyjs/ast@npm:1.11.1"
@@ -16409,6 +16470,7 @@ __metadata:
     eslint-plugin-prettier: ^3.4.0
     eslint-plugin-react: ^7.24.0
     eslint-plugin-react-hooks: ^4.2.0
+    eslint-plugin-storybook: ^0.5.5
     eslint-restricted-globals: ^0.2.0
     prettier: ^2.2.1
   peerDependencies:
@@ -16626,6 +16688,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-storybook@npm:^0.5.5":
+  version: 0.5.5
+  resolution: "eslint-plugin-storybook@npm:0.5.5"
+  dependencies:
+    "@storybook/csf": ^0.0.1
+    "@typescript-eslint/experimental-utils": ^5.3.0
+    requireindex: ^1.1.0
+  peerDependencies:
+    eslint: ">=6"
+  checksum: 97160cdda0d2540acc41f8926dff3187b705fbafb821d92fcd5e6793d7298955e1267eaa423af3ae101ac7bf8930d31bfb9c6e0a01cd90eedf83039d57adb4cf
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-testing-library@npm:^5.0.1":
   version: 5.0.1
   resolution: "eslint-plugin-testing-library@npm:5.0.1"
@@ -32151,6 +32226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"requireindex@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "requireindex@npm:1.2.0"
+  checksum: 50d8b10a1ff1fdf6aea7a1870bc7bd238b0fb1917d8d7ca17fd03afc38a65dcd7a8a4eddd031f89128b5f0065833d5c92c4fef67f2c04e8624057fe626c9cf94
+  languageName: node
+  linkType: hard
+
 "requires-port@npm:1.x.x, requires-port@npm:^1.0.0":
   version: 1.0.0
   resolution: "requires-port@npm:1.0.0"