feat: added controls for tooltip & topbanner stories

packages/ui/components/tooltip/tooltip.stories.mdx

@@ -15,21 +15,46 @@ Tooltip components can be used to provide additional information about an elemen
 
 
 <Canvas>
-  <Story name="Tooltip">
+  <Story name="Tooltip"
+  args={{
+    alertMsg: 'Copied!',
+    hoverMsg: "Copy to clipboard",
+    content: 'Hover Me',
+  }}
+         argTypes={{
+            alertMsg: {
+              control: {
+                type: 'text',
+              },
+            },
+            hoverMsg: {
+              control: {
+                type: 'text',
+              },
+            },
+            content: {
+              control: {
+                type: 'text',
+              },
+            },
+         }}
+  >
+    {({ alertMsg, hoverMsg, content }) => (
     <TooltipProvider>
       <VariantsTable titles={['']} columnMinWidth={150}>
         <VariantRow variant="Default">
-          <Tooltip content="Copy to clipboard">
+          <Tooltip content={`${hoverMsg}`}>
             <span
               className="dark:text-darkgray-50 p-2 bg-brand-default rounded-md text-gray-100 dark:bg-darkgray-900 hover:cursor-pointer"
               onClick={() => {
-                alert('Copied!');
+                alert(`${alertMsg}`);
               }}>
-              Hover Me
+              {content}
             </span>
           </Tooltip>
         </VariantRow>
       </VariantsTable>
     </TooltipProvider>
+    )}
   </Story>
 </Canvas>

packages/ui/components/top-banner/topbanner.stories.mdx

@@ -62,3 +62,41 @@ Each toast has a state to represent neutral, positive or negative responses.
         />
          </Example>
 </Examples>
+
+<Canvas>
+  <Story name="TopBanner"
+         args={{
+           text: 'Something big is happening we want you to know about.',
+           variant: 'default'
+  }}
+         argTypes={{
+            variant: {
+              control: {
+                type: 'select',
+                options: ['default', 'warning', 'error'],
+              },
+            },
+           text: {
+              control: {
+                type: 'text',
+              },
+            },
+  }}>
+    {({ text, variant, ...args }) => (
+      <TopBanner
+        {...args}
+        actions={
+          <button
+            className="border-b border-black text-sm"
+            onClick={() => {
+              alert("test");
+            }}>
+            Action
+          </button>
+        }
+        variant={variant}
+        text={text}
+      />
+    )}
+  </Story>
+</Canvas>