From 1994c98063c27a41797dec01f2ca9fcbe33ceab0 Mon Sep 17 00:00:00 2001
From: Israel Lavi <israel.lavi@intl.att.com>
Date: Mon, 21 May 2018 17:42:00 +0300
Subject: init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
---
 stories/react/Modal.stories.js | 133 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 stories/react/Modal.stories.js

(limited to 'stories/react/Modal.stories.js')

diff --git a/stories/react/Modal.stories.js b/stories/react/Modal.stories.js
new file mode 100644
index 0000000..29ff7a5
--- /dev/null
+++ b/stories/react/Modal.stories.js
@@ -0,0 +1,133 @@
+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
-- 
cgit