Docs(web-react): Add ScrollView demo #DS-906

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

packages/web-react/docs/DocsBox.tsx

@@ -1,7 +1,8 @@
 import React, { ReactNode } from 'react';
-import { SizesDictionaryType } from '../src/types';
+import { SizesDictionaryType, StyleProps } from '../src/types';
+import { useStyleProps } from '../src/hooks';
 
-interface DocsBoxProps {
+interface DocsBoxProps extends StyleProps {
   children: ReactNode;
   size?: SizesDictionaryType;
 }
@@ -10,10 +11,15 @@ const defaultProps = {
   size: 'medium',
 };
 
-const DocsBox = ({ children, size }: DocsBoxProps) => {
+const DocsBox = ({ children, size, ...restProps }: DocsBoxProps) => {
+  const { styleProps, props: transferProps } = useStyleProps(restProps);
   const sizeClass = size ? `docs-Box--${size}` : '';
 
-  return <div className={`docs-Box ${sizeClass}`}>{children}</div>;
+  return (
+    <div {...styleProps} {...transferProps} className={`docs-Box ${sizeClass} ${styleProps.className}`}>
+      {children}
+    </div>
+  );
 };
 
 DocsBox.defaultProps = defaultProps;

packages/web-react/src/components/ScrollView/demo/ScrollViewDefault.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ScrollView from '../ScrollView';
+import { VERTICAL_CONTENT } from './scrollViewContent';
+
+const ScrollViewDefault = () => (
+  <div style={{ height: '160px' }}>
+    <ScrollView data-spirit-toggle="scrollView">
+      <p>{VERTICAL_CONTENT}</p>
+    </ScrollView>
+  </div>
+);
+
+export default ScrollViewDefault;

packages/web-react/src/components/ScrollView/demo/ScrollViewHiddenScrollbar.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ScrollView from '../ScrollView';
+import { VERTICAL_CONTENT, HORIZONTAL_CONTENT } from './scrollViewContent';
+
+const ScrollViewHiddenScrollbar = () => (
+  <>
+    <div className="mb-1000" style={{ height: '160px' }}>
+      <ScrollView isScrollbarDisabled>
+        <p>{VERTICAL_CONTENT}</p>
+      </ScrollView>
+    </div>
+
+    <ScrollView direction="horizontal" isScrollbarDisabled>
+      <p style={{ whiteSpace: 'nowrap' }}>{HORIZONTAL_CONTENT}</p>
+    </ScrollView>
+  </>
+);
+
+export default ScrollViewHiddenScrollbar;

packages/web-react/src/components/ScrollView/demo/ScrollViewHorizontal.tsx

@@ -1,40 +1,13 @@
 import React from 'react';
-import { ComponentStory } from '@storybook/react';
 import ScrollView from '../ScrollView';
-import { SpiritScrollViewProps } from '../../../types';
+import { HORIZONTAL_CONTENT } from './scrollViewContent';
 
-const Story: ComponentStory<typeof ScrollView> = (args: SpiritScrollViewProps) => <ScrollView {...args} />;
-
-Story.args = {
-  direction: 'horizontal',
-  children: (
+const ScrollViewHorizontal = () => (
+  <ScrollView direction="horizontal">
     <p className="py-700" style={{ whiteSpace: 'nowrap' }}>
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
-      sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
-      pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
-      vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
-      mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
-      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
-      feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam
-      ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
-      tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
-      blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
-      ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed
-      fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue
-      velit cursus nunc.Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
-      mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
-      pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
-      vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
-      semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac,
-      enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
-      laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
-      Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
-      adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec
-      odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
-      orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed
-      consequat, leo eget bibendum sodales, augue velit cursus nunc.
+      {HORIZONTAL_CONTENT}
     </p>
-  ),
-};
+  </ScrollView>
+);
 
-export default Story;
+export default ScrollViewHorizontal;

packages/web-react/src/components/ScrollView/demo/ScrollViewHorizontalBreakout.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import DocsBox from '../../../../docs/DocsBox';
+import { Grid } from '../../Grid';
+import ScrollView from '../ScrollView';
+
+const ScrollViewHorizontalBreakout = () => (
+  <div className="breakout-container">
+    <ScrollView direction="horizontal">
+      <Grid cols={4} UNSAFE_className="mb-700" UNSAFE_style={{ paddingInline: 'var(--container-padding-inline)' }}>
+        {[1, 2, 3, 4].map((i) => (
+          <DocsBox key={i} size="small" UNSAFE_style={{ width: '20rem', aspectRatio: '2/1' }}>
+            1/4
+          </DocsBox>
+        ))}
+      </Grid>
+    </ScrollView>
+  </div>
+);
+
+export default ScrollViewHorizontalBreakout;

packages/web-react/src/components/ScrollView/demo/ScrollViewOverflowDecorators.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import ScrollView from '../ScrollView';
+import { VERTICAL_CONTENT, HORIZONTAL_CONTENT } from './scrollViewContent';
+
+const ScrollViewOverflowDecorators = () => (
+  <>
+    <div className="mb-1000" style={{ height: '160px' }}>
+      <ScrollView overflowDecorators="borders">
+        <p>{VERTICAL_CONTENT}</p>
+      </ScrollView>
+    </div>
+
+    <ScrollView direction="horizontal" overflowDecorators="borders" UNSAFE_className="mb-1000">
+      <p className="py-700" style={{ whiteSpace: 'nowrap' }}>
+        {HORIZONTAL_CONTENT}
+      </p>
+    </ScrollView>
+
+    <div className="mb-1000" style={{ height: '160px' }}>
+      <ScrollView overflowDecorators="both">
+        <p>{VERTICAL_CONTENT}</p>
+      </ScrollView>
+    </div>
+
+    <ScrollView direction="horizontal" overflowDecorators="both">
+      <p className="py-700" style={{ whiteSpace: 'nowrap' }}>
+        {HORIZONTAL_CONTENT}
+      </p>
+    </ScrollView>
+  </>
+);
+
+export default ScrollViewOverflowDecorators;

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

@@ -1,20 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
-import ScrollView from './ScrollView';
+import ScrollViewDefault from './ScrollViewDefault';
 import ScrollViewHorizontal from './ScrollViewHorizontal';
-import ScrollViewScrollbarDisabled from './ScrollViewScrollbarDisabled';
+import ScrollViewHorizontalBreakout from './ScrollViewHorizontalBreakout';
+import ScrollViewOverflowDecorators from './ScrollViewOverflowDecorators';
+import ScrollViewHiddenScrollbar from './ScrollViewHiddenScrollbar';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <DocsSection title="Default">
-      <ScrollView {...ScrollView.args} />
+    <DocsSection title="Vertical Scrolling">
+      <ScrollViewDefault />
     </DocsSection>
-    <DocsSection title="Horizontal">
-      <ScrollViewHorizontal {...ScrollViewHorizontal.args} />
+    <DocsSection title="Horizontal Scrolling">
+      <ScrollViewHorizontal />
     </DocsSection>
-    <DocsSection title="Scrollbar Disabled">
-      <ScrollViewScrollbarDisabled {...ScrollViewScrollbarDisabled.args} />
+    <DocsSection title="Horizontal Scrolling with Container Breakout" hasStack={false}>
+      <ScrollViewHorizontalBreakout />
+    </DocsSection>
+    <DocsSection title="Overflow Decorators">
+      <ScrollViewOverflowDecorators />
+    </DocsSection>
+    <DocsSection title="Hidden Scrollbar">
+      <ScrollViewHiddenScrollbar />
     </DocsSection>
   </React.StrictMode>,
 );