Docs(web-react): Add Text demo #DS-911

- Text demo in web-react is now same as demo in web and web-twig

packages/web-react/src/components/Text/demo/TextDefault.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Text from '../Text';
+
+const TextDefault = () => <Text>Text</Text>;
+
+export default TextDefault;

packages/web-react/src/components/Text/demo/TextEmphasis.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import Text from '../Text';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
+const TextEmphasis = () => (
   <>
-    <Text>Body Medium Text Regular</Text>
-    <Text emphasis="bold">Body Medium Text Bold</Text>
-    <Text emphasis="italic">Body Medium Text Italic</Text>
+    <Text>Text regular</Text>
+    <Text emphasis="bold">Text bold</Text>
+    <Text emphasis="italic">Text italic</Text>
   </>
 );
 
-export default Story;
+export default TextEmphasis;

packages/web-react/src/components/Text/demo/TextSizes.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
+import { SizesExtended } from '../../../constants';
 import Text from '../Text';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <>
-    <Text size="xsmall">Body XSmall Text Regular</Text>
-    <Text size="small">Body Small Text Regular</Text>
-    <Text size="medium">Body Medium Text Regular</Text>
-    <Text size="large">Body Large Text Regular</Text>
-    <Text size="xlarge">Body XLarge Text Regular</Text>
-  </>
-);
+const TextSizes = () => {
+  const sizes = Object.values(SizesExtended);
 
-export default Story;
+  return (
+    <>
+      {sizes.map((size) => (
+        <Text key={size} size={size}>
+          Text {size}
+        </Text>
+      ))}
+    </>
+  );
+};
+
+export default TextSizes;

packages/web-react/src/components/Text/demo/index.tsx

@@ -1,32 +1,20 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
-// @ts-ignore: No declaration file
-import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import Text from './Text';
+import TextDefault from './TextDefault';
 import TextSizes from './TextSizes';
 import TextEmphasis from './TextEmphasis';
-import BodyTypography from './TextAllCombinations';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <IconsProvider value={icons}>
-      <DocsSection title="Default">
-        <Text {...Text.args} />
-      </DocsSection>
-      <DocsSection title="Sizes">
-        <TextSizes />
-      </DocsSection>
-      <DocsSection title="Emphasis">
-        <TextEmphasis />
-      </DocsSection>
-      <DocsSection title="Body Typography">
-        <BodyTypography />
-      </DocsSection>
-    </IconsProvider>
+    <DocsSection title="Default">
+      <TextDefault />
+    </DocsSection>
+    <DocsSection title="Sizes">
+      <TextSizes />
+    </DocsSection>
+    <DocsSection title="Emphasis">
+      <TextEmphasis />
+    </DocsSection>
   </React.StrictMode>,
 );