2022-05-17 06:06:48 +03:00
|
|
|
/* eslint-disable no-alert */
|
2022-05-13 06:52:19 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
2022-09-07 10:00:28 +03:00
|
|
|
import { NotifyReminderPopup } from './NotifyReminderPopup';
|
2022-09-03 21:38:52 +03:00
|
|
|
import Mock from '../../../stories/assets/mocks/notify-popup.png';
|
2022-05-13 06:52:19 +03:00
|
|
|
|
2022-05-17 06:06:48 +03:00
|
|
|
const Example = args => (
|
|
|
|
<div style={{ margin: '20px', marginTop: '130px' }}>
|
2022-09-03 21:38:52 +03:00
|
|
|
<NotifyReminderPopup {...args}>
|
2022-05-17 06:06:48 +03:00
|
|
|
<button type="button">notify button</button>
|
2022-09-03 21:38:52 +03:00
|
|
|
</NotifyReminderPopup>
|
2022-05-17 06:06:48 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
2022-05-13 06:52:19 +03:00
|
|
|
export default {
|
2022-05-18 00:24:48 +03:00
|
|
|
title: 'owncast/Components/Notify Reminder',
|
2022-09-03 21:38:52 +03:00
|
|
|
component: NotifyReminderPopup,
|
2022-05-13 06:52:19 +03:00
|
|
|
parameters: {
|
|
|
|
design: {
|
|
|
|
type: 'image',
|
|
|
|
url: Mock,
|
|
|
|
},
|
|
|
|
docs: {
|
|
|
|
description: {
|
|
|
|
component: `After visiting the page three times this popup reminding you that you can register for live stream notifications shows up.
|
2022-05-17 06:06:48 +03:00
|
|
|
Clicking it will make the notification modal display. Clicking the "X" will hide the modal and make it never show again.`,
|
2022-05-13 06:52:19 +03:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2022-09-03 21:38:52 +03:00
|
|
|
} as ComponentMeta<typeof NotifyReminderPopup>;
|
2022-05-13 06:52:19 +03:00
|
|
|
|
2022-09-03 21:38:52 +03:00
|
|
|
const Template: ComponentStory<typeof NotifyReminderPopup> = args => <Example {...args} />;
|
2022-05-17 06:06:48 +03:00
|
|
|
|
|
|
|
export const Active = Template.bind({});
|
|
|
|
Active.args = {
|
|
|
|
visible: true,
|
|
|
|
notificationClicked: () => {
|
|
|
|
alert('notification clicked');
|
|
|
|
},
|
|
|
|
notificationClosed: () => {
|
|
|
|
alert('notification closed');
|
|
|
|
},
|
|
|
|
};
|
2022-05-13 06:52:19 +03:00
|
|
|
|
2022-05-17 06:06:48 +03:00
|
|
|
export const InActive = Template.bind({});
|
|
|
|
InActive.args = {
|
|
|
|
visible: false,
|
|
|
|
};
|