@tacc/core-styles 2.18.0 → 2.19.0

package/src/lib/_imports/components/c-button/c-button.hbs

@@ -1,162 +1,159 @@
 <dl>
   {{#if supports.type}}
   <dt>Type</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </button>
-      {{#if small}}
-        <small>(no small primary allowed)</small>
-      {{else}}
-        <button class="c-button c-button--{{this._self.name}} c-button--primary"
-        {{#if disabled}}disabled{{/if}}>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--primary</span>
         </button>
-      {{/if}}
-      <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </button>
-    </dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </button>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </a>
-      {{#if small}}
-        <small>(no small primary allowed)</small>
-      {{else}}
-        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
           <span class="c-button__text">--primary</span>
         </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </a>
+      </dd>
       {{/if}}
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </a>
-    </dd>
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.states}}
+    {{#if supports.states}}
   <dt>States</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">default</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled>
-        <span class="c-button__text">--is-busy</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">default</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} 
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">disabled-attr</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">--is-busy</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">default</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled tabindex="-1">
-        <span class="c-button__text">--is-busy</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">default</span>
+        </a>
+        <a disabled href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}">
+          <span class="c-button__text">disabled-attr</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled tabindex="-1">
+          <span class="c-button__text">--is-busy</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.icons}}
+    {{#if supports.icons}}
   <dt>Icons</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.width}}
+    {{#if supports.width}}
   <dt>Width</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-long</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-long</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-long</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-long</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.size}}
+    {{#if supports.size}}
   <dt>Size</dt>
   <dd>
     {{#if supports.size-small}}
@@ -164,8 +161,7 @@
       <dt><code>&lt;button&gt;</code></dt>
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </button>
       </dd>
@@ -174,8 +170,7 @@
       <dt><code>&lt;a&gt;</code></dt>
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </a>
       </dd>
@@ -185,5 +180,5 @@
     <small>(no small size allowed)</small>
     {{/if}}
   <dd>
-  {{/if}}
-</dl>
+    {{/if}}
+</dl>

package/src/lib/_imports/components/c-button.css

@@ -32,9 +32,6 @@
 :--c-button:where(:not(:--disabled)) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-:--c-button:where(:not(:--c-button--as-link)) {
-  font-weight: var(--medium);
-}
 
 a:--c-button {
   text-decoration: none;
@@ -53,8 +50,6 @@ a:--c-button--is-busy {
 ) {
   color: var(--global-color-primary--dark);
   border-color: var(--global-color-primary--dark);
-
-  pointer-events: none;
 }
 :--c-button:--disabled:not(
   :--c-button--is-busy,

package/src/lib/_imports/components/c-card/c-card--frontera.hbs

@@ -1,3 +1,5 @@
+<section class="o-section">
+
 <!-- FAQ: Not using {{this._self.name}} because class is frontera-about-page -->
 <div class="o-grid o-grid--col-min-width">
   <a href="#" class="c-card c-card--frontera-about-page">
@@ -46,3 +48,5 @@
     <h3>Style ▸ Image + Text</h3>
   </div>
 </div>
+
+</section>

package/src/lib/_imports/components/c-card/config.yml

@@ -24,6 +24,3 @@ variants:
     status: deprecated
     📝 name: using "frontera-about-page" breaks the demo
     label: Frontera About Page
-    context:
-      supportStyles:
-        - ../../assets/components/c-card--frontera-about-page.css

package/src/lib/_imports/components/c-card--frontera-about-page.css

@@ -5,6 +5,8 @@
 
   border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
   margin-bottom: 4.6rem;
+
+  padding: unset; /* overwrite .c-card */
 }
 
 

package/src/lib/_imports/components/c-card.css

@@ -169,12 +169,6 @@
     margin-top: unset;
 }
 
-/* To make buttons bold */
-/* TODO: Determine whether this should apply to all CMS buttons */
-:--c-card a:--c-button {
-    font-weight: var(--bold);
-}
-
 /* To reduce font size of mailto link */
 :--c-card a[data-user][data-domain]::before {
     font-size: var(--global-font-size--medium);
@@ -186,3 +180,9 @@
     line-height: 1.7;
     margin-bottom: 2rem; /* to mimic <p> */
 }
+
+/* FAQ: Used on image cards for staff like on /education/k-12-students/ */
+/* SEE: https://www.tacc.utexas.edu/education/k-12-students/high-school-camps/gencyber/ */
+:is(.card, :--c-card) h4 {
+    margin-bottom: 0.375em;
+}

package/src/lib/_imports/components/c-content-block/c-content-block.hbs

@@ -0,0 +1,33 @@
+<dl>
+    <dt>Staff Profile</dt>
+    <dd>
+        <div class="content-block">
+            <img class="img-fluid" />
+            <img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Exampleavatar.png"
+                title="University of Texas at Austin" class="img-fluid" />
+        </div>
+
+        <div class="content-block">
+            <h3>Education</h3>
+
+            <p><strong>Ph.D., Computer Engineering</strong><br>
+                Clemson University, 2000</p>
+
+            <p><strong>M.S., Computer Engineering</strong><br>
+                Clemson University, 1993</p>
+
+            <p><strong>B.S., Electrical Engineering</strong><br>
+                Clemson University, B.S. (Electrical Engineering), 1991</p>
+        </div>
+    </dd>
+
+    <dt>Newsletters</dt>
+    <dd>
+        <article class="content-block">
+            <h3>EPIC + WeTeach_CS Newsletter</h3>
+
+            <p>Stay connected with our biweekly <a href="#">newsletter</a>.</p>
+            <a class="c-button c-button--primary" href="#">Newsletter Signup</a>
+        </article>
+    </dd>
+</dl>

package/src/lib/_imports/components/c-content-block.css

@@ -0,0 +1,9 @@
+:is(.c-content-block, .content-block) {
+    margin-bottom: var(--global-space--bootstrap-gap);
+    padding: var(--global-space--pattern-pad);
+}
+
+:is(.c-content-block, .content-block) :is(h1, h2, h3, h4, h5, h6) {
+    border-left: var(--global-border-width--xx-thick) solid var(--global-color-accent--tertiary);
+    padding-left: 10px;
+}

package/src/lib/_imports/components/c-update/c-update.hbs

@@ -0,0 +1,27 @@
+<dl>
+  <dt>Update</dt>
+  <dd>
+    <aside class="c-update">
+      <header class="c-update__header">
+        <h3 class="c-update__title">
+          <span class="c-pill c-pill--is-updated">Update</span>&nbsp;
+        </h3>
+        <span>Published:</span>&nbsp;
+        <time datetime="2023-10-13T14:27:18.637000">
+          October 13, 2023
+        </time>
+      </header>
+    </aside>
+  </dd>
+  <dd>
+  </dd>
+  <dt>Original</dt>
+  <dd>
+    <header class="c-update__header">
+      <span>Published:</span>&nbsp;
+      <time datetime="2023-10-03T17:55:22.513000">
+        October 03, 2023
+      </time>
+    </header>
+  </dd>
+</dl>

package/src/lib/_imports/components/c-update/config.yml

@@ -0,0 +1,3 @@
+status: ready
+context:
+  shouldLoadCMS: true

package/src/lib/_imports/components/c-update/readme.md

@@ -0,0 +1,2 @@
+- Will show "Update" pill and date
+- Will show "ORIGINAL MESSAGE" and date

package/src/lib/_imports/components/c-update.css

@@ -0,0 +1,10 @@
+.c-update__header {
+    display: flex;
+    align-items: baseline;
+}
+
+.c-update__title {
+    margin-right: 0.5em;
+
+    text-transform: uppercase;
+}

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

@@ -10,8 +10,9 @@
 /* GENERICS */
 /* Mostly from Bootstrap */
 /* https://confluence.tacc.utexas.edu/x/b53tDg */
-@import url('./generics/fonts.css');
+@import url("./generics/fonts.css");
 @import url("./generics/pseudo-elements.css");
+@import url("./generics/attributes.css");
 
 /* ELEMENTS */
 /* To override Bootstrap */

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

@@ -26,17 +26,22 @@
 @import url("./objects/o-float-content.css");
 @import url("./objects/o-offset-content.css");
 @import url("./objects/o-section.css");
+@import url("./objects/o-heading-steps.css");
+
 
 /* COMPONENTS */
 @import url("./components/bootstrap.col.css");
 @import url("./components/bootstrap.modal--cms.css");
 @import url("./components/bootstrap.row.css");
+@import url("./components/c-content-block.css");
 @import url("./components/cortal.icon.css");
 @import url("./components/c-card.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-update.css");
+
 /* TODO: Move to TACC/Core-CMS-Resources:/frontera-cms
         or — alternatively — TACC/Core-CMS */
 @import url("./components/c-card--frontera-about-page.css");

package/src/lib/_imports/generics/attributes/attributes.hbs

@@ -0,0 +1,3 @@
+<time data-prefix="Published:" >
+  <span>OCTOBER 3, 2023</span>
+</time>

package/src/lib/_imports/generics/attributes/readme.md

@@ -0,0 +1 @@
+Renders data-prefix attribute value as prefix to text. Typically used in blog titles.

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

@@ -0,0 +1,12 @@
+/* To render data-prefix value as prefixed text */
+[data-prefix]::before {
+  display: inline-block;
+  content: attr(data-prefix);
+  margin-right: 0.25ch;
+
+  text-transform: none;
+}
+
+[disabled] {
+  pointer-events: none;
+}

package/src/lib/_imports/objects/o-heading-steps/config.yml

@@ -0,0 +1,3 @@
+status: ready
+context:
+  shouldLoadCMS: true

package/src/lib/_imports/objects/o-heading-steps/o-heading-steps.hbs

@@ -0,0 +1,14 @@
+<div class="heading-steps">
+    <article class="heading-steps__item">
+      <h3>Create an Account</h3>
+    </article>
+    <article class="heading-steps__item">
+      <h3>Request Allocations</h3>
+    </article>
+    <article class="heading-steps__item">
+      <h3>Learn How to Use Our Resources</h3>
+    </article>
+    <article class="heading-steps__item">
+          <h3>Work With Our Team</h3>
+    </article>
+</div>

package/src/lib/_imports/objects/o-heading-steps/readme.md

@@ -0,0 +1,2 @@
+Heading Steps will add numbers to the beginning of a heading. 
+A visual representation of this is shown in the numebers 1-4 listed in the example above.

package/src/lib/_imports/objects/o-heading-steps.css

@@ -0,0 +1,17 @@
+/* To add numbers to steps */
+.heading-steps,
+[class*="heading-steps--"] {
+  counter-reset: step;
+}
+
+.heading-steps :is(h1, h2, h3, h4, h5, h6),
+[class*="heading-steps--"] :is(h1, h2, h3, h4, h5, h6) {
+  counter-increment: step;
+}
+
+.heading-steps--root :is(h1, h2, h3, h4, h5, h6)::before,
+.heading-steps__item :is(h1, h2, h3, h4, h5, h6)::before {
+  content: counter(step) '. ';
+  color: var(--global-color-accent--secondary);
+  font-weight: var(--medium);
+}