npm - @tacc/core-styles - Versions diffs - 1.0.0 → 2.0.0 - Mend

@tacc/core-styles 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (329) hide show

package/src/lib/_imports/elements/root.css ADDED Viewed

@@ -0,0 +1,41 @@
+/*
+Main Root & Sectioning Root
+Elements that represent the root of a document or document content.
+```
+<html> <body>
+```
+Reference:
+- [MDN: HTML element reference: Main root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Main_root)
+- [MDN: HTML element reference: Sectioning root](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Sectioning_root)
+Styleguide Elements.MainSectioningRoots
+*/
+html {
+  /* Set base font but support user-defined browser font size */
+  /* SEE: https://snook.ca/archives/html_and_css/font-size-with-rem */
+  font-size: 62.5%; /* 16px */
+}
+/* The webpage must be at least as tall as the viewport */
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  /* To avoid negative whitespace at right on horz scroll on tiny screen */
+  min-width: 290px; /* developer-decided value */
+  /* To overwrite Bootstrap */
+  color: var(--global-color-primary--x-dark);
+  font-family: var(--global-font-family--sans);
+  font-size: var(--global-font-size--small);
+  line-height: 1.4;
+}

package/src/lib/_imports/elements/sticky-footer.css ADDED Viewed

@@ -0,0 +1,6 @@
+/* To make a footer stick to bottom of page */
+/* https://css-tricks.com/a-clever-sticky-footer-technique/ */
+body > main + footer {
+  position: sticky;
+  top: 100vh;
+}

package/src/lib/_imports/elements/table/config.yml CHANGED Viewed

@@ -1,5 +1,3 @@
-context:
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
 variants:
   - name: default
     label: Basic
@@ -39,7 +37,129 @@ variants:
                 text: View Details
               - is-button: true
                 text: Delete
-  - name: paragraph
+  - name: cms
+    label: Basic (CMS)
+    context:
+      shouldLoadCMS: true
+      data:
+        cols:
+          - ID
+          - Name
+          - Size
+          - Time
+          - Actions
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: no-header
+    context:
+      data:
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: no-header-cms
+    label: No Header (CMS)
+    context:
+      shouldLoadCMS: true
+      data:
+        rows:
+          - id: n234as
+            name-link: apple-sauce
+            custom-1: 0.5 KB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 56l810
+            name-link: milk-shake-032
+            custom-1: 300.0 KB
+            time: 03/22/2021 05:23:01
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+          - id: 3r56xc
+            name-link: white-candy-5
+            custom-1: 1.5 MB
+            time: 12/01/2019 11:04:19
+            acts:
+              - is-link: true
+                text: View Details
+              - is-button: true
+                text: Delete
+  - name: via-paragraphs
+    context:
+      data:
+        rows:
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+  - name: via-paragraphs-cms
+    view: 'table--via-paragraphs.hbs'
+    label: Via Paragraphs (CMS)
+    context:
+      shouldLoadCMS: true
+      data:
+        rows:
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+          - paragraph: true
+  - name: with-paragraphs
     context:
       data:
         cols:

package/src/lib/_imports/elements/table/table--via-paragraphs.hbs ADDED Viewed

@@ -0,0 +1,22 @@
+<h2>Fake Table</h2>
+{{> @s-paragraph-table class="s-paragraph-table" data=data }}
+<br />
+<br />
+<h2>Real Table</h2>
+<table class="{{#if class }}{{ class }}{{/if}}">
+  <tbody>
+  {{#each data.rows}}
+    <tr>
+      {{#if paragraph}}
+      <td title="{{> @text-of-one-paragraph-short }}">
+        <p>{{> @text-of-one-paragraph-short }}</p>
+      </td>
+      {{/if}}
+    </tr>
+  {{/each}}
+  </tbody>
+</table>

package/src/lib/_imports/elements/table/table--via-paragraphs.readme.md ADDED Viewed

@@ -0,0 +1,17 @@
+A [table]({{path './table' }}) that uses [paragraphs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) instead of cells.
+> **ⓘ Notice**
+>
+> - Text will not truncate. It will wrap.
+> - Only a single column is supported.
+> **⁉ Help**
+>
+> Should text truncate? Ask designers.
+<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 CHANGED Viewed

@@ -1,21 +1,29 @@
-<table {{#if data.has-table }}class="has-table"{{/if}}>
+<table class="{{#if table }}has-table{{/if}} {{#if class }}{{ class }}{{/if}}">
   {{#if caption }}
   <caption>{{{ caption }}}</catpion>
   {{/if}}
+  {{#if data.cols }}
   <thead>
     <tr>
       {{#each data.cols}}<th>{{ this }}</th>{{/each}}
     </tr>
   </thead>
+  {{/if}}
   <tbody>
+  {{#each data.key-value-pairs}}
+    <tr>
+      {{#if key}}<th class="c-data-list__key">{{ key }}</th>{{/if}}
+      {{#if value}}<td class="c-data-list__value">{{ value }}</td>{{/if}}
+    </tr>
+  {{/each}}
   {{#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 title="{{> @text-of-one-paragraph-short }}">
+        <p>{{> @text-of-one-paragraph-short }}</p>
       </td>
       {{/if}}
       {{#if sentence}}

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

@@ -1,23 +1,36 @@
 @import url("../tools/x-truncate.css");
-table {
+@import url("./table.selectors.css");
+table,
+:--s-paragraph-table {
+  --font-size: var(--global-font-size--small, 12px);
+  --cell-pad-vert: 0.6667em; /* 8px if font-size is 12px */
+  --cell-pad-horz: 1.3333em; /* 16px if font-size is 12px */
+  --cell-line-height: 1.1;
   /* 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);
+  font-size: var(--font-size);
+}
+:--s-paragraph-table {
+  display: table; /* to mimic shrink-wrap width of real table */
 }
-/* To add border to bottom of all rows */
+/* To add top border to tbody (unless nested) */
 /* 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);
+tbody > tr:first-child > :is(td, th),
+:--s-paragraph-table {
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
 }
-tr:not(:last-of-type) > :is(td, th) {
+/* To add bottom border to rows */
+tr:not(:last-of-type) > :is(td, th),
+:--s-paragraph-table p:not(:last-of-type) {
   border-bottom-width: var(--global-border-width--normal);
   border-bottom-style: solid;
   border-bottom-color: var(--global-color-primary--light);
@@ -29,32 +42,30 @@ tr:not(:last-of-type) > :is(td, th) {
 tr:nth-child(odd) :is(th, td) {
   background: var(--global-color-background--app);
 }
-tr:nth-child(even) :is(th, td) {
+tr:nth-child(even) :is(th, td),
+:--s-paragraph-table p:nth-child(even) {
   background: var(--global-color-primary--x-light);
 }
-:is(td, th) {
+:is(td, th),
+:--s-paragraph-table p {
   vertical-align: top;
-  padding-block: 8px;
-  padding-inline: 16px;
+  padding-block: var(--cell-pad-vert);
+  padding-inline: var(--cell-pad-horz);
   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);
+/* IMPORTANT: More than for consistency; `table--nested.css` requires this */
+:is(td, th),
+:--s-paragraph-table p {
+  line-height: var(--cell-line-height);
 }
 /* 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 {
@@ -70,13 +81,13 @@ tbody > tr > th {
 }
 caption {
-  font-size: var(--global-font-size--small);
+  font-size: var(--font-size);
   text-align: unset; /* undo Bootstrap _reboot.css */
   caption-side: top; /* override Bootstrap */
   /* To mimic table cell */
-  padding-block: 8px;
-  padding-inline: 16px;
+  padding-block: var(--cell-pad-vert);
+  padding-inline: var(--cell-pad-horz);
 }
@@ -95,19 +106,24 @@ td li:not(:last-of-type) {
 }
 /* To override browser */
-td button {
+td button,
+:--s-paragraph-table p button {
   /* To match font-size of table cell text and links */
   font-size: inherit;
 }
 /* To override `site.css` or browser */
-table p {
+table p,
+:--s-paragraph-table p {
   margin-top: 0;
 }
-table p:last-child {
+table p:last-child,
+:--s-paragraph-table p {
   margin-bottom: 0;
 }
+/* To truncate paragraphs */
+/* FAQ: Except for :--s-paragraph-table's whose <p> tags we permit to wrap */
 table p {
   @extend %x-truncate--many-lines;
 }

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

@@ -31,22 +31,33 @@
   td.has-table { padding: 0; }
 }
-/* To replace parent table columns above with nested table columns */
+/* To replace any 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 */
+thead + tbody tr table {
+  --offset-distance: calc(
+    var(--cell-pad-vert) * 2
+    +
+    var(--cell-line-height) * var(--font-size)
+    +
+    var(--global-border-width--normal)
+  );
+  --offset: calc( var(--offset-distance) * -1 );
   transform: translateY(var(--offset));
   margin-bottom: var(--offset);
 }
 /* FAQ: Hides any parent table head underneath nested table head */
-tr:first-of-type thead {
+thead + tbody 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 {
+thead + tbody tr:not(:first-of-type) thead {
   visibility: hidden;
 }
+/* FAQ: Re-colors border of all successive nested rows (to match parent row) */
+thead + tbody tr:not(:first-of-type) tbody :is(td,th) {
+  border-color: var(--global-color-primary--light);
+}
 /* To reduce inline padding
    at start and end of nested table

package/src/lib/_imports/elements/table.cms.css ADDED Viewed

@@ -0,0 +1,22 @@
+@import url("./table.selectors.css");
+/* To add bottom border to table */
+table,
+:--s-paragraph-table {
+    border-bottom: var(--global-border-width--thick) solid var(--global-color-primary--dark);
+    font-size: var(--global-font-size--medium);
+    line-height: 1.4;
+}
+/* To thicken top border of headless table */
+tbody:not(thead + tbody) > tr:first-child > :is(td,th),
+:--s-paragraph-table {
+  border-top-width: var(--global-border-width--thick);
+}
+/* To match row height in design (~40px) */
+:is(td, th),
+:--s-paragraph-table p {
+    padding-block: 10px;
+    line-height: unset;
+}

package/src/lib/_imports/elements/table.selectors.css ADDED Viewed

@@ -0,0 +1,3 @@
+@custom-selector :--s-paragraph-table
+    .s-paragraph-table,
+    .paragraph-table;

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

@@ -1,8 +1,10 @@
-status: ready
+status: prototype
 order: 1
 context:
-  shouldLoadBootstrap: true # not yet tested without Bootstrap
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: >-
+    not yet tested without Bootstrap
+    (known dependencies: <caption> font color)
   data:
     cols:
       - ID

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

@@ -12,7 +12,6 @@ div {
 /* To illustrate that scrollbar is for the table (not the window) */
 body {
-  display: grid;
-  align-items: center;
-  justify-items: center;
+  display: flex;
+  flex-wrap: wrap;
 }

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

@@ -1,3 +1,16 @@
-<div class="o-fixed-header-table">
-  {{> @table data=data caption="Header stays pinned top top of container on scroll." }}
-</div>
+<dl>
+  <dt>Class Directly on Table</dt>
+  <dd>
+    <div>
+      {{> @table data=data caption="Header stays pinned top top of container on scroll." class="o-fixed-header-table" }}
+    </div>
+  </dd>
+</dl>
+<dl>
+  <dt>Class on Table Wrapper</dt>
+  <dd>
+    <div class="o-fixed-header-table">
+      {{> @table data=data caption="Header stays pinned top top of container on scroll." }}
+    </div>
+  </dd>
+</dl>

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

@@ -1,5 +1,9 @@
 A [table]({{path './table' }}) with its header pinned during vertical scroll.
+> **⚠️ Important**
+>
+> The `<div>` wrapper is **not** required. Do not add unless your use case demands one.
 > **?&#x20DD; Explanation**
 >
 > [You can’t position: sticky; a `<thead>`. Nor a `<tr>`. But you can sticky a `<th>`…][source]

package/src/lib/_imports/objects/o-grid.css CHANGED Viewed

@@ -47,6 +47,13 @@ Styleguide Objects.Grid
   max-width: 100%;
 }
+/* Avoid figure size shrinking */
+/* HELP: Why does this happen to figure only inside a gid? */
+/* SEE: components/c-card--frontera/c-card--frontera.hbs */
+.o-grid figure {
+  width: unset; /* undo html-elements.css */
+}
 /* Hide content that does exceed cell size */
 .o-grid > * {
   overflow: hidden;

package/src/lib/_imports/objects/o-offset-content.css CHANGED Viewed

@@ -9,19 +9,15 @@ Styleguide Objects.OffsetContent
 */
 @import url("../tools/media-queries.css");
-@custom-selector :--o-offset-content
-  .o-offset-content--left,
-  .o-offset-content--right;
-:--o-offset-content {
+.o-offset-content--left,
+.o-offset-content--right {
   	--offset-distance: min(15vw, 410px);
 	--buffer: calc( 2 * var(--global-space--grid-gap) );
+    max-width: 85%;
 }
+/* To merely float content on narrow screens */
 @media only screen and (--medium-and-above) {
 	.o-offset-content--right {
 		float: right;
@@ -35,15 +31,18 @@ Styleguide Objects.OffsetContent
 	}
 	.o-offset-content--left + .o-offset-content--left { clear: left; }
-  .figure:is(:--o-offset-content) .figure-caption {
-    padding-right: 125px;
-  }
+    .figure:is(
+	  .o-offset-content--left,
+	  .o-offset-content--right
+	) .figure-caption {
+        padding-right: 125px;
+    }
 }
-@media only screen and (--medium-and-above) and (--max-wide-and-below) {
-  :--o-offset-content {
-    max-width: 560px;
-  }
-  /* Apply negative margin only when using offset value */
+/* To offset content only on wide screens */
+/* HELP: Do designers want to prevent offset on mega-wide screens */
+/* FAQ: M.S. did on texascale.org but that may have been only for that site */
+@media only screen and (--medium-and-above)/* and (--max-wide-and-below) */{
 	.o-offset-content--right {
 		margin-right: calc( var(--offset-distance) * -1);
 	}

package/src/lib/_imports/objects/o-section/_o-section--usage.hbs ADDED Viewed

	@@ -0,0 +1 @@
1	+ To highlight a row of content with extra spacing.

package/src/lib/_imports/objects/o-section/config.yml ADDED Viewed

@@ -0,0 +1,18 @@
+context:
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: this pattern is not intended nor expected for use beyond CMS
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: so we can test .container.o-section combo
+variants:
+  - name: style-light
+    label: (Style) Light
+    context:
+      modifier: style-light
+  - name: style-muted
+    label: (Style) Muted
+    context:
+      modifier: style-muted
+  - name: style-dark
+    label: (Style) Dark
+    context:
+      modifier: style-dark

package/src/lib/_imports/objects/o-section/demo.css ADDED Viewed

@@ -0,0 +1,8 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+/* To add bottom space that will actually show up demo */
+/* https://github.com/TACC/Core-Styles/blob/823b7b9/src/lib/_imports/elements/html-elements.css#L61-L63 */
+body > main {
+  margin-bottom: unset;
+  padding-bottom: var(--global-space--section-gap);
+}

package/src/lib/_imports/objects/o-section/o-section.hbs ADDED Viewed

@@ -0,0 +1,57 @@
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section</h2>
+    {{render '@o-section--usage'}}
+</section>
+<hr />
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (First of a Pair)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (Second of a Pair)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<hr />
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (before Muted Section)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<section class="o-section o-section--style-muted">
+    <h2>Muted Section</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (after Muted Section)</h2>
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+</section>
+<hr />
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (with Nested Sections)</h2>
+    <p>⚠️ These are not used in any design. They are minimally supported only to prevent layouts from breaking if accidentally used.</p>
+    <div class="o-section o-section--style-dark">
+        <h3>(Nested) Dark Section</h3>
+        <p>{{> @text-of-one-paragraph-short }}</p>
+    </div>
+    <div class="o-section o-section--style-muted">
+        <h3>(Nested) Muted Section</h3>
+        <p>{{> @text-of-one-paragraph-short }}</p>
+    </div>
+    <div class="o-section o-section--style-light">
+        <h3>(Nested) Light Section</h3>
+        <p>{{> @text-of-one-paragraph-short }}</p>
+    </div>
+</section>
+<hr />
+<section class="o-section o-section--{{this._self.name}}">
+    <h2>Section (at Bottom of Page)</h2>
+    <p>At the bottom of a CMS page: a <strong>light</strong> Section will stand out above the Footer, a <strong>muted</strong> Section will stand out above the Footer, a <strong>dark</strong> Section will visually merge with the Footer.</p>
+</section>