56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
/* eslint-disable no-alert */
|
|
import { StoryFn, Meta } from '@storybook/react';
|
|
import { NotifyReminderPopup } from './NotifyReminderPopup';
|
|
import Mock from '../../../stories/assets/mocks/notify-popup.png';
|
|
|
|
const Example = args => (
|
|
<div style={{ margin: '20px', marginTop: '130px' }}>
|
|
<NotifyReminderPopup {...args}>
|
|
<button type="button">notify button</button>
|
|
</NotifyReminderPopup>
|
|
</div>
|
|
);
|
|
|
|
const meta = {
|
|
title: 'owncast/Components/Notify Reminder',
|
|
component: NotifyReminderPopup,
|
|
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.
|
|
Clicking it will make the notification modal display. Clicking the "X" will hide the modal and make it never show again.`,
|
|
},
|
|
},
|
|
},
|
|
} satisfies Meta<typeof NotifyReminderPopup>;
|
|
|
|
export default meta;
|
|
|
|
const Template: StoryFn<typeof NotifyReminderPopup> = args => <Example {...args} />;
|
|
|
|
export const Active = {
|
|
render: Template,
|
|
|
|
args: {
|
|
open: true,
|
|
notificationClicked: () => {
|
|
alert('notification clicked');
|
|
},
|
|
notificationClosed: () => {
|
|
alert('notification closed');
|
|
},
|
|
},
|
|
};
|
|
|
|
export const InActive = {
|
|
render: Template,
|
|
|
|
args: {
|
|
open: false,
|
|
},
|
|
};
|