innovate hero section

Author: hmillersarah

ims-apis.html

@@ -77,6 +77,8 @@
 	<!-- Hamburger menu -->
 	<script src="wp-includes/js/navbar.js"></script>
 
+	<!-- Web components -->
+	<script src="web-components/hero-section/hero-section.js" type="module"></script>
 	</head>
 
 	<!-- --------------- SITE CONTENT --------------- -->
@@ -290,21 +292,12 @@ <h5>IMS support</h5>
 				<main id="main" class="zs-main" >
 
 					<!-- =========================== IMS APIs Hero Banner =========================== -->
-					<div class="banner innovate-bg">
-						<section id="intro-section" class="pure-g zs-section apis-hero">
-							<div id="intro-header" class="pure-u-1"></div>
-							<div class="pure-u-3-25">
-								<img class="ims-card-icon" src="wp-content/Icon_Banner_z OS ConnectPage.svg" alt="">
-							</div>
-							<div id="intro-info" class="pure-u-1 pure-u-sm-15-24 apis-hero-text">
-								<h6>Innovate</h6>
-								<h1 >IBM z/OS Connect</h1>
-								<p id="p-style" >Create and deploy RESTful APIs that access IMS™ applications and data 
-								in minutes with point and click Eclipse tooling.
-								</p>
-							</div>
-						</section>
-					</div>
+					<hero-section
+						name="IBM z/OS Connect"
+						image="wp-content/Icon_Banner_z OS ConnectPage.svg" 
+						section="Innovate"
+						desc="Create and deploy RESTful APIs that access IMS™ applications and data in minutes with point and click Eclipse tooling."
+					></hero-section>
 
 					<!-- =========================== Call APIs from Z =========================== -->
 					<div class="zs-gray-section apis-section-white">

web-components/hero-section/hero-section.css

@@ -11,7 +11,14 @@
     background-size: cover;
     background-position: right;
     color: black;
-  }
+}
+
+.innovate-bg {
+    background-image: url(../../wp-content/backgrounds/Innovate_HomepageBG.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 35%;
+}
 
 section {
     display: grid;

web-components/hero-section/hero-section.js

@@ -10,7 +10,7 @@ function createComponent(html) {
     function setContent(cssSelector, content, shadow) {
         const selector = shadow.querySelector(cssSelector);
         // Check if span tag is used in desc
-        if (content.includes('<span>')) {
+        if ((content != undefined) && (content.includes('<span>'))) {
             // Update HTML
             selector.innerHTML = content;
         } else {
@@ -42,7 +42,6 @@ function createComponent(html) {
         // Creates element with default values
         constructor() {
             super();
-            this.link2 = "";
         }
 
         // Return array of properties to observe
@@ -67,11 +66,18 @@ function createComponent(html) {
             setContent('.section', this.section, shadow);
             setContent('.name', this.name, shadow);
             setContent('.desc', this.desc, shadow);
-            setLink('.button-primary', this.link, shadow);
-            setContent('.button-primary-text', this.linktext, shadow);
+
+            if (this.link != undefined) {
+                setLink('.button-primary', this.link, shadow);
+                setContent('.button-primary-text', this.linktext, shadow);
+            } else {
+                // Hide the secondary button if no link is provided
+                const buttonPrimary = shadow.querySelector('.button-primary');
+                buttonPrimary.style.display = 'none';
+            }
 
             // Check if secondary button is used
-            if (this.link2 != "") {
+            if (this.link2 != undefined) {
                 setLink('.button-secondary', this.link2, shadow);
                 setContent('.button-secondary-text', this.linktext2, shadow);
             } else {
@@ -89,6 +95,9 @@ function createComponent(html) {
                 case 'Learn':
                     heroSection.classList.add('learn-bg');
                     break;
+                case 'Innovate':
+                    heroSection.classList.add('innovate-bg');
+                    break;
             }
         }
     }