// import React from 'react';
// import { storiesOf } from '@storybook/react';
// import { action } from '@storybook/addon-actions';
// import Highlighter from './index';
// import {
//   text,
//   boolean,
//   number,
//   object,
//   array,
//   date,
//   color,
//   button,
//   select
// } from '@storybook/addon-knobs/react';
// import { withInfo } from '@storybook/addon-info';
// import { linkTo } from '@storybook/addon-links'
// import Accordion from '../Accordion'
// import {Box,CloseButton} from '../Utils'
// import TextArea from '../formElements/TextArea' 

// storiesOf('Highlighter', module)
//   .add('Highlighter',
//     withInfo('Highlights search content')(
// 	  () => (	
// 	  			<div style={{display:'flex'}}>
// 	  				<span>123</span>
// 	  				<span>321sss</span>
// 	  			</div>
// 	       	)
// 	   ))



// //<div dangerouslySetInnerHTML={{__html: '<span style="background-color:rgba(49, 116, 250, 0.3)">123</span>'}}></div>
// /*
// <Highlighter 
// 		   	  	searchText={text('SearchText','')}
// 		   	  	renderContent={
// 		   	  		<TextArea
// 		   	  		  textAreaStyles={{height:'200px',width:'400px'}}
// 				      onChange={action('onChange')}
// 				      value={`https://www.eriwen.com/javascript/highlight-search-results-with-js/ You see it in Google search results and a lot of other sites that have good search functionality. When you perform a search, your words or phrases are highlighted in the search results making it easy for you to find the most relevant content.
// Today I’m going to show you a simple way to add this to your website or blog so your users can find what they need in style. I think that this kind of thing should be implemented more often for how easy it is to implement.`}
// 		  		    />
// 		   	  	}
// 		   	  />
// */