[Design] Table variations

[babsdenney]

Description

We have added the borderless table and the mobile stack table Figma but are missing some of the table variations that USWDS offers.

Create designs for table variations and update the example library with the new table examples.

Table variations to add for both desktop and mobile:

• Striped table
• Scrollable table

Also to include - You can see in the comments below @josephrlee has added a use case to include a option of adding components within the cells.

Details

• Table in VADS Component library (Figma)
• Table in VADS
• Table in USWDS

Tasks

• [ ] Create table variations for both mobile and desktop
• [ ] Add options to include custom components inside the table cell
• [ ] Review designs with PO and DST designers
• [ ] Publish and update the table variations in the design system example library
• [ ] Review designs with developers and accessibility specialist
• [ ] Review designs with DST members (Carol can help schedule this)
• [ ] Address any comments from reviews, if necessary
• [ ] Comment on this ticket with any accessibility considerations engineers may need to know
• [ ] Comment on this ticket with content specifications (e.g. labels and error messages)
• [ ] Comment on this ticket with a link to the designs and post in DST Slack channel

Acceptance Criteria

• [ ] Component design is complete and has been reviewed
• [ ] Accessibility and development considerations have been added to this ticket, if necessary
• [ ] Content specifications have been added to this ticket, if necessary
• [ ] Link to design has been added to this ticket and shared in Slack

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @babsdenney @danbrady @LWWright7

[josephrlee]

Hi @babsdenney! I was working on a table for the debt portal, and I have one feature request for the table cell. It'd be great to be able to use a custom component inside of it besides just text, as you can with many of the other vads components.

For context, here's a screenshot of what I'm trying to do in my version of the table:

[babsdenney]

@josephrlee That is great feature to add to the table. We can include that work here. Thank you for letting us know. 🥇

[caw310]

@josephrlee Your suggestion would be a feature request. You may want to submit an experimental design request.

cc: @humancompanion-usds

[danbrady]

@babsdenney @LWWright7 Table updates are ready for review. Thanks!

[babsdenney]

@danbrady This looks great! Very thorough examples and like the at you used a VADS component to show the steps in the process. Great work!