update social links

mitodl · Jan 11, 2024 · 7ee0589 · 7ee0589
1 parent 00653a0
commit 7ee0589
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 10 deletions.
diff --git a/base-theme/assets/images/LinkedIn.png b/base-theme/assets/images/LinkedIn.png
diff --git a/base-theme/assets/images/Twitter.png b/base-theme/assets/images/Twitter.png
diff --git a/base-theme/assets/images/linkedin-black.png b/base-theme/assets/images/linkedin-black.png
diff --git a/base-theme/assets/images/x-formerly-twitter-black.png b/base-theme/assets/images/x-formerly-twitter-black.png
diff --git a/base-theme/layouts/partials/footer-v2-social-icons.html b/base-theme/layouts/partials/footer-v2-social-icons.html
@@ -11,7 +11,7 @@
 	</div>
 	<div>
 		<a href="https://twitter.com/MITOCW" target="_blank">
-			<img class="footer-social-icon" src="{{ partial "get_asset_webpack_url.html" "images/Twitter.png"}}" alt="twitter"/>
+			<img class="footer-social-icon" src="{{ partial "get_asset_webpack_url.html" "images/x-formerly-twitter-black.png"}}" alt="twitter"/>
 		</a>
 	</div>
 	<div>
@@ -21,7 +21,7 @@
 	</div>
 	<div>
 		<a href="https://www.linkedin.com/company/mit-opencourseware/" target="_blank">
-			<img class="footer-social-icon" src="{{ partial "get_asset_webpack_url.html" "images/LinkedIn.png"}}" alt="LinkedIn"/>
+			<img class="footer-social-icon" src="{{ partial "get_asset_webpack_url.html" "images/linkedin-black.png"}}" alt="linkedin"/>
 		</a>
 	</div>
 </div>
diff --git a/base-theme/layouts/partials/footer.html b/base-theme/layouts/partials/footer.html
@@ -81,7 +81,7 @@
         </li>
         <li>
           <a class="img-link" href="https://twitter.com/MITOCW" target="_blank">
-            <img class="footer-social-icon" src="{{ partial "get_asset_webpack_url.html" "images/Twitter.png" }}" alt="twitter" />
+            <img class="footer-social-icon" src="{{ partial "get_asset_webpack_url.html" "images/x-formerly-twitter-black.png" }}" alt="twitter" />
           </a>
         </li>
         <li>
@@ -101,8 +101,8 @@
           >
             <img
               class="footer-social-icon"
-              src="{{ partial "get_asset_webpack_url.html" "images/LinkedIn.png" }}"
-              alt="LinkedIn"
+              src="{{ partial "get_asset_webpack_url.html" "images/linkedin-black.png" }}"
+              alt="linkedin"
             />
           </a>
         </li>

diff --git a/tests-e2e/ocw-ci-test-www/homepage.spec.ts b/tests-e2e/ocw-ci-test-www/homepage.spec.ts
@@ -1,9 +1,40 @@
 import { test, expect } from "@playwright/test"
-import { siteUrl } from "../util"
+import { WwwPage, siteUrl } from "../util"
 
-test("Course page have title in <head>", async ({ page }) => {
+test("Home page has title in <head>", async ({ page }) => {
   await page.goto(siteUrl("www"))
   await expect(page).toHaveTitle(
     "MIT OpenCourseWare | Free Online Course Materials"
   )
 })
+
+test("Social links exist and open correct social media pages", async ({
+  page
+}) => {
+  const SOCIAL_LINKS = [
+    ["facebook", /https:\/\/www.facebook.com\/MITOCW\/?/],
+    ["instagram", /https:\/\/www.instagram.com\/mitocw\/?/],
+    ["twitter", /https:\/\/twitter.com\/MITOCW\/?/],
+    ["youtube", /https:\/\/www.youtube.com\/mitocw\/?/],
+    ["linkedin", /https:\/\/www.linkedin.com\/company\/mit-opencourseware\/?/]
+  ]
+
+  const www = new WwwPage(page)
+  await www.goto()
+
+  for (const [name, url] of SOCIAL_LINKS) {
+    for (const location of [".social-icon-row", "#footer-container"]) {
+      const popupPromise = page.waitForEvent("popup")
+
+      const link = page
+        .locator(location)
+        .getByRole("link", { name, exact: true })
+      await expect(link).toBeVisible()
+      await link.click()
+
+      const popup = await popupPromise
+      await popup.waitForURL(url, { timeout: 10000, waitUntil: "commit" })
+      await popup.close()
+    }
+  }
+})
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
@@ -251,7 +251,7 @@ $searchbox-height: 50px;
     }
 
     .social-icon-row {
-      width: 225px;
+      width: 270px;
     }
 
     > div {

diff --git a/www/layouts/home.html b/www/layouts/home.html
@@ -128,11 +128,14 @@ <h2>Your Donation Makes a Difference</h2>
                 <img class="social-icon" src="/images/social-instagram-blue.svg" alt="instagram" />
               </a>
               <a class="img-link" href="https://twitter.com/MITOCW" target="_blank">
-                <img class="social-icon" src="/images/social-twitter-blue.svg" alt="twitter" />
+                <img class="social-icon" src="/images/social-x-formerly-twitter-blue.svg" alt="twitter" />
               </a>
               <a class="img-link" href="https://www.youtube.com/mitocw" target="_blank">
                 <img class="social-icon" src="/images/social-youtube-blue.svg" alt="youtube" />
               </a>
+              <a class="img-link" href="https://www.linkedin.com/company/mit-opencourseware" target="_blank">
+                <img class="social-icon" src="/images/social-linkedin-blue.svg" alt="linkedin" />
+              </a>
             </div>
           </div>
         </div>

diff --git a/www/static/images/social-linkedin-blue.svg b/www/static/images/social-linkedin-blue.svg
diff --git a/www/static/images/social-twitter-blue.svg b/www/static/images/social-twitter-blue.svg
diff --git a/www/static/images/social-x-formerly-twitter-blue.svg b/www/static/images/social-x-formerly-twitter-blue.svg
-Original file line number
+Diff line change
@@ Expand Up / @@ -251,7 +251,7 @@ $searchbox-height: 50px; @@
         }
         .social-icon-row {
-          width: 225px;
+          width: 270px;
         }
         > div {
@@ Expand Down @@