Add a wrapper

storybookjs · Dec 18, 2024 · 792ac4c · 792ac4c
1 parent 9a0f2fd
commit 792ac4c
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
@@ -1,8 +1,19 @@
 import React, { type ComponentProps, useEffect } from 'react';
 import { useState } from 'react';
 
+import { styled } from 'storybook/internal/theming';
+
 import ReactConfetti from 'react-confetti-boom';
 
+const Wrapper = styled.div({
+  zIndex: 9999,
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+});
+
 export function Confetti({
   timeToFade = 5000,
   colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
@@ -21,13 +32,15 @@ export function Confetti({
   }, [timeToFade]);
 
   return (
-    <ReactConfetti
-      mode="fall"
-      colors={colors}
-      shapeSize={14}
-      particleCount={particleCount}
-      fadeOutHeight={10}
-      {...confettiProps}
-    />
+    <Wrapper>
+      <ReactConfetti
+        mode="fall"
+        colors={colors}
+        shapeSize={14}
+        particleCount={particleCount}
+        fadeOutHeight={10}
+        {...confettiProps}
+      />
+    </Wrapper>
   );
 }