Merge pull request #77 from imsdev/ims-security-course

IMS Security course

Author: hmillersarah

ims-education.html

@@ -90,6 +90,7 @@
 			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"
+			highlightsub="Available now!"
 			highlightlink="#ims-security"
 		></hero-section>
 

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

@@ -20,7 +20,7 @@ <h2 class="name"></h2>
         <div class="highlight-card">
             <div>
                 <img src="wp-content/icons/icon_event.svg" alt="">
-                <h3>Available now!</h3>
+                <h3 class="highlight-sub"></h3>
             </div>
             <h2 class="highlight"></h2>
             <a class="highlight-link" rel="noopener noreferrer">See details</a>

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

@@ -70,14 +70,15 @@ function createComponent(html) {
         // Creates element with default values
         constructor() {
             super();
+            this.highlightsub = 'Coming soon';
         }
 
         /**
          * Returns an array of properties to observe.
          * @returns {Array} An array of property names.
         */
         static get observedAttributes() {
-            return ['name', 'image', 'section', 'desc', 'linktext', 'link', 'linktext2', 'link2', 'highlight', 'highlightlink'];
+            return ['name', 'image', 'section', 'desc', 'linktext', 'link', 'linktext2', 'link2', 'highlight', 'highlightsub', 'highlightlink'];
         }
 
         /**
@@ -114,6 +115,7 @@ function createComponent(html) {
 
             // Display highlight card if content is provided
             if (this.highlight != undefined) {
+                setContent('.highlight-sub', this.highlightsub, shadow);
                 setContent('.highlight', this.highlight, shadow);
                 setLink('.highlight-link', this.highlightlink, shadow, this.highlight);
                 hero.classList.add('hero-highlight');