Add notification reminder popup component

web/stories/NotifyReminder.stories.tsx

@@ -1,8 +1,17 @@
+/* eslint-disable no-alert */
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NotifyReminder from '../components/ui/NotifyReminderPopup/NotifyReminderPopup';
 import Mock from './assets/mocks/notify-popup.png';
 
+const Example = args => (
+  <div style={{ margin: '20px', marginTop: '130px' }}>
+    <NotifyReminder {...args}>
+      <button type="button">notify button</button>
+    </NotifyReminder>
+  </div>
+);
+
 export default {
   title: 'owncast/Notify Reminder',
   component: NotifyReminder,
@@ -14,13 +23,26 @@ export default {
     docs: {
       description: {
         component: `After visiting the page three times this popup reminding you that you can register for live stream notifications shows up.
-Clicking it will make the notificaiton modal display. Clicking the "X" will hide the modal and make it never show again.`,
+Clicking it will make the notification modal display. Clicking the "X" will hide the modal and make it never show again.`,
       },
     },
   },
 } as ComponentMeta<typeof NotifyReminder>;
 
-const Template: ComponentStory<typeof NotifyReminder> = args => <NotifyReminder {...args} />;
+const Template: ComponentStory<typeof NotifyReminder> = args => <Example {...args} />;
 
-export const Example = Template.bind({});
-Example.args = {};
+export const Active = Template.bind({});
+Active.args = {
+  visible: true,
+  notificationClicked: () => {
+    alert('notification clicked');
+  },
+  notificationClosed: () => {
+    alert('notification closed');
+  },
+};
+
+export const InActive = Template.bind({});
+InActive.args = {
+  visible: false,
+};