feat: /data/spark/what-is-spark build

[mtruj013]

Done

• Built page as per doc and design
• Drive by:
  • Bumped Vanilla and Sass versions (sass bump needed for vanilla)

QA

• View the site locally in your web browser at: https://canonical-com-1409.demos.haus/data/spark/what-is-spark
• Check against doc and design
• I qa'd the Vanilla bump and didn't notice anything broken, but please also have a look just in case

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-15058

[webteam-app]

Demo

Jenkins

demos.haus

[eliman11]

Thanks! A couple comments from me:

• Add alt text for Apache Spark logo in the hero
• Could you please add the legal copy at the bottom of the page? Sorry I forgot to paste it into the copydoc earlier!
• "Learn more about OpenSearch" changed into "Learn more about Spark" in the last section

[lyubomir-popov]

Mostly loks good, couple of small things I noticed:

• p-section--shallow needed around this h2:

• could you please set the width or height of this logo so on mobile it is same size as on desktop?

• I want to sggest an aspect ratio for medium/small screens, but the lazyload div is currently not supported. (If @jmuzina figures out a work around, maybe we can add it). Or we can add it now and it will s tart workign once we fix this bug on the vanilla side:

[jmuzina]

We have found that the .lazyloaded div generated by the image template causes the aspect ratio to not be respected. In the short term this can be fixed by applying display: contents to the lazyloaded div:

  .p-image-container,
  [class^='p-image-container--'] {
    // If there is a child element that is not the image, don't let it affect the layout
    & > *:not(.p-image-container__image) {
      display: contents;
    }
}

This will be upstreamed to Vanilla shortly

[mtruj013]

@eliman11 about the alt text for the logo hero, can I ask why we're including it? We usually consider these decorative images and the recommended practice is to leave an empty alt text for these so that screen readers will ignore it

[mtruj013]

@eliman11 @lyubomir-popov thanks both, I've adressed most of your comments if you could take another look?

Unfortunately the image container snippet is causing some weirdness with the image template. I've added the p-image-container--3-2-on-medium class to the three images regardless so that once the fix is on Vanilla it'll be automatically applied. (cc @jmuzina )

[jmuzina]

Unfortunately the image container snippet is causing some weirdness with the image template. I've added the p-image-container--3-2-on-medium class to the three images regardless so that once the fix is on Vanilla it'll be automatically applied. (cc @jmuzina )

The fix for this has been released in Vanilla version 4.18.1!

[lyubomir-popov]

the mages still havew the 2-3 aspect ratio rather than 3-2 on medium/small

[mtruj013]

@lyubomir-popov the fix doesn't currently work with the image template. Fix incoming soon though

[eliman11]

Thanks, looks good to me! Agreed about not including the alt text, thanks for pointing it out.

[petesfrench]

High macro potential detected 👀

[petesfrench]

Looking good! Address the comments and add it to the sitemap and it is good to go