storiesOf('Button', module) .add('with text', () => <button>Hello Button</button>) .add('with some emoji', () => ( <button> <span role="img" aria-label="so cool"> 😀 😎 👍 💯 </span> </button> ));
const DependencyLabel = ({ name, count }) => { const truncatedName = truncate(name, { length: 22, separator: '...' }); return ( <ConditionalTooltip condition={name !== truncatedName} title={name} position="right"> <div> <span>({count})</span> <span>{truncatedName}</span> </div> </ConditionalTooltip> ); }
render() { return ( <Element> {typeof(this.props.children) === 'object' ? ( React.cloneElement(this.props.children, { onClick: this.handleClick }) ) : ( <span onClick={this.handleClick}>{this.props.children}</span> )} </Element> ); }
/* Takes a modalType and modalProps to dynamically return the modal component we imported above */ const modalRoot = ({ modalType, modalProps }) => { if (!modalType) { return <span />; // after React v15 you can return null here } const SpecificModal = MODAL_COMPONENTS[modalType]; return <SpecificModal {...modalProps} />; }
getTags(tags) { return tags.map(tag => ( <span className="tag" key={tag}> {tag} </span> )); }
const FoundTypo = () => { return ( <Container> <p><span role='img' aria-label='eyes-emoji'>👀</span> Found a typo? <a href='https://github.com/npm/cli/'>Let us know!</a></p> <p>The current stable version of npm is <a href='https://github.com/npm/cli/'>here</a>. To upgrade, run: <code className='language-text'>npm install npm@latest -g</code></p> <p> To report bugs or submit feature requests for the docs, please post <a href='https://npm.community/c/support/docs-needed'>here</a>. Submit npm issues <a href='https://npm.community/c/bugs'>here.</a> </p> </Container> ) }
renderConnectionTestResult() { const {hasTestedConnection, isConnectionVerified} = this.state; if (!hasTestedConnection || !isConnectionVerified) return null; return ( <FormRowItem className="connection-status"> <Checkmark className="connection-status__icon" /> <span className="connection-status__copy"> <FormattedMessage id="connection-interruption.verification-success" defaultMessage="Connection successful" /> </span> </FormRowItem> ); }
render () { const { iconName, description, onClick } = this.props return ( <span> <i className={classnames(classes['menu-icon'], 'material-icons')} onClick={onClick} data-tip={description}> {iconName} </i> <Tooltip /> </span> ) }
// Component const Logo = (props) => { const { ...others } = props return ( <Link to={home.home.path} {...others}> <span style={{ fontFamily: secondary, fontSize: '2em', color: 'white', textShadow: textLevel1 }}>Crate</span> </Link> ) }
fontsMap.map(font => { fontsStories.add(font.name, () => ( <span style={{ fontFamily: font.family }}>{font.name} - {font.family}</span> )) })
render() { const {clickHandler, icon, label, slug} = this.props; const classes = classnames('action tooltip__wrapper', { [`action--${slug}`]: slug != null, }); return ( <Tooltip content={label} onClick={clickHandler} position="bottom" wrapperClassName={classes}> {icon} <span className="action__label">{label}</span> </Tooltip> ); }
sample.map((item, i) => ( <Button key={i} className={colorState == i ? 'mapbox__sample__button mapbox__sample__button--active' : 'mapbox__sample__button'} onClick={() => { setColorState(i) }}> <span style={{ background: `linear-gradient(90deg, ${item[3]['color']} 0%, ${item[2]['color']} 50%,${item[1]['color']} 100%)` }}></span> </Button> ))
colorsMap.map(color => { colorStories.add(color.name, () => ( <span style={{ color: color.code }}>{color.name} - {color.code}</span> )) })
colorsMap.map(color => { colorStories.add(color.name, () => ( <span style={{ color: color.code }}>{color.name} - {color.code}</span> )) })