GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 05:41:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added descriptionSlot and slot to Description

Browse Source
This commit is contained in:
atanasster 2019-11-17 14:55:00 -08:00
parent 6f8509ec29
commit 75be1c55fa
3 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
addons/docs/src/blocks/Description.tsx
View File

@ -1,8 +1,9 @@
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent, useContext } from 'react';
import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components'; import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext'; import { DocsContext, DocsContextProps } from './DocsContext';
import { Component, CURRENT_SELECTION } from './shared'; import { Component, CURRENT_SELECTION } from './shared';
import { str } from '../lib/docgen/utils'; import { str } from '../lib/docgen/utils';
import { DescriptionSlot } from './types';
export enum DescriptionType { export enum DescriptionType {
INFO = 'info', INFO = 'info',
@ -16,6 +17,7 @@ type Notes = string | any;
type Info = string | any; type Info = string | any;
interface DescriptionProps { interface DescriptionProps {
slot?: DescriptionSlot;
of?: '.' | Component; of?: '.' | Component;
type?: DescriptionType; type?: DescriptionType;
markdown?: string; markdown?: string;
@ -60,14 +62,15 @@ ${extractComponentDescription(target) || ''}
} }
}; };
const DescriptionContainer: FunctionComponent<DescriptionProps> = props => ( const DescriptionContainer: FunctionComponent<DescriptionProps> = props => {
<DocsContext.Consumer> const context = useContext(DocsContext);
{context => { const { slot } = props;
const { markdown } = getDescriptionProps(props, context); let { markdown } = getDescriptionProps(props, context);
return markdown && <Description markdown={markdown} />; if (slot) {
}} markdown = slot(markdown, context);
</DocsContext.Consumer> }
); return markdown ? <Description markdown={markdown} /> : null;
};
// since we are in the docs blocks, assume default description if for primary component story // since we are in the docs blocks, assume default description if for primary component story
DescriptionContainer.defaultProps = { DescriptionContainer.defaultProps = {

3
addons/docs/src/blocks/DocsPage.tsx
View File

@ -10,6 +10,7 @@ import { Stories } from './Stories';
export const DocsPage: FunctionComponent<DocsPageProps> = ({ export const DocsPage: FunctionComponent<DocsPageProps> = ({
titleSlot, titleSlot,
subtitleSlot, subtitleSlot,
descriptionSlot,
primarySlot, primarySlot,
propsSlot, propsSlot,
storiesSlot, storiesSlot,
@ -17,7 +18,7 @@ export const DocsPage: FunctionComponent<DocsPageProps> = ({
<> <>
<Title slot={titleSlot} /> <Title slot={titleSlot} />
<Subtitle slot={subtitleSlot} /> <Subtitle slot={subtitleSlot} />
<Description /> <Description slot={descriptionSlot} />
<Primary slot={primarySlot} /> <Primary slot={primarySlot} />
<PrimaryProps slot={propsSlot} /> <PrimaryProps slot={propsSlot} />
<Stories slot={storiesSlot} /> <Stories slot={storiesSlot} />

14
addons/docs/src/blocks/types.ts
View File

@ -21,15 +21,17 @@ export interface SlotContext {
} }
export type StringSlot = (context: SlotContext) => string; export type StringSlot = (context: SlotContext) => string;
export type DescriptionSlot = (description: string, context: SlotContext) => string;
export type PropsSlot = (context: SlotContext) => PropsTableProps; export type PropsSlot = (context: SlotContext) => PropsTableProps;
export type StorySlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps; export type StorySlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps;
export type StoriesSlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps[]; export type StoriesSlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps[];
export interface DocsPageProps { export interface DocsPageProps {
titleSlot: StringSlot; titleSlot?: StringSlot;
subtitleSlot: StringSlot; subtitleSlot?: StringSlot;
descriptionSlot: StringSlot; descriptionSlot?: StringSlot;
primarySlot: StorySlot; primarySlot?: StorySlot;
propsSlot: PropsSlot; propsSlot?: PropsSlot;
storiesSlot: StoriesSlot; storiesSlot?: StoriesSlot;
} }