Docs(web-react, web): Add Stack demo #DS-908

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;
 }

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) => {

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;

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;

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;

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;

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;

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;

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>,
 );