Create generic sectionHeader directive #1450

ucdavis · Jan 16, 2018 · 46a6c03 · 46a6c03
1 parent 8d327c5
commit 46a6c03
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/app/shared/directives/ipaSectionHeader/ipaSectionHeader.css b/app/shared/directives/ipaSectionHeader/ipaSectionHeader.css
@@ -0,0 +1,12 @@
+.ipa-section-header {
+	padding: 13px 15px 13px 15px;
+	background-color: #F8F8F8;
+	border: 1px solid #CCCCCC;
+	margin-top: 25px;
+	border-radius: 3px;
+}
+
+.ipa-section-header__text {
+	font-size: 14px;
+	font-weight: 500;
+}
diff --git a/app/shared/directives/ipaSectionHeader/ipaSectionHeader.html b/app/shared/directives/ipaSectionHeader/ipaSectionHeader.html
@@ -0,0 +1,5 @@
+<div class="ipa-section-header">
+	<div class="ipa-section-header__text">
+		{{ headerText }}
+	</div>
+</div>
diff --git a/app/shared/directives/ipaSectionHeader/ipaSectionHeader.js b/app/shared/directives/ipaSectionHeader/ipaSectionHeader.js
@@ -0,0 +1,17 @@
+sharedApp.directive("ipaSectionHeader", this.ipaSectionHeader = function() {
+	return {
+		restrict: 'E', // Use this via an element selector <ipa-modal></ipa-modal>
+		templateUrl: 'ipaSectionHeader.html', // directive html found here:
+		scope: {
+			headerText: '<'
+		},
+		replace: true, // Replace with the template below
+		link: function(scope, element, attrs) {
+			/* Example Usage:
+			<ipa-section-header
+				header-text="supportCall.title">
+			</ipa-section-header>
+			*/
+		}
+	};
+});