video card component

Author: hmillersarah

ims-videos.html

@@ -51,6 +51,7 @@
     <link href="wp-includes/css/grid-fluid.css" rel="stylesheet">
     <link href="wp-includes/css/tables.css" rel="stylesheet">
     <link href="wp-includes/css/pages/videos.css" rel="stylesheet">
+    <link href="wp-includes/css/page.css" rel="stylesheet">
 
   <!-- Hotjar Tracking Code for ibm.com/demos &  githhub -->
     <script>
@@ -81,6 +82,8 @@
 
   <!-- Dropdown nav menu -->
     <script src="wp-includes/js/navbar.js"></script>
+
+    <script src="wp-includes/js/web-components.js"></script>
   </head>
 
   <!-- PAGE CONTENT -->
@@ -291,6 +294,24 @@ <h5>IMS support</h5>
         </header>
       </div>
 
+      <template id="video-card">
+        <link href="wp-includes/css/web-components/video-card.css" rel="stylesheet">
+        <link href="wp-includes/css/page.css" rel="stylesheet">
+        <div class="video-card">
+          <div>
+            <h2 class="video-name"></h2>
+            <p class="video-desc"></p>
+            <div class="inline-g">
+              <p><b>Level: </b><span class="video-level"></span></p>
+              <p><b>Time: </b><span class="video-time"></span></p>
+            </div>
+          </div>
+          <div>
+            <a class="video-link">Watch now →</a>
+          </div>
+        </div>
+      </template>
+
       <!-- MAIN CONTENT -->
       <div id="content" class="site-content">
         <div class="content-area" id="content-area">
@@ -339,6 +360,18 @@ <h1>IMS videos</h1>
                       <div class="pure-g video-card-container">
 
                         <h3 id="all" class="video-section-header-first">All roles</h3>
+
+                        <div class="pure-u-1 pure-u-lg-1-2 pure-u-xl-1-3">
+                          <video-card 
+                          name="Introduction to IMS" 
+                          desc="If you're new to IMS, watch these short, high-level videos on IMS, 
+                            database, transaction management, and application development."
+                          level="Beginner"
+                          time="1 hour"
+                          link="https://mediacenter.ibm.com/channel/Intro+to+IMS+Series/139456202"
+                        >
+                        </video-card>
+                        </div>
 
                         <!-- IMS Community Calls -->
                         <div class="pure-u-1 pure-u-lg-1-3">

wp-includes/css/web-components/video-card.css

@@ -0,0 +1,68 @@
+:root {
+    /* Color */
+    --white: #fff;
+    --black: #000;
+    --blue: #0f62fe;
+        /* Background Color */
+        --bg-light-gray: #f4f4f4;
+        --bg-dark-gray-01: #1c1c1c;
+        --bg-dark-gray-02: #2c2c2c;
+        --bg-dark-blue: #003A6D;
+        /* Button Color */
+        --btn-prim: #0f62fe;
+        --btn-prim-hover: #0050e6;
+        --btn-secnd: #6f6f6f;
+        --btn-scnd-hover: #5e5e5e;
+        /* Font Color */
+        --font-light-blue: #78A9FF;
+
+    /* Sizing */
+    --plex-14: 0.875em;
+    --plex-16: 1em;
+    --plex-18: 1.125em;
+    --plex-20: 1.25em;
+    --plex-24: 1.5em;
+    --plex-28: 1.75em;
+    --plex-36: 2.25em;
+    --plex-72: 4.5em;
+    --plex-180: 11.25em;
+}
+
+h2 {
+    font-weight: 400;
+    font-size: var(--plex-24);
+    padding: 0em;
+    margin: 0em;
+}
+
+p {
+    font-size: var(--plex-18);
+}
+
+a {
+    text-decoration: none;
+    color: var(--blue);
+}
+
+.video-card {
+    background-color: var(--bg-light-gray);
+    margin: 1em;
+    padding: 2em;
+    display: flex;
+    flex-flow: column nowrap;
+}
+
+.video-card div:nth-child(0) {
+    flex-grow: 1;
+}
+  
+.video-card div:nth-child(1) {
+    flex-grow: 4;
+}
+
+/* 1024px and above screen sizes */
+@media  screen and (min-width: 64em) {
+    .video-card {
+      height: 18.75em;
+    }
+  }

wp-includes/js/web-components.js

@@ -0,0 +1,43 @@
+// Web component
+class VideoCard extends HTMLElement {
+
+    static get observedAttributes() {
+        return ['name', 'desc', 'level', 'time', 'link'];
+    }
+
+    attributeChangedCallback(property, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        this[property] = newValue;
+    }
+ 
+    connectedCallback() {
+        const shadow = this.attachShadow({mode: 'closed'});
+        shadow.append(
+            document.getElementById('video-card').content.cloneNode(true)
+        );
+
+        // Set video name
+        const videoName = shadow.querySelector('.video-name');
+        videoName.textContent = `${this.name}`;
+
+        // Set video desc
+        const videoDesc = shadow.querySelector('.video-desc');
+        videoDesc.textContent = `${this.desc}`;
+
+        // Set video level
+        const videoLevel = shadow.querySelector('.video-level');
+        videoLevel.textContent = `${this.level}`;
+
+        // Set video time
+        const videoTime = shadow.querySelector('.video-time');
+        videoTime.textContent = `${this.time}`;
+
+        // Set video link
+        const videoLink = shadow.querySelector('.video-link');
+        videoLink.href = this.link;  
+        videoLink.setAttribute('alt', `Watch ${this.name} now`);      
+    }
+}
+
+// Register component
+customElements.define('video-card', VideoCard);