guide action

MediaMath · Aug 18, 2016 · f0c9e1f · f0c9e1f
1 parent e530499
commit f0c9e1f
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 9 deletions.
diff --git a/src/strand-action/index.html b/src/strand-action/index.html
@@ -119,6 +119,18 @@
 			<label>Awesome</label>
 		</strand-action>
 		<hr/>
+		<p><span class="bold">Action:</span> with external attribute</p>
+		<strand-action external unresolved>
+			<label>Knowledge Base</label>
+		</strand-action>
+		<hr/>
+		<p><span class="bold">Action:</span> with external attribute</p>
+		<div style="background:#333; padding:15px;">
+			<strand-action external unresolved style="color:#fff;">
+				<label>Knowledge Base</label>
+			</strand-action>
+		</div>
+		<hr/>
 	</div>
 	<div class="vr"></div>
   </body>

diff --git a/src/strand-action/strand-action.html b/src/strand-action/strand-action.html
@@ -10,13 +10,21 @@
 <link rel="import" href="../shared/behaviors/resolvable.html"/>
 <link rel="import" href="../shared/behaviors/stylable.html"/>
 <link rel="import" href="../shared/behaviors/refable.html"/>
+<link rel="import" href="../strand-icon/strand-icon.html"/>
 
 <dom-module id="strand-action">
 	<link rel="import" type="css" href="strand-action.css"/>
 	<template>
-		<a href="{{href}}" target="{{target}}" rel="noopener noreferrer" class$="{{ updateClass(underline) }}">
+		<a 
+			href="{{href}}" 
+			target="{{target}}" 
+			rel="noopener noreferrer" 
+			class$="{{ updateClass(underline, external) }}">
 			<content select="strand-icon" id="icon"></content>
 			<content select="label"></content>
+			<template is="dom-if" if="{{external}}">
+				<strand-icon type="jump-to" width="13" height="13"></strand-icon>
+			</template>
 		</a>
 	</template>
 </dom-module>

diff --git a/src/strand-action/strand-action.js b/src/strand-action/strand-action.js
@@ -35,13 +35,17 @@
 				type: Boolean,
 				value: false,
 				reflectToAttribute: true
+			},
+			external: {
+				type: Boolean,
+				value: false
 			}
 		},
 
-		updateClass: function(underline) {
+		updateClass: function(underline, external) {
 			var o = {};
 			o.action = true;
-			o.underline = underline;
+			o.underline = underline || external;
 			return this.classBlock(o);
 		}
 

diff --git a/src/strand-action/strand-action.scss b/src/strand-action/strand-action.scss
@@ -51,4 +51,16 @@
 		margin-top: -1px;
 		color: inherit;
 	}
+}
+
+:host[external] {
+	.action {
+		& > ::content label {
+			font-size:12px !important;
+		}
+
+		strand-icon {
+			margin: 0 0 0 3px;
+		}
+	}
 }
diff --git a/src/strand-guide-tooltip/index.html b/src/strand-guide-tooltip/index.html
@@ -85,11 +85,40 @@
   </head>
   <body>
 
-	<strand-guide-tooltip></strand-guide-tooltip>
+  	<div style="margin:50px;">
+		<strand-guide-tooltip id="tt1"></strand-guide-tooltip>
+		<button id="button1">button 1</button>
+	</div>
+
+	<div style="margin:375px 50px 50px 50px;">
+		<strand-guide-tooltip id="tt2"></strand-guide-tooltip>
+		<button id="button2">button 2</button>
+	</div>
 
 	<script>
 		window.addEventListener("WebComponentsReady", function() {
-			//
+			var tt1 = document.querySelector('#tt1');
+			var tt2 = document.querySelector('#tt2');
+
+			tt1.data = [{
+				targetRef: document.querySelector('#button1'),
+				header: 'Some Header 1',
+				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: 'Some Link 1',
+				linkurl: 'http://www.example.com'
+			}];
+
+			tt2.data = [{
+				targetRef: document.querySelector('#button2'),
+				header: 'Some Header 2',
+				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.',
+				linktext: 'Some Link 2',
+				linkurl: 'http://www.example.com'
+			}];
+
+			tt1.currentStep = 0;
+			tt2.currentStep = 0;
 		});
 	</script>
 

diff --git a/src/strand-guide-tooltip/strand-guide-tooltip.html b/src/strand-guide-tooltip/strand-guide-tooltip.html
@@ -16,10 +16,16 @@
 <dom-module id="strand-guide-tooltip">
 	<link rel="import" type="css" href="strand-guide-tooltip.css"/>
 	<template>
-		<!-- <content></content> -->
 		<div id="container" style$="{{_containerStyle}}">
 			<span class="header">{{_header}}</span>
-			<span class="message">{{_message}}</span>
+			<span class="message">
+				{{_message}}
+				<!-- <template is="dom-if" if="{{_link}}"> -->
+					<strand-action external href$="{{_linkUrl}}" target="_blank">
+						<label>{{_linkText}}</label>
+					</strand-action>
+				<!-- </template> -->
+			</span>
 			<template is="dom-if" if="{{_dismiss}}">
 				<strand-action class="dismiss-action" on-tap="_dismissHandler" underline>
 					<label>{{_dismiss}}</label>

diff --git a/src/strand-guide-tooltip/strand-guide-tooltip.js b/src/strand-guide-tooltip/strand-guide-tooltip.js
@@ -64,6 +64,18 @@
 			_message: {
 				type: String
 			},
+			_link: {
+				type: Boolean,
+				value: false
+			},
+			_linkText: {
+				type: String,
+				value: null
+			},
+			_linkUrl: {
+				type: String,
+				value: null
+			},
 			data: {
 				type: Array
 			},
@@ -98,6 +110,14 @@
 			this._message = data[step].hasOwnProperty('message') ? data[step].message : null;
 			this._dismiss = data[step].hasOwnProperty('dismiss') ? data[step].dismiss : null;
 
+			// Handle the link - if necessary
+			if (data[step].hasOwnProperty('linktext') && 
+				data[step].hasOwnProperty('linkurl')) {
+				this._linkText = data[step].linktext;
+				this._linkUrl = data[step].linkurl;
+				this._link = true;
+			}
+
 			// Compute next, back, and do labeling
 			this._next = data.length > 1;
 			this._back = data.length > 1 && step > 0;
@@ -109,7 +129,7 @@
 			if (this._back && step > 0) {
 				this._backLabel = 'Back';
 			}
-			
+
 			if (!this.hidden) this.open();
 		},
 

diff --git a/src/strand-guide/index.html b/src/strand-guide/index.html
@@ -112,7 +112,10 @@
 			target="button1" 
 			header="Some Header 1"
 			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."></guide>
+			dismiss="Thanks, I've got it."
+			linktext="Some Link"
+			linkurl="http://www.example.com">
+			</guide>
 		<guide 
 			target="button2"
 			header="Some Header 2"