Add more placeholder components and some mocks

web/stories/BrowserNotifyModal.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
+import BrowserNotifyModalMock from './assets/mocks/notify-modal.png';
 
 const Example = () => (
   <div>
@@ -11,7 +12,23 @@ const Example = () => (
 export default {
   title: 'owncast/Modals/Browser Notifications',
   component: BrowserNotifyModal,
-  parameters: {},
+  parameters: {
+    design: {
+      type: 'image',
+      url: BrowserNotifyModalMock,
+      scale: 0.5,
+    },
+    docs: {
+      description: {
+        component: `The notify modal allows an end user to get notified when the stream goes live via [Browser Push Notifications](https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications) It must:
+        
+- Verify the browser supports notifications.
+- Handle errors that come back from the server.
+- Have an enabled and disabled state with accurate information about each.
+`,
+      },
+    },
+  },
 } as ComponentMeta<typeof BrowserNotifyModal>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars