v2.8.9

Key Takeaways DOM update

For tracking purposes, the .expander element has been changed back to an anchor tag. Consequently, the nested "AI Policy" link was necessarily relocated outside, just above the hr element. The description text remains adjacent to the "Key Takeaways" header text and visible when unexpanded. The AI Policy link is now only visible when expanded. This update was discussed and approved by design and the SEO team.

Updated expander element:
<a class="expander" onclick="this.classList.toggle('open');"></a>

Updated summary/description DOM with link removal:
<p class="summary">AI generated summary reviewed by our newsroom.</p>

AI Policy link DOM to be placed above hr element:
<p><a href="#">Read our AI Policy.</a></p>

Please see updated HTML file for full DOM structure.

Related Jira ticket.

Full Changelog: v2.8.8...v2.8.9

v2.8.8

Trending Vertical Video Button Styling

Utilizing the .vertical-video class on a .button element will now include the new styles.

Related Jira ticket with design visual based on Figma mock.

v2.8.7

Sticky leaderboard ad close button updates

The close button element was updated in the DOM to be a sibling of the zone so that it persists after page load and doesn't get cleaned out. As a result, the following styling modifications were necessitated:

• Positioning for the #zoneContainer:has(.sticky-leaderboard) and #sticky_ad_close elements
• Background color added around close button in case of overlap with ad unit

Pull Request: Sticky leaderboard ad close button - updated styles by @gabrielakhanna in #47

Full Changelog: v2.8.6...v2.8.7

v2.8.6

Viafoura styles update + MCC logo asset update

• Viafoura vendor styling removed from codebase with exception of button styles
• McClatchy Media logo assets added to style guide as PNG assets

Full Changelog: v2.8.5...v2.8.6

v2.8.5

Key Takeaways Update

We are now including the AI Policy link after the paragraph text in the Key Takeaways element.

• A few CSS updates were made to accommodate the new anchor tag, including an updated media query width and other formatting adjustments.
• The DOM has also been modified so that the link isn't nested within another anchor tag - the .expander is now a div element. Full changelog below.

Updated DOM structure:

<div class="ai-summary-wrapper">
  <div class="ai-summary">
    <div class="expander" onclick="this.classList.toggle('open');">
      <div class="grid">
        <div class="ai-summary-header">
          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none"><title>Key Takeaways</title>
            <path d="M9.59473 2.63611C9.46289 2.68591 9.375 2.81189 9.375 2.95251C9.375 3.09314 9.46289 3.21912 9.59473 3.26892L11.25 3.89001L11.8711 5.54529C11.9209 5.67712 12.0469 5.76501 12.1875 5.76501C12.3281 5.76501 12.4541 5.67712 12.5039 5.54529L13.125 3.89001L14.7803 3.26892C14.9121 3.21912 15 3.09314 15 2.95251C15 2.81189 14.9121 2.68591 14.7803 2.63611L13.125 2.01501L12.5039 0.359741C12.4541 0.227905 12.3281 0.140015 12.1875 0.140015C12.0469 0.140015 11.9209 0.227905 11.8711 0.359741L11.25 2.01501L9.59473 2.63611ZM6.00879 2.28748C5.93262 2.12048 5.76562 2.01501 5.58398 2.01501C5.40234 2.01501 5.23535 2.12048 5.15918 2.28748L3.6123 5.62732L0.272461 7.17126C0.105469 7.24744 0 7.41443 0 7.599C0 7.78357 0.105469 7.94763 0.272461 8.0238L3.61523 9.56775L5.15625 12.9076C5.23242 13.0746 5.39941 13.1801 5.58105 13.1801C5.7627 13.1801 5.92969 13.0746 6.00586 12.9076L7.54981 9.56482L10.8926 8.02087C11.0596 7.9447 11.165 7.77771 11.165 7.59607C11.165 7.41443 11.0596 7.24744 10.8926 7.17126L7.55273 5.63025L6.00879 2.28748ZM11.25 11.39L9.59473 12.0111C9.46289 12.0609 9.375 12.1869 9.375 12.3275C9.375 12.4681 9.46289 12.5941 9.59473 12.6439L11.25 13.265L11.8711 14.9203C11.9209 15.0521 12.0469 15.14 12.1875 15.14C12.3281 15.14 12.4541 15.0521 12.5039 14.9203L13.125 13.265L14.7803 12.6439C14.9121 12.5941 15 12.4681 15 12.3275C15 12.1869 14.9121 12.0609 14.7803 12.0111L13.125 11.39L12.5039 9.73474C12.4541 9.60291 12.3281 9.51501 12.1875 9.51501C12.0469 9.51501 11.9209 9.60291 11.8711 9.73474L11.25 11.39Z" fill="url(#paint0_linear_11194_6459)"/>
            <defs>
            <linearGradient id="paint0_linear_11194_6459" x1="7.5" y1="0.140015" x2="7.5" y2="15.14" gradientUnits="userSpaceOnUse">
            <stop stop-color="#0FB7FF"/>
            <stop offset="1" stop-color="#BD56FF"/>
            </linearGradient>
            </defs>
            </svg>
            <div class="h3">Key Takeaways</div>
          </div>
          <p class="summary">AI generated summary reviewed by our newsroom. <a href="#">Read our AI Policy.</a></p>
      </div>
    </div>
    <hr>
    <ul>
      <li>Kevin Wang, a New College professor, was fired under Florida's SB 846 law.</li>
      <li>Wang, a Chinese asylum seeker, taught for nearly two years before his dismissal.</li>
      <li>His firing sparked student outrage and concerns about academic freedom.</li>
    </ul>
  </div>
</div>

Design - Figma file

What's Changed

• SDS 2.8.5 by @gabrielakhanna in #45

Full Changelog: v2.8.4...v2.8.5

v2.8.4

Sticky Leaderboard Ad Zone and Breaking News Banner close button update

New close button updated from "x" character to an svg based on this font. This release includes the necessary styles that were previously implemented by the Performance Team for the PM sticky leaderboard ad and new DOM example + CSS clean up for the breaking news banner to keep the icon consistent.

Close Button SVG:
<svg xmlns="http://www.w3.org/2000/svg" height="13.19px" viewBox="5.41 5.41 13.18 13.18" width="13.19px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>

New Breaking News Banner DOM structure:

<div class="breaking-news-organism" id="primary-content">
  <div class="breaking-news-macro">
    <h3 class="h4">
      <span class="breaking-title">BREAKING NEWS:  </span> 
      <a href="https://alpha.montrealgazette.com/site-services/Newsletters/montreal-sports-newsletter/article54991.html"> Cricket is treated as the celebration in India </a>
    </h3>  
    <div class="close-breaking-news">
      <svg xmlns="http://www.w3.org/2000/svg" height="13.19px" viewBox="5.41 5.41 13.18 13.18" width="13.19px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>
    </div>
  </div>
</div>

Jira ticket: PE-559

What's Changed

• PE-559 ad close button by @gabrielakhanna in #44

Full Changelog: v2.8.3...v2.8.4

v2.8.3

SDS 2.8.3

Breaking News Banner spacing fix
Removed 20px left padding on close button and introduced gap property to maintain space between the text and the button while ensuring the button does not get displaced on smaller width screens.
Related Jira ticket: FE-862

What's Changed

• fix gap/spacing on breaking news banner by @gabrielakhanna in #43

Full Changelog: v2.8.2...v2.8.3

v2.8.2

SDS 2.8.2

This PR is the precursor to the 2.8.2 release. It includes 3 updates, including the following:

1. Breaking News Banner - updated styles implemented as the long term solution to existing modifications in WPS (where existing styles are to be removed), which includes media query for the banner to be a single line tall on desktop and two lines with an ellipsis on mobile. This design solution helps mediate CLS issues.
   Related Jira ticket: FE-862

2. Viafoura "following" and "unfollow" button position fix - styles included in fixes.css to overwrite the vendor code that absolutely positioned the text element with a class addition.
   Related Jira ticket: PE-542

3. Sticky Leaderboard Ad for PM - the top value has been removed from positioning so that it appears relative to other elements. Testing with the promo banner demonstrated that the top value was obsolete.
   Related Jira ticket: FE-876

v2.8.1

SDS v2.8.1

Merging in all patch release updates from 2.7.2 to 2.7.7 into 2.8.0 so that the new footer feature has the diverged updates. Also included in a small footer styling update that adds a light gray border at the top. Included minor releases below:

• 2.7.2 - Misc. bug fixes and updates
• 2.7.3 - Breaking News Banner rollback
• 2.7.4 - Author Card Fix and Breaking News Banner changes
• 2.7.5 - Author Card design updates and CUE header fix
• 2.7.6 - Key Takeaways (previously AI Summaries) feature
• 2.7.7 - Native ad zone background color update, .sticky-leaderboard styling, and Key Takeaways minor design update

Note: Front End is still testing the 2.7 patches, so we may need an additional 2.8 patch to address potential necessary changes, but it's important to get this 2.8.1 release out so that development isn't blocked on testing the footer.

v2.7.7

SDS v2.7.7

Updates:

• Change native ad zone background color to paper color for native ads only. Jira ticket: PTAM-37
• Add .sticky-leaderboard ad zone styles for Post Media. This includes 8px of vertical padding and a 767px media query breakpoint for mobile where the expected ad height changes from 90px to 50px tall. Jira ticket: FE-876
• Align Key Takeaways expander element item to baseline so that the carat appears aligned with the "Key Takeaways" text instead of the center. Jira ticket: FE-882