@tacc/core-styles 2.27.1 → 2.29.0

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/README.md

@@ -0,0 +1,12 @@
+# TACC Core Styles - Library - Vendor
+
+Add and import these only when you need a subset of a vendor's stylesheet.
+
+## Example Use Case
+
+1. Client needs a TACC loading spinner.
+2. TACC only styles Boostrap's loading spinner.
+3. Client does not use Bootstrap.
+4. Add Bootstrap's loading spinner to this directory.
+5. Client loads Bootstrap's loading spinner from here.
+6. Client loads TACC skin for Bootstrap's loading spinner.

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

@@ -0,0 +1,22 @@
+<dl>
+  <dt>Spinner</dt>
+  <dd>
+    <span class="spinner-border" aria-hidden="true"></span>
+  </dd>
+  <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>
+    </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>
+    </button>
+  </dd>
+</dl>

package/src/lib/_imports/vendors/bootstrap5/bootstrap5--border-spinner.readme.md

@@ -0,0 +1,3 @@
+[Bootstrap 5 Spinners: Border spinner](https://getbootstrap.com/docs/5.3/components/spinners/#border-spinner).
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/vendors/bootstrap5/bootstrap5.hbs

@@ -0,0 +1,7 @@
+Bootstrap v5 is used by TACC in:
+
+<ul>
+    <li>
+        <a href="https://github.com/TACC/tup-ui/blob/v1.1.10/libs/core-components/src/lib/LoadingSpinner/LoadingSpinner.global.css#L27-L42" target="_blank">TACC/tup-ui</a>
+    </li>
+<ul>

package/src/lib/_imports/vendors/bootstrap5/config.yml

@@ -0,0 +1,9 @@
+variants:
+  - name: border-spinner
+    status: prototype
+    context:
+      shouldLoadBootstrap5: true
+      supportStyles:
+        - ../../assets/trumps/u-hide.css
+        - ../../assets/vendors/bootstrap5--border-spinner.css
+        - ../../assets/components/bootstrap5.border-spinner.css

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

@@ -0,0 +1,48 @@
+/*
+Spinner (Bootstrap 5)
+
+Port only the Bootstrap 5 spinner styles that LoadingSpinner needs in tup-ui.
+
+- [Reactstrap: Components: Spinners](https://react-bootstrap.github.io/components/spinners/)
+- [Bootstrap 5: Components: Spinners](https://getbootstrap.com/docs/5.0/components/spinners/)
+
+Styleguide Component.Bootstrap5.Spinners
+*/
+/* https://github.com/twbs/bootstrap/blob/v5.3.3/scss/_spinners.scss */
+/* https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.css */
+.spinner-border {
+  display: inline-block;
+  width: var(--bs-spinner-width);
+  height: var(--bs-spinner-height);
+  vertical-align: var(--bs-spinner-vertical-align);
+  border-radius: 50%;
+  -webkit-animation: var(--bs-spinner-animation-speed) linear infinite
+    var(--bs-spinner-animation-name);
+  animation: var(--bs-spinner-animation-speed) linear infinite
+    var(--bs-spinner-animation-name);
+}
+@-webkit-keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.spinner-border {
+  --bs-spinner-width: 2rem;
+  --bs-spinner-height: 2rem;
+  --bs-spinner-vertical-align: -0.125em;
+  --bs-spinner-border-width: 0.25em;
+  --bs-spinner-animation-speed: 0.75s;
+  --bs-spinner-animation-name: spinner-border;
+  border: var(--bs-spinner-border-width) solid currentcolor;
+  border-right-color: transparent;
+}
+@media (prefers-reduced-motion: reduce) {
+  .spinner-border {
+    --bs-spinner-animation-speed: 1.5s;
+  }
+}