Fixed Text Docs not rendering issue in Storybook

ui/components/component-library/text/README.mdx

@@ -119,7 +119,7 @@ Use the `fontWeight` prop and the `FontWeight` enum from `./ui/helpers/constants
 - `FontWeight.Bold` = `bold` || `700`
 
 <Canvas>
-  <Story id="components-componentlibrary-text--font-weight" />
+  <Story id="components-componentlibrary-text--font-weight-story" />
 </Canvas>
 
 ```jsx
@@ -145,7 +145,7 @@ Use the `fontStyle` prop and the `FontStyle` enum from `./ui/helpers/constants/d
 - `FontStyle.Italic`
 
 <Canvas>
-  <Story id="components-componentlibrary-text--font-style" />
+  <Story id="components-componentlibrary-text--font-style-story" />
 </Canvas>
 
 ```jsx
@@ -165,7 +165,7 @@ import { FontStyle } from '../../../helpers/constants/design-system';
 Use the `textTransform` prop and the `TextTransform` enum from `./ui/helpers/constants/design-system.ts` to change the text alignment of the `Text` component
 
 <Canvas>
-  <Story id="components-componentlibrary-text--text-transform" />
+  <Story id="components-componentlibrary-text--text-transform-story" />
 </Canvas>
 
 ```jsx
@@ -188,7 +188,7 @@ import { TextTransform } from '../../../helpers/constants/design-system';
 Use the `textAlign` prop and the `TextAlign` enum from `./ui/helpers/constants/design-system.ts` to change the text alignment of the `Text` component
 
 <Canvas>
-  <Story id="components-componentlibrary-text--text-align" />
+  <Story id="components-componentlibrary-text--text-align-story" />
 </Canvas>
 
 ```jsx
@@ -217,7 +217,7 @@ import { TextAlign } from '../../../helpers/constants/design-system';
 Use the `overflowWrap` prop and the `OverflowWrap` enum from `./ui/helpers/constants/design-system.ts` to change the overflow wrap of the `Text` component
 
 <Canvas>
-  <Story id="components-componentlibrary-text--overflow-wrap" />
+  <Story id="components-componentlibrary-text--overflow-wrap-story" />
 </Canvas>
 
 ```jsx