From 160142dcd54e377edcde3225587c0ae2fde7153b Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sat, 16 Sep 2023 21:45:59 +0200
Subject: [PATCH] Docs(web-react): Add Text demo #DS-911

- Text demo in web-react is now same as demo in web and web-twig
---
 .../src/components/Text/demo/Text.tsx         | 14 ------
 .../Text/demo/TextAllCombinations.tsx         | 46 -------------------
 .../src/components/Text/demo/TextDefault.tsx  |  6 +++
 .../src/components/Text/demo/TextEmphasis.tsx | 12 ++---
 .../src/components/Text/demo/TextSizes.tsx    | 27 ++++++-----
 .../src/components/Text/demo/index.tsx        | 32 ++++---------
 6 files changed, 36 insertions(+), 101 deletions(-)
 delete mode 100644 packages/web-react/src/components/Text/demo/Text.tsx
 delete mode 100644 packages/web-react/src/components/Text/demo/TextAllCombinations.tsx
 create mode 100644 packages/web-react/src/components/Text/demo/TextDefault.tsx

diff --git a/packages/web-react/src/components/Text/demo/Text.tsx b/packages/web-react/src/components/Text/demo/Text.tsx
deleted file mode 100644
index 6a340d1b1b..0000000000
--- a/packages/web-react/src/components/Text/demo/Text.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { ElementType } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { SpiritTextProps } from '../../../types';
-import Text from '../Text';
-
-const Story: ComponentStory<typeof Text> = <T extends ElementType = 'div', S = void>(args: SpiritTextProps<T, S>) => (
-  <Text {...args} />
-);
-
-Story.args = {
-  children: 'Body Text',
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/Text/demo/TextAllCombinations.tsx b/packages/web-react/src/components/Text/demo/TextAllCombinations.tsx
deleted file mode 100644
index d41e39366a..0000000000
--- a/packages/web-react/src/components/Text/demo/TextAllCombinations.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-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) => (
-  <>
-    <Text size="xlarge">Body XLarge Text Regular</Text>
-    <Text size="xlarge" emphasis="bold">
-      Body XLarge Text Bold
-    </Text>
-    <Text size="xlarge" emphasis="italic">
-      Body XLarge Text Italic
-    </Text>
-    <Text size="large">Body Large Text Regular</Text>
-    <Text size="large" emphasis="bold">
-      Body Large Text Bold
-    </Text>
-    <Text size="large" emphasis="italic">
-      Body Large Text Italic
-    </Text>
-    <Text size="medium">Body Medium Text Regular</Text>
-    <Text size="medium" emphasis="bold">
-      Body Medium Text Bold
-    </Text>
-    <Text size="medium" emphasis="italic">
-      Body Medium Text Italic
-    </Text>
-    <Text size="small">Body Small Text Regular</Text>
-    <Text size="small" emphasis="bold">
-      Body Small Text Bold
-    </Text>
-    <Text size="small" emphasis="italic">
-      Body Small Text Italic
-    </Text>
-    <Text size="xsmall">Body XSmall Text Regular</Text>
-    <Text size="xsmall" emphasis="bold">
-      Body XSmall Text Bold
-    </Text>
-    <Text size="xsmall" emphasis="italic">
-      Body XSmall Text Italic
-    </Text>
-  </>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Text/demo/TextDefault.tsx b/packages/web-react/src/components/Text/demo/TextDefault.tsx
new file mode 100644
index 0000000000..76dc61a898
--- /dev/null
+++ b/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;
diff --git a/packages/web-react/src/components/Text/demo/TextEmphasis.tsx b/packages/web-react/src/components/Text/demo/TextEmphasis.tsx
index 393270c349..5d17e895bb 100644
--- a/packages/web-react/src/components/Text/demo/TextEmphasis.tsx
+++ b/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;
diff --git a/packages/web-react/src/components/Text/demo/TextSizes.tsx b/packages/web-react/src/components/Text/demo/TextSizes.tsx
index c0462f6842..95608b6830 100644
--- a/packages/web-react/src/components/Text/demo/TextSizes.tsx
+++ b/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;
diff --git a/packages/web-react/src/components/Text/demo/index.tsx b/packages/web-react/src/components/Text/demo/index.tsx
index e8403d6c30..1cdff4b607 100644
--- a/packages/web-react/src/components/Text/demo/index.tsx
+++ b/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>,
 );