From ac1e9aa2e727ea9aaedc9f6f0e111ceeea6119cb Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sat, 16 Sep 2023 22:41:51 +0200
Subject: [PATCH] Docs(web-react): Add Stack demo #DS-908

- Stack demo in web-react is now same as demo in web and web-twig
---
 packages/web-react/docs/DocsSections.tsx      |  2 +-
 packages/web-react/docs/DocsStack.tsx         |  2 +-
 .../src/components/Stack/demo/Stack.tsx       | 29 ----------------
 .../src/components/Stack/demo/StackBlocks.tsx | 15 ++++++++
 ...nnerAndOuterDividersAndVerticalSpacing.tsx | 17 ++++++++++
 ...cksWithInnerDividersAndVerticalSpacing.tsx | 17 ++++++++++
 ...ithInnerDividersWithoutVerticalSpacing.tsx | 17 ++++++++++
 .../demo/StackBlocksWithVerticalSpacing.tsx   | 15 ++++++++
 .../components/Stack/demo/StackFormFields.tsx | 14 ++++++++
 .../src/components/Stack/demo/index.tsx       | 34 +++++++++++++------
 10 files changed, 121 insertions(+), 41 deletions(-)
 delete mode 100644 packages/web-react/src/components/Stack/demo/Stack.tsx
 create mode 100644 packages/web-react/src/components/Stack/demo/StackBlocks.tsx
 create mode 100644 packages/web-react/src/components/Stack/demo/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.tsx
 create mode 100644 packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersAndVerticalSpacing.tsx
 create mode 100644 packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersWithoutVerticalSpacing.tsx
 create mode 100644 packages/web-react/src/components/Stack/demo/StackBlocksWithVerticalSpacing.tsx
 create mode 100644 packages/web-react/src/components/Stack/demo/StackFormFields.tsx

diff --git a/packages/web-react/docs/DocsSections.tsx b/packages/web-react/docs/DocsSections.tsx
index 48b7023f7a..d9697be10a 100644
--- a/packages/web-react/docs/DocsSections.tsx
+++ b/packages/web-react/docs/DocsSections.tsx
@@ -5,7 +5,7 @@ import DocsStack from './DocsStack';
 interface DocsSectionProps {
   children: ReactNode;
   hasStack?: boolean;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
   tag?: string;
   title: string;
 }
diff --git a/packages/web-react/docs/DocsStack.tsx b/packages/web-react/docs/DocsStack.tsx
index 85d38d6fea..5310ed42b3 100644
--- a/packages/web-react/docs/DocsStack.tsx
+++ b/packages/web-react/docs/DocsStack.tsx
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 
 interface DocsStackProps {
   children: ReactNode;
-  stackAlignment?: 'start' | 'center' | 'end';
+  stackAlignment?: 'start' | 'center' | 'end' | 'stretch';
 }
 
 const DocsStack = ({ children, stackAlignment }: DocsStackProps) => {
diff --git a/packages/web-react/src/components/Stack/demo/Stack.tsx b/packages/web-react/src/components/Stack/demo/Stack.tsx
deleted file mode 100644
index d3b5461abd..0000000000
--- a/packages/web-react/src/components/Stack/demo/Stack.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { ElementType } from 'react';
-import { ComponentStory } from '@storybook/react';
-import Stack from '../Stack';
-import { SpiritStackProps } from '../../../types';
-
-const Story: ComponentStory<typeof Stack> = <E extends ElementType = 'div'>(args: SpiritStackProps<E>) => (
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore Missing IntrinsicAttributes
-  <Stack {...args} />
-);
-
-Story.args = {
-  children: (
-    <>
-      <li>
-        <div>List item 1</div>
-      </li>
-      <li>
-        <div>List item 1</div>
-      </li>
-      <li>
-        <div>List item 1</div>
-      </li>
-    </>
-  ),
-  elementType: 'ul',
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocks.tsx b/packages/web-react/src/components/Stack/demo/StackBlocks.tsx
new file mode 100644
index 0000000000..62eda2a1e4
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocks.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocks = () => (
+  <Stack elementType="ul">
+    {[1, 2, 3].map((i) => (
+      <li key={i}>
+        <DocsBox>Block {i}</DocsBox>
+      </li>
+    ))}
+  </Stack>
+);
+
+export default StackBlocks;
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.tsx
new file mode 100644
index 0000000000..c2b1ffee4a
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocksWithInnerAndOuterDividersAndVerticalSpacing = () => {
+  return (
+    <Stack elementType="ul" hasSpacing hasIntermediateDividers hasStartDivider hasEndDivider>
+      {[1, 2, 3].map((i) => (
+        <li key={i}>
+          <DocsBox>Block {i}</DocsBox>
+        </li>
+      ))}
+    </Stack>
+  );
+};
+
+export default StackBlocksWithInnerAndOuterDividersAndVerticalSpacing;
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersAndVerticalSpacing.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersAndVerticalSpacing.tsx
new file mode 100644
index 0000000000..a61f6e290e
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersAndVerticalSpacing.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocksWithInnerDividersAndVerticalSpacing = () => {
+  return (
+    <Stack elementType="ul" hasSpacing hasIntermediateDividers>
+      {[1, 2, 3].map((i) => (
+        <li key={i}>
+          <DocsBox>Block {i}</DocsBox>
+        </li>
+      ))}
+    </Stack>
+  );
+};
+
+export default StackBlocksWithInnerDividersAndVerticalSpacing;
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersWithoutVerticalSpacing.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersWithoutVerticalSpacing.tsx
new file mode 100644
index 0000000000..a8d6d5d05b
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersWithoutVerticalSpacing.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocksWithInnerDividersWithoutVerticalSpacing = () => {
+  return (
+    <Stack elementType="ul" hasIntermediateDividers>
+      {[1, 2, 3].map((i) => (
+        <li key={i}>
+          <DocsBox>Block {i}</DocsBox>
+        </li>
+      ))}
+    </Stack>
+  );
+};
+
+export default StackBlocksWithInnerDividersWithoutVerticalSpacing;
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithVerticalSpacing.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithVerticalSpacing.tsx
new file mode 100644
index 0000000000..bb49f55167
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithVerticalSpacing.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocksWithVerticalSpacing = () => (
+  <Stack elementType="ul" hasSpacing>
+    {[1, 2, 3].map((i) => (
+      <li key={i}>
+        <DocsBox>Block {i}</DocsBox>
+      </li>
+    ))}
+  </Stack>
+);
+
+export default StackBlocksWithVerticalSpacing;
diff --git a/packages/web-react/src/components/Stack/demo/StackFormFields.tsx b/packages/web-react/src/components/Stack/demo/StackFormFields.tsx
new file mode 100644
index 0000000000..05137676a3
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackFormFields.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Stack from '../Stack';
+import { TextField } from '../../TextField';
+
+const StackFormFields = () => {
+  return (
+    <Stack hasSpacing>
+      <TextField id="textfieldStack1" label="Label" name="textfieldStack1" placeholder="Placeholder" isRequired />
+      <TextField id="textfieldStack2" label="Label" name="textfieldStack2" placeholder="Placeholder" isRequired />
+    </Stack>
+  );
+};
+
+export default StackFormFields;
diff --git a/packages/web-react/src/components/Stack/demo/index.tsx b/packages/web-react/src/components/Stack/demo/index.tsx
index a0ceb466ff..2e8da8e9d6 100644
--- a/packages/web-react/src/components/Stack/demo/index.tsx
+++ b/packages/web-react/src/components/Stack/demo/index.tsx
@@ -2,19 +2,33 @@
 /* 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 Stack from './Stack';
+import StackFormFields from './StackFormFields';
+import StackBlocks from './StackBlocks';
+import StackBlocksWithVerticalSpacing from './StackBlocksWithVerticalSpacing';
+import StackBlocksWithInnerDividersAndVerticalSpacing from './StackBlocksWithInnerDividersAndVerticalSpacing';
+import StackBlocksWithInnerAndOuterDividersAndVerticalSpacing from './StackBlocksWithInnerAndOuterDividersAndVerticalSpacing';
+import StackBlocksWithInnerDividersWithoutVerticalSpacing from './StackBlocksWithInnerDividersWithoutVerticalSpacing';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <IconsProvider value={icons}>
-      <DocsSection title="Default">
-        <Stack {...Stack.args} />
-      </DocsSection>
-    </IconsProvider>
+    <DocsSection title="Stacked Form Fields" stackAlignment="stretch">
+      <StackFormFields />
+    </DocsSection>
+    <DocsSection title="Stacked Blocks" stackAlignment="stretch">
+      <StackBlocks />
+    </DocsSection>
+    <DocsSection title="Stacked Blocks with Vertical Spacing" stackAlignment="stretch">
+      <StackBlocksWithVerticalSpacing />
+    </DocsSection>
+    <DocsSection title="Stacked Blocks with Inner Dividers and Vertical Spacing" stackAlignment="stretch">
+      <StackBlocksWithInnerDividersAndVerticalSpacing />
+    </DocsSection>
+    <DocsSection title="Stacked Blocks with Inner and Outer Dividers and Vertical Spacing" stackAlignment="stretch">
+      <StackBlocksWithInnerAndOuterDividersAndVerticalSpacing />
+    </DocsSection>
+    <DocsSection title="Stacked Blocks with Inner Dividers without Vertical Spacing" stackAlignment="stretch">
+      <StackBlocksWithInnerDividersWithoutVerticalSpacing />
+    </DocsSection>
   </React.StrictMode>,
 );