task/tup-534 Adds in media query for tables (#275)

* task/tup-534 Adds in media query for tables

* adds in data attributes to each col. Isn't right just yet.

Specifically not working for nested tables just yet. Also, need to look at paragraph tables with no headers - padding adjusts for headers even when there are none...

* removes number from data-col attributes. ie. data-col-(number).

* Task/tup 534  auto get correct data col value (#277)

* test: get correct data-col value (INCOMPLETE)

* feat: get correct col names & values (INCOMPLETE)

* feat: get correct col names & values (SUCCESS)

* chore: clean up new helper getColFromRow

* refactor: less chars in hbs, more logic in config

* fix: remove cruft change

* chore: remove console.log

* fix: missing cols breaks getColFromRow

* chore: simplify previous fix

* added in all styles. Need to check on borders. worked on fractal.

* made changes for nested tables

* Adjusted borders (at least for now) on all tables.

* includes all basic adjustments

accomplishes 1 - 3 on design dev mtg notes.(will attach comments).

* removes border-top:none. Temporarily removes table truncation.

* tier one. adjusting and cleaning up all borders.

 we can adjust from here when/if needed. But for now, they are mimiced from desktop to mobile

* tier 2. Nested Tablesssss.

* tier 3. Table cleanup after subsequent meeting with design

Awaiting design for feedback on nested tables.

* making review changes

* reverting weird formatting changes

* updating to match more reviews

removing commented out code in fractal. commenting out correct table truncation

* docs: revert mismatched comment

* Removal of trump tables. Removal of truncated css.

* fix: restore s-paragraph-table (removed in 0a9b0b6)

This table is a Trump (Scope) pattern used by CMS.

It is loaded by table to keep code DRY, but it should appear in Trumps section of demo.

I welcome discussion of different solutions. This is not the only such case like this.

P.S. The s-truncated-table was removed in 0a9b0b6 also. That's expected. No clients use it. If they want truncation, they can use Core-Styles truncation or do it themselves.

* nested table color change

* add in styles to match design

* style: remove excess spaces

* fix: restore erroneously deleted code

* fix: remove unused styles

peer-programmed with T.G. to confirm

Note: one style W.B. thought should go was retained because it does soemthing:

  table.has-table {
    & tr :is(td,th):last-child {
      border-bottom: unset;
    }
  }

* make adjustments to resolve comments

* fix: restore html-elements.cms.css in docs css

---------

Co-authored-by: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Co-authored-by: Wesley Bomar <wbomar@tacc.utexas.edu>

fractal.config.js

@@ -98,6 +98,14 @@ engine.handlebars.registerHelper('eq', function(a, b) {
 engine.handlebars.registerHelper('has', function(array, item) {
   return array.includes(item);
 });
+engine.handlebars.registerHelper('getColFromRow', function(row, val, cols) {
+  if ( ! cols ) return '';
+
+  const index = Object.entries(row).findIndex(el => el[1] === val);
+  const col = cols[index];
+
+  return col;
+});
 
 // Export
 module.exports = fractal;

src/lib/_imports/core-styles.cms.css

@@ -52,4 +52,3 @@
 @import url("./trumps/s-drop-cap.css");
 @import url("./trumps/s-footer.css");
 @import url("./trumps/s-footer--thick.css");
-@import url("./trumps/s-truncated-table.css");

src/lib/_imports/core-styles.portal.css

@@ -16,7 +16,6 @@
 /* ELEMENTS */
 @import url("./elements/root--portal.css");
 @import url("./elements/sticky-footer.css");
-@import url("./elements/table.portal.css");
 
 /* OBJECTS */
 @import url("./objects/o-flex-item-table-wrap.css");
@@ -34,4 +33,3 @@
 @import url("./trumps/s-footer.css");
 @import url("./trumps/s-footer--thin.css");
 @import url("./trumps/s-form-page.css");
-@import url("./trumps/s-truncated-table.css");