You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.3 KiB
44 lines
1.3 KiB
import React from 'react'; |
|
import { ComponentStory, ComponentMeta } from '@storybook/react'; |
|
import { RecoilRoot } from 'recoil'; |
|
import { BrowserNotifyModal } from './BrowserNotifyModal'; |
|
import BrowserNotifyModalMock from '../../../stories/assets/mocks/notify-modal.png'; |
|
|
|
const Example = () => ( |
|
<div> |
|
<BrowserNotifyModal /> |
|
</div> |
|
); |
|
|
|
export default { |
|
title: 'owncast/Modals/Browser Notifications', |
|
component: BrowserNotifyModal, |
|
parameters: { |
|
chromatic: { diffThreshold: 0.9 }, |
|
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 |
|
const Template: ComponentStory<typeof BrowserNotifyModal> = args => ( |
|
<RecoilRoot> |
|
<Example /> |
|
</RecoilRoot> |
|
); |
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars |
|
export const Basic = Template.bind({});
|
|
|