Build Design: Topic page template

cds-snc / design-gc-conception

MIT License

4 stars 0 forks source link

Build Design: Topic page template #430

Open adorayi opened 1 year ago

adorayi commented 1 year ago

Reference template

Definition of done :

[ ] Comparison with official policy, if case for deviation follow decision process
[ ] Design Different screen sizes
[ ] Write draft of design guidance
[ ] Handoff design guidance to content design
[ ] Update requirement doc as needed
[ ] Update Figma version
[ ] Name for page templates doc is updated
[ ] Templates are shared in ds-design-dev channel
[ ] Templates are reviewed by designers
[ ] EN template is marked Ready for dev
[ ] FR template is ready for merge

Acceptance criteria

[ ] The template meets all functional requirements specified in requirements doc.

Deliverables

[ ] Proposal guidance handed off to content
[ ] Requirement doc updated with final component decisions
[ ] Figma files not merge to main ready for merge
[ ] Update component decisions ard archive (should always be applicable)-
[ ] EN template in Figma
[ ] FR template in Figma

Dev impact

Yes - Needs HTML equivalent

RavinaSamaroo commented 1 month ago

The GC design system Figma has this template already that we can use: https://www.figma.com/design/TodbPq5LF1G6l1E3Kx2qPP/GC-Design-Library?node-id=824-10202&t=b67gOinRD51Cq95E-0

realdylanzheng commented 1 month ago

@adorayi Does GCDS intend to include and replicate aspects of the template that utilize components that GCDS hasn't designed or implemented? For example section title, image, social media links etc

realdylanzheng commented 1 month ago

@adorayi we may also need to do work to standardize how we present mock or placeholder content within a template. Canada.ca (DTO) uses Lorem ipsum in their template examples whereas GCweb uses a combination of placeholder notation and proto-content.

adorayi commented 1 month ago

Keep lorem ipsum for now Re: section title, image, social media links etc. let's solve for them in Figma as sub components, we could do some research to see if these would be useful as full fledged components.

ClementineHahn commented 1 week ago

@realdylanzheng can you tell me if this breakdown of the card could work ? @SmartMouthWords as design lead I would need your review also

realdylanzheng commented 5 days ago

@ClementineHahn "Update Figma version" contradicts "ready for merge" (but not merged), screenreader testing is more effectively conducted on a coded template

realdylanzheng commented 5 days ago

There are styling differences between the reference template and the template produced using GCDS components, that result in a distinct look and feel. Some differences include:

Link font size
Link text weight
p font size
section background colour