docs(storybook): add badges to deprecated components

Ref UXD-1672
securityscorecard · Nov 25, 2024 · 9458a4f · 9458a4f
1 parent bb46b0a
commit 9458a4f
Show file tree

Hide file tree

Showing 129 changed files with 61 additions and 26 deletions.
diff --git a/.storybook/decorators/withMockedDate.ts b/.storybook/decorators/withMockedDate.ts
@@ -0,0 +1,19 @@
+import {makeDecorator} from '@storybook/preview-api'
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import MockDate from 'mockdate';
+
+dayjs.extend(utc)
+
+export const withMockedDate = makeDecorator({
+  name: 'withMockedDate',
+  parameterName: 'mockDate',
+  wrapper: (storyFn, context, {parameters: date}) => {
+    MockDate.reset();
+
+    if (date instanceof Date) {
+      MockDate.set(dayjs(date).utc(true).toDate())
+    }
+    return storyFn(context)
+  }
+})
diff --git a/...s/expected/components_Datatable_internalComponents_BatchModule_With Columns.png b/...s/expected/components_Datatable_internalComponents_BatchModule_With Columns.png
diff --git a/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png b/...omponents_Datatable_internalComponents_ControlsModule_ControlButton_Default.png
diff --git a/...components_Datatable_internalComponents_ControlsModule_With Applied Columns.png b/...components_Datatable_internalComponents_ControlsModule_With Applied Columns.png
diff --git a/...mponents_Datatable_internalComponents_ControlsModule_With Applied Filtering.png b/...mponents_Datatable_internalComponents_ControlsModule_With Applied Filtering.png
diff --git a/...omponents_Datatable_internalComponents_ControlsModule_With Disabled Columns.png b/...omponents_Datatable_internalComponents_ControlsModule_With Disabled Columns.png
diff --git a/...ponents_Datatable_internalComponents_ControlsModule_With Disabled Filtering.png b/...ponents_Datatable_internalComponents_ControlsModule_With Disabled Filtering.png
diff --git a/...components_Datatable_internalComponents_ControlsModule_With Disabled Search.png b/...components_Datatable_internalComponents_ControlsModule_With Disabled Search.png
diff --git a/...ed/components_Datatable_internalComponents_ControlsModule_With Open Columns.png b/...ed/components_Datatable_internalComponents_ControlsModule_With Open Columns.png
diff --git a/.../components_Datatable_internalComponents_ControlsModule_With Open Filtering.png b/.../components_Datatable_internalComponents_ControlsModule_With Open Filtering.png
diff --git a/...onents_Datatable_internalComponents_Datatable_With Open And Applied Columns.png b/...onents_Datatable_internalComponents_Datatable_With Open And Applied Columns.png
diff --git a/...ents_Datatable_internalComponents_Datatable_With Open And Applied Filtering.png b/...ents_Datatable_internalComponents_Datatable_With Open And Applied Filtering.png
diff --git a/...xpected/components_Datatable_internalComponents_Datatable_With Open Columns.png b/...xpected/components_Datatable_internalComponents_Datatable_With Open Columns.png
diff --git a/...ected/components_Datatable_internalComponents_Datatable_With Open Filtering.png b/...ected/components_Datatable_internalComponents_Datatable_With Open Filtering.png
diff --git a/...ponents_BatchModule_BatchActions_Menu.png → ...tatable_BatchModule_BatchActions_Menu.png b/...ponents_BatchModule_BatchActions_Menu.png → ...tatable_BatchModule_BatchActions_Menu.png
diff --git a/...ule_ElementCounter_Abbreviated Counts.png → ...ule_ElementCounter_Abbreviated Counts.png b/...ule_ElementCounter_Abbreviated Counts.png → ...ule_ElementCounter_Abbreviated Counts.png
diff --git a/...ts_BatchModule_ElementCounter_Default.png → ...le_BatchModule_ElementCounter_Default.png b/...ts_BatchModule_ElementCounter_Default.png → ...le_BatchModule_ElementCounter_Default.png
diff --git a/...dule_ElementCounter_No Data Available.png → ...dule_ElementCounter_No Data Available.png b/...dule_ElementCounter_No Data Available.png → ...dule_ElementCounter_No Data Available.png
diff --git a/...ith Selected Rows And Exclusion Logic.png → ...ith Selected Rows And Exclusion Logic.png b/...ith Selected Rows And Exclusion Logic.png → ...ith Selected Rows And Exclusion Logic.png
diff --git a/...ule_ElementCounter_With Selected Rows.png → ...ule_ElementCounter_With Selected Rows.png b/...ule_ElementCounter_With Selected Rows.png → ...ule_ElementCounter_With Selected Rows.png
diff --git a/...dule_ElementCounter_Without Selection.png → ...dule_ElementCounter_Without Selection.png b/...dule_ElementCounter_Without Selection.png → ...dule_ElementCounter_Without Selection.png
diff --git a/...onents_BatchModule_With Batch Actions.png → ...atable_BatchModule_With Batch Actions.png b/...onents_BatchModule_With Batch Actions.png → ...atable_BatchModule_With Batch Actions.png
diff --git a/.storybook/image-snapshots/expected/tests_Datatable_BatchModule_With Columns.png b/.storybook/image-snapshots/expected/tests_Datatable_BatchModule_With Columns.png
diff --git a/...ith Selected Rows And Exclusion Logic.png → ...ith Selected Rows And Exclusion Logic.png b/...ith Selected Rows And Exclusion Logic.png → ...ith Selected Rows And Exclusion Logic.png
diff --git a/...onents_BatchModule_With Selected Rows.png → ...atable_BatchModule_With Selected Rows.png b/...onents_BatchModule_With Selected Rows.png → ...atable_BatchModule_With Selected Rows.png
diff --git a/...ule_ColumnsControls_With Custom Order.png → ...ule_ColumnsControls_With Custom Order.png b/...ule_ColumnsControls_With Custom Order.png → ...ule_ColumnsControls_With Custom Order.png
diff --git a/...age-snapshots/expected/tests_Datatable_ControlsModule_ControlButton_Default.png b/...age-snapshots/expected/tests_Datatable_ControlsModule_ControlButton_Default.png
diff --git a/...mage-snapshots/expected/tests_Datatable_ControlsModule_With Applied Columns.png b/...mage-snapshots/expected/tests_Datatable_ControlsModule_With Applied Columns.png
diff --git a/...ge-snapshots/expected/tests_Datatable_ControlsModule_With Applied Filtering.png b/...ge-snapshots/expected/tests_Datatable_ControlsModule_With Applied Filtering.png
diff --git a/...age-snapshots/expected/tests_Datatable_ControlsModule_With Disabled Columns.png b/...age-snapshots/expected/tests_Datatable_ControlsModule_With Disabled Columns.png
diff --git a/...e-snapshots/expected/tests_Datatable_ControlsModule_With Disabled Filtering.png b/...e-snapshots/expected/tests_Datatable_ControlsModule_With Disabled Filtering.png
diff --git a/...mage-snapshots/expected/tests_Datatable_ControlsModule_With Disabled Search.png b/...mage-snapshots/expected/tests_Datatable_ControlsModule_With Disabled Search.png
diff --git a/...k/image-snapshots/expected/tests_Datatable_ControlsModule_With Open Columns.png b/...k/image-snapshots/expected/tests_Datatable_ControlsModule_With Open Columns.png
diff --git a/...image-snapshots/expected/tests_Datatable_ControlsModule_With Open Filtering.png b/...image-snapshots/expected/tests_Datatable_ControlsModule_With Open Filtering.png
diff --git a/...alComponents_Datatable_Minimal Config.png → ...ts_Datatable_Datatable_Minimal Config.png b/...alComponents_Datatable_Minimal Config.png → ...ts_Datatable_Datatable_Minimal Config.png
diff --git a/...nts_Datatable_With All Columns Hidden.png → ...ble_Datatable_With All Columns Hidden.png b/...nts_Datatable_With All Columns Hidden.png → ...ble_Datatable_With All Columns Hidden.png
diff --git a/...onents_Datatable_With Applied Columns.png → ...atable_Datatable_With Applied Columns.png b/...onents_Datatable_With Applied Columns.png → ...atable_Datatable_With Applied Columns.png
diff --git a/...ents_Datatable_With Applied Filtering.png → ...able_Datatable_With Applied Filtering.png b/...ents_Datatable_With Applied Filtering.png → ...able_Datatable_With Applied Filtering.png
diff --git a/...mponents_Datatable_With Batch Actions.png → ...atatable_Datatable_With Batch Actions.png b/...mponents_Datatable_With Batch Actions.png → ...atatable_Datatable_With Batch Actions.png
diff --git a/...le_With Custom Placeholder For Search.png → ...le_With Custom Placeholder For Search.png b/...le_With Custom Placeholder For Search.png → ...le_With Custom Placeholder For Search.png
diff --git a/..._Datatable_With Disabled Batch Module.png → ..._Datatable_With Disabled Batch Module.png b/..._Datatable_With Disabled Batch Module.png → ..._Datatable_With Disabled Batch Module.png
diff --git a/...nents_Datatable_With Disabled Columns.png → ...table_Datatable_With Disabled Columns.png b/...nents_Datatable_With Disabled Columns.png → ...table_Datatable_With Disabled Columns.png
diff --git a/... Disabled Controls And Active Columns.png → ... Disabled Controls And Active Columns.png b/... Disabled Controls And Active Columns.png → ... Disabled Controls And Active Columns.png
diff --git a/...ents_Datatable_With Disabled Controls.png → ...Disabled Controls And Applied Columns.png b/...ents_Datatable_With Disabled Controls.png → ...Disabled Controls And Applied Columns.png
diff --git a/...le_With Disabled Controls And Columns.png → ...le_With Disabled Controls And Columns.png b/...le_With Disabled Controls And Columns.png → ...le_With Disabled Controls And Columns.png
diff --git a/...Disabled Controls And Applied Columns.png → ...able_Datatable_With Disabled Controls.png b/...Disabled Controls And Applied Columns.png → ...able_Datatable_With Disabled Controls.png
diff --git a/...nts_Datatable_With Disabled Filtering.png → ...ble_Datatable_With Disabled Filtering.png b/...nts_Datatable_With Disabled Filtering.png → ...ble_Datatable_With Disabled Filtering.png
diff --git a/...onents_Datatable_With Disabled Search.png → ...atable_Datatable_With Disabled Search.png b/...onents_Datatable_With Disabled Search.png → ...atable_Datatable_With Disabled Search.png
diff --git a/...nts_Datatable_With Disabled Selection.png → ...ble_Datatable_With Disabled Selection.png b/...nts_Datatable_With Disabled Selection.png → ...ble_Datatable_With Disabled Selection.png
diff --git a/...rnalComponents_Datatable_With No Data.png → ...ests_Datatable_Datatable_With No Data.png b/...rnalComponents_Datatable_With No Data.png → ...ests_Datatable_Datatable_With No Data.png
diff --git a/...nents_Datatable_With No Matching Data.png → ...table_Datatable_With No Matching Data.png b/...nents_Datatable_With No Matching Data.png → ...table_Datatable_With No Matching Data.png
diff --git a/...-snapshots/expected/tests_Datatable_Datatable_With Open And Applied Columns.png b/...-snapshots/expected/tests_Datatable_Datatable_With Open And Applied Columns.png
diff --git a/...napshots/expected/tests_Datatable_Datatable_With Open And Applied Filtering.png b/...napshots/expected/tests_Datatable_Datatable_With Open And Applied Filtering.png
diff --git a/...rybook/image-snapshots/expected/tests_Datatable_Datatable_With Open Columns.png b/...rybook/image-snapshots/expected/tests_Datatable_Datatable_With Open Columns.png
diff --git a/...book/image-snapshots/expected/tests_Datatable_Datatable_With Open Filtering.png b/...book/image-snapshots/expected/tests_Datatable_Datatable_With Open Filtering.png
diff --git a/...ith Selected Rows And Exclusion Logic.png → ...ith Selected Rows And Exclusion Logic.png b/...ith Selected Rows And Exclusion Logic.png → ...ith Selected Rows And Exclusion Logic.png
diff --git a/...mponents_Datatable_With Selected Rows.png → ...atatable_Datatable_With Selected Rows.png b/...mponents_Datatable_With Selected Rows.png → ...atatable_Datatable_With Selected Rows.png
diff --git a/...Components_Datatable_With Single Page.png → ..._Datatable_Datatable_With Single Page.png b/...Components_Datatable_With Single Page.png → ..._Datatable_Datatable_With Single Page.png
diff --git a/...ith Single Selection And Selected Row.png → ...ith Single Selection And Selected Row.png b/...ith Single Selection And Selected Row.png → ...ith Single Selection And Selected Row.png
diff --git a/...nents_Datatable_With Single Selection.png → ...table_Datatable_With Single Selection.png b/...nents_Datatable_With Single Selection.png → ...table_Datatable_With Single Selection.png
diff --git a/... With Previous Data And Is Cancelable.png → ... With Previous Data And Is Cancelable.png b/... With Previous Data And Is Cancelable.png → ... With Previous Data And Is Cancelable.png
diff --git a/...le_Data Is Loading With Previous Data.png → ...le_Data Is Loading With Previous Data.png b/...le_Data Is Loading With Previous Data.png → ...le_Data Is Loading With Previous Data.png
diff --git a/...Data Is Loading Without Previous Data.png → ...Data Is Loading Without Previous Data.png b/...Data Is Loading Without Previous Data.png → ...Data Is Loading Without Previous Data.png
diff --git a/...mponents_Table_Footer_Data Is Loading.png → ...atatable_Table_Footer_Data Is Loading.png b/...mponents_Table_Footer_Data Is Loading.png → ...atatable_Table_Footer_Data Is Loading.png
diff --git a/...ternalComponents_Table_Footer_Default.png → .../tests_Datatable_Table_Footer_Default.png b/...ternalComponents_Table_Footer_Default.png → .../tests_Datatable_Table_Footer_Default.png
diff --git a/...nents_Table_Footer_Without Pagination.png → ...table_Table_Footer_Without Pagination.png b/...nents_Table_Footer_Without Pagination.png → ...table_Table_Footer_Without Pagination.png
diff --git a/...ternalComponents_Table_Minimal Config.png → .../tests_Datatable_Table_Minimal Config.png b/...ternalComponents_Table_Minimal Config.png → .../tests_Datatable_Table_Minimal Config.png
diff --git a/...e_internalComponents_Table_Playground.png → ...cted/tests_Datatable_Table_Playground.png b/...e_internalComponents_Table_Playground.png → ...cted/tests_Datatable_Table_Playground.png
diff --git a/...omponents_Table_With Custom Page Size.png → ...Datatable_Table_With Custom Page Size.png b/...omponents_Table_With Custom Page Size.png → ...Datatable_Table_With Custom Page Size.png
diff --git a/...ponents_Table_With Disabled Selection.png → ...tatable_Table_With Disabled Selection.png b/...ponents_Table_With Disabled Selection.png → ...tatable_Table_With Disabled Selection.png
diff --git a/...onents_Table_With Exclusive Selection.png → ...atable_Table_With Exclusive Selection.png b/...onents_Table_With Exclusive Selection.png → ...atable_Table_With Exclusive Selection.png
diff --git a/...Table_With No Data (custom component).png → ...Table_With No Data (custom component).png b/...Table_With No Data (custom component).png → ...Table_With No Data (custom component).png
diff --git a/...internalComponents_Table_With No Data.png → ...ed/tests_Datatable_Table_With No Data.png b/...internalComponents_Table_With No Data.png → ...ed/tests_Datatable_Table_With No Data.png
diff --git a/...h No Matching Data (custom component).png → ...h No Matching Data (custom component).png b/...h No Matching Data (custom component).png → ...h No Matching Data (custom component).png
diff --git a/...omponents_Table_With No Matching Data.png → ...Datatable_Table_With No Matching Data.png b/...omponents_Table_With No Matching Data.png → ...Datatable_Table_With No Matching Data.png
diff --git a/...rnalComponents_Table_With Row Actions.png → ...ests_Datatable_Table_With Row Actions.png b/...rnalComponents_Table_With Row Actions.png → ...ests_Datatable_Table_With Row Actions.png
diff --git a/...alComponents_Table_With Selected Rows.png → ...ts_Datatable_Table_With Selected Rows.png b/...alComponents_Table_With Selected Rows.png → ...ts_Datatable_Table_With Selected Rows.png
diff --git a/...rnalComponents_Table_With Single Page.png → ...ests_Datatable_Table_With Single Page.png b/...rnalComponents_Table_With Single Page.png → ...ests_Datatable_Table_With Single Page.png
diff --git a/...ith Single Selection And Selected Row.png → ...ith Single Selection And Selected Row.png b/...ith Single Selection And Selected Row.png → ...ith Single Selection And Selected Row.png
diff --git a/...omponents_Table_With Single Selection.png → ...Datatable_Table_With Single Selection.png b/...omponents_Table_With Single Selection.png → ...Datatable_Table_With Single Selection.png
diff --git a/...alComponents_Table_With Sorted Column.png → ...ts_Datatable_Table_With Sorted Column.png b/...alComponents_Table_With Sorted Column.png → ...ts_Datatable_Table_With Sorted Column.png
diff --git a/...ernalComponents_Table_Without Sorting.png → ...tests_Datatable_Table_Without Sorting.png b/...ernalComponents_Table_Without Sorting.png → ...tests_Datatable_Table_Without Sorting.png
diff --git a/...nalComponents_Table_renderers_Default.png → ...sts_Datatable_Table_renderers_Default.png b/...nalComponents_Table_renderers_Default.png → ...sts_Datatable_Table_renderers_Default.png
diff --git a/...rers_Discrete Link With Absolute Link.png → ...rers_Discrete Link With Absolute Link.png b/...rers_Discrete Link With Absolute Link.png → ...rers_Discrete Link With Absolute Link.png
diff --git a/...s_Discrete Link With Custom Formatter.png → ...s_Discrete Link With Custom Formatter.png b/...s_Discrete Link With Custom Formatter.png → ...s_Discrete Link With Custom Formatter.png
diff --git a/...renderers_Discrete Link With On Click.png → ...renderers_Discrete Link With On Click.png b/...renderers_Discrete Link With On Click.png → ...renderers_Discrete Link With On Click.png
diff --git a/...rers_Discrete Link With Relative Link.png → ...rers_Discrete Link With Relative Link.png b/...rers_Discrete Link With Relative Link.png → ...rers_Discrete Link With Relative Link.png
diff --git a/..._renderers_Discrete Link With Tooltip.png → ..._renderers_Discrete Link With Tooltip.png b/..._renderers_Discrete Link With Tooltip.png → ..._renderers_Discrete Link With Tooltip.png
diff --git a/...ble_renderers_Link With Absolute Link.png → ...ble_renderers_Link With Absolute Link.png b/...ble_renderers_Link With Absolute Link.png → ...ble_renderers_Link With Absolute Link.png
diff --git a/..._renderers_Link With Custom Formatter.png → ..._renderers_Link With Custom Formatter.png b/..._renderers_Link With Custom Formatter.png → ..._renderers_Link With Custom Formatter.png
diff --git a/...ts_Table_renderers_Link With On Click.png → ...le_Table_renderers_Link With On Click.png b/...ts_Table_renderers_Link With On Click.png → ...le_Table_renderers_Link With On Click.png
diff --git a/...ble_renderers_Link With Relative Link.png → ...ble_renderers_Link With Relative Link.png b/...ble_renderers_Link With Relative Link.png → ...ble_renderers_Link With Relative Link.png
diff --git a/...nts_Table_renderers_Link With Tooltip.png → ...ble_Table_renderers_Link With Tooltip.png b/...nts_Table_renderers_Link With Tooltip.png → ...ble_Table_renderers_Link With Tooltip.png
diff --git a/...derers_Multi Value With Absolute Link.png → ...derers_Multi Value With Absolute Link.png b/...derers_Multi Value With Absolute Link.png → ...derers_Multi Value With Absolute Link.png
diff --git a/...ers_Multi Value With Custom Formatter.png → ...ers_Multi Value With Custom Formatter.png b/...ers_Multi Value With Custom Formatter.png → ...ers_Multi Value With Custom Formatter.png
diff --git a/...lti Value With Disabled Display Limit.png → ...lti Value With Disabled Display Limit.png b/...lti Value With Disabled Display Limit.png → ...lti Value With Disabled Display Limit.png
diff --git a/...e_renderers_Multi Value With On Click.png → ...e_renderers_Multi Value With On Click.png b/...e_renderers_Multi Value With On Click.png → ...e_renderers_Multi Value With On Click.png
diff --git a/...derers_Multi Value With Relative Link.png → ...derers_Multi Value With Relative Link.png b/...derers_Multi Value With Relative Link.png → ...derers_Multi Value With Relative Link.png
diff --git a/...le_renderers_Multi Value With Tooltip.png → ...le_renderers_Multi Value With Tooltip.png b/...le_renderers_Multi Value With Tooltip.png → ...le_renderers_Multi Value With Tooltip.png
diff --git a/...omponents_Table_renderers_Multi Value.png → ...Datatable_Table_renderers_Multi Value.png b/...omponents_Table_renderers_Multi Value.png → ...Datatable_Table_renderers_Multi Value.png
diff --git a/...ble_renderers_Null Value With Tooltip.png → ...ble_renderers_Null Value With Tooltip.png b/...ble_renderers_Null Value With Tooltip.png → ...ble_renderers_Null Value With Tooltip.png
diff --git a/..._renderers_Text With Custom Formatter.png → ..._renderers_Text With Custom Formatter.png b/..._renderers_Text With Custom Formatter.png → ..._renderers_Text With Custom Formatter.png
diff --git a/...nts_Table_renderers_Text With Tooltip.png → ...ble_Table_renderers_Text With Tooltip.png b/...nts_Table_renderers_Text With Tooltip.png → ...ble_Table_renderers_Text With Tooltip.png
diff --git a/...able_renderers_With Custom Null Value.png → ...able_renderers_With Custom Null Value.png b/...able_renderers_With Custom Null Value.png → ...able_renderers_With Custom Null Value.png
diff --git a/...nents_Table_renderers_With Null Value.png → ...table_Table_renderers_With Null Value.png b/...nents_Table_renderers_With Null Value.png → ...table_Table_renderers_With Null Value.png
diff --git a/...graphy_Text_Context Text (DEPRECATED).png → ...expected/typography_Text_Context Text.png b/...graphy_Text_Context Text (DEPRECATED).png → ...expected/typography_Text_Context Text.png
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -21,8 +21,9 @@ const config: StorybookConfig = {
     '@storybook/addon-designs',
     '@storybook/addon-themes',
     '@storybook/addon-coverage',
+    '@storybook/addon-a11y',
     'storycap',
-    '@storybook/addon-a11y'
+    'storybook-addon-tag-badges'
   ],
   docs: { defaultName: 'Documentation' },
   typescript: {

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -25,6 +25,7 @@ import '@fontsource/inter/700.css';
 import '@fontsource/space-mono/400.css';
 import '../src/tokens/tokens.css';
 import { SlowBuffer } from 'buffer';
+import { withMockedDate } from './decorators/withMockedDate';
 
 function clearDatatableLS() {
   Object.keys(localStorage)
@@ -139,7 +140,6 @@ const preview: Preview = {
     },
   },
   decorators: [
-    // @ts-expect-error as the type of the withScreenshot is too wide
     withScreenshot,
     withI18next,
     withThemeByClassName({
@@ -149,6 +149,7 @@ const preview: Preview = {
       },
       defaultTheme: 'Light',
     }),
+    withMockedDate(),
     (storyFn) => (
       <DSProvider config={{ debugMode: true }}>{storyFn()}</DSProvider>
     ),

diff --git a/package.json b/package.json
@@ -205,6 +205,7 @@
     "semantic-release": "^24.1.0",
     "semantic-release-export-data": "^1.1.0",
     "storybook": "^8.4.4",
+    "storybook-addon-tag-badges": "^1.3.0",
     "storycap": "^5.0.0",
     "styled-components": "^5.3.3",
     "stylelint": "^16.6.1",

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -73,6 +73,7 @@ export default {
       },
     },
   },
+  tags: ['deprecated'],
 } as Meta;
 
 export const Playground: StoryFn<ButtonProps> = (args) => <Button {...args} />;

diff --git a/src/components/Datatable/BatchModule/BatchActions/BatchActions.stories.tsx b/src/components/Datatable/BatchModule/BatchActions/BatchActions.stories.tsx
@@ -6,7 +6,7 @@ import { actionsMock } from '../../mocks/actions';
 import { BatchActionsProps } from './BatchActions.types';
 
 export default {
-  title: 'components/Datatable/internalComponents/BatchModule/BatchActions',
+  title: 'tests/Datatable/BatchModule/BatchActions',
   component: BatchActions,
   parameters: {
     viewMode: 'story',

diff --git a/src/components/Datatable/BatchModule/BatchModule.stories.tsx b/src/components/Datatable/BatchModule/BatchModule.stories.tsx
@@ -9,7 +9,7 @@ import { DatatableStore } from '../Datatable.store';
 import { defaultTableConfig } from '../defaultConfigs';
 
 export default {
-  title: 'components/Datatable/internalComponents/BatchModule',
+  title: 'tests/Datatable/BatchModule',
   component: BatchModule,
   decorators: [(storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>],
   parameters: {

diff --git a/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.stories.tsx b/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.stories.tsx
@@ -7,7 +7,7 @@ import { ElementCounterProps } from './ElementCounter.types';
 import { defaultTableConfig } from '../../defaultConfigs';
 
 export default {
-  title: 'components/Datatable/internalComponents/BatchModule/ElementCounter',
+  title: 'tests/Datatable/BatchModule/ElementCounter',
   component: ElementCounter,
   parameters: {
     viewMode: 'story',

diff --git a/src/components/Datatable/ControlsModule/ControlsModule.stories.tsx b/src/components/Datatable/ControlsModule/ControlsModule.stories.tsx
@@ -11,7 +11,7 @@ import { simpleColumns } from '../../_internal/BaseTable/mocks/columns';
 import { Data } from '../../_internal/BaseTable/mocks/types';
 
 export default {
-  title: 'components/Datatable/internalComponents/ControlsModule',
+  title: 'tests/Datatable/ControlsModule',
   component: ControlsModule,
   parameters: {
     viewMode: 'story',

diff --git a/src/components/Datatable/Datatable.stories.tsx b/src/components/Datatable/Datatable.stories.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
-import MockDate from 'mockdate';
 
 import assets from '../_internal/BaseTable/mocks/ipAssets.json';
 import { Data } from '../_internal/BaseTable/mocks/types';
@@ -22,12 +21,11 @@ import {
 import Datatable from './Datatable';
 import { DatatableProps } from './Datatable.types';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
   title: 'components/Datatable',
   component: Datatable,
   parameters: {
+    mockDate: new Date('2021-03-31T00:00:00Z'),
     screenshot: { skip: true },
     docs: {
       source: { type: 'code' },
@@ -112,6 +110,7 @@ const MyFancyDatatable = () => <Datatable ...props />
       },
     },
   },
+  tags: ['deprecated'],
 } as Meta;
 
 export const ServerSidePlayground: StoryFn<DatatableProps<Data>> = (args) => {

diff --git a/src/components/Datatable/DatatableTests.stories.tsx b/src/components/Datatable/DatatableTests.stories.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
-import MockDate from 'mockdate';
 
 import Datatable from './Datatable';
 import {
@@ -17,15 +16,14 @@ import { tableActionsMock } from './mocks/actions';
 import { Text } from '../Text';
 import { Stack } from '../layout';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
-  title: 'components/Datatable/internalComponents/Datatable',
+  title: 'tests/Datatable/Datatable',
   component: Datatable,
   parameters: {
     viewMode: 'story',
     docs: { disable: true },
     previewTabs: { 'storybook/docs/panel': { hidden: true } },
+    mockDate: new Date('2021-03-31T00:00:00Z'),
   },
   decorators: [(storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>],
 } as Meta;

diff --git a/src/components/Datatable/Table/Table.stories.tsx b/src/components/Datatable/Table/Table.stories.tsx
@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 import { omit } from 'ramda';
-import MockDate from 'mockdate';
 
 import Table from './Table';
 import { TableProps } from './Table.types';
@@ -13,10 +12,8 @@ import { simpleColumns } from '../../_internal/BaseTable/mocks/columns';
 import { datatableRowActions } from '../mocks/actions';
 import { DatatableStore, datatableInitialState } from '../Datatable.store';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
-  title: 'components/Datatable/internalComponents/Table',
+  title: 'tests/Datatable/Table',
   component: Table,
   parameters: {
     viewMode: 'story',
@@ -26,6 +23,7 @@ export default {
         height: 720,
       },
     },
+    mockDate: new Date('2021-03-31T00:00:00Z'),
   },
   argTypes: {
     data: { controls: { type: 'disabled' } },

diff --git a/src/components/Datatable/components/ColumnsControls/ColumnsControls.stories.tsx b/src/components/Datatable/components/ColumnsControls/ColumnsControls.stories.tsx
@@ -8,8 +8,7 @@ import { useColumnsControls } from '../../hooks/useColumnsControls';
 import { ColumnsControlsProps } from './ColumnsControls.types';
 
 export default {
-  title:
-    'components/Datatable/internalComponents/ControlsModule/ColumnsControls',
+  title: 'tests/Datatable/ControlsModule/ColumnsControls',
   component: ColumnsControls,
   parameters: {
     viewMode: 'story',

diff --git a/src/components/Datatable/components/ControlButton/ControlButton.stories.tsx b/src/components/Datatable/components/ControlButton/ControlButton.stories.tsx
@@ -7,7 +7,7 @@ import ControlButton from './ControlButton';
 import { ControlButtonProps } from './ControlButton.types';
 
 export default {
-  title: 'components/Datatable/internalComponents/ControlsModule/ControlButton',
+  title: 'tests/Datatable/ControlsModule/ControlButton',
   component: ControlButton,
   parameters: {
     viewMode: 'story',

diff --git a/src/components/FlexContainer/FlexContainer.stories.tsx b/src/components/FlexContainer/FlexContainer.stories.tsx
@@ -15,6 +15,7 @@ leo tincidunt vehicula non a dolor. Suspendisse placerat turpis nisl, quis gravi
 export default {
   title: 'components/FlexContainer',
   component: FlexContainer,
+  tags: ['deprecated'],
 } as Meta;
 
 export const Sample: StoryFn = () => (

diff --git a/src/components/ListView/ListView.stories.tsx b/src/components/ListView/ListView.stories.tsx
@@ -63,6 +63,7 @@ const meta = {
     },
     getRowId: (row) => row.id,
   },
+  tags: ['new'],
 } satisfies Meta<typeof ListView<FakeData>>;
 
 export default meta;

diff --git a/src/components/SingleDatePicker/SingleDatePicker.stories.tsx b/src/components/SingleDatePicker/SingleDatePicker.stories.tsx
@@ -16,6 +16,9 @@ export default {
   decorators: [
     (storyFn) => <div style={{ paddingBottom: '300px' }}>{storyFn()}</div>,
   ],
+  parameters: {
+    mockDate: new Date('2021/03/31'),
+  },
 } as Meta;
 
 export const Playground: StoryFn<SingleDatePickerProps> = (args) => (

diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
-import MockDate from 'mockdate';
 import { action } from '@storybook/addon-actions';
 
 import { Data } from '../_internal/BaseTable/mocks/types';
@@ -11,8 +10,6 @@ import Table from './Table';
 import { TableProps } from './Table.types';
 import { datatableRowActions } from '../Datatable/mocks/actions';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
   title: 'components/Table',
   component: Table,
@@ -36,6 +33,7 @@ ${comparisonTable}
         height: 720,
       },
     },
+    mockDate: new Date('2021-03-31T00:00:00Z'),
   },
   decorators: [
     (storyFn) => (
@@ -44,6 +42,7 @@ ${comparisonTable}
       </MemoryRouter>
     ),
   ],
+  tags: ['deprecated'],
 } as Meta;
 
 const TableTemplate: StoryFn<TableProps<Data>> = (args) => (

diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
@@ -122,7 +122,7 @@ export const ContextText: StoryFn = () => (
   </>
 );
 
-ContextText.storyName = 'Context Text (DEPRECATED)';
+ContextText.tags = ['deprecated'];
 
 export const MonospaceText: StoryFn = () => (
   <>

diff --git a/src/components/TreeView/TreeView.stories.tsx b/src/components/TreeView/TreeView.stories.tsx
@@ -83,6 +83,7 @@ export const Playground: Story = {
   parameters: {
     screenshot: { skip: true },
   },
+  tags: ['new'],
 };
 
 export const ContentRenderers: Story = {

diff --git a/src/components/Wizard/Wizard.stories.tsx b/src/components/Wizard/Wizard.stories.tsx
@@ -14,6 +14,7 @@ export default {
       source: { type: 'code' },
     },
   },
+  tags: ['deprecated'],
 } as Meta;
 
 const WizardTemplate = ({

diff --git a/src/components/_internal/BaseTable/Footer/Footer.stories.tsx b/src/components/_internal/BaseTable/Footer/Footer.stories.tsx
@@ -5,7 +5,7 @@ import Footer from './Footer';
 import { FooterProps } from './Footer.types';
 
 export default {
-  title: 'components/Datatable/internalComponents/Table/Footer',
+  title: 'tests/Datatable/Table/Footer',
   component: Footer,
   parameters: {
     viewMode: 'story',

diff --git a/src/components/_internal/BaseTable/renderers/renderers.stories.tsx b/src/components/_internal/BaseTable/renderers/renderers.stories.tsx
@@ -13,7 +13,7 @@ import { CellTypes } from './renderers.enums';
 import { abbreviateNumber } from '../../../../utils';
 
 export default {
-  title: 'components/Datatable/internalComponents/Table/renderers',
+  title: 'tests/Datatable/Table/renderers',
   component: CellRenderer,
   decorators: [
     (storyFn) => (

diff --git a/yarn.lock b/yarn.lock
@@ -3722,6 +3722,7 @@ __metadata:
     semantic-release: "npm:^24.1.0"
     semantic-release-export-data: "npm:^1.1.0"
     storybook: "npm:^8.4.4"
+    storybook-addon-tag-badges: "npm:^1.3.0"
     storycap: "npm:^5.0.0"
     styled-components: "npm:^5.3.3"
     stylelint: "npm:^16.6.1"
@@ -17480,6 +17481,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-addon-tag-badges@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "storybook-addon-tag-badges@npm:1.3.0"
+  dependencies:
+    "@storybook/icons": "npm:^1.2.12"
+  peerDependencies:
+    storybook: ^8.4.4
+  checksum: 10/1630bed21ed8e63018874d8102190fa30ade4dc055a64a040d895ee6f6d51eb9295f987a5954a57a647131c13b5cfbcf6d94ebbd00f09f80bf5b3f2a90467328
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^8.4.4":
   version: 8.4.4
   resolution: "storybook@npm:8.4.4"
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,6 +73,7 @@ export default { @@
           },
         },
       },
+      tags: ['deprecated'],
     } as Meta;
     export const Playground: StoryFn<ButtonProps> = (args) => <Button {...args} />;
@@ Expand Down @@