mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-05 15:27:05 +00:00
Merge pull request #31251 from MLoughry/storybook__addon-notes/4.0
Update typings for @storybook/addon-notes
This commit is contained in:
+13
-10
@@ -1,18 +1,21 @@
|
||||
// Type definitions for @storybook/addon-notes 3.3
|
||||
// Type definitions for @storybook/addon-notes 4.0
|
||||
// Project: https://github.com/storybooks/storybook
|
||||
// Definitions by: Joscha Feth <https://github.com/joscha>
|
||||
// A.MacLeay <https://github.com/amacleay>
|
||||
// Michael Loughry <https://github.com/MLoughry>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
// TypeScript Version: 3.0
|
||||
|
||||
import * as React from 'react';
|
||||
import { RenderFunction } from '@storybook/react';
|
||||
import { RenderFunction, StoryDecorator } from '@storybook/react';
|
||||
import { MarkedOptions } from 'marked';
|
||||
|
||||
export function withNotes(textOrOptions: string | object): (getStory: RenderFunction) => RenderFunction;
|
||||
export function withMarkdownNotes(text: string): (getStory: RenderFunction) => RenderFunction;
|
||||
export type WithNotesOptions = string | {
|
||||
text: string;
|
||||
} | {
|
||||
markdown: string;
|
||||
markdownOptions?: MarkedOptions;
|
||||
};
|
||||
|
||||
export interface WithNotesProps extends React.HTMLProps<HTMLDivElement> {
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
export const WithNotes: React.StatelessComponent<WithNotesProps>;
|
||||
export function withNotes(options?: WithNotesOptions): StoryDecorator;
|
||||
export function withMarkdownNotes(markdown: string, options?: MarkedOptions): StoryDecorator;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { withNotes, withMarkdownNotes, WithNotes } from '@storybook/addon-notes';
|
||||
import { withNotes, withMarkdownNotes, } from '@storybook/addon-notes';
|
||||
|
||||
const SIMPLE_MARKDOWN = `
|
||||
## Markdown for component
|
||||
@@ -10,18 +10,31 @@ A very simple component with markdown notes
|
||||
`;
|
||||
|
||||
storiesOf('Component', module)
|
||||
.add('with some emoji', () => (
|
||||
<WithNotes notes={'A very simple component'}>
|
||||
my component
|
||||
</WithNotes>
|
||||
))
|
||||
.addDecorator(withNotes())
|
||||
.add('with withNotes',
|
||||
withNotes('A very simple component')(
|
||||
() => (<div>my component</div>)
|
||||
)
|
||||
)
|
||||
.add('with withMarkdownNotes',
|
||||
withMarkdownNotes(SIMPLE_MARKDOWN)(
|
||||
() => (<div>my component</div>)
|
||||
)
|
||||
() => (<div>my component</div>)
|
||||
);
|
||||
|
||||
storiesOf('Component', module)
|
||||
.addDecorator(withNotes('Some text'))
|
||||
.add('with withNotes',
|
||||
() => (<div>my component</div>)
|
||||
);
|
||||
|
||||
storiesOf('Component', module)
|
||||
.addDecorator(withNotes({ text: 'Some text' }))
|
||||
.add('with withNotes',
|
||||
() => (<div>my component</div>)
|
||||
);
|
||||
|
||||
storiesOf('Component', module)
|
||||
.addDecorator(withNotes({ markdown: 'Some text' }))
|
||||
.add('with withNotes',
|
||||
() => (<div>my component</div>)
|
||||
);
|
||||
|
||||
storiesOf('Component', module)
|
||||
.addDecorator(withNotes({ markdown: 'Some text', markdownOptions: { sanitize: true } }))
|
||||
.add('with withNotes',
|
||||
() => (<div>my component</div>)
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user