feat(component): add expandable rows

[jorgemoya]

What?

Add expandable rows functionality to Worksheet.

Why?

Per the feature request.

I did, however, move the buttons to their own column to handle keyboard navigation properly. I created a ToggleEditor component which isn't really an "Editor", but keeps it together with all the other components that render items inside the cells. This enabled me to listen to keyboard events succesfully.

Screenshots/Screen Recordings

Testing/Proof

Unit tests and locally.

[eugene-polev]

I'd like to propose several changes from the design perspective:

1. Change + and - icons to "chevron right" and "chevron down" accordingly
2. Make the first column narrower to hug the action icon for collapse/expand
3. Remove the border between the first column with collapse/expand action and the column with the name
4. Use white background for the header row (grey one creates not a very smooth transition between table header and page background - see in Figma)
5. Use a larger indent for expanded rows instead of background color (the same issue as with the header + this pattern is not scalable for cases with more than one hierarchical level)

Figma file

[jorgemoya]

Great feedback @eugene-polev. To maintain scope of this PR, I have updated the icons and the column size, but we should move the rest of the planned changes to a separate PR. This will allow us to be certain of all the changes needed and to schedule time for those changes.

[bc-jennlindeman]

Thanks @eugene-polev and @jorgemoya. I'm going to pass this PR since you're going to address his other feedback in another one.

[bc-jennlindeman]

Currently requesting access to product-design assignment.

[chanceaclark]

Few comments but looks really good! Great job on this.

[chanceaclark]

Instead of testing for length here, could we check for visibility of fields in the table/worksheet?

[jorgemoya]

Isn't querying and found a test that something was visible? Are you suggesting I test each row? Any guidance on this?

[chanceaclark]

Not sure this will work, but maybe something like this?

expect(screen.queryByRole('row', { name: /shoes name one/i })).not.toBeInTheDocument();

I'm mostly thinking of this part of RTL's documentation: https://testing-library.com/docs/guide-disappearance

[jorgemoya]

I inherit now from the row.

[jorgemoya]

Isn't querying and found a test that something was visible? Are you suggesting I test each row? Any guidance on this?