chore: better StoryBook for SkeletonRectangle

trezor · Nov 27, 2024 · 28c5369 · 28c5369
1 parent aff99b8
commit 28c5369
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 4 deletions.
diff --git a/packages/components/src/components/ElevationContext/ElevationContext.stories.tsx b/packages/components/src/components/ElevationContext/ElevationContext.stories.tsx
@@ -27,6 +27,9 @@ const UiBox = styled.div<{ $elevation: Elevation }>`
     padding: ${spacingsPx.sm};
     border-radius: ${borders.radii.sm};
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacingsPx.sm};
 `;
 
 const meta: Meta = {
@@ -69,14 +72,12 @@ const TextareaExtender = ({ children }: { children: ReactNode }) => {
     );
 };
 
-export const Box = ({ children }: { children?: ReactNode }) => {
+const Box = ({ children }: { children?: ReactNode }) => {
     const { elevation } = useElevation();
 
     return (
         <UiBox $elevation={elevation}>
-            Elevation: {elevation}
-            <br />
-            <br />
+            <div>Elevation: {elevation}</div>
             <ElevationUp>{children}</ElevationUp>
         </UiBox>
     );

diff --git a/packages/components/src/components/skeletons/SkeletonRectangle.stories.tsx b/packages/components/src/components/skeletons/SkeletonRectangle.stories.tsx
@@ -1,9 +1,43 @@
+import { ReactNode } from 'react';
+
 import { Meta, StoryObj } from '@storybook/react';
+import styled from 'styled-components';
+
+import {
+    borders,
+    Elevation,
+    mapElevationToBackground,
+    mapElevationToBorder,
+    spacingsPx,
+} from '@trezor/theme';
 
 import {
     SkeletonRectangle as SkeletonRectangleComponent,
     SkeletonRectangleProps,
 } from './SkeletonRectangle';
+import { ElevationContext, ElevationUp, useElevation } from '../ElevationContext/ElevationContext';
+
+const UiBox = styled.div<{ $elevation: Elevation }>`
+    background-color: ${mapElevationToBackground};
+    border: 1px solid ${mapElevationToBorder};
+    padding: ${spacingsPx.sm};
+    border-radius: ${borders.radii.sm};
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: ${spacingsPx.sm};
+`;
+
+const Box = ({ children }: { children?: ReactNode }) => {
+    const { elevation } = useElevation();
+
+    return (
+        <UiBox $elevation={elevation}>
+            <div>Elevation: {elevation}</div>
+            <ElevationUp>{children}</ElevationUp>
+        </UiBox>
+    );
+};
 
 const meta: Meta = {
     title: 'Skeletons',
@@ -12,9 +46,24 @@ const meta: Meta = {
 export default meta;
 
 export const SkeletonRectangle: StoryObj<SkeletonRectangleProps> = {
+    render: args => (
+        <ElevationContext baseElevation={-1}>
+            <SkeletonRectangleComponent {...args} />
+            <Box>
+                <SkeletonRectangleComponent {...args} />
+                <Box>
+                    <SkeletonRectangleComponent {...args} />
+                    <Box>
+                        <SkeletonRectangleComponent {...args} />
+                    </Box>
+                </Box>
+            </Box>
+        </ElevationContext>
+    ),
     args: {
         width: 120,
         height: 20,
         borderRadius: 4,
+        animate: true,
     },
 };