Add direction configuration to strand-guide

src/strand-guide-tooltip/strand-guide-tooltip.js

@@ -26,9 +26,6 @@
 				type: Boolean,
 				value: false
 			},
-			direction: {
-				value: 'n'
-			},
 			hidden: {
 				type: Boolean
 			},
@@ -105,6 +102,9 @@
 			var data = this.data;
 			var step = this.currentStep;
 
+			// set direction for the tip - position 'n' by default
+			this.direction = data[step].hasOwnProperty('direction') ? data[step].direction : 'n';
+
 			this._target = data[step].targetRef;
 			this._header = data[step].hasOwnProperty('header') ? data[step].header : null;
 			this._message = data[step].hasOwnProperty('message') ? data[step].message : null;

src/strand-guide/doc.json

@@ -106,7 +106,7 @@
 		{
 			"name":"data",
 			"type":"Array",
-			"description":"The data array which drives the component. I configuration is provided as lightDOM, the data array will be derived from the lightDOM configuration, otherwise, the data can be provided to the component as an array of objects following the format: [{ target: String, header: String, message: String, dismiss: String }]."
+			"description":"The data array which drives the component. I configuration is provided as lightDOM, the data array will be derived from the lightDOM configuration, otherwise, the data can be provided to the component as an array of objects following the format: [{ target: String, header: String, message: String, dismiss: String, direction: String }]. Note: for the 'direction' configuration option, please see strand-popover."
 		}
 	],
 	"methods": [

src/strand-guide/index.html

@@ -107,25 +107,29 @@
 		id="guide"
 		use-local-storage
 		name="index-example">
-		 
+
 		<guide 
 			target="button1" 
 			header="IP Targeting Now Available!"
 			message="You can now target/anti-target IP addresses. For more information, please visit the"
 			dismiss="Thanks, I've got it."
 			linktext="KB"
+			direction="e"
 			linkurl="http://www.example.com"></guide>
 
 		<guide 
 			target="button2"
 			header="Some Header 2"
-			message="Some Message Here 2"></guide>
+			message="Some Message Here 2"
+			direction="w"></guide>
 		<guide 
 			target="button3"
-			message="Some Message Here 3"></guide>
+			message="Some Message Here 3"
+			direction="s"></guide>
 		<guide
 			target="footerBtn"
-			message="Some Message Here 4"></guide>
+			message="Some Message Here 4"
+			direction="n"></guide>
 
 	</strand-guide>
 
@@ -143,20 +147,24 @@
 		// 		message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor ipsum vel leo rutrum, eu rhoncus sem volutpat. Vestibulum convallis urna vel tristique pharetra.',
 		// 		dismiss: 'Thanks, I\'ve got it.',
 		// 		linktext: 'Knowledge Base',
-		// 		linkurl: 'http://www.example.com'
+		// 		linkurl: 'http://www.example.com',
+		// 		direction: 'e'
 		// 	},
 		// 	{
 		// 		target: 'button2',
 		// 		header: 'Some Header 2',
-		// 		message: 'Some Message Here 2'
+		// 		message: 'Some Message Here 2',
+		// 		direction: 'w'
 		// 	},
 		// 	{
 		// 		target: 'button3',
-		// 		message: 'Some Message Here 3'
+		// 		message: 'Some Message Here 3',
+		// 		direction:'s'
 		// 	},
 		// 	{
 		// 		target: 'footerBtn',
-		// 		message: 'Some Message Here 4'
+		// 		message: 'Some Message Here 4',
+		// 		direction: 'n'
 		// 	}
 		// ];