Merge pull request #72 from imsdev/security-course-card

hmillersarah · web-flow · commit aa2e7aee0aa5 · 2025-07-02T14:52:18.000-04:00
Responsive courses page
diff --git a/ims-education.html b/ims-education.html
diff --git a/web-components/course-card/course-card.css b/web-components/course-card/course-card.css
@@ -61,7 +61,7 @@ img {
 /* Styling for course card */
 .course-card {
     margin: 1em 0em;
-    padding: 2em 0em;
+    padding: 2em;
     display: flex;
     flex-flow: row wrap;
     align-items: flex-start;
diff --git a/web-components/course-card/course-card.html b/web-components/course-card/course-card.html
@@ -23,8 +23,8 @@ <h3 class="live-session"></h3>
             </div>
         </div>
         <div class="link-g">
-            <a class="course-link" target="_blank" rel="noopener noreferrer"></a>
-            <a class="register-link" target="_blank" rel="noopener noreferrer"></a>
+            <div class="course-link-g"><a class="course-link" target="_blank" rel="noopener noreferrer"></a></div>
+            <div class="register-link-g"><a class="register-link" target="_blank" rel="noopener noreferrer"></a></div>
         </div>
     </div>
 </div>
diff --git a/web-components/course-card/course-card.js b/web-components/course-card/course-card.js
@@ -37,17 +37,21 @@ function createComponent(html) {
      * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
      * @returns {void}
      */
-    function setImage(cssSelector, image, name, selfpaced, shadow) {
+    function setImage(cssSelector, image, name, imageInvert, shadow) {
         const selector = shadow.querySelector(cssSelector);
         // Set image
         selector.src = image;
         // Set alt text
         selector.setAttribute('alt', `${name} badge`);
-        // Change styling for self-paced course card
-        if (selfpaced == 'false') {
+        // Change styling for icons
+        if (image.includes('icons')) {
             const courseCard = shadow.querySelector('.course-card');
             courseCard.style.alignItems = 'flex-start';
         }
+        // Invert icon 
+        if (imageInvert == 'true') {
+            selector.style.filter = 'invert(1)';
+        }
     }
 
     /**
@@ -108,6 +112,7 @@ function createComponent(html) {
         // Creates an instance of CourseCard
         constructor() {
             super();
+            this.imginvert = "false";
             this.selfpaced = "";
             this.level = "";
             this.cost = "";
@@ -126,7 +131,7 @@ function createComponent(html) {
          * @returns {Array} An array of property names.
         */
         static get observedAttributes() {
-            return ['name', 'session', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'start', 
+            return ['name', 'session', 'desc', 'imgsrc', 'imginvert', 'selfpaced', 'level', 'cost', 'badge', 'time', 'start', 
                 'end', 'hours', 'link', 'linktext', 'registerlink'];
         }
         // Course Card Options
@@ -163,7 +168,7 @@ function createComponent(html) {
             shadow.innerHTML = html;
             
             // Set course img
-            setImage('.course-img', this.imgsrc, this.name, this.selfpaced, shadow);
+            setImage('.course-img', this.imgsrc, this.name, this.imginvert, shadow);
             // Set course name
             setContent('.course-name', this.name, shadow);
             // Set course desc
diff --git a/web-components/hero-section/hero-section.css b/web-components/hero-section/hero-section.css
@@ -42,19 +42,22 @@ section {
 
 .hero {
     display: grid;
-    grid-template-columns: 4em 2fr;
-    /* grid-template-rows: 4em 4em 6em 1fr; */
+    grid-template-columns: 4em 1fr;
     grid-template-rows: 4em repeat(3, 1fr);
     padding: 3em;
     padding-top: 2em;
     align-items: center;
 }
 
+.hero-highlight {
+    grid-template-columns: 4em 1fr 1fr;
+}
+
 .hero-no-buttons {
     grid-template-rows: 4em repeat(2, 1fr);
 }
 
-img {
+.image {
     grid-column: 1;
     grid-row: 2;
     max-width: 2em;
@@ -140,10 +143,46 @@ h6, p {
     background-color: var(--btn-scnd-hover);
   }
 
+.highlight-card {
+    grid-column: 3;
+    grid-row: 1 / 6;
+    background-color: white;
+    padding: 2em 3em 2em 3em;
+    margin: 1em;
+    opacity: 0.75;
+    display: flex;
+    flex-flow: column wrap;
+    gap: 1em;
+}
+
+.highlight-card div {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1em;
+}
+
+.highlight-card h2 {
+    font-weight: normal;
+    font-size: 28px;
+}
+
+.highlight-card h3 {
+    font-weight: 600;
+}
+
+.highlight-card a {
+    color: #0f62fe;
+    font-size: 1.125em;
+}
+
 @media screen and (min-width: 90em) {
     .hero {
         grid-template-columns: 4em 4fr 1fr;
     }
+
+    .hero-highlight {
+        grid-template-columns: 4em 1fr 1fr;
+    }
 }
 
 @media  screen and (max-width: 27em) {
@@ -154,4 +193,9 @@ h6, p {
         gap: 1em;
         padding: 3em 2em;
     }
+
+    .highlight-card {
+        padding: 2em;
+        margin: 0;
+    }
 }
diff --git a/web-components/hero-section/hero-section.html b/web-components/hero-section/hero-section.html
@@ -17,5 +17,13 @@ <h2 class="name"></h2>
                 <span class="button-secondary-text"></span>
             </a>
         </div>
+        <div class="highlight-card">
+            <div>
+                <img src="wp-content/icons/icon_event.svg" alt="">
+                <h3>Coming soon</h3>
+            </div>
+            <h2 class="highlight"></h2>
+            <a class="highlight-link" rel="noopener noreferrer">See details</a>
+        </div>
     </div>
 </section>
diff --git a/web-components/hero-section/hero-section.js b/web-components/hero-section/hero-section.js
@@ -3,10 +3,20 @@ fetch("web-components/hero-section/hero-section.html")
     .then(stream => stream.text())
     .then(text => createComponent(text))
 
-// Create web component
+/**
+ * Creates a web component using a given HTML template.
+ * @param {string} html - The HTML template.
+ * @returns {void}
+ */
 function createComponent(html) {
 
-    // Set text content
+    /**
+     * Sets the content of an element based on a CSS selector.
+     * @param {string} cssSelector - The CSS selector of the element to set the content for.
+     * @param {string} content - The content to set for the element.
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
+     * @returns {void}
+     */
     function setContent(cssSelector, content, shadow) {
         const selector = shadow.querySelector(cssSelector);
         // Check if span tag is used in desc
@@ -19,17 +29,35 @@ function createComponent(html) {
         }
     }
 
-    // Set link
-    function setLink(cssSelector, url, shadow) {
+     /**
+     * Sets the link of an element based on a CSS selector
+     * @param {string} cssSelector - The CSS selector of the element to set the link for
+     * @param {string} url - The link url
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element
+     * @param {string} name - The name of the element containing the link
+     * @returns {void}
+     */
+    function setLink(cssSelector, url, shadow, name) {
+        name = name || "";
         const link = shadow.querySelector(cssSelector);
         link.href = url;
         // Open new tab for external links
         if (url.includes('https://')) {
             link.setAttribute('target', '_blank');
         }
+        // Set aria-label if needed
+        if (name != "") {
+            link.setAttribute('aria-label', `See details on ${name}`);
+        }
     }
 
-    // Set image
+    /**
+     * Sets the image of an element based on a CSS selector.
+     * @param {string} cssSelector - The CSS selector of the element to set the content for.
+     * @param {string} src - The image to set for the element.
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
+     * @returns {void}
+     */
     function setImage(cssSelector, src, shadow) {
         const image = shadow.querySelector(cssSelector);
         image.src = src;
@@ -44,12 +72,20 @@ function createComponent(html) {
             super();
         }
 
-        // Return array of properties to observe
+        /**
+         * 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'];
+            return ['name', 'image', 'section', 'desc', 'linktext', 'link', 'linktext2', 'link2', 'highlight', 'highlightlink'];
         }
 
-        // Called when an attribute is defined or changed
+        /**
+         * Called when an attribute is defined or changed.
+         * @param {string} property - The name of the attribute.
+         * @param {string} oldValue - The old value of the attribute.
+         * @param {string} newValue - The new value of the attribute.
+        */
         attributeChangedCallback(property, oldValue, newValue) {
             if (oldValue === newValue) return;
             this[property] = newValue;
@@ -61,6 +97,9 @@ function createComponent(html) {
             const shadow = this.attachShadow({mode: 'open'});
             shadow.innerHTML = html;
 
+            const heroSection = shadow.querySelector('.hero-section');
+            const hero = shadow.querySelector('.hero');
+
             // Set content
             setImage('.image', this.image, shadow);
             setContent('.section', this.section, shadow);
@@ -73,8 +112,15 @@ function createComponent(html) {
                 img.classList.add('large-icon');
             }
 
-            const heroSection = shadow.querySelector('.hero-section');
-            const hero = shadow.querySelector('.hero');
+            // Display highlight card if content is provided
+            if (this.highlight != undefined) {
+                setContent('.highlight', this.highlight, shadow);
+                setLink('.highlight-link', this.highlightlink, shadow, this.highlight);
+                hero.classList.add('hero-highlight');
+            } else {
+                const highlightCard = shadow.querySelector('.highlight-card');
+                highlightCard.style.display = 'none';
+            }
 
             // Check if primary button is used
             if (this.link != undefined) {
diff --git a/wp-content/icons/icon_event.svg b/wp-content/icons/icon_event.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1528_38949)">
+<path d="M28 6C28 5.46957 27.7893 4.96086 27.4142 4.58579C27.0391 4.21071 26.5304 4 26 4H22V2H20V4H12V2H10V4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V26C4 26.5304 4.21071 27.0391 4.58579 27.4142C4.96086 27.7893 5.46957 28 6 28H10V26H6V6H10V8H12V6H20V8H22V6H26V12H28V6Z" fill="#161616"/>
+<path d="M21 15L23.549 19.938L29 20.729L25 24.573L26 30L21 27.438L16 30L17 24.573L13 20.729L18.6 19.938L21 15Z" fill="#161616"/>
+</g>
+<defs>
+<clipPath id="clip0_1528_38949">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/wp-content/icons/icon_jump-link.svg b/wp-content/icons/icon_jump-link.svg
@@ -0,0 +1 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none;}</style></defs><title>jump-link</title><path d="M13.4141,17.5859,18,22.1719V8H8V6H18a2.0024,2.0024,0,0,1,2,2V22.1719l4.5859-4.586L26,19l-7,7-7-7Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
diff --git a/wp-content/icons/icon_locked.svg b/wp-content/icons/icon_locked.svg
@@ -0,0 +1 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none;}</style></defs><title>locked</title><path d="M24,14H22V8A6,6,0,0,0,10,8v6H8a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H24a2,2,0,0,0,2-2V16A2,2,0,0,0,24,14ZM12,8a4,4,0,0,1,8,0v6H12ZM24,28H8V16H24Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
diff --git a/wp-includes/css/components/anchor-links.css b/wp-includes/css/components/anchor-links.css
@@ -0,0 +1,71 @@
+.anchor-links {
+    padding: 1em 5em 0em 5em;
+    position: sticky;
+    top: 3em;
+    border-bottom: solid lightgray;
+}
+
+.anchor-links ul {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: 3em;
+    row-gap: 0;
+    padding: 0;
+    line-height: 3em;
+}
+
+.anchor-links li {
+    font-weight: 500;
+    font-size: 0.9em;
+    padding: 0;
+    border-bottom: white solid 4px;
+    display: flex !important;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 0.5em;
+}
+
+.anchor-links li img {
+    padding: 0;
+    margin: 0;
+    max-height: 2em;
+    display: none;
+}
+
+.anchor-links li:hover {
+    border-color: #0f62fe;
+}
+
+.anchor-links li a {
+    text-decoration: none;
+}
+
+@media  screen and (max-width: 48em) {
+    .anchor-links {
+        padding: 2em;
+        position: relative;
+        top: 0;
+    }
+    
+    .anchor-links ul {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1em;
+    }
+
+    .anchor-links li img {
+        display: block;
+    }
+
+    .anchor-links li:hover {
+        border-color: white;
+    }
+}
+
+@media  screen and (max-width: 27em) {    
+    .anchor-links ul {
+        display: flex;
+        flex-flow: column wrap;
+        gap: 0.2em;
+    }
+}
diff --git a/wp-includes/css/page.css b/wp-includes/css/page.css
