feat: Add 'Allainces' to careers section

[petesfrench]

Done

• Manually append 'alliances' to department list
• Make department cards span 3 cols and hide departments with no vacancies
• Build 'Alliances' careers landing page
• Add 'Alliances' to meganav
• Remove _canonical_navigation.html as it doesn't appear to be used anywhere

QA

• Open /careers
• See it matches the new figma design
• Click 'Alliances and Channels', see it takes you to the dedicated careers page. ie. /careers/alliances
• See it matches the figma design
• Check the content matches the copydoc
• Check the other careers pages were unaffected
• Open the 'Careers' meganav tab, check it contains 'Alliances', see copydoc

Issue / Card

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

[webteam-app]

Demo

Jenkins

demos.haus

[petesfrench]

@Sophie-32 There are a couple inconsistencies with the naming of 'alliance and channels' and 'alliance & channels' in the doc/figma. As these are pulled from the back end, we will have to choose one to use

[mattea-turic]

Thanks @petesfrench ! Comments are below:

---

Landing page:

For the hero:

• On screens <620px, could you add a <br> after "source" – so that "So are we. Be where...." starts on the second line

For "Departments:

• Are we missing legal here?
• For the alliances card, I see the other icons are svgs, so I've added it here. Hopefully it'll resemble the other ones more closely. Please lmk if there's a format/dimensions that'll work better, as the .png has been stretched so not sure if I should be providing this in a differently sized container – or none at all?
• On smaller screens, are we able to use muted hrs between the departments, or is this something that shouldn't be changed? cc: @Sophie-32

For "Our Mission":

• Are we able to add a hr above the "our work culture" button like in the figma? Again, I understand we don't own the page, so maybe this is also out of scope. cc: @Sophie-32

For "Working here":

• Could you apply deep padding here pls?

---

/alliances-and-channels

For the hero (ty for seeing Lyubo's comment and removing padding top btw):

• Button seems to have too much padding
  
  

For "features roles":

• On screens 620px-1035px, pls make sure the hrs above the last two links ("explore all..." and "career explorer") span the full width of their column

For "working here – projects you'll work on":

• The small-caps header and the h2 underneath are cutting into each other; could this be addressed pls?
  
  
• Could we use 2 rem rather than 4 rem for bottom margin of this section, before the image?
  
• Could the image be added back in for smaller screens?

For "success stories we drive":

• Could the items be wrapped in only a shallow?
  
  
• and could you apply deep padding bottom for this section?

[petesfrench]

@mattea-turic Thanks for the review, a couple questions/notes:

• Are we missing legal here?
  There was a note in the figma to hide roles with 0 vacancies

• For the alliances card, I see the other icons are svgs, so I've added it here. Hopefully it'll resemble the other ones more closely. Please lmk if there's a format/dimensions that'll work better, as the .png has been stretched so not sure if I should be providing this in a differently sized container – or none at all?

The logo looks a little off when the background isn't white, as one hand has a white background. Is this ok?

• The small-caps header and the h2 underneath are cutting into each other; could this be addressed pls?
  
• Could we use 2 rem rather than 4 rem for bottom margin of this section, before the image?
• Could the image be added back in for smaller screens?

As this section uses a re-usable template, these changes will be applied to all careers pages. Is that ok?

[mattea-turic]

• Are we missing legal here?
  There was a note in the figma to hide roles with 0 vacancies

Ah makes sense, thanks!

The logo looks a little off when the background isn't white, as one hand has a white background. Is this ok?

I added another one with a paper background. Would it be possible to switch between the two depending on breakpoint?

• The small-caps header and the h2 underneath are cutting into each other; could this be addressed pls?
  
• Could we use 2 rem rather than 4 rem for bottom margin of this section, before the image?
• Could the image be added back in for smaller screens?

As this section uses a re-usable template, these changes will be applied to all careers pages. Is that ok?

• For the first point, I'd say yes that's fine when we've got a small caps heading and h2 stacked like in this page.
• If this 2 rem will only be applied when it's for a text section before an image, then that's fine. Otherwise, I'd leave it be.
• It makes sense to me to have images visible on all screen sizes, so I'm happy for this to be applied globally

[petesfrench]

@mattea-turic

I added another one with a paper background. Would it be possible to switch between the two depending on breakpoint?

It is possible, but not practical. Could you remove the background entirely on it?

[mattea-turic]

@petesfrench

It is possible, but not practical. Could you remove the background entirely on it?

If you take a look at the svg, I'm able to do it for the main part of the hand, but the fingers are designed in a way that make it look off if I'm to make the line adjustments for it to w/o the bg:

It's small, so might not be obvious to most people but I worry about it looking sloppy if someone were to inspect it deeper; but let's try it anyways:
https://assets.ubuntu.com/v1/46a968ed-no%20bg%20hand%20&%20fingers-new.svg

[Sophie-32]

• for mobile, we need to stick to whatever we're doing on the other pages for now, to keep it consistent
• yes to adding hr above 'our work culture'

[mattea-turic]

LGTM, thanks @petesfrench !