From 8f75dbdf8c9a8d0447662706c0cebbde7257dbcd Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sat, 16 Sep 2023 22:41:51 +0200
Subject: [PATCH 1/2] 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 | 15 ++++++++
 ...cksWithInnerDividersAndVerticalSpacing.tsx | 15 ++++++++
 ...ithInnerDividersWithoutVerticalSpacing.tsx | 15 ++++++++
 .../demo/StackBlocksWithVerticalSpacing.tsx   | 15 ++++++++
 .../components/Stack/demo/StackFormFields.tsx | 12 +++++++
 .../src/components/Stack/demo/index.tsx       | 34 +++++++++++++------
 10 files changed, 113 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..c1473d3f1c
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerAndOuterDividersAndVerticalSpacing.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocksWithInnerAndOuterDividersAndVerticalSpacing = () => (
+  <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..91929d0d4c
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersAndVerticalSpacing.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocksWithInnerDividersAndVerticalSpacing = () => (
+  <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..ee431439b0
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithInnerDividersWithoutVerticalSpacing.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import Stack from '../Stack';
+
+const StackBlocksWithInnerDividersWithoutVerticalSpacing = () => (
+  <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..c5c5c978b3
--- /dev/null
+++ b/packages/web-react/src/components/Stack/demo/StackFormFields.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Stack from '../Stack';
+import { TextField } from '../../TextField';
+
+const StackFormFields = () => (
+  <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>,
 );

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

- Stack demo in web is now same as demo in web-react and web-twig
---
 .../web/src/scss/components/Stack/index.html  | 180 ++++++++++--------
 1 file changed, 102 insertions(+), 78 deletions(-)

diff --git a/packages/web/src/scss/components/Stack/index.html b/packages/web/src/scss/components/Stack/index.html
index 4c727acd50..7b427d5265 100644
--- a/packages/web/src/scss/components/Stack/index.html
+++ b/packages/web/src/scss/components/Stack/index.html
@@ -1,8 +1,10 @@
 {{#> layout/plain }}
 
-  <section class="docs-Section">
+<section class="docs-Section">
+
+  <h2 class="docs-Heading">Stacked Form Fields</h2>
 
-    <h2 class="docs-Heading">Stacked Form Fields</h2>
+  <div class="docs-Stack docs-Stack--stretch">
 
     <div class="Stack Stack--hasSpacing">
       <div class="TextField">
@@ -15,11 +17,15 @@ <h2 class="docs-Heading">Stacked Form Fields</h2>
       </div>
     </div>
 
-  </section>
+  </div>
+    
+</section>
+
+<section class="docs-Section">
 
-  <section class="docs-Section">
+  <h2 class="docs-Heading">Stacked Blocks</h2>
 
-    <h2 class="docs-Heading">Stacked Blocks</h2>
+  <div class="docs-Stack docs-Stack--stretch">
 
     <ul class="Stack">
       <li>
@@ -39,101 +45,119 @@ <h2 class="docs-Heading">Stacked Blocks</h2>
       </li>
     </ul>
 
-  </section>
+  </div>
+
+</section>
 
 <section class="docs-Section">
 
-  <h3 class="docs-Heading">Stacked Blocks with Vertical Spacing</h3>
+  <h2 class="docs-Heading">Stacked Blocks with Vertical Spacing</h2>
 
-  <ul class="Stack Stack--hasSpacing">
-    <li>
-      <div class="docs-Box">
-        Block 1
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 2
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 3
-      </div>
-    </li>
-  </ul>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <ul class="Stack Stack--hasSpacing">
+      <li>
+        <div class="docs-Box">
+          Block 1
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 2
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 3
+        </div>
+      </li>
+    </ul>
+
+  </div>
 
 </section>
 
 <section class="docs-Section">
 
-  <h3 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h3>
+  <h2 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h2>
 
-  <ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
-    <li>
-      <div class="docs-Box">
-        Block 1
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 2
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 3
-      </div>
-    </li>
-  </ul>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
+      <li>
+        <div class="docs-Box">
+          Block 1
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 2
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 3
+        </div>
+      </li>
+    </ul>
+    
+  </div>
 
 </section>
 
 <section class="docs-Section">
 
-  <h3 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h3>
+  <h2 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h2>
 
-  <ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
-    <li>
-      <div class="docs-Box">
-        Block 1
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 2
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 3
-      </div>
-    </li>
-  </ul>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
+      <li>
+        <div class="docs-Box">
+          Block 1
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 2
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 3
+        </div>
+      </li>
+    </ul>
+
+  </div>
 
 </section>
 
 <section class="docs-Section">
 
-  <h3 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h3>
+  <h2 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h2>
 
-  <ul class="Stack Stack--hasIntermediateDividers">
-    <li>
-      <div class="docs-Box">
-        Block 1
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 2
-      </div>
-    </li>
-    <li>
-      <div class="docs-Box">
-        Block 3
-      </div>
-    </li>
-  </ul>
+  <div class="docs-Stack docs-Stack--stretch">
+
+    <ul class="Stack Stack--hasIntermediateDividers">
+      <li>
+        <div class="docs-Box">
+          Block 1
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 2
+        </div>
+      </li>
+      <li>
+        <div class="docs-Box">
+          Block 3
+        </div>
+      </li>
+    </ul>
+
+  </div>
 
 </section>