Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 1x 1x 6x 6x 1x 1x 1x | // Required for all new components import React from 'react'; import { lucidClassNames } from '../../util/style-helpers'; import { FC, StandardProps } from '../../util/component-types'; const cx = lucidClassNames.bind('&-ExampleComponent'); export interface IExampleComponentProps extends StandardProps, React.DetailedHTMLProps< React.DOMAttributes<HTMLDivElement>, HTMLDivElement > { /** * Appended to the component-specific class names set on the root * element. */ className?: string; /** * Any valid React children. This wraps your new component around whatever other React children consumers * of your component may choose to use. If consumers can not use any/all React children. Be sure to call * that out here. */ children?: any; /** * Example of a boolean prop. * Used in this example to control an additional classname * `lucid-ExampleComponent-isX' on the root element. */ isX?: boolean; /** * Example of a customizable component function. Always show the signature. * * Signature: `(item, { event, props }) => {}` */ onX?: ({ event, props }: { event: React.MouseEvent; props: any }) => void; /** * Passed through to the root element. */ style?: object; } export const ExampleComponent: FC<IExampleComponentProps> = ({ className, children, isX, style, }): React.ReactElement => { const handleX = () => { alert('This is an example of a handler function'); }; return ( <div className={cx('&', className, { '&-isX': isX, })} style={style} onClick={handleX} > {children} </div> ); }; /** * {"categories": ["category"]} * * Update the "category" array to set the category or categories your component falls under. * You can see available categories in the Storybook left hand column. * * Describe your component here. How it should be used, use cases and more. * Please see examples for more information. */ ExampleComponent.categories = ['Documentation']; ExampleComponent.description = `An example component`; ExampleComponent.displayName = 'ExampleComponent'; export default ExampleComponent; |