[component index] design refinement and spec

[aagonzales]

Remaining tasks:

• define filters and sorting to include in MVP.
• Quick audit on where kits are on the PAL sites
• Create final spec.
• Create component images

[aagonzales]

Design spec

Deliverables:

• Sketch file: https://ibm.box.com/s/gwxmambgzbwk31uakytq27s2zz1zei66 (page "Final" has final designs)
• Audit: Kit audit is a page with in the Sketch file. Conclusion: no consistency across pal kits in kit location or kit structure.
• Data: talk to @jillianhowarth for latest content.
• Component images: TBD work still needed to create asset

File includes:

• Responsive break points
• Filtering behavior
• Scrolling behavior
• Card spec

Responsive behavior

See Sketch file for higher fidelity

Scrolling behavior

Sketch file has behavior at all breakpoints.

1. Start state
   

2. Begin scrolling
   

3. Search and sort tool bar sticks
   

4. Filters scroll independent once they stick
   

Filtering behavior

Large break points

• Filter exist in a right panel as checkbox lists.
• Select filters appear as purple tags in the sticky header bar beside sort

Smaller break points

• Filters combine into one long multi-select filter
• note: I have a design for categories in the dropdown if we think this is possible.

Sorting behavior

Card spec

OUTDATED! , follow new spec here #1266 (comment)

Original card spec

States

Framework icons

Structure:

[mjabbink]

Sweet

[aagonzales]

Updates

Updates are based on the user feedback sessions and feasibility concerns. Responsive behaviors and other interactions have largely stayed same as list above in the previous comment.

1. Remove status from cards, filter and sort.
   • Status is applied inconsistently across PAL sites and need a cross system agreed status before adding.
   • For the first round of community components they will all be "production ready." Only things that have design and code will be added for the initial mvp.
2. Filter content changes:
   • Remove component type for now, may add back in future when categories become more clear, intuitive.
   • Change "Source" to "Availability"
3. Card structure and content updates. New cards structured as follows:
   

[kimberlyandersson]

@aagonzales This looks fantastic. Do you see any way of IBM business partners like Rocket getting access to these components for use in building IBM products?

[aagonzales]

@kimberlyandersson because these are community owned it will depend on if the teams who make them open source them or not. I know some orgs do have open source components so business partners could use those.

[vpicone]

Wondering if we want to use the same inline dropdown solution as the icon library rather than having the whole page width for the dropdown? At least on desktop screen sizes. Either way, I think the dropdown is slightly smaller than the search at present.

vs.

[aagonzales]

@vpicone we talked about it, in fact it started that way but in the icon library search and the dropdown are related. In the component index they are two separate functions that aren't associated. It was also causing weird hierarchy issue with the filters as well.

We'll also be using the sort bar to show the filtered tags so it wont be completely wasted space.

[joshblack]

Hey @aagonzales! 👋

Going through the Zenhub pipelines and wanted to confirm if this was still in-progress or if we should move to another pipeline? 👀