Visual components

[shawnbot]

Here are some components that I'm starting to see a lot and that we could help people figure out:

Tables

We should know how to make them look good, make them behave well on mobile, and endow them with features like a fixed header (for long scrolling tables).

Charts

Basic chart types, a style guide for designing them, and code samples for generating them.

Maps

Having our own map tiles would be great. We could provide some guidance on symbology, color scales, and tips on finding and integrating geographic data (e.g. for making 50-state maps).

[meiqimichelle]

+1

[vipero07]

Just wondering, wouldn't bootstrap, material design lite, or similar style packages cover some of these? Both have a responsive table implementation and both use a grid layout for positioning. Plus tons of developers have used bootstrap before, it would be pretty easy for any newcomer to pickup and help on different projects. Even for those who haven't it has a ton of documentation making implementation pretty simple. The most difficult part would be making a table infinite scroll in either direction, but that could be done using some javascript library like react.js ember or angular to make the components and pull out nonvisible dom tags and put in the soon to be visible ones. Something like this https://github.com/seatgeek/react-infinite

[meiqimichelle]

Hi @vipero07 ! Many of our sites don't use frameworks, and we're always trying to reduce third-party dependencies where we can. We like to keep it simple :) So, we're aiming to have modular components with accessibility/508 built to our team standards ready to use across any of our projects, no matter what framework (or not) they're using.

You're right though — Bootstrap and similar do a really nice job of making it easy to get up and running fast!

[maya]

@shawnbot we started to work on basic tables here: uswds/uswds#249 Having some more features like you mentioned would be cool.

+1 Charts - we heard this being wanted during our research for the pattern library, but it was not a heavily requested enough feature to work on for this round. But we'd be happy to include them.

I think a USA map tile would be super cool. We've also picked our colors for the pattern library so would be neat to use colors from our family.

[shawnbot]

@maya of course I'm thinking that custom elements might be a good way to do the progressive enhancement. E.g.

<table is="awesome-table" sortable="true" fixed-header="true">
</table>

Then the custom element would handle listening for click events on headers (maybe with event delegation, so you could add and remove headers at will) and listen for scroll and resize window events to manage the fixed header.

[maya]

@shawnbot for tables, what were you thinking for "make them behave well on mobile"? Something like Tablesaw by Filament Group? https://github.com/filamentgroup/tablesaw

[shawnbot]

@maya yeah, Tablesaw is sweet. I like that it works declaratively with attributes, rather than having to address each table with jQuery.