✨ Browse jobs page - Update pool cards - Ribbons for area of selection

[vd1992]

✨ Feature

Update the cards on the browse jobs page with a new ribbon to show the area of selection

🕵️ Details

Styling changes

Two new fields to account for Area of selection -> pick one enum Employee selection limitations -> checklist, multiple options

All changes to the cards other than the ribbons are out of scope for this work

QUESTION @gobyrne If multiple selection limitations are picked, how does it render them? Like say, at-level and departmental? @vd1992 good catch, Josh provided that combination in the job ad, but missed it in the ribbons. Can we decide what is easiest and just go with that? Basically we should be stacking the on one more ribbon, but color should still contrast a little

Fields input for reference (not part of this issue)

🎨 Design File

https://www.figma.com/design/1ibVEEPTPTHbjifAgmcoGW/Browse-jobs-(All-users)?node-id=25-5033&t=6lES0Y8uXmZdXK0C-0

🧑‍🎨 Designer

Josh, but Gray while he's away

📸 Screenshot

✅ Acceptance Criteria

A set of assumptions which, when tested, verify that the feature was properly implemented.

• [ ] New ribbons on job card for area of selection display in all combinations
• [ ] Design review with Gray

[mnigh]

✨ Feature

Update the cards on the browse jobs page

@vd1992 Does this mean that we are creating a new component in addition to the existing PoolCard component since the PoolCard component is also referenced in the ExecutiveHomePage component? If so, what is the name of the new component?

https://github.com/GCTC-NTGC/gc-digital-talent/blob/62c3329139429bb4c2c8500532506884e8fe4f86/apps/web/src/pages/Home/ExecutiveHomePage/ExecutiveHomePage.tsx#L122

[vd1992]

Not sure, if the exec page should be touched

[mnigh]

The verb preview means "to see beforehand, specifically: to view or to show in advance of public presentation". The skills are public and available at the time the card is rendered. Is there a reason not to use the words show and hide in the way other Accordion component reference make use of the Accordion.Trigger copy?

@NienkeBr, I'm not sure if you were involved in writing this copy, but would you be able to weigh in?

Screenshots

Proposed design

Accordion that uses show and hide

[NienkeBr]

@NienkeBr, I'm not sure if you were involved in writing this copy, but would you be able to weigh in?

Hi, no I wasn't involved here, but I agree with you, also prefer show/hide. Also not sure of the added value of including the number of skills? I would write "Show required and optional skills" and "Hide required and optional skills".

[gobyrne]

@mnigh do not update the cards beyond just the ribbons. Sorry for the confusion.

[JoshBeveridge]

The word "preview" was used because the action doesn't provide 100% of the information (skills only, not definition, levels).

Ribbon combinations can already be found in the Figma file: