@tacc/core-styles 2.28.0 → 2.29.1

package/src/lib/_imports/tools/x-message/_x-message--single.hbs

@@ -0,0 +1,8 @@
+{{> @message
+    ns="x-"
+    type=this.type
+    scope=this.scope
+    title=this.title
+    content=this.content
+    extra_content='<a href="#">Sample link.</a> And a <button class="c-button c-button--as-link">sample button as link</button>.'
+}}

package/src/lib/_imports/tools/x-message/config.yml

@@ -0,0 +1,55 @@
+status: wip
+context:
+  supportStyles:
+    - ../../assets/tools/x-message.demo.css
+  types:
+    - name: success
+      content: Notify user of a successful event.
+    - name: info
+      content: Notify user of any details that are <strong>not</strong> a problem.
+    - name: warning
+      content: Notify user of an <strong>un</strong>successful event that <em>could prevent</em> functionality.
+    - name: error
+      content: Notify user of an <strong>un</strong>successful event that <em>does prevent</em> functionality.
+  scopes:
+    - name: inline
+      content: 	An inline message.
+    - name: section
+      content: A wide block message.
+    # - name: app
+    #   content: A floating block message.
+    - name: global
+      content: A site-wide banner message.
+variants:
+  - name: default
+    hidden: true
+  - name: type
+    label: by Type
+    status: prototype
+  - name: type-portal
+    label: by Type (Portal)
+    status: ready
+    view: 'x-message--type.hbs'
+    context:
+      shouldLoadPortal: true
+  - name: type-cms
+    label: by Type (CMS)
+    status: ready
+    view: 'x-message--type.hbs'
+    context:
+      shouldLoadCMS: true
+  - name: scope
+    label: by Scope
+    status: prototype
+  - name: scope-portal
+    label: by Scope (Portal)
+    status: ready
+    view: 'x-message--scope.hbs'
+    context:
+      shouldLoadPortal: true
+  - name: scope-cms
+    label: by Scope (CMS)
+    status: ready
+    view: 'x-message--scope.hbs'
+    context:
+      shouldLoadCMS: true

package/src/lib/_imports/tools/x-message/demo.css

@@ -0,0 +1,12 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.x-message {
+  margin-top: 1em;
+}
+
+dt {
+  text-transform: capitalize;
+}
+dd {
+  margin-block: 2em;
+}

package/src/lib/_imports/tools/x-message/readme.md

@@ -0,0 +1 @@
+To notify users for different reasons (type) and at different contexts (scope).

package/src/lib/_imports/tools/x-message/x-message--scope.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each scopes}}
+  <dt>Scope <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @x-message--single scope=this.name
+        type="success" title="Success" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="info" title="Info" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="warning" title="Warning" content=this.content}}
+    {{> @x-message--single scope=this.name
+        type="error" title="Error" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

package/src/lib/_imports/tools/x-message/x-message--scope.readme.md

@@ -0,0 +1,14 @@
+{{render '@x-message--intro'}}
+
+| Mixin                    | Context
+| - | - |
+| `message--scope-inline`  | inline text
+| `message--scope-section` | wide block
+| `message--scope-app`*    | floating block*
+| `message--scope-section` | site-wide banner
+
+<small>* Not implemented officially yet. Exists in Core Portal as a "toast notification".</small>
+
+---
+
+{{render '@x-message--classes'}}

package/src/lib/_imports/tools/x-message/x-message--type.hbs

@@ -0,0 +1,15 @@
+<dl>
+  {{#each types }}
+  <dt>Type <strong>{{ this.name }}</strong></dt>
+  <dd>
+    {{> @x-message--single type=this.name
+        scope="inline" title="Inline" content=this.content}}
+    {{> @x-message--single type=this.name
+        scope="section" title="Section" content=this.content}}
+    <!--{{> @x-message--single type=this.name
+        scope="app" title="App" content=this.content}}-->
+    {{> @x-message--single type=this.name
+        scope="global" title="Global" content=this.content}}
+  </dd>
+  {{/each}}
+</dl>

package/src/lib/_imports/tools/x-message/x-message--type.readme.md

@@ -0,0 +1,12 @@
+{{render '@x-message--intro'}}
+
+| Mixin                    | Reason
+| - | - |
+| `message--type-success` | action completed
+| `message--type-info`    | just info, no problem
+| `message--type-warning` | event could prevent function
+| `message--type-error`   | event does prevent function
+
+---
+
+{{render '@x-message--classes'}}

package/src/lib/_imports/tools/x-message/x-message.hbs

@@ -0,0 +1 @@
+<!-- SEE: message--type, message--scope -->

package/src/lib/_imports/tools/x-message.css

@@ -0,0 +1,38 @@
+/* Elements */
+
+@define-mixin message {
+  /* To prevent excess space at top and bottom of message */
+  & > *:first-child { margin-top: 0; }
+  & > *:last-child { margin-bottom: 0; }
+}
+
+
+
+/* Modifiers */
+
+@define-mixin message--type-info---message--scope-section {
+  background-color: var(--global-color-info--x-light);
+  border-color: var(--global-color-info--normal);
+}
+@define-mixin message--type-success---message--scope-section {
+  background-color: var(--global-color-success--x-light);
+  border-color: var(--global-color-success--normal);
+}
+@define-mixin message--type-warning---message--scope-section {
+  background-color: var(--global-color-warning--x-light);
+  border-color: var(--global-color-warning--normal);
+}
+@define-mixin message--type-error---message--scope-section {
+  background-color: var(--global-color-danger--x-light);
+  border-color: var(--global-color-danger--normal);
+}
+@define-mixin message--type-tip---message--scope-section {
+  background-color: var(--global-color-extra--x-light);
+  border-color: var(--global-color-extra--normal);
+}
+
+@define-mixin message--scope-global {
+  color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-accent--secondary);
+  border-color: var(--global-color-primary--dark);
+}

package/src/lib/_imports/tools/x-message.demo.css

@@ -0,0 +1,29 @@
+@import url("./x-message.css");
+
+/* FAQ: Wrapped to deter clients from using `.x-message` */
+/* HACK: Not in `x-message/demo.css` because it is not processed */
+#demo {
+  .x-message {
+    @mixin message;
+  }
+
+  .x-message--scope-section.x-message--type-info {
+    @mixin message--type-info---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-success {
+    @mixin message--type-success---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-warning {
+    @mixin message--type-warning---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-error {
+    @mixin message--type-error---message--scope-section;
+  }
+  .x-message--scope-section.x-message--type-tip {
+    @mixin message--type-tip---message--scope-section;
+  }
+
+  .x-message--scope-global {
+    @mixin message--scope-global;
+  }
+}

package/src/lib/_imports/tools/x-overlay.css

@@ -6,7 +6,7 @@ Colored boxes that appear atop a large image (like a banner).
 %x-overlay--curtain - A full size transluscent curtain over the background
 %x-overlay--callout - A transluscent box surrounding the content
 
-Styleguide Tools.ExtendsAndMixins.Overlay
+Styleguide Tools.Mixins.Overlay
 */
 
 %x-overlay--curtain {

package/src/lib/_imports/tools/x-truncate.css

@@ -3,19 +3,18 @@ Truncate
 
 Styles that allow truncating text.
 
-%x-truncate--one-line     - Truncated text may only be one line tall.
-%x-untruncate--one-line   - Remove one-line truncation after it's added.
-%x-truncate--many-lines   - Truncated text may be many lines tall.
-%x-untruncate--many-lines - Remove many-lines truncation after it's added.
+truncate--one-line     - Truncated text may only be one line tall.
+untruncate--one-line   - Remove one-line truncation after it's added.
+truncate--many-lines   - Truncated text may be many lines tall.
+untruncate--many-lines - Remove many-lines truncation after it's added.
 
-Styleguide Tools.ExtendsAndMixins.Truncate
+Styleguide Tools.Mixins.Truncate
 */
 
 /* Many Lines */
 /* WARNING: Relies on proprietary and undocumented rules (that work well) */
 
-.x-truncate--many-lines,
-%x-truncate--many-lines /* DEPRECATED */ {
+@define-mixin truncate--many-lines {
   --lines: 2;
 
   display: -webkit-box;
@@ -24,24 +23,48 @@ Styleguide Tools.ExtendsAndMixins.Truncate
   overflow: hidden;
   -webkit-line-clamp: var(--lines);
 }
-.x-untruncate--many-lines,
-%x-untruncate--many-lines /* DEPRECATED */ {
+/* DEPRECATED */
+.x-truncate--many-lines,
+%x-truncate--many-lines {
+  @mixin truncate--many-lines;
+}
+
+
+@define-mixin untruncate--many-lines {
   overflow: visible;
   -webkit-line-clamp: inherit;
 }
+/* DEPRECATED */
+.x-untruncate--many-lines,
+%x-untruncate--many-lines {
+  @mixin untruncate--many-lines;
+}
+
+.x-untruncate--many-lines,
+%x-untruncate--many-lines {
+  @mixin untruncate--many-lines;
+}
 
 /* One Line */
 
-.x-truncate--one-line,
-%x-truncate--one-line /* DEPRECATED */ {
+@define-mixin truncate--one-line {
 	text-overflow: var(--text-overflow, ellipsis);
 
 	overflow: hidden;
 	white-space: nowrap;
 }
-.x-untruncate--one-line,
-%x-untruncate--one-line /* DEPRECATED */ {
+/* DEPRECATED */
+.x-truncate--one-line,
+%x-truncate--one-line {
+  @mixin truncate--one-line;
+}
+
+@define-mixin untruncate--one-line {
   overflow: visible;
 	white-space: normal;
 }
-
+/* DEPRECATED */
+.x-untruncate--one-line,
+%x-untruncate--one-line {
+  @mixin untruncate--one-line;
+}

package/src/lib/_imports/trumps/s-article-list.css

@@ -60,7 +60,7 @@ Styleguide Trumps.Scopes.ArticleList
   font-weight: var(--bold);
   text-transform: uppercase;
 
-  @extend .x-truncate--one-line;
+  @mixin truncate--one-line;
 }
 /* Add a fake short border above title */
 [class*="s-article-list--"] > h2 {
@@ -111,7 +111,7 @@ Styleguide Trumps.Scopes.ArticleList
   padding-bottom: 1.0rem;
   padding-right: 1.0rem;
 
-  @extend .x-truncate--one-line;
+  @mixin truncate--one-line;
   max-width: 100%; /* SEE: https://stackoverflow.com/a/44521595 */
 }
 /* Dark section */
@@ -175,17 +175,17 @@ Styleguide Trumps.Scopes.ArticleList
 .s-article-list--links p:not(:last-child) a::before {
   content: '';
 
-  @extend .x-article-link-stretch;
+  @mixin article-link-stretch;
 }
 .s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a::before {
-  @extend .x-article-link-stretch--gapless;
+  @mixin article-link-stretch--gapless;
 }
 /* Give link state (pseudo-class) feedback */
 .s-article-list--links p:not(:last-child) a:hover::before {
-  @extend .x-article-link-hover;
+  @mixin article-link-hover;
 }
 .s-article-list--layout-gapless.s-article-list--links p:not(:last-child) a:hover::before {
-  @extend .x-article-link-hover--gapless;
+  @mixin article-link-hover--gapless;
 }
 
 

package/src/lib/_imports/trumps/s-article-preview.css

@@ -81,7 +81,7 @@ Styleguide Trumps.Scopes.ArticlePreview
 }
 /* (List) */
 [class*="s-article-list--"] .s-article-preview h3 {
-  @extend %x-truncate--one-line;
+  @mixin truncate--one-line;
 }
 /* (List) Allocations */
 .s-article-list--allocations .s-article-preview h3 {
@@ -108,7 +108,7 @@ Styleguide Trumps.Scopes.ArticlePreview
 }
 /* (List) */
 [class*="s-article-list--"] .s-article-preview p:not(:first-child):not(:last-child) {
-  @extend %x-truncate--many-lines;
+  @mixin truncate--many-lines;
   --lines: 3;
 }
 /* (List) Allocations */
@@ -220,17 +220,17 @@ Styleguide Trumps.Scopes.ArticlePreview
 .s-article-preview p:last-child > a {
   color: transparent; /* ensure Link _text_ is invisible (allow decoration) */
 
-  @extend .x-article-link-stretch;
+  @mixin article-link-stretch;
 }
 .s-article-list--layout-gapless .s-article-preview p:last-child > a {
-  @extend .x-article-link-stretch--gapless;
+  @mixin article-link-stretch--gapless;
 }
 /* Give link state (pseudo-class) feedback */
 .s-article-preview p:last-child > a:hover {
-  @extend .x-article-link-hover;
+  @mixin article-link-hover;
 }
 .s-article-list--layout-gapless .s-article-preview p:last-child > a:hover {
-  @extend .x-article-link-hover--gapless;
+  @mixin article-link-hover--gapless;
 }
 
 

package/src/lib/_imports/trumps/s-irregular-links.css

@@ -3,13 +3,13 @@
 
 .s-irregular-links a,
 .s-irregular-links :--c-button--as-link {
-  @extend .x-link--irregular;
+  @mixin link--irregular;
 }
 .s-irregular-links a:hover,
 .s-irregular-links :--c-button--as-link:hover {
-  @extend .x-link--irregular--hover;
+  @mixin link--irregular--hover;
 }
 .s-irregular-links a:active,
 .s-irregular-links :--c-button--as-link:active {
-  @extend .x-link--irregular--active;
+  @mixin link--irregular--active;
 }

package/src/lib/_imports/trumps/s-truncated-table.css

@@ -2,5 +2,5 @@
 
 /* To truncate paragraphs in specific tables */
 .s-truncated-table p {
-  @extend %x-truncate--many-lines;
+  @mixin truncate--many-lines;
 }

package/src/lib/_imports/vendors/bootstrap5/bootstrap5--border-spinner.hbs

@@ -6,17 +6,56 @@
   <dt>Spinner in Bootstrap Button</dt>
   <dd>
     <button class="btn btn-primary" type="button" disabled>
-      <span>Login</span>
-      <span class="visually-hidden" role="status">Loading...</span>
-      <span class="spinner-border" aria-hidden="true"></span>
+      {{> @loading-action }}
     </button>
   </dd>
   <dt>Spinner in a TACC Button</dt>
   <dd>
     <button class="c-button c-button--primary c-button--is-busy" type="button" disabled>
-      <span>Login</span>
-      <span class="u-hide--visually" role="status">Loading...</span>
-      <span class="spinner-border" aria-hidden="true"></span>
+      {{> @loading-action }}
     </button>
   </dd>
+  <dt>Spinner in a Form</dt>
+  <dd>
+    <dl>
+      <dt>Component Form (<code>c-form</code>)</dt>
+      <dd class="s-form">
+        <dl>
+          <dt>Submit Button</dt>
+          <dd class="c-form">
+            <footer class="c-form__buttons">
+              <button class="c-form__button" data-state="busy" type="submit" disabled>
+                {{> @loading-action }}
+              </button>
+            </footer>
+          </dd>
+          <dt>Other Button</dt>
+          <dd class="c-form">
+            <button data-state="busy" type="button" disabled>
+                {{> @loading-action }}
+            </button>
+          </dd>
+        </dl>
+      </dd>
+      <dt>Scope Form (<code>s-form</code>)</dt>
+      <dd class="s-form">
+        <dl>
+          <dt>Submit Button</dt>
+          <dd class="s-form">
+            <footer>
+              <button data-state="busy" type="submit" disabled>
+                {{> @loading-action }}
+              </button>
+            </footer>
+          </dd>
+          <dt>Other Button</dt>
+          <dd class="s-form">
+            <button data-state="busy" type="button" disabled>
+                {{> @loading-action }}
+            </button>
+          </dd>
+        </dl>
+      </dd>
+    </dl>
+  </dd>
 </dl>

package/src/lib/_imports/vendors/bootstrap5/demo.css

@@ -0,0 +1,5 @@
+.button-wrapper,
+.c-form__buttons,
+:where(.s-form > footer) {
+    margin-top: unset;
+}