learn hero section

Author: hmillersarah

ims-videos.html

@@ -78,6 +78,7 @@
 
   <!-- Web components -->
   <script src="web-components/video-card/video-card.js" type="module"></script>
+  <script src="web-components/hero-section/hero-section.js" type="module"></script>
 </head>
 
   <!-- PAGE CONTENT -->
@@ -311,7 +312,7 @@ <h2 class="video-name"></h2>
       <div id="content" class="main-content">
         <main id="main">
           <!-- =========================== Hero =========================== -->
-          <section class="learn-bg">
+          <!-- <section class="learn-bg">
             <div id="intro-section" class="pure-g hero">
               <div class="pure-u-1 pure-u-md-1-24">
                 <img src="wp-content/Icon_Managed ACBs_IMS DatabasePage.svg" alt="" class="icon icon-lg">
@@ -332,7 +333,15 @@ <h1>IMS videos</h1>
                 </div>
               </div>
             </div>
-          </section>
+          </section> -->
+
+          <hero-section
+            name="IMS videos"
+            section="Learn"
+            desc="<p>See the latest IMS educational videos here or click <b>Visit IBM MediaCenter</b> to search for more IMS video content.</p>"
+            linktext="Visit IBM MediaCenter →"
+            link="https://mediacenter.ibm.com/channel/IMS%2BEducational%2BVideos/122579632"
+          ></hero-section>
 
           <!-- =========================== Filter =========================== -->
           <!-- remember, the behaviour is that clicking pulls you to the anchors -->

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

@@ -5,6 +5,14 @@
     color: white;
 }
 
+.learn-bg {
+    background-image: url(../../wp-content/backgrounds/Learn_HomepageBG.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: right;
+    color: black;
+  }
+
 section {
     display: grid;
     grid-template-columns: 4em 2fr;
@@ -23,6 +31,7 @@ section {
 img {
     grid-column: 1;
     grid-row: 2;
+    width: 2em;
 }
 
 .section {

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

@@ -7,14 +7,14 @@
     <div class="links">
         <a  onfocus="closeNavMenu()" 
             rel="noopener noreferrer"
-            class="link-primary button button-primary"
+            class="button button-primary"
         >
-            <span class="link-primary-text"></span>
+            <span class="button-primary-text"></span>
         </a>
         <a  rel="noopener noreferrer"
-            class="link-secondary button button-secondary"
+            class="button button-secondary"
         >
-            <span class="link-secondary-text"></span>
+            <span class="button-secondary-text"></span>
         </a>
     </div>
 </section>

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

@@ -8,13 +8,21 @@ function createComponent(html) {
 
     function setContent(cssSelector, content, shadow) {
         const selector = shadow.querySelector(cssSelector);
-        selector.textContent = content;
+        if (content.includes('<p>')) {
+            let paragraph = document.createElement('p');
+            paragraph.innerHTML = content;
+            selector.appendChild(paragraph);
+        } else {
+            selector.textContent = content;
+        }
     }
 
-    function setLink(cssSelector, url, name, shadow) {
+    function setLink(cssSelector, url, shadow) {
         const link = shadow.querySelector(cssSelector);
         link.href = url;
-        link.setAttribute('aria-label', `Learn more about ${name}`);
+        if (url.includes('https://')) {
+            link.setAttribute('target', '_blank');
+        }
     }
 
     function setImage(cssSelector, src, shadow) {
@@ -29,6 +37,7 @@ function createComponent(html) {
         // Creates element with default values
         constructor() {
             super();
+            this.link2 = "";
         }
 
         // Return array of properties to observe
@@ -51,19 +60,28 @@ function createComponent(html) {
             setContent('.section', this.section, shadow);
             setContent('.name', this.name, shadow);
             setContent('.desc', this.desc, shadow);
-            setLink('.link-primary', this.link, this.name, shadow);
-            setContent('.link-primary-text', this.linktext, shadow);
-            setLink('.link-secondary', this.link2, this.name, shadow);
-            setContent('.link-secondary-text', this.linktext2, shadow);
+            setLink('.button-primary', this.link, shadow);
+            setContent('.button-primary-text', this.linktext, shadow);
 
-            // Check if links are external
+            if (this.link2 != "") {
+                setLink('.button-secondary', this.link2, shadow);
+                setContent('.button-secondary-text', this.linktext2, shadow);
+            } else {
+                const buttonSecondary = shadow.querySelector('.button-secondary');
+                buttonSecondary.style.display = 'none';
+            }
 
+            // Check if links are external
+            const heroSection = shadow.querySelector('.hero');
             switch(this.section) {
                 case 'Engage':
-                    const selector = shadow.querySelector('.hero');
-                    selector.classList.add('engage-bg');
+                    heroSection.classList.add('engage-bg');
                     setImage('.image', 'wp-content/icons/icon_engage.svg', shadow);
                     break;
+                case 'Learn':
+                    heroSection.classList.add('learn-bg');
+                    setImage('.image', 'wp-content/Icon_Managed ACBs_IMS DatabasePage.svg', shadow);
+                    break;
             }
         }
     }