update web component to observe highlight card attributes

Author: hmillersarah

ims-education.html

@@ -89,6 +89,8 @@
 			desc="<p>Get comprehensive IMS™ education by taking these self-paced, digital courses.</p><p style='font-weight: 300;'>You can also earn a digital badge!</p>"
 			linktext="Sign up for an IBM ID →"
 			link="https://login.ibm.com/authsvc/mtfim/sps/authsvc?PolicyId=urn:ibm:security:authentication:asf:basicldapuser&Target=https%3A%2F%2Flogin.ibm.com%2Foidc%2Fendpoint%2Fdefault%2Fauthorize%3FqsId%3D9fe3fe66-c22f-4c7b-8e5d-01dfc0e8defa%26client_id%3DMyIBMDallasProdCI"
+			highlight="Implementing IMS Security"
+			highlightlink="#ims-security"
 		></hero-section>
 
 		<!-- =========================== New courses CTA =========================== -->

web-components/hero-section/hero-section.html

@@ -22,8 +22,8 @@ <h2 class="name"></h2>
                 <img src="../../wp-content/icons/icon_event.svg" alt="">
                 <h3>Coming soon</h3>
             </div>
-            <h2 class="highlight">Implementing IMS Security</h2>
-            <a class="highlight-link" rel="noopener noreferrer" href="#ims-security">See details</a>
+            <h2 class="highlight"></h2>
+            <a class="highlight-link" rel="noopener noreferrer">See details</a>
         </div>
     </div>
 </section>

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

@@ -46,7 +46,7 @@ function createComponent(html) {
 
         // Return array of properties to observe
         static get observedAttributes() {
-            return ['name', 'image', 'section', 'desc', 'linktext', 'link', 'linktext2', 'link2'];
+            return ['name', 'image', 'section', 'desc', 'linktext', 'link', 'linktext2', 'link2', 'highlight', 'highlightlink'];
         }
 
         // Called when an attribute is defined or changed
@@ -73,6 +73,14 @@ function createComponent(html) {
                 img.classList.add('large-icon');
             }
 
+            if (this.highlight != undefined) {
+                setContent('.highlight', this.highlight, shadow);
+                setLink('.highlight-link', this.highlightlink, shadow);
+            } else {
+                const highlightCard = shadow.querySelector('.highlight-card');
+                highlightCard.style.display = 'none';
+            }
+
             const heroSection = shadow.querySelector('.hero-section');
             const hero = shadow.querySelector('.hero');