DST-611: revise <Scrollable> component (#4301)

Co-authored-by: Sebastian Sebald <[email protected]>

.changeset/eight-sheep-invite.md

@@ -0,0 +1,8 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+docs[DST-611]: Revise `<Scrollable>` documentation page
+
+Revised the `<Scrollable>` page according to our new structure of component documentation pages.

docs/content/components/layout/scrollable/scroll-horizontal.demo.tsx

@@ -1,20 +1,12 @@
-import { Card, Scrollable } from '@marigold/components';
+import { Scrollable } from '@marigold/components';
+import { Rectangle } from '@/ui/Rectangle';
 
 export default () => (
-  <Scrollable width="1/2">
-    <div className="flex gap-2 p-4">
-      <Card>
-        <div className="h-[100px] w-[200px]" />
-      </Card>
-      <Card>
-        <div className="h-[100px] w-[200px]" />
-      </Card>
-      <Card>
-        <div className="h-[100px] w-[200px]" />
-      </Card>
-      <Card>
-        <div className="h-[100px] w-[200px]" />
-      </Card>
+  <Scrollable>
+    <div className="inline-flex gap-2 p-2">
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Rectangle key={index} height="100px" width="200px" />
+      ))}
     </div>
   </Scrollable>
 );

docs/content/components/layout/scrollable/scroll-vertical.demo.tsx

@@ -1,20 +1,12 @@
 import { Scrollable } from '@marigold/components';
+import { Rectangle } from '@/ui/Rectangle';
 
 export default () => (
-  <Scrollable height="200px">
-    <div>
-      This is some additional text that is always visible! Pellentesque habitant
-      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
-      Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
-      ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi
-      vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
-      ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo
-      vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt
-      condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
-      Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus,
-      neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
-      eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
-      porttitor, facilisis luctus, metus
+  <Scrollable height="150px">
+    <div className="flex flex-col items-center gap-2 p-2">
+      {Array.from({ length: 10 }).map((_, index) => (
+        <Rectangle key={index} height="100px" width="200px" />
+      ))}
     </div>
   </Scrollable>
 );

docs/content/components/layout/scrollable/scrollable.mdx

@@ -1,44 +1,62 @@
 ---
 title: Scrollable
 caption: Lets the content scroll.
+badge: updated
 ---
 
-This component is commonly used in applications to manage large amounts of information or data, providing a convenient way for users to explore content without overwhelming the available screen space. The `children` of the `<Scrollable>` will scroll inside the container.
-
-By default, the `width` is set to 100%, you can change the `width` to get a horizontal scrollbar. Same you can archieve with the `height` property. By default this takes the available height.
-
-## Import
+`<Scrollable>` is a component container for creating scrollable areas in the UI. Scrollbars can be both vertical and horizontal.
 
-```tsx
-import { Scrollable } from '@marigold/components';
-```
+## Usage
 
-## Props
+This component is commonly used in applications to manage large amounts of information or data, providing a convenient way for users to explore content without overwhelming the available screen space. The `children` of the `<Scrollable>` will scroll inside the container.
 
-<PropsTable component={title} />
+By default, the `width` is set to 100%, you can change the `width` to get a horizontal scrollbar. Same you can achieve with the `height` property. By default this takes the available height.
 
-## Examples
+The `<Scrollable>` component can be used with every other component where content is overflowing the container, e.g. `<Card>`, `<Table>`, etc.
 
 ### Vertical Scrolling
 
-This example shows the `<Scrollable>` container layout with some text inside of it. The `height` is set to `200px` to enable vertical scrolling.
+To use the vertical scrollbar you need to set the `height` prop and the content has to overflow the container.
 
 <ComponentDemo file="./scroll-vertical.demo.tsx" />
 
 ### Horizontal Scrolling
 
-Otherwise you also have the possibility to scroll horizontal, for that set the `width` prop to another value.
+To use horizontal scrolling, you need to wrap the content in a [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) using `flex`. By default, the `width` prop is set to 100%.
+Here too, the content must extend beyond the container for the scroll bar to be displayed.
 
 <ComponentDemo file="./scroll-horizontal.demo.tsx" />
 
-### Scrollable Card
-
-If you want to scroll inside some element for example the `<Card>`, you can use also the `<Scrollable>` inside of it.
-
-<ComponentDemo file="./scroll-card.demo.tsx" />
+## Props
 
-### Scrollable Table Context
+<StorybookHintMessage component={title} />
 
-The example shows a `<Scrollable>` which contains a `<Table>`. This is a good example of how this layout component should be used.
+<PropsTable component={title} />
 
-<ComponentDemo file="./scroll-table.demo.tsx" />
+## Related
+
+<TeaserList
+  items={[
+    {
+      title: 'Building layouts',
+      href: '../../foundations/layouts',
+      caption: 'Learn how to build layouts.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+          />
+        </svg>
+      ),
+    },
+  ]}
+/>

packages/components/src/Scrollable/Scrollable.stories.tsx

@@ -63,7 +63,7 @@ export const Vertical: Story = {
 
 export const Horizontal: Story = {
   render: args => (
-    <Scrollable {...args} width="1/2">
+    <Scrollable {...args}>
       <div className="flex gap-2">
         <Card>
           <div className="h-[100px] w-[200px] border border-[#ced4da] bg-[#e9ecef]" />
@@ -77,6 +77,12 @@ export const Horizontal: Story = {
         <Card>
           <div className="h-[100px] w-[200px] border border-[#ced4da] bg-[#e9ecef]" />
         </Card>
+        <Card>
+          <div className="h-[100px] w-[200px] border border-[#ced4da] bg-[#e9ecef]" />
+        </Card>
+        <Card>
+          <div className="h-[100px] w-[200px] border border-[#ced4da] bg-[#e9ecef]" />
+        </Card>
       </div>
     </Scrollable>
   ),