Tidy the HPE template library

[SeamusLeonardHPE]

Whats in the scope of work:



MVP:

• Tidy existing pages (fit & finish match component library)


• Remove any ‘patterns’ that have been made into components (pagination)


Suggested steps

• Create brach of Library file
• Import headers & supporting assets from Utility file
• Create example page with similar formatting/spacing to component/parts & seek review.
• Connect with Oliver for any additional assets or visual requirements
• Connect with team to decide on what pages to edit/remove/archive

Secondary tasks & team sessions to discuss and define for follow up work in Q3:

• Define the purpose of the template library:


• Should stickier sheets live here for components? On a single page?


• Ultimate goal is page templates - but how do we evolve to reach that.
• Current experimentation on data-viz - is this still a suitable home.
• Is the library a suitable place for our “alpha” release components for upcoming/wip component releases.

[luketa8]

There seems to be a discrepancy of page background colors:

• Utilities library: Cover page is #F5F5F5 while components page is #EAEAEA
• Components Library: All pages are #E5E5E5
• Template Library: All pages are #F5F5F5

-> On April 18th In Designer's Swarm the team decided to unify all Page backgrounds to #EAEAEA

[luketa8]

Purpose of the Template Library

The Template Library can serve as a repository of pre-designed layouts, wireframes, or starting points for common product design scenarios. While our Guidance site provides documentation and best practices, and our Component Library offers reusable Figma UI elements, a template library can complement these by providing holistic starting points for entire design compositions.

Sticker sheet / Pattern Library

A sticker sheet can serve as a collection of commonly used UI elements that designers can easily copy and paste into their designs. It essentially acts as a repository of frequently used configurations and layouts of components without the need to reconfigure or set them from scratch.

• Are two separate files needed?

[luketa8]

• Updated Figma Branch

• Added comments on pages to be removed/redesigned

• Working on example page Forms

[luketa8]

• Moved Data Viz pages to Data Visualization Library for future development.

[luketa8]

Figma branch cleaned up and ready for review

@SeamusLeonardHPE @oliverHPE

Dependencies for follow-up ticket:

• [ ] Slot component -> to compose Layer templates
• [ ] DataTable component -> to compose templates that consume Data Toolbar + Data Table + Pagination Footer.