@tacc/core-styles 0.10.0 → 1.0.0

package/src/lib/_imports/elements/table/table--paragraph.readme.md

@@ -0,0 +1,12 @@
+A [table]({{path './table' }}) with cells that have [paragraphs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p).
+
+> **ⓘ Notice**
+>
+> Text will truncate at N lines; see [truncate mixin]({{path './x-truncate' }}) to control line count.
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/elements/table/table.hbs

@@ -0,0 +1,52 @@
+<table {{#if data.has-table }}class="has-table"{{/if}}>
+  {{#if caption }}
+  <caption>{{{ caption }}}</catpion>
+  {{/if}}
+  <thead>
+    <tr>
+      {{#each data.cols}}<th>{{ this }}</th>{{/each}}
+    </tr>
+  </thead>
+  <tbody>
+  {{#each data.rows}}
+    <tr>
+      {{#if id}}<th>{{ id }}</th>{{/if}}
+      {{#if name}}<th>{{ name }}</th>{{/if}}
+      {{#if name-link}}<th><a href="#">{{ name-link }}</a></th>{{/if}}
+      {{#if paragraph}}
+      <td title="{{> @text-of-one-paragraph }}">
+        <p>{{> @text-of-one-paragraph }}</p>
+      </td>
+      {{/if}}
+      {{#if sentence}}
+      <td title="{{> @text-of-one-sentence }}">
+        <span>{{> @text-of-one-sentence }}</span>
+      </td>
+      {{/if}}
+      {{#if custom-1}}<td>{{{ custom-1 }}}</td>{{/if}}
+      {{#if custom-2}}<td>{{{ custom-2 }}}</td>{{/if}}
+      {{#if custom-3}}<td>{{{ custom-3 }}}</td>{{/if}}
+      {{#if time}}<td><time>{{ time }}</time></td>{{/if}}
+      {{#if acts}}
+      <td>
+        <ul>
+        {{#each acts}}
+          {{#if is-link }}<li><a href="#">{{ text }}</a></li>{{/if}}
+          {{#if is-button}}<li>
+            <button class="c-button c-button--as-link">
+              {{ text }}
+            </button>
+          </li>{{/if}}
+        {{/each}}
+        </ul>
+      </td>
+      {{/if}}
+      {{#if table}}
+      <td class="has-table">
+        {{> @table data=table }}
+      </td>
+      {{/if}}
+    </tr>
+  {{/each}}
+  </tbody>
+</table>

package/src/lib/_imports/elements/table--basic.css

@@ -0,0 +1,113 @@
+@import url("../tools/x-truncate.css");
+
+table {
+  /* To prevent borders from being hidden */
+  /* NOTE: Specifically, the right border of pinned columns (narrow windows) */
+  border-collapse: separate; /* overwrite Bootstrap */
+  border-spacing: 0;
+
+  font-family: var(--global-font-family--sans--portal);
+  font-size: var(--global-font-size--small);
+}
+
+/* To add border to bottom of all rows */
+/* FAQ: Added to cell, not row, because `border-collapse: separate` */
+thead tr :is(td, th) {
+  border-bottom-width: var(--global-border-width--normal);
+  border-bottom-style: solid;
+  border-bottom-color: var(--global-color-primary--x-dark);
+}
+tr:not(:last-of-type) > :is(td, th) {
+  border-bottom-width: var(--global-border-width--normal);
+  border-bottom-style: solid;
+  border-bottom-color: var(--global-color-primary--light);
+}
+
+/* To alternate table row colors (by coloring cells, not rows) */
+/* FAQ: Colored cells hide sibling column cells scrolled underneath */
+/* NOTE: On narrow screens, first column is pinned and others scroll under it */
+tr:nth-child(odd) :is(th, td) {
+  background: var(--global-color-background--app);
+}
+tr:nth-child(even) :is(th, td) {
+  background: var(--global-color-primary--x-light);
+}
+
+:is(td, th) {
+  vertical-align: top;
+  padding-block: 8px;
+  padding-inline: 16px;
+
+  color: var(--global-color-primary--dark);
+}
+/* To ensure <thead> height matches between browsers */
+:is(td, th) {
+  /* FAQ: Line-height > font-size accomodates ascender & descender letters */
+  /* HACK: Units for line-height are discouraged */
+  /* NOTE: If line-height unitless, Firefox & Chrome give different height */
+  /* IMPORTANT: More than for consistency; `table--nested.css` requires this */
+  line-height: var(--global-font-size--medium);
+}
+/* To pin first column to left of table even during scroll */
+/* WARNING: Design has not reviewed this (but not designed responsive table) */
+:is(th, td):first-child {
+  position: sticky;
+  left: 0;
+
+  border-right: var(--global-border-width--normal) solid var(--global-color-primary--light);
+}
+
+th {
+  color: var(--global-color-primary--x-dark);
+
+  text-align: inherit; /* copied from Bootstrap 4.0.0 */
+}
+thead > tr > th {
+  font-weight: var(--bold);
+}
+tbody > tr > th {
+  font-weight: var(--normal);
+}
+
+caption {
+  font-size: var(--global-font-size--small);
+  text-align: unset; /* undo Bootstrap _reboot.css */
+  caption-side: top; /* override Bootstrap */
+
+  /* To mimic table cell */
+  padding-block: 8px;
+  padding-inline: 16px;
+}
+
+
+
+/* Cell Content */
+
+/* To override browser */
+td ul {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: 0;
+}
+td li:not(:last-of-type) {
+  /* To match line-height of other cells, but still allow space between items */
+  margin-bottom: 0.5em;
+}
+
+/* To override browser */
+td button {
+  /* To match font-size of table cell text and links */
+  font-size: inherit;
+}
+
+/* To override `site.css` or browser */
+table p {
+  margin-top: 0;
+}
+table p:last-child {
+  margin-bottom: 0;
+}
+
+table p {
+  @extend %x-truncate--many-lines;
+}

package/src/lib/_imports/elements/table--nested.css

@@ -0,0 +1,61 @@
+@import url('../tools/x-truncate.css');
+
+@supports selector(:has(table)) {
+  /* To ensure matching row height of nested table and parent table */
+  table:has(table) :is(td, th) { white-space: nowrap; }
+
+  /* To move even row background to nested table only */
+  table:has(table) tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-background--app);
+  }
+  td:has(table) tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-primary--x-light);
+  }
+
+  /* To align nested table cells with parent table cells */
+  td:has(table) { padding: 0; }
+}
+@supports not selector(:has(table)) {
+  /* To ensure matching row height of nested table and parent table */
+  table.has-table :is(td, th) { white-space: nowrap; }
+
+  /* To move even row background to nested table only */
+  table.has-table tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-background--app);
+  }
+  td.has-table tr:nth-child(even) :is(th, td) {
+    background: var(--global-color-primary--x-light);
+  }
+
+  /* To align nested table cells with parent table cells */
+  td.has-table { padding: 0; }
+}
+
+/* To replace parent table columns above with nested table columns */
+/* FAQ: Pulls nested table up by the height of the parent table head */
+tr table {
+  --offset: calc(-1 * 33px); /* WARNING: manually calculated */
+
+  transform: translateY(var(--offset));
+  margin-bottom: var(--offset);
+}
+/* FAQ: Hides any parent table head underneath nested table head */
+tr:first-of-type thead {
+  background: var(--global-color-background--app);
+}
+/* FAQ: Hides all successive (thus redundant) nested table heads */
+tr:not(:first-of-type) thead {
+  visibility: hidden;
+}
+
+/* To reduce inline padding
+   at start and end of nested table
+   unless at start or end of parent table */
+td:not(:first-child) th:first-child,
+td:not(:first-child) td:first-child {
+  padding-inline-start: 8px;
+}
+td:not(:last-child) th:last-child,
+td:not(:last-child) td:last-child {
+  padding-inline-end: 8px;
+}

package/src/lib/_imports/elements/table.css

@@ -0,0 +1,2 @@
+@import url('./table--basic.css');
+@import url('./table--nested.css');

package/src/lib/_imports/generics/fonts.css

@@ -6,9 +6,9 @@ Load standard fonts for a TACC website.
 Usage:
   ```
   .something {
-    // BentonSans-MediumItalic
+    // BentonSans-RegularItalic
     font-family: 'Benton Sans';
-    font-weight: 500;
+    font-weight: 400;
     font-style: italic;
   }
   ```
@@ -28,12 +28,11 @@ Styleguide Generics.Fonts
   font-style: normal;
   font-display: swap;
 }
-
 @font-face {
   font-family: 'Benton Sans';
-  src: url("../../fonts/BentonSans-Bold.otf") format("opentype");
-  font-weight: 700;
-  font-style: normal;
+  src: url("../../fonts/BentonSans-RegularItalic.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
   font-display: swap;
 }
 
@@ -44,7 +43,6 @@ Styleguide Generics.Fonts
   font-style: normal;
   font-display: swap;
 }
-
 @font-face {
   font-family: 'Benton Sans';
   src: url("../../fonts/BentonSans-MediumItalic.otf") format("opentype");
@@ -52,3 +50,19 @@ Styleguide Generics.Fonts
   font-style: italic;
   font-display: swap;
 }
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Bold.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Benton Sans';
+  src: url("../../fonts/BentonSans-Black.otf") format("opentype");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}

package/src/lib/_imports/objects/o-fixed-header-table/config.yml

@@ -0,0 +1,60 @@
+status: ready
+order: 1
+context:
+  shouldLoadBootstrap: true # not yet tested without Bootstrap
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  data:
+    cols:
+      - ID
+      - Name
+      - Size
+      - Time
+    rows:
+      - id: n234as
+        name: apple-sauce
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 56l810
+        name: milk-shake-032
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 3r56xc
+        name: white-candy-5
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19
+      - id: 7ysnw3
+        name: butter-balls
+        custom-1: 0.5 KB
+        time: 09/11/2010 10:54:09
+      - id: 20ksdf
+        name: lemon-cookies-30
+        custom-1: 250.0 MB
+        time: 04/20/2020 15:03:10
+      - id: 7uys9e
+        name: purple-turnips-6
+        custom-1: 10.5 GB
+        time: 10/31/2017 19:59:41
+      - id: 98eeui
+        name: nightmare-treats
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 54rr0s
+        name: toffe-pimples-12
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 12dsds
+        name: cartesian-dumpling
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19
+      - id: 2gesee
+        name: crunchy-noodles
+        custom-1: 0.5 KB
+        time: 09/11/2010 10:54:09
+      - id: wr435e
+        name: ripe-mango-220
+        custom-1: 250.0 MB
+        time: 04/20/2020 15:03:10
+      - id: 76rgd3
+        name: purple-turnips-6
+        custom-1: 10.5 GB
+        time: 10/31/2017 19:59:41

package/src/lib/_imports/objects/o-fixed-header-table/demo.css

@@ -0,0 +1,18 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To manage scrollbars to illustrate feature */
+div {
+  /* To force render of vertical scrollbar */
+  max-height: 300px;
+  overflow-y: scroll;
+
+  /* To avoid duplicate vertical scrollbars */
+  height: 100%;
+}
+
+/* To illustrate that scrollbar is for the table (not the window) */
+body {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}

package/src/lib/_imports/objects/o-fixed-header-table/o-fixed-header-table.hbs

@@ -0,0 +1,3 @@
+<div class="o-fixed-header-table">
+  {{> @table data=data caption="Header stays pinned top top of container on scroll." }}
+</div>

package/src/lib/_imports/objects/o-fixed-header-table/readme.md

@@ -0,0 +1,18 @@
+A [table]({{path './table' }}) with its header pinned during vertical scroll.
+
+> **?⃝ Explanation**
+>
+> [You can’t position: sticky; a `<thead>`. Nor a `<tr>`. But you can sticky a `<th>`…][source]
+
+> **ⓘ Notice**
+>
+> This class can be used on a table **or** a table wrapper.
+
+[source]: https://css-tricks.com/position-sticky-and-table-headers/ "CSS Tricks: Position Sticky & Table Headers"
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-fixed-header-table.css

@@ -1,30 +1,4 @@
-/*
-Fixed Header Table
-
-A table with a header that does not move, and a body that scrolls.
-
-Markup:
-<table class="o-fixed-header-table">
-    <thead>
-      <tr>
-        <th>A</th>
-        <th>B</th>
-        <th>C</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>A</td>
-        <td>B</td>
-        <td>C</td>
-      </tr>
-    </thead>
-</table>
-
-Styleguide Objects.FixedHeaderTable
-*/
-/* SEE: https://css-tricks.com/position-sticky-and-table-headers/ */
-.o-fixed-header-table th {
+.o-fixed-header-table thead :is(td, th) {
   position: sticky;
   top: 0;
 

package/src/lib/_imports/objects/o-flex-item-table-wrap/config.yml

@@ -0,0 +1,27 @@
+label: (Portal) O Flex Item Table Wrap
+order: 2
+status: deprecated
+context:
+  data:
+    cols:
+      - ID
+      - Name
+      - Description
+      - Size
+      - Time
+    rows:
+      - id: n234as
+        name: apple-sauce
+        sentence: true
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 56l810
+        name: milk-shake-032
+        sentence: true
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 3r56xc
+        name: white-candy-5
+        sentence: true
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19

package/src/lib/_imports/objects/o-flex-item-table-wrap/demo.css

@@ -0,0 +1,7 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* Example */
+section {
+  display: flex;
+  flex-direction: column;
+}

package/src/lib/_imports/objects/o-flex-item-table-wrap/o-flex-item-table-wrap.hbs

@@ -0,0 +1,7 @@
+<section>
+  <header>Section Title</header>
+  <p>Section/Table Description</p>
+  <div class="o-flex-item-table-wrap">
+    {{> @table data=data }}
+  </div>
+</section>

package/src/lib/_imports/objects/o-flex-item-table-wrap/readme.md

@@ -0,0 +1,22 @@
+Make [table]({{path './table' }}) behave like a flex item, for a specific CEPv2 Portal use case.
+
+> **?⃝ Explanation**
+>
+> A `<table>` can **not** be a flex item. The trick is to [wrap the table in a `<div>`][source].
+
+> **ⓘ Notice**
+>
+> This class can **only** be used on a table wrapper.
+
+> **⚠️ Important**
+>
+> This class was used by CEPv2 Portal for a specific use case. It is not generic. Use or reference [`.o-flexible-table-wrap`]({{path './o-flexible-table-wrap' }}) for generic use cases.
+
+[source]: https://stackoverflow.com/a/41421700/11817077 "Stack Overflow: Why does flex-box work with a div, but not a table?"
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/objects/o-flex-item-table-wrap.css

@@ -1,37 +1,3 @@
-/*
-Flex-Item Table-Wrap
-
-A wrapper to allow a table to behave like a flex item (because a `<table>` can __not__ be a flex item).
-
-Reference:
-- [Why does flex-box work with a div, but not a table?](https://stackoverflow.com/q/41421512/11817077))
-
-Markup:
-<section style="display: flex; flex-direction: column">
-  <header>Section Title</header>
-  <p>Section/Table Description</p>
-  <div class="o-flex-item-table-wrap">
-    <table>
-        <thead>
-          <tr>
-            <th>A</th>
-            <th>B</th>
-            <th>C</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>A</td>
-            <td>B</td>
-            <td>C</td>
-          </tr>
-        </thead>
-    </table>
-  </div>
-</section>
-
-Styleguide Objects.FlexItemTableWrap
-*/
 /* Constrain stretched <table>'s position and dimension */
 .o-flex-item-table-wrap {
   /* Ensure wrapper has dimensions (which will be remaining space in parent) */

package/src/lib/_imports/objects/o-float-content.css

@@ -8,7 +8,6 @@ Content that should be:
 Styleguide Objects.FloatContent
 */
 @import url("../tools/media-queries.css");
-@import url("../settings/space.css");
 
 
 

package/src/lib/_imports/objects/o-section.css

@@ -32,7 +32,6 @@ Markup: o-section.html
 
 Styleguide Objects.Section
 */
-@import url("../tools/media-queries.css");
 @import url("../tools/x-layout.css");
 @import url("../tools/x-fake-border.css");
 

package/src/lib/_imports/objects/o-site.css

@@ -13,6 +13,7 @@ Styleguide Objects.Site
 /* IDEA: Use or add grid solution */
 /* https://github.com/DesignSafe-CI/portal/blob/215915c/designsafe/static/styles/main.css#L935 */
 
+/* WARNING: Some clients have their own implementation of this pattern */
 /*
 .o-site {
   display: grid;

package/src/lib/_imports/objects/o-table-wrap/config.yml

@@ -0,0 +1,82 @@
+order: 1
+variants:
+  - name: flexible-horz
+    label: Flexible, Horz.
+  - name: flexible-vert
+    label: Flexible, Vert.
+  - name: overflow-hidden
+    label: Overflow Hidden
+  - name: overflow-scroll
+    label: Overflow Scroll
+  - name: overflow-scroll-extra
+    label: Overflow Scroll (Extra)
+    context:
+      data:
+        cols:
+          - ID
+          - Name
+          # - Description
+          - Size
+          - Time
+        rows:
+          - id: n234as
+            name: apple-sauce
+            # sentence: true
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+          - id: 56l810
+            name: milk-shake-032
+            # sentence: true
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+          - id: 3r56xc
+            name: white-candy-5
+            # sentence: true
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+          - id: 7ysnw3
+            name: butter-balls
+            # sentence: true
+            custom-1: 0.5 KB
+            time: 09/11/2010 10:54:09
+          - id: 20ksdf
+            name: lemon-cookies-30
+            # sentence: true
+            custom-1: 250.0 MB
+            time: 04/20/2020 15:03:10
+context:
+  shouldLoadBootstrap: true # not yet tested without Bootstrap
+  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  data:
+    cols:
+      - ID
+      - Name
+      - Description
+      - Size
+      - Time
+    rows:
+      - id: n234as
+        name: apple-sauce
+        sentence: true
+        custom-1: 0.5 KB
+        time: 12/01/2019 11:04:19
+      - id: 56l810
+        name: milk-shake-032
+        sentence: true
+        custom-1: 300.0 KB
+        time: 03/22/2021 05:23:01
+      - id: 3r56xc
+        name: white-candy-5
+        sentence: true
+        custom-1: 1.5 MB
+        time: 12/01/2019 11:04:19
+      - id: 7ysnw3
+        name: butter-balls
+        sentence: true
+        custom-1: 0.5 KB
+        time: 09/11/2010 10:54:09
+      - id: 20ksdf
+        name: lemon-cookies-30
+        sentence: true
+        custom-1: 250.0 MB
+        time: 04/20/2020 15:03:10

package/src/lib/_imports/objects/o-table-wrap/demo.basic.css

@@ -0,0 +1,18 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* IMPORTANT: See `example.….css` code to learn how to adapt this pattern. */
+
+/* To force overflow */
+.o-table-wrap--overflow-hidden:not(.demo-advanced *),
+.o-table-wrap--overflow-scroll:not(.demo-advanced *) {
+  width: 400px;
+  height: 175px;
+}
+
+/* To illustrate table behavior is because of flex item wrapper (not window) */
+body {
+  display: flex;
+  gap: 25px;
+  padding-inline: 25px;
+}
+body > * { flex-basis: 33%; }