From 31b2214682a353b215e2bb5800ff2c0183f8924e Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 10 Aug 2023 20:49:03 +0100
Subject: [PATCH] Add params config to YoutubeCallout component

---
 .../screens/DocsScreen/YouTubeCallout.stories.tsx           | 6 ++++++
 src/components/screens/DocsScreen/YouTubeCallout.tsx        | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/screens/DocsScreen/YouTubeCallout.stories.tsx b/src/components/screens/DocsScreen/YouTubeCallout.stories.tsx
index 206c7c32..dc5caa3c 100644
--- a/src/components/screens/DocsScreen/YouTubeCallout.stories.tsx
+++ b/src/components/screens/DocsScreen/YouTubeCallout.stories.tsx
@@ -39,3 +39,9 @@ InsideMdWrapper.decorators = [(storyFn) => <MDWrapper>{storyFn()}</MDWrapper>];
 export const InsideMdWrapperOpen = Template.bind({});
 InsideMdWrapperOpen.args = Open.args;
 InsideMdWrapperOpen.decorators = InsideMdWrapper.decorators;
+
+export const WithTimeStamp = Template.bind({});
+WithTimeStamp.args = {
+  ...Open.args,
+  params: 'start=84',
+};
diff --git a/src/components/screens/DocsScreen/YouTubeCallout.tsx b/src/components/screens/DocsScreen/YouTubeCallout.tsx
index b54b1dbf..2b79874e 100644
--- a/src/components/screens/DocsScreen/YouTubeCallout.tsx
+++ b/src/components/screens/DocsScreen/YouTubeCallout.tsx
@@ -8,6 +8,7 @@ interface YouTubeCalloutProps {
   open?: boolean;
   summary?: string;
   title: string;
+  params?: string;
 }
 
 const { color, typography, spacing } = styles;
@@ -149,6 +150,7 @@ export const YouTubeCallout = ({
   open,
   summary = 'Watch a video tutorial on the Storybook channel',
   title,
+  params,
 }: YouTubeCalloutProps) => (
   <Details open={open}>
     <Summary>
@@ -156,6 +158,6 @@ export const YouTubeCallout = ({
       {summary}
       <Arrow />
     </Summary>
-    <LiteYouTubeEmbed id={id} title={title} />
+    <LiteYouTubeEmbed id={id} title={title} params={params} />
   </Details>
 );