AEMFDEV-113 Bullet Spacing

.github/pull_request_template.md

@@ -5,5 +5,5 @@ Fix #<gh-issue-id>
 Please update the [block inventory](https://adobe.sharepoint.com/:w:/r/sites/HelixProjects/_layouts/15/Doc.aspx?sourcedoc=%7B3DCA0821-E21F-4AFE-94E6-6EA820D45D96%7D&file=block-inventory.docx&action=default&mobileredirect=true) with any relevant block changes as a result of this PR.
 
 Test URLs:
-- Before: https://main--theplayers--hlxsites.hlx.page/
-- After: https://<branch>--theplayers--hlxsites.hlx.page/
+- Before: https://main--pga-presidents-cup--hlxsites.hlx.page/
+- After: https://<branch>--pga-presidents-cup--hlxsites.hlx.page/

README.md

@@ -1,9 +1,9 @@
-# Your Project's Title...
-Your project's description...
+# presidentscup.com Helix Site
 
 ## Environments
-- Preview: https://main--theplayers--hlxsites.hlx.page/
-- Live: https://main--theplayers--hlxsites.hlx.live/
+- Preview: https://main--pga-presidents-cup--hlxsites.hlx.page/
+- Live: https://main--pga-presidents-cup--hlxsites.hlx.live/
+- Production: https://www.presidentscup.com
 
 ## Installation
 

blocks/carousel/carousel.css

@@ -1,13 +1,13 @@
 main .carousel-container {
-  --carousel-btn-primary-color: var(--color-tan-95);
-  --carousel-btn-secondary-color: var(--color-blue-95);
+  --carousel-btn-primary-color: var(--color-gold-95);
+  --carousel-btn-secondary-color: var(--color-black-95);
   --carousel-btn-secondary-hover-color: var(--color-white);
-  --carousel-course-bg-color: var(--color-blue);
-  --carousel-course-bg-color-transparent: var(--color-blue-95);
+  --carousel-course-bg-color: var(--color-black);
+  --carousel-course-bg-color-transparent: var(--color-black-95);
   --carousel-course-stats-outline-color: var(--color-white);
-  --carousel-course-stats-border-color: var(--color-blue);
+  --carousel-course-stats-border-color: var(--color-black);
   --carousel-course-stats-title-color: var(--color-gray);
-  --carousel-cource-btn-color: var(--color-blue);
+  --carousel-cource-btn-color: var(--color-black);
   --carousel-cource-btn-selected-color: var(--color-white);
 
   padding: 0;

blocks/carousel/carousel.js

@@ -67,7 +67,6 @@ async function insertCourseFeedSlides(block) {
     for (const hole of json.courses[0].holes) {
       const damSrc = `${damPrefix}/${code}${perm}/${courseId}/holes/hole${hole.holeNum}.jpg`;
       const holeJpg = `${cloudinaryPrefix},w_1290/v1/pgatour/courses/${code}${perm}/${courseId}/holes/hole${hole.holeNum}.jpg`;
-      const holePng = `${cloudinaryPrefix},w_150/holes_${config.year || new Date().getFullYear()}_${code}_${perm}_${courseId}_overhead_full_${hole.holeNum}.png`;
       // eslint-disable-next-line no-await-in-loop
       const metaresp = await fetchCors(`${damSrc}/jcr:content/metadata.json`);
       // eslint-disable-next-line no-await-in-loop
@@ -103,9 +102,6 @@ async function insertCourseFeedSlides(block) {
               <h3>PAR ${hole.par}, ${hole.yards} Yards</h3>
             </div>
             <p class="course-hole">
-              <picture>
-                <img src="${holePng}" alt="${metaTitle}" />
-              </picture>
             </p>
             <p>${metaDesc}</p>
           </div>

blocks/course/course.css

@@ -1,8 +1,7 @@
 main .course-container {
-  --course-background-color: var(--color-blue);
-  --course-background-transparent-color: var(--color-blue-95);
+  --course-background-color: var(--color-black);
+  --course-background-transparent-color: var(--color-black-95);
   --course-border-color: var(--color-white);
-  --course-buttons-background-color: var(--color-black-95);
   --course-button-color: var(--color-gray);
   --course-button-color-selected: var(--color-white);
 

blocks/course/course.js

@@ -31,14 +31,14 @@ async function loadStats(block) {
     holes.forEach((hole, i) => {
       const stats = allStats[i];
       const par = hole.querySelector('.course-hole-par');
-      if (par && stats.par) par.textContent = `Par ${stats.par},`;
+      if (par && stats.par) par.textContent = `${placeholders.par} ${stats.par},`;
       const yards = hole.querySelector('.course-hole-yards');
-      if (yards && stats.yards) yards.textContent = `${stats.yards} Yards`;
+      if (yards && stats.yards) yards.textContent = `${stats.yards} ${placeholders.yards}`;
       const title = hole.querySelector('.course-hole-stats h3');
-      if (title) title.textContent = `${json.year || ''} Statistics`.trim();
+      if (title) title.textContent = `${json.year || ''} ${placeholders.statistics}`.trim();
       const avgEl = hole.querySelector('.course-hole-avg');
       const avg = stats.stats.find((stat) => stat.id === '43108').eV2;
-      if (avgEl && avg) avgEl.innerHTML = `<span>${avg}</span> Scoring Avg`;
+      if (avgEl && avg) avgEl.innerHTML = `<span>${avg}</span> ${placeholders.scoringAvg}`;
       const table = hole.querySelector('.course-hole-chart tbody');
       if (table) {
         const holeStats = stats.stats.filter((stat) => stat.id !== '43108');
@@ -48,11 +48,11 @@ async function loadStats(block) {
           return parseInt(a, 10) + parseInt(b.eV2, 10);
         });
         const tableStats = [
-          { stat: 'Eagle', value: findStatPercent('43106', holeStats, statsDivisor) },
-          { stat: 'Birdie', value: findStatPercent('43107', holeStats, statsDivisor) },
-          { stat: 'Par', value: findStatPercent('43523', holeStats, statsDivisor) },
-          { stat: 'Bogey', value: findStatPercent('41184', holeStats, statsDivisor) },
-          { stat: '2+ Bogey', value: findStatPercent('43520', holeStats, statsDivisor) },
+          { stat: placeholders.eagle, value: findStatPercent('43106', holeStats, statsDivisor) },
+          { stat: placeholders.birdie, value: findStatPercent('43107', holeStats, statsDivisor) },
+          { stat: placeholders.par, value: findStatPercent('43523', holeStats, statsDivisor) },
+          { stat: placeholders.bogey, value: findStatPercent('41184', holeStats, statsDivisor) },
+          { stat: placeholders['bogey-2'], value: findStatPercent('43520', holeStats, statsDivisor) },
         ];
         tableStats.forEach((s) => table.append(buildStatRow(s.stat, s.value)));
       }

blocks/field/field.css

@@ -1,6 +1,6 @@
 main .field {
-  --field-text-color: var(--color-blue);
-  --field-highlight-color: var(--color-tan);
+  --field-text-color: var(--color-gray-dark);
+  --field-highlight-color: var(--color-gold);
 }
 
 main .field p {

blocks/field/field.js

@@ -84,7 +84,7 @@ export default async function decorate(block) {
         if (latestInitial !== lastInitial) card.setAttribute('data-last', lastInitial);
         latestInitial = lastInitial;
         card.id = player.TournamentPlayerId;
-        card.innerHTML = `<img src="https://pga-tour-res.cloudinary.com/image/upload/c_fill,dpr_2.0,f_auto,q_auto,r_max,g_face:center,d_headshots_default.png,h_190,w_190/headshots_${player.TournamentPlayerId}.png" alt="${player.PlayerFirstName} ${player.PlayerLastName}" />
+        card.innerHTML = `<img src="https://pga-tour-res.cloudinary.com/image/upload/c_fill,dpr_2.0,f_auto,q_auto,r_max,g_face:center,d_headshots_default.png,h_190,w_190/headshots_pcup_${year}_${player.TournamentPlayerId}.png" alt="${player.PlayerFirstName} ${player.PlayerLastName}" />
           <p>${player.PlayerName}</p>`;
         wrapper.append(card);
       });

blocks/footer/footer.css

@@ -1,8 +1,8 @@
 footer {
-  --footer-color: var(--color-blue);
+  --footer-color: var(--color-gray-78);
   --footer-text-color: var(--color-white);
   --footer-ribbon-color: var(--color-white);
-  --footer-ribbon-text-color: var(--color-blue);
+  --footer-ribbon-text-color: var(--color-gray);
   --footer-border-color: var(--color-gray-light);
 
   font-size: var(--body-font-size-xs);
@@ -133,7 +133,7 @@ footer .footer .footer-links img {
   width: auto;
   max-width: 130px;
   height: auto;
-  max-height: 60px;
+  max-height: 40px;
 }
 
 footer .footer .footer-links ul {
@@ -153,7 +153,7 @@ footer .footer .footer-links li {
 @media (min-width: 900px) {
   footer .footer .footer-links {
     display: grid;
-    grid-template-columns: 60px 1fr 130px;
+    grid-template-columns: 65px 1fr 65px;
     align-items: center;
     gap: 0 10px;
     font-size: var(--body-font-size-xs);