| 32 | import {VisualExample} from './VisualExample'; |
| 33 | |
| 34 | const components = (isLongForm?: boolean) => ({ |
| 35 | // h1 is rendered separately |
| 36 | h1: () => null, |
| 37 | h2: H2, |
| 38 | h3: H3, |
| 39 | h4: H4, |
| 40 | p: props => <P {...props} isLongForm={isLongForm} />, |
| 41 | ul: props => <ul {...props} />, |
| 42 | li: props => <LI {...props} isLongForm={isLongForm} />, |
| 43 | Figure: props => ( |
| 44 | <figure |
| 45 | {...props} |
| 46 | className={style({ |
| 47 | display: 'flex', |
| 48 | flexDirection: 'column', |
| 49 | alignItems: 'center', |
| 50 | marginY: 32, |
| 51 | marginX: 0 |
| 52 | })} |
| 53 | /> |
| 54 | ), |
| 55 | Caption: props => <figcaption {...props} className={style({font: 'body-sm'})} />, |
| 56 | CodeBlock: CodeBlock, |
| 57 | pre: ({children, ...props}) => ( |
| 58 | <pre {...props} className={standaloneCode}> |
| 59 | {React.Children.map(children, child => |
| 60 | React.isValidElement(child) |
| 61 | ? React.cloneElement(child as React.ReactElement<any>, {isFencedBlock: true}) |
| 62 | : child |
| 63 | )} |
| 64 | </pre> |
| 65 | ), |
| 66 | code: props => <Code {...props} />, |
| 67 | strong: ({children, ...props}) => ( |
| 68 | <strong {...props} className={style({fontWeight: 'bold'})}> |
| 69 | {children} |
| 70 | </strong> |
| 71 | ), |
| 72 | a: props => <Link {...props} />, |
| 73 | Link, |
| 74 | PageDescription, |
| 75 | VisualExample, |
| 76 | Keyboard: props => ( |
| 77 | <kbd |
| 78 | {...props} |
| 79 | className={style({ |
| 80 | font: 'code-sm', |
| 81 | paddingX: 4, |
| 82 | whiteSpace: 'nowrap', |
| 83 | backgroundColor: 'gray-100', |
| 84 | borderRadius: 'sm' |
| 85 | })} |
| 86 | /> |
| 87 | ), |
| 88 | PropTable, |
| 89 | StateTable, |
| 90 | ClassAPI, |
| 91 | ExampleSwitcher, |