@tacc/core-styles 2.37.5 → 2.39.0

package/src/lib/_imports/components/c-show-more/c-show-more.js

@@ -0,0 +1,72 @@
+export const defaults = {
+  elements: document.querySelectorAll(`
+    [class*="js-show-more"]
+  `),
+  options: {
+    lines: 0,
+    targetTag: 'span',
+    shouldToggleResembleLink: false,
+    startIndex: 0,
+  },
+};
+
+/**
+ * Convert elements with js-show-more--* classes into show-more components
+ */
+export function generateMarkup(
+  elements = defaults.elements,
+  options = defaults.options
+) {
+  options = { ...defaults.options, ...options };
+
+  [...elements].forEach((element, index) => {
+    if (element.querySelector('p, div, section, article, aside, nav, header, hgroup, footer, main')) {
+      console.warn(
+        'A "c-show-more" component expects only text and inline elements. Block elements may not truncate correctly. Consider restructuring content to avoid block elements.',
+        element
+      );
+    }
+
+    const wrapper = document.createElement(element.tagName);
+    wrapper.className = element.className;
+    wrapper.classList.add('c-show-more');
+    wrapper.classList.add(`c-show-more--${options.lines <= 1 ? 'one-line' : 'many-lines'}`);
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.className = 'c-show-more__state';
+    checkbox.id = `show-more-${options.startIndex + index}`;
+
+    const target = document.createElement(options.targetTag);
+    target.className = 'c-show-more__target';
+    target.innerHTML = element.innerHTML;
+    if (options.lines) {
+      target.style.setProperty('--lines', options.lines);
+    }
+
+    const toggle = document.createElement('label');
+    toggle.className = 'c-show-more__toggle';
+    toggle.htmlFor = checkbox.id;
+
+    const onText = document.createElement('span');
+    onText.className =
+      `${options.shouldToggleResembleLink ? 'x-link ' : ''}`
+      + 'c-show-more__on-text';
+    onText.textContent = 'Show More';
+
+    const offText = document.createElement('span');
+    offText.className =
+      `${options.shouldToggleResembleLink ? 'x-link ' : ''}`
+      + 'c-show-more__off-text';
+    offText.textContent = 'Show Less';
+
+    toggle.appendChild(onText);
+    toggle.appendChild(offText);
+
+    wrapper.appendChild(checkbox);
+    wrapper.appendChild(target);
+    wrapper.appendChild(toggle);
+
+    element.replaceWith(wrapper);
+  });
+}

package/src/lib/_imports/components/c-show-more/config.yml

@@ -0,0 +1,9 @@
+status: wip
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
+variants:
+  - name: default
+    label: Static Markup
+  - name: generated
+    label: Generated Markup

package/src/lib/_imports/components/c-show-more/readme.md

@@ -0,0 +1,2 @@
+- Will show more text when the user clicks the toggle.
+- Will show less text when the user clicks the toggle again.

package/src/lib/_imports/components/c-show-more.css

@@ -13,6 +13,7 @@ Styleguide: Components.ShowMore
 */
 @import url("../tools/x-truncate.css");
 
+
 /* Truncation */
 
 /* Many Lines */
@@ -26,11 +27,14 @@ Styleguide: Components.ShowMore
 /* One Line */
 .c-show-more--one-line .c-show-more__target {
   @mixin truncate--one-line;
+
+  display: block;
 }
 .c-show-more--one-line .c-show-more__state:checked ~ .c-show-more__target {
   @mixin untruncate--one-line;
 }
 
+
 /* Show More / Show Less */
 
 /* State */
@@ -44,6 +48,7 @@ Styleguide: Components.ShowMore
   display: block;
 }
 
+
 /* Toggle */
 .c-show-more__toggle {
   cursor: pointer;

package/src/lib/_imports/components/cortal.icon/config.yml

@@ -0,0 +1,192 @@
+status: ready
+label: Icon (Cortal)
+context:
+  shouldSkipPattern: false
+  sections:
+    - id: basic
+      title: Basic Icons
+      icons: 
+        - dashboard
+        - data-files
+        - applications
+        - allocations
+        - history
+        - history-reverse
+        - jobs
+        - jobs-history
+        - my-data
+        - calendar
+    - id: status
+      title: Status Icons
+      icons:
+        - approved
+        - pending
+        - denied
+        - approved-boxed
+        - approved-boxed-reverse
+        - approved-reverse
+        - denied-reverse
+        - trophy
+    - id: files
+      title: File Operations
+      icons:
+        - file
+        - add-file
+        - edit-document
+        - document
+        - copy
+        - rename
+        - trash
+        - folder
+        - search-folder
+        - image
+    - id: apps
+      title: Applications
+      icons:
+        - jupyter
+        - matlab
+        - rstudio
+        - namd
+    - id: data
+      title: Data Visualization
+      icons:
+        - bar-graph
+        - pie-graph
+        - pie-graph-open
+        - pie-graph-reverse
+        - visualization
+        - data-processing
+    - id: project
+      title: Project Management
+      icons:
+        - project
+        - add-project
+        - proposal-approved
+        - proposal-denied
+        - proposal-pending
+        - publications
+    - id: system
+      title: System & Tools
+      icons:
+        - gear
+        - monitor
+        - toolbox
+        - code
+        - script
+        - search
+        - browser
+        - new-browser
+        - compass
+        - globe
+        - link
+        - dna
+    - id: actions
+      title: Actions
+      icons:
+        - download
+        - upload
+        - move
+        - share
+        - save
+        - extract
+        - compress
+        - reverse-order
+        - rotate-ccw
+        - rotate-cw
+        - refresh
+    - id: ui
+      title: UI Elements
+      icons:
+        - burger
+        - close
+        - close-boxed
+        - expand
+        - contract
+        - push-left
+        - push-right
+        - down-arrow
+        - exit
+    - id: security
+      title: Security
+      icons:
+        - lock
+        - unlock
+        - user
+        - user-reverse
+        - sillouette
+    - id: communication
+      title: Communication
+      icons:
+        - conversation
+        - multiple-coversation
+        - coversation-wait
+    - id: notifications
+      title: Notifications
+      icons:
+        - alert
+        - no-alert
+        - bulb
+    - id: navigation
+      title: Navigation
+      icons:
+        - nav-up
+        - nav-right
+        - nav-down
+        - nav-left
+  # Special sections that need custom layouts
+  sizes:
+    relative:
+      - class: icon-sm
+        label: .icon-sm
+      - class: icon-md
+        label: .icon-md
+      - class: icon-lg
+        label: .icon-lg
+    absolute:
+      - class: icon-18
+        label: .icon-18
+      - class: icon-24
+        label: .icon-24
+      - class: icon-64
+        label: .icon-64
+  transforms:
+    - icon: icon-refresh
+      class: icon-is-spinning
+      label: .icon-is-spinning
+    - icon: icon-search
+      label: (no rotation)
+    - icon: icon-search
+      class: icon-rotate-90
+      label: .icon-rotate-90
+    - icon: icon-search
+      class: icon-rotate-180
+      label: .icon-rotate-180
+    - icon: icon-search
+      class: icon-rotate-270
+      label: .icon-rotate-270
+    - icon: icon-push-right
+      class: icon-flip-x
+      label: .icon-flip-x
+    - icon: icon-push-right
+      class: icon-flip-y
+      label: .icon-flip-y
+  in_buttons:
+    - type: primary
+      icon: add
+      text: Add Item
+    - type: secondary
+      icon: edit-document
+      text: Edit
+    - type: tertiary
+      icon: trash
+      text: Delete
+  with_labels:
+    - icon: icon-file
+      label: "ODC"
+      usage: "licensing e.g. CC, ODC, FSF, OSI"
+    - icon: icon-refresh
+      label: "| |"
+      usage: "loading paused"
+    - icon: icon-data-files
+      label: "99+"
+      usage: "number of data entries"

package/src/lib/_imports/components/cortal.icon/cortal.icon.hbs

@@ -0,0 +1,112 @@
+{{#*inline "icon-grid"}}
+<div class="demo-grid">
+  {{#each icons}}
+  <div class="demo-item">
+    <i class="icon icon-{{this}}"></i>
+    <code>.icon-{{this}}</code>
+  </div>
+  {{/each}}
+</div>
+{{/inline}}
+
+<h2>Table of Contents</h2>
+<dl>
+  <dt>Types</dt>
+  <dd>
+    <nav class="c-nav c-nav--no-list">
+      {{#each sections}}
+      <a href="#{{id}}">{{title}}</a>
+      {{/each}}
+    </nav>
+  </dd>
+
+  <dt>Adjustments</dt>
+  <dd>
+    <nav class="c-nav c-nav--no-list">
+      <a href="#sizes">Sizes</a>
+      <a href="#transforms">Transformations</a>
+      <a href="#buttons">in Buttons</a>
+      <a href="#labels">with Labels</a>
+    </nav>
+  </dd>
+</dl>
+
+<h2>Icons</h2>
+<dl>
+  <dt>Types</dt>
+  <dd>
+    <dl>
+      {{#each sections}}
+      <dt id="{{id}}">{{title}}</dt>
+      <dd>{{> icon-grid icons=icons}}</dd>
+      {{/each}}
+    </dl>
+  </dd>
+
+  <dt>Adjustments</dt>
+  <dd>
+    <dl>
+      <dt id="sizes">Sizes</dt>
+      <dd>
+        <dl>
+          <dt>Relative Units</dt>
+          <dd class="demo-grid">
+            {{#each sizes.relative}}
+            <div class="demo-item">
+              <i class="icon icon-dashboard {{this.class}}"></i>
+              <code>{{this.label}}</code>
+            </div>
+            {{/each}}
+          </dd>
+
+          <dt>Absolute Units</dt>
+          <dd class="demo-grid">
+            {{#each sizes.absolute}}
+            <div class="demo-item">
+              <i class="icon icon-dashboard {{this.class}}"></i>
+              <code>{{this.label}}</code>
+            </div>
+            {{/each}}
+          </dd>
+        </dl>
+      </dd>
+
+      <dt id="transforms">Transformations</dt>
+      <dd>
+        <div class="demo-grid">
+          {{#each transforms}}
+          <div class="demo-item">
+            <i class="icon {{this.icon}} {{this.class}}"></i>
+            <code>{{this.label}}</code>
+          </div>
+          {{/each}}
+        </div>
+      </dd>
+
+      <dt id="buttons">in Buttons</dt>
+      <dd>
+        <div class="demo-list">
+          {{#each in_buttons}}
+          <button class="c-button c-button--{{this.type}}">
+            <i class="icon icon-{{this.icon}} c-button__icon--before"></i>
+            <span class="c-button__text">{{this.text}}</span>
+          </button>
+          {{/each}}
+        </div>
+      </dd>
+
+      <dt id="labels">with Labels</dt>
+      <dd>
+        <div class="demo-grid">
+          {{#each with_labels}}
+          <div class="demo-item">
+            <i class="icon {{this.icon}}" data-label="{{this.label}}"></i>
+            <code>[data-label="{{this.label}}"]</code>
+            <small class="x-truncate--one-line">{{this.usage}}</small>
+          </div>
+          {{/each}}
+        </div>
+      </dd>
+    </dl>
+  </dd>
+</dl> 

package/src/lib/_imports/components/cortal.icon/demo.css

@@ -0,0 +1,29 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.demo-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1em;
+}
+
+.demo-item {
+  display: grid;
+  place-items: center;
+  gap: 0.5em;
+  padding: 0.5em;
+  border: 1px solid var(--global-color-primary--light);
+  border-radius: 4px;
+}
+
+.demo-item code {
+  color: var(--global-color-primary--dark);
+  font-size: smaller;
+}
+.demo-item small {
+  width: 100%;
+  text-align: center;
+}
+
+.demo-buttons .c-button {
+  min-width: 120px;
+} 

package/src/lib/_imports/components/cortal.icon.css

@@ -1,12 +1,3 @@
-/*
-Container (Bootstrap)
-
-Provide Cortal Icon styles. See:
-
-- [Cortal Icons (Confluence)](https://confluence.tacc.utexas.edu/x/MCAFDg)
-
-Styleguide Components.Cortal.Icon
-*/
 @import url('./cortal.icon.font.css');
 
 
@@ -38,6 +29,32 @@ Styleguide Components.Cortal.Icon
 
 
 
+/* Label atop Icon */
+
+/* To create a dynamic label atop an existing icon */
+.icon[data-label] {
+    display: inline-grid;
+
+    font-size: 2.5em;
+}
+.icon[data-label]::before,
+.icon[data-label]::after {
+    grid-area: 1 / 1;
+}
+.icon[data-label]::after {
+    content: attr(data-label);
+    place-self: center;
+
+    font-size: 0.375em;
+    -webkit-text-stroke: medium white;
+    background-color: currentColor;
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0 0.25em 0.25em;
+}
+
+
+
 /* Cross-Pattern */
 
 /* To tweak action icon appearance and layout */

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

@@ -38,10 +38,12 @@
 @import url("./components/cortal.icon.css");
 @import url("./components/c-button--cms.css");
 @import url("./components/c-card.css");
+@import url("./components/c-card-list.css");
 @import url("./components/c-form--cms.css");
 @import url("./components/c-message.css");
 @import url("./components/c-message--expanded.css");
 @import url("./components/c-recognition.css");
+@import url("./components/c-show-more.css");
 @import url("./components/c-update.css");
 
 /* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms

package/src/lib/_imports/trumps/_s-cms-nav/_s-cms-nav.hbs

@@ -7,26 +7,10 @@ from https://frontera-portal.tacc.utexas.edu/. It has:
 - extra markup (`a > span`)
 -->
 <ul class="s-cms-nav navbar-nav mr-auto">
-  <li class="nav-item active">
-    <a class="nav-link" href="/"><span>Frontera</span></a>
-  </li>
-
-  <li class="nav-item">
-    <a class="nav-link" href="/training/"><span>Training</span></a>
-  </li>
-
   <li class="nav-item">
     <a class="nav-link" href="/user-guide/"><span>User Guide</span></a>
   </li>
 
-  <li class="nav-item">
-    <a class="nav-link" href="/allocations/"><span>Allocations</span></a>
-  </li>
-
-  <li class="nav-item">
-    <a class="nav-link" href="/fellowship/"><span>Fellowships</span></a>
-  </li>
-
   <li class="nav-item">
     <a class="nav-link" href="/news/"><span>News</span></a>
   </li>

package/src/lib/_imports/trumps/s-header/config.yml

@@ -5,7 +5,9 @@ context:
     - ../../assets/core-styles.header.css
     - ../../assets/core-styles.theme.default.css
 variants:
+  - name: default
+    hidden: true
   - name: with-branding
     label: With Branding
-  - name: default
-    label: Without Branding
+  - name: different-logos
+    label: Different Logos

package/src/lib/_imports/trumps/s-header/s-header--different-logos.hbs

@@ -0,0 +1,7 @@
+<dl>
+  <dt>Wide Vector Logo</dt>
+  <dd>{{> @s-header isSVGLogo=true id="wide-vector"}}</dd>
+
+  <dt>Narrow Raster Logo</dt>
+  <dd>{{> @s-header isSVGLogo=false id="narrow-raster"}}</dd>
+</dl>

package/src/lib/_imports/trumps/s-header/s-header.hbs

@@ -1,14 +1,22 @@
 <nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
   <a class="navbar-brand" href="/">
-    <img src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/portal.png" alt="Portal Logo"
-      class="nav-logo-double nav-logo-frontera-double" />
+    <img
+      {{#if isSVGLogo}}
+        src="https://cdn.jsdelivr.net/gh/TACC/Core-CMS-Custom@21da26d/digitalrocks_assets/NSF-DigitalRocks-Logo-White.svg"
+        alt="Vector Logo"
+      {{else}}
+        src="http://cep.tacc.utexas.edu/static/site_cms/img/org_logos/portal.png"
+        alt="Raster Logo"
+      {{/if}}
+      class="portal-logo"
+    />
   </a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExpandTarget"
-    aria-controls="navbarsExpandTarget" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarExpandTarget-{{default id 0}}"
+    aria-controls="navbarExpandTarget-{{default id 0}}" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
-  <div class="collapse navbar-collapse" id="navbarsExpandTarget">
+  <div class="collapse navbar-collapse" id="navbarExpandTarget-{{default id 0}}">
     {{> @s-cms-nav}} {{> @s-portal-nav}}
   </div>
 </nav>

package/src/lib/_imports/trumps/s-header.css

@@ -18,12 +18,12 @@ Styleguide Trumps.Scopes.Header
 @import url("../tools/media-queries.css");
 @import url("./s-header.bootstrap.css");
 
-/* WARNING: NO-R/EM: Until Frontera CMS drops Bootstrap 3.7.1 (for old design)…
-            `em` nor `rem` was not allowed because results were not consistent.
-            UPDATE: As of PR #312, this has likely changed (untested). */
+/* WARNING: NO-R/EM: CMS uses 1rem = 10px, but Portal uses 1rem = 16px */
 
 .s-header {
+  --height: 50px;
   --header-major-border-width: 1px;
+
   font-size: var(--global-font-size--medium); /* NO-R/EM: Overwrite `bootstrap.3.3.7.css` */
   font-weight: var(--bold);
   letter-spacing: 0.025px; /* 14px * 0.025em equals design-requested 0.35px */
@@ -43,6 +43,19 @@ Styleguide Trumps.Scopes.Header
   border-bottom: var(--header-major-border-width) solid var(--header-major-border-color);
 }
 
+/* To prevent header bar resize whether:
+  - navbar is collapsed or expanded
+  - logo is wide or narrow
+  - logo is raster or vector
+*/
+.s-header .navbar-brand {
+  height: calc(
+    var(--height)
+    - var(--nav-padding-vert) * 2
+    - var(--header-major-border-width)
+  );
+}
+
 /* Affiliation */
 
 /* SEE: ../branding_logos.css */
@@ -50,17 +63,13 @@ Styleguide Trumps.Scopes.Header
 /* Logo */
 
 .s-header .navbar-brand {
-  display: grid;
-  align-content: center;
-
-  /* If branding is short enough, then align position of first CMS nav link with Portal "Dashboard" header */
-  /* WARNING: This is a manual value; if Portal interface changes, then this may need to change */
-  min-width: 176px;
-  margin-right: 16px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */
-  padding: 0;
+  /* To align first CMS nav link with Portal "Dashboard" header */
+  /* CAVEAT: A wide logo will shift first CMS nav link rightward */
+  flex-shrink: 0;
+  flex-basis: 175px;
+  margin-right: 15px; /* NO-R/EM: 1rem (from Bootstrap via `.navbar-brand`) */
 
-  color: var(--header-text-color);
-  /* text-decoration: none; */ /* already provided by Bootstrap */
+  padding: unset;
 }
 
 /* Navigation */
@@ -71,7 +80,7 @@ Styleguide Trumps.Scopes.Header
     align-items: stretch;
 }
 
-.s-header.navbar {
+.s-header {
   /* Make horizontal padding match the horizontal content buffer in Portal */
   /* FAQ: The `calc()` keeps track of disparate source of space values */
   /* `16px` = `1rem` from Portal (via `#sidebar .nav-content`) */
@@ -82,17 +91,6 @@ Styleguide Trumps.Scopes.Header
   background-color: var(--header-bkgd-color);
   padding: var(--nav-padding-vert) var(--nav-padding-horz);
 }
-/* On wide viewport, prevent header resize from dynamic content */
-@media (--medium-and-above) {
-  .s-header.navbar {
-    --logo-height: 60px;
-
-    min-height: var(--logo-height);
-  }
-  .s-header > .navbar-brand {
-    min-height: calc( var(--logo-height) - var(--nav-padding-vert) * 2 );
-  }
-}
 
 /* Navigation: Links */