Olivero-3093249: Implement tables on Olivero proof of concept.

[proeung]

Olivero-3093249: Implement tables on Olivero proof of concept.

What kind of change does this PR introduce? (Bug fix, feature...)

• Feature
• Add a markup and styling of the table component.
• The table is fully responsive and turns horizontal scroll on narrow breakpoints.

Additional Info

• This PR is missing a markup for the sorting carrot functionality.
• This is what we'll need to account for when we start the Drupal theming work.

[mherchel]

We're actually gonna merge a PostCSS plugin that does the RTL stuff. So don't worry about this.

[proeung]

Good to know!

[proeung]

@mherchel Just pushed out the changes. Can you take a look again?

[mherchel]

Yeah, the grid changes broke the layout in FF. FF handles grid overflows differently. There's a couple more issues.

[mherchel]

[proeung]

@mherchel With the layout issue within FF, may I suggest that instead of having .text-content be the class that wraps all of the elements. We instead set the grid column per tag so that we can easily align the table without to do negative margins or set width that bigger than the wrapper container or have some sort of auto-sizing columns.

[mherchel]

I think that might be impossible. 1) We won't be able to float images (and have text wrap) and 2) We can't even guarantee that people will be using tags.

[proeung]

@mherchel Please see below for the latest changelog made to the PR.

• Adjust the table width for the medium breakpoints.
• Add summary tag
• Add <caption> tag - The look and feel of this element is pending design review - You can follow the discussion here - https://drupal.slack.com/archives/CJT807H7T/p1574093840329500

11/20 - Adjust the look and feel of the table <caption> based on the slack conversation with Jen. See the commit here - f0af226

---

As for the odd right padding issue that was seen last week, I realized that it was caused by the display: block property (see attached). This is needed for the background gradient to align correctly and for the horizontal scroll to work. Depending on the character count that's set the table row, it will expand to the 100% width. Anywho, I'm going to see if there's another solution to this issue, but in the meantime let me know if you have any idea.

[proeung]

@mherchel I've cleaned up the table.css file and added some placeholder content per our slack call. Can you take a look? Thanks!

[proeung]

@mherchel Just added some adjustments to the linear-gradient direction based on the [dir] attribute. Regardless, here's the latest preview that's ready for your review - https://deploy-preview-18--olivero-poc.netlify.com/.

[proeung]

@mherchel When you have a chance, can you take a look at the changes made in this PR? Thanks!

[proeung]

@mherchel I'm going to merge this down to master for now. Please create follow up tickets for issues that you see related to the table. Thanks!