Update the offline banner. Filed #2179 to discuss text

web/components/ui/OfflineBanner/OfflineBanner.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import { OfflineBanner } from './OfflineBanner';
 import OfflineState from '../../../stories/assets/mocks/offline-state.png';
 
@@ -20,16 +21,54 @@ export default {
   },
 } as ComponentMeta<typeof OfflineBanner>;
 
-const Template: ComponentStory<typeof OfflineBanner> = args => <OfflineBanner {...args} />;
+const Template: ComponentStory<typeof OfflineBanner> = args => (
+  <RecoilRoot>
+    <OfflineBanner {...args} />
+  </RecoilRoot>
+);
 
-export const ExampleDefault = Template.bind({});
-ExampleDefault.args = {
-  name: 'Cool stream 42',
-  text: 'To get notifications when <server name> is back online you can follow or ask for notifications.',
+export const ExampleDefaultWithNotifications = Template.bind({});
+ExampleDefaultWithNotifications.args = {
+  streamName: 'Cool stream 42',
+  notificationsEnabled: true,
+  lastLive: new Date(),
 };
 
-export const ExampleCustom = Template.bind({});
-ExampleCustom.args = {
-  name: 'Dull stream 31337',
-  text: 'This is some example offline text that a streamer can leave for a visitor of the page.',
+export const ExampleDefaultWithDateAndFediverse = Template.bind({});
+ExampleDefaultWithDateAndFediverse.args = {
+  streamName: 'Dull stream 31337',
+  lastLive: new Date(),
+  notificationsEnabled: false,
+  fediverseAccount: 'streamer@coolstream.biz',
+};
+
+export const ExampleCustomWithDateAndNotifications = Template.bind({});
+ExampleCustomWithDateAndNotifications.args = {
+  streamName: 'Dull stream 31337',
+  customText:
+    'This is some example offline text that a streamer can leave for a visitor of the page.',
+  lastLive: new Date(),
+  notificationsEnabled: true,
+};
+
+export const ExampleDefaultWithNotificationsAndFediverse = Template.bind({});
+ExampleDefaultWithNotificationsAndFediverse.args = {
+  streamName: 'Cool stream 42',
+  notificationsEnabled: true,
+  fediverseAccount: 'streamer@coolstream.biz',
+  lastLive: new Date(),
+};
+
+export const ExampleDefaultWithoutNotifications = Template.bind({});
+ExampleDefaultWithoutNotifications.args = {
+  streamName: 'Cool stream 42',
+  notificationsEnabled: false,
+  lastLive: new Date(),
+};
+
+export const ExampleCustomTextWithoutNotifications = Template.bind({});
+ExampleCustomTextWithoutNotifications.args = {
+  streamName: 'Dull stream 31337',
+  customText:
+    'This is some example offline text that a streamer can leave for a visitor of the page.',
 };