Initial commit.

Adding files needed for Linux Foundation.

Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730
Issue-ID: SDC-1608
Signed-off-by: Israel Lavi <il0695@att.com>

24 files changed, 0 insertions, 1224 deletions

diff --git a/stories/react/Accordion.stories.js b/stories/react/Accordion.stories.js
deleted file mode 100644
index 85fdae3..0000000
--- a/stories/react/Accordion.stories.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Accordion from '../../src/react/Accordion.js';
-import HTMLBasic from '../../components/accordion/accordion-basic.html';
-let examples = {
-    Basic: {
-        jsx: <Accordion title='Accordion Title'><div>Accordion body</div></Accordion>,
-        html: HTMLBasic
-    }
-};
-
-const Checkboxes = () => (
-    <Examples examples={examples} />
-);
-
-export default Checkboxes;
diff --git a/stories/react/Checkbox.stories.js b/stories/react/Checkbox.stories.js
deleted file mode 100644
index 3fb3ad1..0000000
--- a/stories/react/Checkbox.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-
-import Checkbox from '../../src/react/Checkbox';
-import HTMLCheckboxChecked from '../../components/checkbox/checkbox-checked.html';
-import HTMLCheckboxUnchecked from '../../components/checkbox/checkbox-unchecked.html';
-import HTMLCheckboxDisabled from '../../components/checkbox/checkbox-disabled.html';
-import HTMLCheckboxDisabledChecked from '../../components/checkbox/checkbox-disabled-checked.html';
-
-let examples = {
-	Checked: {
-		jsx: <Checkbox checked={true} label='This is the checkbox label' value='myVal' onChange={()=>{}} data-test-id='mycheckbox-1' inputRef={() => {} } />,
-		html: HTMLCheckboxChecked
-	},
-	Unchecked: {
-		jsx: <Checkbox label='This is the checkbox label' value='myVal' onChange={()=>{}} data-test-id='mycheckbox-2' inputRef={() => {} } />,
-		html: HTMLCheckboxUnchecked
-	},
-	Disabled: {
-		jsx: <Checkbox label='This is the checkbox label' disabled={true} value='myVal' onChange={()=>{}} data-test-id='mycheckbox-4' inputRef={() => {} } />,
-		html: HTMLCheckboxDisabled
-	},
-	'Disabled and Checked': {
-		jsx: <Checkbox label='This is the checkbox label' disabled={true} checked={true} value='myVal' onChange={()=>{}} data-test-id='mycheckbox-4' inputRef={() => {} } />,
-		html: HTMLCheckboxDisabledChecked
-	}
-};
-
-const Checkboxes = () => (
-	<Examples examples={examples} />
-);
-
-export default Checkboxes;
diff --git a/stories/react/Checklist.stories.js b/stories/react/Checklist.stories.js
deleted file mode 100644
index 0fd089b..0000000
--- a/stories/react/Checklist.stories.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Checklist from '../../src/react/Checklist.js';
-import HTMLListChecked from '../../components/checklist/checklist-with-checked-items.html';
-import HTMLListDisabled from '../../components/checklist/checklist-with-disabled-items.html';
-const items = [
-    {
-        label: 'apple',
-        value: 'apple',
-        dataTestId: 'apple',
-        checked: true
-    },
-    {
-        label: 'banana',
-        value: 'banana',
-        dataTestId: 'banana',
-        checked: false
-    },
-    {
-        label: 'orange',
-        value: 'orange',
-        dataTestId: 'orange',
-        checked: true
-    }
-];
-
-const itemsDisabled = [
-    {
-        label: 'apple',
-        value: 'apple',
-        dataTestId: 'apple',
-        checked: true,
-        disabled: true
-    },
-    {
-        label: 'banana',
-        value: 'banana',
-        dataTestId: 'banana',
-        checked: false,
-        disabled: true
-    },
-    {
-        label: 'orange',
-        value: 'orange',
-        dataTestId: 'orange',
-        checked: false
-    }
-];
-
-let examples = {
-    Basic: {
-        jsx: <Checklist items={items} onChange={() => { }} />,
-        html: HTMLListChecked
-    },
-    Disabled: {
-        jsx: <Checklist items={itemsDisabled} onChange={() => { }} />,
-        html: HTMLListDisabled
-    }
-};
-
-const ChecklistStory = () => (
-    <Examples examples={examples} />
-);
-
-export default ChecklistStory;
\ No newline at end of file
diff --git a/stories/react/Colors.stories.js b/stories/react/Colors.stories.js
deleted file mode 100644
index d6758ce..0000000
--- a/stories/react/Colors.stories.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, {Component} from 'react';
-
-const colorMap = {
-	'$white': '#ffffff',
-	'$blue': '#009fdb',
-	'$light-blue': '#1eb9f3',
-	'$lighter-blue': '#e6f6fb',
-	'$blue-disabled': '#9dd9ef',
-	'$dark-blue': '#0568ae',
-	'$black': '#000000',
-	'$rich-black': '#323943',
-	'$text-black': '#191919',
-	'$dark-gray': '#5a5a5a',
-	'$gray': '#959595',
-	'$light-gray': '#d2d2d2',
-	'$silver': '#eaeaea',
-	'$light-silver': '#f2f2f2',
-	'$green': '#4ca90c',
-	'$functional-red': '#cf2a2a',
-	'$yellow': '#ffb81c',
-	'$dark-purple': '#702f8a',
-	'$purple': '#9063cd',
-	'$light-purple': '#caa2dd'
-};
-
-function Color({colorName, colorValue}) {
-	return (
-		<div key={colorName} className='color-section'>
-			<div className='color-circle' style={{backgroundColor: colorValue}} />
-			<div>{colorName.replace('$', '')}</div>
-			<div>{colorValue}</div>
-		</div>
-	);
-}
-
-class Colors extends Component {
-
-	render() {
-		return (
-			<div>
-				<h1>Colors Palette</h1>
-					<div className='colors-table'>
-						{
-							Object.keys(colorMap).map(colorName => <Color key={colorName} colorValue={colorMap[colorName]} colorName={colorName}/>)
-						}
-					</div>
-			</div>
-		);
-	}
-
-}
-
-export default Colors;
diff --git a/stories/react/Input.stories.js b/stories/react/Input.stories.js
deleted file mode 100644
index 869bafa..0000000
--- a/stories/react/Input.stories.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import Examples from './utils/Examples.js';
-
-import ReactInput from '../../src/react/Input.js';
-
-import InputDefaultHtml from '../../components/input/input.html';
-import InputRequiredHtml from '../../components/input/input-required.html';
-import InputNumberHtml from '../../components/input/input-number.html';
-import InputViewOnlyHtml from '../../components/input/input-view-only.html';
-import InputDisabledHtml from '../../components/input/input-disabled.html';
-import InputPlaceholderHtml from '../../components/input/input-placeholder.html';
-import InputErrorHtml from '../../components/input/input-error.html';
-
-let examples = {
-	'Input Default': {
-		jsx: <ReactInput name='input1' value='Default' label='I am a label'  onChange={ action('input-change')}/>,
-		html: InputDefaultHtml
-	},
-	'Input Required': {
-		jsx: <ReactInput name='input2' value='Default' label='I am a label'  onChange={ action('input-change')} isRequired/>,
-		html: InputRequiredHtml
-	},
-	'Input Number': {
-		jsx: <ReactInput name='input3' value='3' label='I am a label'  type="number" onChange={ action('input-change')}/>,
-		html: InputNumberHtml
-	},
-	'Input View Only': {
-		jsx: <ReactInput value='Read Only Text'  label='I am a label' onChange={ action('input-change')} readOnly/>,
-		html: InputViewOnlyHtml
-	},
-	'Input Disabled': {
-		jsx: <ReactInput value='Default'  label='I am a label' onChange={ action('input-change')} disabled/>,
-		html: InputDisabledHtml
-	},
-	'Input Placeholder': {
-		jsx: <ReactInput  name='input5' placeholder='Write Here...' label='I am a label' onChange={ action('input-change')}/>,
-		html: InputPlaceholderHtml
-	},
-	'Input Error': {
-		jsx: <ReactInput value='Default' name='input6' label='I am a label' errorMessage='This is the error message' onChange={ action('input-change')}/>,
-		html: InputErrorHtml
-	}
-
-}
-
-const Inputs = () => (
-		<Examples examples={examples} />
-);
-
-export default Inputs;
diff --git a/stories/react/Modal.stories.js b/stories/react/Modal.stories.js
deleted file mode 100644
index 29ff7a5..0000000
--- a/stories/react/Modal.stories.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Button from '../../src/react/Button.js';
-import Modal  from '../../src/react/Modal.js';
-import Input from '../../src/react/Input.js';
-import HTMLStandardModal from '../../components/modal/standard-modal.html';
-import HTMLAlertModal from '../../components/modal/alert-modal.html';
-import HTMLErrorModal from '../../components/modal/error-modal.html';
-import HTMLCustomModal from '../../components/modal/custom-modal.html';
-
-class Example extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			show: false
-		};
-	}	
-	render() {
-		const { children } = this.props;
-		const { show } = this.state;
-		var childrenWithProps = React.Children.map(children, child => {
-			let childChildrenWithProps = [];
-			if (child.props.children) {
-				let childChildren = child.props.children;
-				 	childChildrenWithProps = React.Children.map(childChildren, child =>
-					React.cloneElement(child, { onClose: ()=>this.setState({show: !show}) }));
-
-			}							
-			return React.cloneElement(child, { show: this.state.show, onClose: ()=>this.setState({show: !show}), children: childChildrenWithProps});
-		}
-		);
-
-		return (
-			<div>
-				<Button onClick={() => this.setState({show: !show})}>Modal</Button>
-				{childrenWithProps}
-			</div>
-		);
-	}
-} 
- 
-const ModalBody = () => {
-	return (
-	<div>
-		<Input
-			name='input1'
-			value='Default'
-			label='I am a label'			
-			type='text' />
-		<Input
-			name='input1'
-			value='Default'
-			label='I am a label'			
-			type='text' />
-		<Input
-			name='input1'
-			value='Default'
-			label='I am a label'			
-			type='text' />
-					
-	</div>);
-};
-
-const BODY_TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus nisl, egestas vitae erat non,' +
- 'pulvinar lacinia libero. Integer pulvinar pellentesque accumsan. Sed hendrerit lacus eu tempus pharetra';
-
-const isShown = false;
-
-let examples = {
-	Standard: {
-		jsx: <Example>
-				<Modal show={() => isShown()} size='small'>
-					<Modal.Header><Modal.Title>Standard Modal</Modal.Title></Modal.Header>
-					<Modal.Body>
-						{BODY_TEXT}
-					</Modal.Body>
-					<Modal.Footer actionButtonText='Yes' actionButtonClick={()=>{}}/>
-				</Modal>
-			</Example>,
-		html: HTMLStandardModal,		
-		exclude: 'Example',
-		renderFromJsx: true
-	},
-	Alert: {
-		jsx: <Example>
-				<Modal show={() => isShown()} type='alert' size='small'>
-					<Modal.Header type='alert'><Modal.Title>Title</Modal.Title></Modal.Header>
-					<Modal.Body>
-						{BODY_TEXT}	
-					</Modal.Body>
-					<Modal.Footer closeButtonText='Ok'/>
-				</Modal>
-			</Example>,
-		html: HTMLAlertModal,
-		exclude: 'Example',
-		renderFromJsx: true
-	},
-	Error: {
-		jsx: <Example>
-				<Modal show={() => isShown()} size='small' type='error'>
-					<Modal.Header onClose={()=>isShown(false)} type='error'><Modal.Title>Title</Modal.Title></Modal.Header>
-					<Modal.Body>
-						{BODY_TEXT}	
-					</Modal.Body>
-					<Modal.Footer onClose={()=>isShown(false)} closeButtonText='Ok'/>
-				</Modal>
-			</Example>,
-		html: HTMLErrorModal,
-		exclude: 'Example',
-		renderFromJsx: true
-	},
-	
-	Custom: {
-		jsx: <Example>
-				<Modal show={() => isShown()} type='custom'>
-					<Modal.Header type='custom'><Modal.Title>Title</Modal.Title></Modal.Header>
-					<Modal.Body>
-						<ModalBody/>
-					</Modal.Body>
-					<Modal.Footer  actionButtonText='Ok' actionButtonClick={()=>{}}/>
-				</Modal>
-			</Example>,
-		html: HTMLCustomModal,	
-		exclude: 'Example',
-		renderFromJsx: true					 
-	}
-};
-
-const Modals = () => (
-    <Examples examples={examples}/>
-);
-
-export default Modals;
\ No newline at end of file
diff --git a/stories/react/Panel.stories.js b/stories/react/Panel.stories.js
deleted file mode 100644
index f87eefb..0000000
--- a/stories/react/Panel.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import Panel from '../../src/react/Panel.js';
-import Checkbox from '../../src/react/Checkbox.js';
-import HTMLBasic from '../../components/panel/basic-panel.html';
-let examples = {
-    Basic: {
-        jsx:
-            <Panel>
-                <h3>Panel</h3>
-                <Checkbox label='filter-item' />
-                <Checkbox checked label='filter-item-checked' />
-            </Panel>,
-        html: HTMLBasic
-    }
-};
-
-const PanelStory = () => (
-    <Examples examples={examples} />
-);
-
-export default PanelStory;
diff --git a/stories/react/PopupMenu.stories.js b/stories/react/PopupMenu.stories.js
deleted file mode 100644
index 9d94522..0000000
--- a/stories/react/PopupMenu.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-
-import React from 'react';
-import Examples from './utils/Examples.js';
-import PopupMenu from '../../src/react/PopupMenu.js';
-import PopupMenuItem from '../../src/react/PopupMenuItem.js';
-import HTMLPopupMenu from '../../components/menu/popup-menu.html';
-import HTMLPopupMenuRelative from '../../components/menu/relative-popup-menu.html';
-
-let examples = {
-	'Basic popup menu (static)': {
-		jsx: <PopupMenu onMenuItemClick={() => {}}>
-				<PopupMenuItem itemId='1' value='item 1 (selected)' selected/>
-				<PopupMenuItem itemId='2' value='item 2' disabled/>
-				<PopupMenu.Separator />
-				<PopupMenuItem itemId='3' value='item 3'/>
-				<PopupMenuItem itemId='4' value='custom action' onClick={function customCallback() {}}/>
-			</PopupMenu>,
-		html: HTMLPopupMenu
-	},
-	'Basic popup menu (relative)': {
-		jsx: <div className='sdc-popup-menu'>
-				<PopupMenu onMenuItemClick={()=> {}} position={{x: 10, y: 10}} relative>
-					<PopupMenuItem itemId='1' value='item 1 (selected)' selected/>
-					<PopupMenuItem itemId='2' value='item 2' disabled/>
-					<PopupMenu.Separator />
-					<PopupMenuItem itemId='3' value='item 3' onClick={function customCallback() {}}/>
-				</PopupMenu>
-			</div>,
-		html: HTMLPopupMenuRelative
-	}
-};
-
-const PopupMenuReactComponent = () => (
-	<Examples examples={examples} />
-);
-
-export default PopupMenuReactComponent;
\ No newline at end of file
diff --git a/stories/react/Radio.stories.js b/stories/react/Radio.stories.js
deleted file mode 100644
index 151f947..0000000
--- a/stories/react/Radio.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-
-import Radio from '../../src/react/Radio';
-import HTMLRadioChecked from '../../components/radio/radio-checked.html';
-import HTMLRadioUnchecked from '../../components/radio/radio-unchecked.html';
-import HTMLRadioDisabled from '../../components/radio/radio-disabled.html';
-import HTMLRadioDisabledChecked from '../../components/radio/radio-disabled-checked.html';
-
-let examples = {
-	Checked: {
-		jsx: <Radio name='grp1' checked={true} label='This is the radio label' value='myVal' onChange={()=>{}} data-test-id='myradio-1' inputRef={() => {} } />,
-		html: HTMLRadioChecked
-	},
-	Unchecked: {
-		jsx: <Radio name='grp2' label='This is the radio label' value='myVal' onChange={()=>{}} data-test-id='myradio-2' inputRef={() => {} } />,
-		html: HTMLRadioUnchecked
-	},
-	Disabled: {
-		jsx: <Radio name='grp3' label='This is the radio label' disabled={true} value='myVal' onChange={()=>{}} data-test-id='myradio-4' inputRef={() => {} } />,
-		html: HTMLRadioDisabled
-	},
-	'Disabled and Checked': {
-		jsx: <Radio name='grp4' label='This is the radio label' disabled={true} checked={true} value='myVal' onChange={()=>{}} data-test-id='myradio-4' inputRef={() => {} } />,
-		html: HTMLRadioDisabledChecked
-	}
-};
-
-const Radios = () => (
-	<Examples examples={examples} />
-);
-
-export default Radios;
diff --git a/stories/react/RadioGroup.stories.js b/stories/react/RadioGroup.stories.js
deleted file mode 100644
index 912f9b9..0000000
--- a/stories/react/RadioGroup.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-
-import RadioGroup from '../../src/react/RadioGroup';
-import HTMLRadioGroup from '../../components/radioGroup/radio-group.html';
-import HTMLRadioGroupValue from '../../components/radioGroup/radio-group-value.html';
-import HTMLRadioGroupDisabled from '../../components/radioGroup/radio-group-disabled.html';
-import HTMLRadioGroupNoTitle from '../../components/radioGroup/radio-group-no-title.html';
-
-let examples = {
-	'Value': {
-		jsx: <RadioGroup name='grp2' value='1' title='Group B' onChange={()=>{}} data-test-id='grp2' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroupValue
-	},
-	'No Value': {
-		jsx: <RadioGroup name='grp3' title='Group C' onChange={()=>{}} data-test-id='grp3' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroup
-	},
-	'Disabled': {
-		jsx: <RadioGroup name='grp4' disabled={true} title='Group D' onChange={()=>{}} data-test-id='grp4' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroupDisabled
-	},
-	'No title': {
-		jsx: <RadioGroup name='grp5' onChange={()=>{}} data-test-id='grp4' options={[{value: '1', label: 'option 1'}, {value: '2', label: 'option 2'}]} />,
-		html: HTMLRadioGroupNoTitle
-	}
-
-};
-
-const RadioGroups = () => (
-	<Examples examples={examples} />
-);
-
-export default RadioGroups;
diff --git a/stories/react/SVGIcon.stories.js b/stories/react/SVGIcon.stories.js
deleted file mode 100644
index 2c2ffc2..0000000
--- a/stories/react/SVGIcon.stories.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import DropdownMenu from './utils/components/DropdownMenu.js';
-import SVGIcon from '../../src/react/SVGIcon.js';
-
-const iconLabelPositions = [
-	'', 'bottom', 'top', 'left', 'right'
-];
-
-const iconColors = [
-	'',
-	'primary',
-	'secondary',
-	'positive',
-	'negative',
-	'warning'
-];
-
-const disabledStates = ['false', 'true'];
-
-function buildExamples({iconName, iconLabel, labelPosition, color, disabled}) {
-	return {
-		Example: {
-			jsx: <SVGIcon
-				label={iconLabel}
-				labelPosition={labelPosition}
-				color={color}
-				name={iconName}
-				disabled={disabled === 'true'} />
-		}
-	};
-}
-
-const IconTable = ({onClick}) => (
-	<div className='icons-table'>
-		{ICON_NAMES.map(icon => (
-			<div key={icon} className='icon-section'>
-				<SVGIcon
-					onClick={() => onClick(icon)}
-					label={icon}
-					iconClassName='storybook-small'
-					name={icon} />
-			</div>
-		))}
-	</div>
-);
-
-class Icons extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			iconName: ICON_NAMES[0],
-			iconLabel: '',
-			labelPosition: iconLabelPositions[0],
-			color : iconColors[0]
-		};
-	}
-
-	render() {
-		let {iconName, iconLabel, labelPosition, color, disabled} = this.state;
-		return (
-			<div className='icons-screen'>
-				<h1>Icons</h1>
-				<div className='icons-option-selector'>
-					<DropdownMenu
-						title='Icon name'
-						value={iconName}
-						onChange={e => this.setState({iconName: e.target.value})}
-						options={ICON_NAMES} />
-					<div className='option-container'>
-						<label>Icon label</label>
-						<input value={iconLabel} onChange={e => this.setState({iconLabel: e.target.value})}/>
-					</div>
-					<DropdownMenu
-						title='Label position'
-						value={labelPosition}
-						onChange={e => this.setState({labelPosition: e.target.value})}
-						options={iconLabelPositions} />
-					<DropdownMenu
-						title='Color'
-						value={color}
-						onChange={e => this.setState({color: e.target.value})}
-						options={iconColors} />
-					<DropdownMenu
-						title='Disabled'
-						value={disabled}
-						onChange={e => this.setState({disabled: e.target.value})}
-						options={disabledStates} />
-				</div>
-				<Examples examples={buildExamples({iconName, iconLabel, labelPosition, color, disabled})} />
-				<IconTable onClick={icon => this.setState({iconName: icon})} />
-				<div className='missing-icon-section'>
-					<div >You will see the following if the icon name you used is not found:</div>
-					<SVGIcon
-						onClick={() => {}}
-						name='MissingIcon' />
-				</div>
-			</div>
-		);
-	};
-}
-
-export default Icons;
diff --git a/stories/react/Tabs.stories.js b/stories/react/Tabs.stories.js
deleted file mode 100644
index 74f163c..0000000
--- a/stories/react/Tabs.stories.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import Examples from './utils/Examples.js';
-import {default as TabsComp} from '../../src/react/Tabs.js';
-import Tab from '../../src/react/Tab.js';
-import HTMLTabsHeader from '../../components/tabs/tabs-header.html';
-import HTMLTabsDisabled from '../../components/tabs/tabs-disabled.html';
-import HTMLTabsMenu from '../../components/tabs/tabs-menu.html';
-
-let examples = {
-	'Menu Tabs': {
-		jsx: <TabsComp type='menu' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
-			<Tab title='tab 1' tabId='1'>
-				<div>This is the active tab content</div>
-			</Tab>
-			<Tab title='tab 2' tabId='2' />
-			<Tab title='tab 3' tabId='3' />
-		</TabsComp>,
-		html: HTMLTabsMenu
-	},
-	'Header Tabs': {
-		jsx: <TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
-			<Tab title='tab 1' tabId='1'>
-				<div>This is the active tab content</div>
-			</Tab>
-			<Tab title='tab 2' tabId='2' />
-			<Tab title='tab 3' tabId='3' />
-		</TabsComp>,
-		html: HTMLTabsHeader
-	},
-	'Disabled Tabs': {
-		jsx: (
-			<TabsComp type='header' activeTab='1' onTabClick={(tabId) => {console.log(tabId);}}>
-				<Tab title='tab 1' tabId='1'>
-					<div>This is the active tab content</div>
-				</Tab>
-				<Tab title='tab 2' tabId='2' disabled/>
-				<Tab title='tab 3' tabId='3' disabled/>
-			</TabsComp>
-		),
-		html: HTMLTabsDisabled
-	}
-};
-
-const Tabs = () => (
-	<Examples examples={examples} />
-);
-
-export default Tabs;
diff --git a/stories/react/Tiles.stories.js b/stories/react/Tiles.stories.js
deleted file mode 100644
index 04a6fb5..0000000
--- a/stories/react/Tiles.stories.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from 'react';
-
-import Examples from './utils/Examples.js';
-import SVGIcon from '../../src/react/SVGIcon.js';
-import Button from '../../src/react/Button.js';
-
-import Tile from '../../src/react/Tile.js';
-import TileInfo from '../../src/react/TileInfo.js';
-import TileInfoLine from '../../src/react/TileInfoLine.js';
-import TileFooter from '../../src/react/TileFooter.js';
-import TileFooterCell from '../../src/react/TileFooterCell.js';
-
-import HTMLTileWithoutFooter from '../../components/tile/tile-without-footer.html';
-import HTMLVspTile from '../../components/tile/vsp-tile.html';
-import HTMLVlmTile from '../../components/tile/vlm-tile.html';
-import HTMLVendorTile from '../../components/tile/vendor-tile.html';
-import HTMLVfcTile from '../../components/tile/vfc-tile.html';
-
-let examples = {
-	'Without footer': {
-		jsx: <Tile headerText='header' headerColor='blue' iconName='vsp' iconColor='blue'>
-					<TileInfo>
-						<TileInfoLine type='supertitle'>Supertitle</TileInfoLine>
-						<TileInfoLine type='title'>Title</TileInfoLine>
-					</TileInfo>
-				</Tile>,
-		html: HTMLTileWithoutFooter
-	},
-	VFC: {
-		jsx: <Tile headerText='vfc' headerColor='purple' iconName='network'>
-					<TileInfo>
-						<TileInfoLine type='title'>Title</TileInfoLine>
-						<TileInfoLine type='subtitle'>V 1.0</TileInfoLine>
-					</TileInfo>
-					<TileFooter>
-						<TileFooterCell>Certified</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVfcTile
-	},
-	VSP: {
-		jsx: <Tile headerText='vsp' headerColor='blue' iconName='vsp' iconColor='blue'>
-					<TileInfo>
-						<TileInfoLine type='supertitle'>VLM</TileInfoLine>
-						<TileInfoLine type='title'>VSP name</TileInfoLine>
-					</TileInfo>
-					<TileFooter>
-						<TileFooterCell>Draft</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVspTile
-	},
-	VLM: {
-		jsx: <Tile headerText='vlm' headerColor='purple' iconName='vlm' iconColor='purple'>
-					<TileInfo>
-						<TileInfoLine type='title'>VLM name</TileInfoLine>
-					</TileInfo>
-					<TileFooter>
-						<TileFooterCell>Certified</TileFooterCell>
-						<TileFooterCell>
-							<SVGIcon name='versionControllerPermissions' label='Owner' labelPosition='left' />
-						</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVlmTile
-	},
-	Vendor: {
-		jsx: <Tile iconName='vendor' iconColor='dark-gray'>
-					<TileInfo align='center'>
-						<TileInfoLine type='title'>Vendor name</TileInfoLine>
-						<TileInfoLine>
-							<Button btnType='primary' onClick={() => {}}>100 VSPs</Button>
-						</TileInfoLine>
-					</TileInfo>
-					<TileFooter align='center'>
-						<TileFooterCell>
-							<Button btnType='link' color='primary' iconName='plusThin' onClick={() => {}}>Create new VSP</Button>
-						</TileFooterCell>
-					</TileFooter>
-				</Tile>,
-		html: HTMLVendorTile
-	},
-};
-
-const Tiles = () => (
-	<Examples examples={examples} />
-);
-
-export default Tiles;
diff --git a/stories/react/Typography.stories.js b/stories/react/Typography.stories.js
deleted file mode 100644
index f1475c6..0000000
--- a/stories/react/Typography.stories.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, {Component} from 'react';
-
-const typos = [
-	{className: 'heading-1', size: 28, text: 'Major Section Heading'},
-	{className: 'heading-2', size: 24, text: 'Sub-Section Heading'},
-	{className: 'heading-3', size: 20, text: 'Small Heading'},
-	{className: 'heading-4', size: 16, text: 'Small Heading'},
-	{className: 'heading-4-emphasis', size: 16, text: 'Small Heading'},
-	{className: 'heading-5', size: 14, text: 'Small Heading'},
-	{className: 'body-1', size: 14, text: 'Body (Standard) Text'},
-	{className: 'body-1-italic', size: 14, text: 'Body (Standard) Text'},
-	{className: 'body-2', size: 13, text: 'Text in Tables'},
-	{className: 'body-2-emphasis', size: 13, text: 'Text in Tables'},
-	{className: 'body-3', size: 12, text: 'Input Labels, Table Titles'},
-	{className: 'body-3-emphasis', size: 12, text: 'Even Smaller Text'},
-	{className: 'body-4', size: 10, text: 'Even Much Smaller Text'}
-];
-
-const fontWeights = ['OpenSans Regular 400', 'OpenSans Semibold 600'];
-
-function TextRow({className, size, text}) {
-	return (
-		<div className={`typo-section ${className}`}>
-			<div>{className}</div>
-			<div>{size}px</div>
-			<div className='sample-text'>{text}</div>
-		</div>
-	);
-}
-
-class Typography extends Component {
-
-	render() {
-		return (
-			<div className='typography-screen'>
-				<h1>Typography</h1>
-				<div className='typography-section'>
-					<h3>Font Family</h3>
-					<ul>
-						<li>OpenSans</li>
-						<li style={{'fontFamily': 'Arial'}}>Arial</li>
-						<li style={{'fontFamily':'sans-serif'}}>sans-serif</li>
-					</ul>
-				</div>
-				<div className='typography-section'>
-					<h3>Font Weights</h3>
-					<ul>{fontWeights.map(font => <li key={font} className={font}>{font}</li>)}</ul>
-				</div>
-				<div className='typography-section'>
-					<h3>Font Size</h3>
-					<div className='typo-table'>
-						<TextRow className='SCSS mixin name (@include ....)' size='Size (in Pixels)' text='Sample Text'/>
-						{typos.map(typo => <TextRow key={typo.className} {...typo}/>)}
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-}
-
-export default Typography;
diff --git a/stories/react/buttons/LinkButtons.stories.js b/stories/react/buttons/LinkButtons.stories.js
deleted file mode 100644
index ef32a22..0000000
--- a/stories/react/buttons/LinkButtons.stories.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Examples from '../utils/Examples.js';
-
-import ReactButton from '../../../src/react/Button.js';
-
-import LinkButton from '../../../components/button/button-link.html';
-import LinkButtonDisabled from '../../../components/button/button-link-disabled.html';
-import ExtraSmall from '../../../components/button/button-link-extra-small.html';
-import Small from '../../../components/button/button-link-small.html';
-import Medium from '../../../components/button/button-link-medium.html';
-import Large from '../../../components/button/button-link-large.html';
-import Auto from '../../../components/button/button-link-auto.html';
-
-let examples = {
-	'Link Default': {
-		jsx: <ReactButton btnType='link' onClick={() => {}}>Click Me</ReactButton>,
-		html: LinkButton
-	},
-	'Link Disabled': {
-		jsx: <ReactButton btnType='link' onClick={() => {}} disabled>Click Me</ReactButton>,
-		html: LinkButtonDisabled,
-	},
-	'Extra Small': {
-		jsx: <ReactButton btnType='link' size='x-small' onClick={() => {}}>Click Me</ReactButton>,
-		html: ExtraSmall
-	},
-	'Small': {
-		jsx: <ReactButton btnType='link' size='small' onClick={() => {}}>Click Me</ReactButton>,
-		html: Small,
-	},
-	'Medium': {
-		jsx: <ReactButton btnType='link' size='medium' onClick={() => {}}>Click Me</ReactButton>,
-		html: Medium
-	},
-	'Large': {
-		jsx: <ReactButton btnType='link' size='large' onClick={() => {}}>Click Me</ReactButton>,
-		html: Large,
-	},
-	'Auto Sizing': {
-		jsx: <ReactButton btnType='link' size='default' onClick={() => {}}>Click Me</ReactButton>,
-		html: Auto,
-	}
-};
-
-const DefaultButtons = () => (
-	<Examples examples={examples} />
-);
-
-export default DefaultButtons;
diff --git a/stories/react/buttons/PrimaryButtons.stories.js b/stories/react/buttons/PrimaryButtons.stories.js
deleted file mode 100644
index db732b9..0000000
--- a/stories/react/buttons/PrimaryButtons.stories.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Examples from '../utils/Examples.js';
-
-import ReactButton from '../../../src/react/Button.js';
-
-import PrimaryButton from '../../../components/button/button-primary.html';
-import PrimaryButtonDisabled from '../../../components/button/button-primary-disabled.html';
-import ExtraSmall from '../../../components/button/button-primary-extra-small.html';
-import Small from '../../../components/button/button-primary-small.html';
-import Medium from '../../../components/button/button-primary-medium.html';
-import Large from '../../../components/button/button-primary-large.html';
-import Auto from '../../../components/button/button-primary-auto.html';
-
-let examples = {
-	'Primary Default': {
-		jsx: <ReactButton onClick={() => {}}>Click Me</ReactButton>,
-		html: PrimaryButton
-	},
-	'Primary Disabled': {
-		jsx: <ReactButton onClick={() => {}} disabled>Click Me</ReactButton>,
-		html: PrimaryButtonDisabled,
-	},
-	'Extra Small': {
-		jsx: <ReactButton size='x-small' onClick={() => {}}>Click Me</ReactButton>,
-		html: ExtraSmall
-	},
-	'Small': {
-		jsx: <ReactButton size='small' onClick={() => {}}>Click Me</ReactButton>,
-		html: Small,
-	},
-	'Medium': {
-		jsx: <ReactButton size='medium' onClick={() => {}}>Click Me</ReactButton>,
-		html: Medium
-	},
-	'Large': {
-		jsx: <ReactButton size='large' onClick={() => {}}>Click Me</ReactButton>,
-		html: Large,
-	},
-	'Auto Sizing': {
-		jsx: <ReactButton size='default' onClick={() => {}}>Click Me</ReactButton>,
-		html: Auto,
-	}
-};
-
-const DefaultButtons = () => (
-	<Examples examples={examples} />
-);
-
-export default DefaultButtons;
diff --git a/stories/react/buttons/SecondaryButtons.stories.js b/stories/react/buttons/SecondaryButtons.stories.js
deleted file mode 100644
index 75f9d54..0000000
--- a/stories/react/buttons/SecondaryButtons.stories.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import Examples from '../utils/Examples.js';
-
-import ReactButton from '../../../src/react/Button.js';
-
-import SecondaryButton from '../../../components/button/button-secondary.html';
-import SecondaryButtonDisabled from '../../../components/button/button-secondary-disabled.html';
-import ExtraSmall from '../../../components/button/button-secondary-extra-small.html';
-import Small from '../../../components/button/button-secondary-small.html';
-import Medium from '../../../components/button/button-secondary-medium.html';
-import Large from '../../../components/button/button-secondary-large.html';
-import Auto from '../../../components/button/button-secondary-auto.html';
-
-let examples = {
-	'Secondary Default': {
-		jsx: <ReactButton btnType='secondary' onClick={() => {}}>Click Me</ReactButton>,
-		html: SecondaryButton
-	},
-	'Secondary Disabled': {
-		jsx: <ReactButton btnType='secondary' onClick={() => {}} disabled>Click Me</ReactButton>,
-		html: SecondaryButtonDisabled,
-	},
-	'Extra Small': {
-		jsx: <ReactButton btnType='secondary' size='x-small' onClick={() => {}}>Click Me</ReactButton>,
-		html: ExtraSmall
-	},
-	'Small': {
-		jsx: <ReactButton btnType='secondary' size='small' onClick={() => {}}>Click Me</ReactButton>,
-		html: Small,
-	},
-	'Medium': {
-		jsx: <ReactButton btnType='secondary' size='medium' onClick={() => {}}>Click Me</ReactButton>,
-		html: Medium
-	},
-	'Large': {
-		jsx: <ReactButton btnType='secondary' size='large' onClick={() => {}}>Click Me</ReactButton>,
-		html: Large,
-	},
-	'Auto Sizing': {
-		jsx: <ReactButton btnType='secondary' size='default' onClick={() => {}}>Click Me</ReactButton>,
-		html: Auto,
-	}
-};
-
-const DefaultButtons = () => (
-	<Examples examples={examples} />
-);
-
-export default DefaultButtons;
diff --git a/stories/react/index.js b/stories/react/index.js
deleted file mode 100644
index 6d425ba..0000000
--- a/stories/react/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import PrimaryButtons from './buttons/PrimaryButtons.stories.js';
-import SecondaryButtons from './buttons/SecondaryButtons.stories.js';
-import LinkButtons from './buttons/LinkButtons.stories.js';
-
-import Colors from './Colors.stories.js';
-import Typography from './Typography.stories.js';
-import Checkboxes from './Checkbox.stories.js';
-import Checklist from './Checklist.stories.js';
-import Input from './Input.stories.js';
-import Icons from './SVGIcon.stories.js';
-import Tiles from './Tiles.stories.js';
-import Tabs from './Tabs.stories.js';
-import Radios from './Radio.stories.js';
-import RadioGroups from './RadioGroup.stories.js';
-import Modals from './Modal.stories.js';
-import PopupMenu from './PopupMenu.stories.js';
-import Accordion from './Accordion.stories.js';
-import Panel from './Panel.stories.js';
-
-storiesOf('Colors', module)
-	.add('Color Palette', () => <Colors />);
-
-storiesOf('Typography', module)
-	.add('Typography', () => <Typography />);
-
-storiesOf('Accordion', module)
-	.add('Accordion', () => <Accordion />);
-
-storiesOf('Buttons', module)
-	.add('Primary', () => <PrimaryButtons />)
-	.add('Secondary', () => <SecondaryButtons />)
-	.add('Link', () => <LinkButtons />);
-
-storiesOf('Checkboxes', module)
-	.add('Checkboxes', () => <Checkboxes />);
-
-storiesOf('Checklist', module)
-	.add('Checklist', () => <Checklist />);
-
-storiesOf('Input Fields', module)
-	.add('Input Text', () => <Input />);
-
-storiesOf('Icons', module)
-	.add('SVG Icons', () => <Icons />);
-
-storiesOf('Menu', module)
-	.add('Popup Menu', () => <PopupMenu />);
-
-storiesOf('Modals', module)
-	.add('Modal examples', () => <Modals />);
-
-storiesOf('Radios', module)
-	.add('Radio Buttons', () => <Radios />)
-	.add('Radio Button Groups', () => <RadioGroups />);
-
-storiesOf('Panel', module)
-	.add('Panel', () => <Panel />);
-
-storiesOf('Tabs', module)
-	.add('Tabs', () => <Tabs />);
-
-storiesOf('Tiles', module)
-	.add('Tiles', () => <Tiles />);
diff --git a/stories/react/utils/BeautifyHTML.js b/stories/react/utils/BeautifyHTML.js
deleted file mode 100644
index 1a29b00..0000000
--- a/stories/react/utils/BeautifyHTML.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export default function beautifyHTML({html, indentChar = '    ', startingIndentCount = 0}) {
-	html = html.replace(/[ ]{2,}/g, ' ');
-
-	let result = '', indentCount = startingIndentCount, parsingText = false;
-	for (let i = 0; i < html.length; i++) {
-
-		let startOfTag, endOfTag, closingTag, upcomingTag, afterTag, numTabs;
-		if (html[i] === '<') { startOfTag = true; }
-		else if (html[i] === '>') { endOfTag = true; }
-		else if (html[i - 1] === '>') { afterTag = true; }
-		if (html[i + 1] === '/') { closingTag = true; }
-		else if (html[i + 1 ] === '<') { upcomingTag = true; }
-
-		if (startOfTag) {
-			if (closingTag) { numTabs = --indentCount; }
-			else { numTabs = indentCount++; }
-		}
-
-		if (parsingText && afterTag) {
-			numTabs = indentCount;
-		}
-
-		result += indentChar.repeat(numTabs) + html[i];
-
-		if (endOfTag || parsingText && upcomingTag) {
-			result += '\n';
-			parsingText = false;
-			if (!upcomingTag) { parsingText = true; }
-		}
-	}
-
-	return result.slice(0, -1);
-}
diff --git a/stories/react/utils/Examples.js b/stories/react/utils/Examples.js
deleted file mode 100644
index 5948b68..0000000
--- a/stories/react/utils/Examples.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import {renderToStaticMarkup} from 'react-dom/server';
-import SourceToggle from './SourceToggle.js';
-import beautifyHTML from './BeautifyHTML.js';
-import insertSVGIcons from './InsertSVGIcons.js';
-
-const Examples = ({examples}) => (
-  <div className={'examples'}>
-	  {Object.keys(examples).map(key => {
-		let title = key;
-		let {jsx, html, displayTitle = true, exclude, renderFromJsx = false} = examples[key];
-		if (!html) {
-			html = renderToStaticMarkup(jsx);
-			html = beautifyHTML({html, indentChar: '  '});
-		} else {
-			html = insertSVGIcons({html, jsx});
-		}
-		return <SourceToggle title={displayTitle && title} jsx={jsx} html={html} key={key} exclude={exclude} renderFromJsx={renderFromJsx}/>;
-	  })}
-  </div>
-);
-
-export default Examples;
diff --git a/stories/react/utils/InsertSVGIcons.js b/stories/react/utils/InsertSVGIcons.js
deleted file mode 100644
index 5a5e390..0000000
--- a/stories/react/utils/InsertSVGIcons.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {renderToStaticMarkup} from 'react-dom/server';
-import beautifyHTML from './BeautifyHTML.js';
-
-const insertSVGIcons = ({html, jsx, indentChar = '    '}) => {
-	let svgCode = renderToStaticMarkup(jsx).match(/(<svg\b[^<>]*>)[\s\S]*?(<\/svg>)/g);
-	let newHTML = html.replace(/\s*<!-- insert SVG -->/g, str => {
-		let html = '\n' + svgCode.shift();
-		let indentRegExp = new RegExp(`[${indentChar}]*`);
-		let startingIndentCount = str.slice(2).match(indentRegExp)[0].length / indentChar.length;
-		return beautifyHTML({html, startingIndentCount, indentChar});
-	});
-	return newHTML;
-};
-
-export default insertSVGIcons;
diff --git a/stories/react/utils/SourceToggle.js b/stories/react/utils/SourceToggle.js
deleted file mode 100644
index a05c8d0..0000000
--- a/stories/react/utils/SourceToggle.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint-disable react/no-danger */
-import React from 'react';
-import jsxToString from './jsxToString.js';
-
-import Prism from 'prismjs';
-
-import PrismJsx from 'prismjs/components/prism-jsx.js'; // eslint-disable-line no-unused-vars
-
-const sources = {
-	React: 'React',
-	HTML: 'HTML'
-};
-
-export default class SourceToggle extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			source: sources.React
-		};
-	}
-
-	renderFromSource() {
-		let {jsx, html, renderFromJsx} = this.props;
-		let {source} = this.state;
-		let classname = 'source-toggle-example';
-		switch (source) {
-			case sources.HTML:
-				return renderFromJsx ? <div className={classname}>{jsx}</div> : <div className={classname} dangerouslySetInnerHTML={{__html: html}} />;
-			case sources.React:
-			default:
-				return <div className={classname}>{jsx}</div>;
-		}
-	}
-
-	renderMarkdown() {
-		let {jsx, html, exclude} = this.props;
-		let {source} = this.state;
-		switch (source) {
-			case sources.HTML:
-				return {__html: Prism.highlight(html, Prism.languages.html)};
-			case sources.React:
-			default:
-				return {__html: Prism.highlight(jsxToString({jsx, exclude}), Prism.languages.jsx)};
-		}
-	}
-
-	render() {
-		let {title} = this.props;
-		return (
-			<div className='source-toggle-wrapper'>
-				{title && <div className='source-toggle-title'>{title}</div>}
-				<div className='source-toggle'>
-					{this.renderFromSource()}
-					<div className='source-toggle-code'>
-						<div className='source-toggle-code-tabs'>
-							{Object.keys(sources).map((source, i) => (
-									<div
-										key={i}
-										className={`source-toggle-tab${this.state.source === source ? ' selected' : ''}`}
-										onClick={() => this.setState({source})}>
-										{source}
-									</div>
-							))}
-						</div>
-						<pre>
-							<code dangerouslySetInnerHTML={this.renderMarkdown()} />
-						</pre>
-					</div>
-				</div>
-			</div>
-		);
-	}
-}
diff --git a/stories/react/utils/components/DropdownMenu.js b/stories/react/utils/components/DropdownMenu.js
deleted file mode 100644
index 4a69463..0000000
--- a/stories/react/utils/components/DropdownMenu.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-const DropdownMenu = ({title, value, onChange, options}) => (
-	<div className='option-container'>
-		<label>{title}</label>
-		<select value={value} onChange={onChange}>
-			{options.map((option, i) =>
-				<option key={i} value={option}>{option}</option>
-			)}
-		</select>
-	</div>
-);
-
-export default DropdownMenu;
diff --git a/stories/react/utils/jsxToString.js b/stories/react/utils/jsxToString.js
deleted file mode 100644
index 8b799ad..0000000
--- a/stories/react/utils/jsxToString.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, {Children} from 'react';
-
-const INDENT = '   ';
-
-function stringRepresentationForJsx(item) {
-	if (typeof item === 'string') {
-		return `'${item}'`;
-	} else if (typeof item === 'number') {
-		return item.toString();
-	} else if (Array.isArray(item)) {
-		return `[${item.map(val => stringRepresentationForJsx(val)).toString()}]`;
-	}
-	else if (typeof item === 'boolean') {
-		return item.toString();
-	}
-	else if (typeof item === 'function') {
-		return item.toString().replace(/\s{2,}/g, ' ');
-	} else if (typeof item === 'object') {
-		let repr = '{';
-		for (let key in item) {
-			if (item.hasOwnProperty(key)) {
-				repr += `${key}: ${stringRepresentationForJsx(item[key])}, `;
-			}
-		}
-		repr = repr.slice(0, -2);
-		repr += '}';
-		return repr;
-	}
-}
-
-function parseProps(jsx, indentCount) {
-	let result = '';
-	for (let prop in jsx.props) {
-		let value = jsx.props[prop];
-		if (prop !== 'children' && value) {
-			let repr = stringRepresentationForJsx(value);
-			let isString = repr.startsWith("'");
-			result += `\n${INDENT.repeat(indentCount)}${prop}`;
-			if (value !== true) {
-				result += `=${isString ? '' : '{ '}${stringRepresentationForJsx(value)}${isString ? '' : ' }'}`;
-			}
-		}
-	}
-	return result;
-}
-
-function jsxToString({jsx, indentCount=0, exclude}) {
-	if (typeof jsx === 'string'){
-		return jsx;
-	}
-	
-	let name = typeof jsx.type === 'string' ? jsx.type : jsx.type.name;	
-	let result = name === exclude ? ''
-		: `${INDENT.repeat(indentCount)}<${name}${parseProps(jsx, indentCount + 1)}`;
-
-	if (jsx.props.hasOwnProperty('children')) {
-		let {children} = jsx.props;
-		let childrenArr = Children.toArray(children);
-		if (name !== exclude) { result += '>\n';}
-		if (typeof children === 'string') {
-			result += `${INDENT.repeat(indentCount + 1)}${children}\n`;
-		} else {
-			let newIndentCount = name === exclude ? indentCount : indentCount + 1;
-			childrenArr.forEach(child => result += `${jsxToString({jsx: child, indentCount: newIndentCount})}\n`);
-		}
-		const closingTag = name === exclude ? '' 
-			: `${INDENT.repeat(indentCount)}</${name}>`;
-		return result + closingTag;
-	}
-
-	return result + ' />';
-}
-
-export default jsxToString;