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

@tacc/core-styles 0.10.0 → 1.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 (275) hide show

package/src/lib/_imports/_preview.hbs CHANGED Viewed

@@ -2,58 +2,111 @@
 {{! FAQ: Any <link>s, and comments AFTER the first, are migrated to <head> }}
 <link rel='author' href='https://github.com/TACC/Core-Styles' />
-<!-- styles: support (the current component) -->
-{{#each _target.context.supportStyles}}
-  <link rel='stylesheet' href='{{path this}}' />
+<!-- Styles: Layers -->
+{{!-- https://confluence.tacc.utexas.edu/x/b53tDg --}}
+<style>
+@layer foundation, base, project;
+</style>
+{{#if _target.context.shouldLoadBootstrap}}
+{{#unless _target.context.shouldSkipBootstrap }}
+<!-- Styles: Global (for current component): Bootstrap -->
+<style>
+  @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
+</style>
+{{/unless}}
+{{/if}}
+<!-- Styles: Global (for every component) -->
+<style>
+{{#each globalStyles}}
+  {{#if this.isInternal}}
+  @import url('{{path this.path}}');
+  {{else}}
+  @import url('{{this.path}}');
+  {{/if}}
 {{/each}}
-<!-- styles: base (the current component) -->
-{{#unless styles.shouldSkipBase}}
-  <link
-    rel='stylesheet'
-    href='{{path "/{{ _target.context.subdir }}/{{ _target.baseHandle }}.css"}}'
-  />
+</style>
+{{#if _target.context.shouldLoadCMS }}
+{{#unless _target.context.shouldSkipCMS }}
+<!-- Styles: Global (for current component): CMS -->
+<style>
+@import url('{{path "/assets/core-styles.cms.css"}}');
+</style>
 {{/unless}}
+{{/if}}
-<!-- styles: global (for every component) -->
-<!-- (manually configured) -->
-{{#each styles.external.global}}
-  <link rel='stylesheet' href='{{this}}' />
-{{/each}}
-{{#each styles.internal.global}}
-  <link rel='stylesheet' href='{{path this}}' />
-{{/each}}
-<!-- styles: local (for current component) -->
-<!-- (automatically found) -->
+{{#if _target.context.supportStyles}}
+<!-- Styles: Local (for current component): Supporting Patterns -->
+<style>
+  {{#each _target.context.supportStyles}}
+  @import url('{{path this}}');
+  {{/each}}
+</style>
+{{/if}}
+{{#unless _target.context.shouldSkipPattern}}
+<!-- Styles: Local (for current component): Current Pattern -->
+<style>
+  @import url('{{path "/assets/{{ _target.context.subdir }}/{{ _target.baseHandle }}.css"}}');
+</style>
+{{/unless}}
+<!-- Styles: Demo (for current component) -->
 {{#each _target.resources.assets}}
-  {{#if isCSS}}
-    <link
-      rel='stylesheet'
-      href='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
-    />
-  {{/if}}
-{{/each}}
-<!-- (manually configured) -->
-{{#each styles.external.local}}
-  <link rel='stylesheet' href='{{this}}' />
-{{/each}}
-{{#each styles.internal.local}}
-  <link rel='stylesheet' href='{{path this}}' />
+{{#if this.isCSS}}
+<style>
+  @import url('{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}');
+</style>
+{{/if}}
 {{/each}}
-{{! styles: specific to pattern library (so pattern library can override any) }}
-{{> @css }}
+<!-- Styles: Demo (for every component) -->
+<style>
+  @import url('{{path "/assets/core-styles.demo.css"}}');
+</style>
-<!-- scripts: local (for current component) -->
-<!-- (automatically found) -->
+{{#if _target.context.shouldLoadBootstrap}}
+<!-- Scripts: Global (for current component): Bootstrap -->
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+{{/if}}
+<!-- Scripts: Local (for current component) -->
 {{#each _target.resources.assets}}
-  {{#if isJS}}
-    <script
-      src='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
-    ></script>
-  {{/if}}
+{{#if this.isJS}}
+<script
+  type="module"
+  src='{{path "/components/raw/{{ _target.baseHandle }}/{{ this.base }}"}}'
+></script>
+{{/if}}
 {{/each}}
-<!-- markup (for current component) -->
+{{!-- Config (for current component) --}}
+<details style="display:none;">
+  <summary>Configuration</summary>
+  <dl>
+    <dt>shouldLoadBootstrap</dt>
+    <dd>{{_target.context.shouldLoadBootstrap}}</dd>
+    <dt>shouldSkipBootstrap</dt>
+    <dd>{{_target.context.shouldSkipBootstrap}}</dd>
+    <dt>shouldLoadCMS</dt>
+    <dd>{{_target.context.shouldLoadCMS}}</dd>
+    <dt>shouldSkipCMS</dt>
+    <dd>{{_target.context.shouldSkipCMS}}</dd>
+  </dl>
+</details>
+{{!-- Markup (for current component) --}}
 {{{yield}}}

package/src/lib/_imports/branding_logos.css CHANGED Viewed

@@ -5,8 +5,6 @@
             `em` nor `rem` was not allowed because results were not consistent.
             UPDATE: As of PR #312, this has likely changed (untested). */
-/* Shared by All Templates */
 /* Branding Selectors  */
 .branding-header {

package/src/lib/_imports/components/bootstrap/{bootstrap.container/bootstrap.container.hbs → bootstrap--container.hbs} RENAMED Viewed

File without changes

package/src/lib/_imports/components/bootstrap/{bootstrap.container/readme.md → bootstrap--container.readme.md} RENAMED Viewed

File without changes

package/src/lib/_imports/components/bootstrap/{portal/bootstrap.form/docs.css → bootstrap--form.demo.css} RENAMED Viewed

File without changes

package/src/lib/_imports/components/bootstrap/{portal/bootstrap.form/bootstrap.form.hbs → bootstrap--form.hbs} RENAMED Viewed

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="{{path '/components/c-button.css'}}" />
 <form>
   <label for="field-name">Name</label>
   <input type="text" class="form-control" id="field-name" name="name" placeholder="Jane Doe">

package/src/lib/_imports/components/bootstrap/{portal/bootstrap.form/readme.md → bootstrap--form.readme.md} RENAMED Viewed

File without changes

package/src/lib/_imports/components/bootstrap/{bootstrap.modal/docs.css → bootstrap--modal.demo.css} RENAMED Viewed

File without changes

package/src/lib/_imports/components/bootstrap/{bootstrap.modal/bootstrap.modal.hbs → bootstrap--modal.hbs} RENAMED Viewed

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="{{path '/components/c-button.css'}}" />
 <dl>
   <dt>Dynamic</dt>
   <dd>

package/src/lib/_imports/components/bootstrap/{bootstrap.modal/readme.md → bootstrap--modal.readme.md} RENAMED Viewed

@@ -1,5 +1,9 @@
 To override and extend [Bootstrap Modals](https://getbootstrap.com/docs/4.3/components/modal/).
+> **⚠️ WARNING**
+>
+> The modal will not scroll unless using [Bootstrap 4.3](https://getbootstrap.com/docs/4.3/components/modal/). CMS uses [Bootstrap 4.0](https://getbootstrap.com/docs/4.0/components/modal/). The relevant class is `modal-dialog-scrollable`.
 <script>
 /* To open external links in new window */
 Array.from(document.links)

package/src/lib/_imports/components/bootstrap/bootstrap.hbs ADDED Viewed

@@ -0,0 +1,6 @@
+<dl>
+    <dt>TACC Usage</dt>
+    <dd>TACC Core minimizes its legacy dependency on Bootstrap.</dd>
+    <dt>More Information</dt>
+    <dd>See "Notes" tab.<dd>
+</dl>

package/src/lib/_imports/components/bootstrap/bootstrap.readme.md ADDED Viewed

@@ -0,0 +1,14 @@
+> **ⓘ Notice**
+>
+> [Despite high usage and awareness of Bootstrap, it has low and decreasing satisfaction and interest.](https://2021.stateofcss.com/en-US/technologies/css-frameworks) TACC Core use its components only when building our own would be more work than overwriting Bootstrap.
+> **ⓘ Notice**
+>
+> Overwriting Bootstrap is cumbersome and **not** the [appropriate way to theme Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/theming/), but TACC Core is **not** using SASS; it uses PostCSS.
+<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/components/bootstrap/config.yml ADDED Viewed

@@ -0,0 +1,12 @@
+context:
+  shouldLoadBootstrap: true
+variants:
+  - name: default
+    hidden: true
+  - name: container
+    status: ready
+  - name: modal
+    status: prototype
+  - name: form
+    label: (Portal) Form
+    status: prototype

package/src/lib/_imports/components/bootstrap/demo.css ADDED Viewed

@@ -0,0 +1,7 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+/* All Bootstrap pattern library CSS loads for every component */
+/* FAQ: To support legacy client imports, Bootstrap file organization is odd */
+@import url("./bootstrap--form.demo.css");
+@import url("./bootstrap--modal.demo.css");

package/src/lib/_imports/components/bootstrap.container.css CHANGED Viewed

@@ -1,4 +1,3 @@
-@import url("../settings/max-width.css");
 @import url("../tools/media-queries.css");
 @media (--xx-wide-and-above) {

package/src/lib/_imports/components/bootstrap.css ADDED Viewed

@@ -0,0 +1,3 @@
+/* EMPTY ON PURPOSE! */
+/* FAQ: Created to avoid 404 in pattern library. */
+/* WARNING: This file should never have styles. */

package/src/lib/_imports/components/bootstrap.form.css CHANGED Viewed

@@ -1,4 +1,3 @@
-@import url('../settings/border.css');
 .form-control {
   border: var(--global-border--normal);

package/src/lib/_imports/components/bootstrap.modal.css CHANGED Viewed

@@ -60,3 +60,6 @@
 .modal-header.has-MuiTabs .close {
   transform: translate(-25%, 25%);
 }
+.modal-header.has-MuiTabs .MuiTabs-indicator {
+  background-color: white;
+}

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

@@ -26,19 +26,19 @@
     <dt><code>&lt;a&gt;</code></dt>
     <dd>
       <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled{{/if}}>
+        {{#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{{/if}}>
+        {{#if disabled}}disabled tabindex="-1"{{/if}}>
           <span class="c-button__text">--primary</span>
         </a>
       {{/if}}
       <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled{{/if}}>
+        {{#if disabled}}disabled tabindex="-1"{{/if}}>
         <span class="c-button__text">--tertiary</span>
       </a>
     </dd>
@@ -67,12 +67,12 @@
     <dd>
       <a href="#" class="c-button c-button--{{this._self.name}}
         {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/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>
+        disabled tabindex="-1">
         <span class="c-button__text">--is-busy</span>
       </a>
     </dd>
@@ -86,14 +86,12 @@
     <dt><code>&lt;button&gt;</code></dt>
     <dd>
       <button class="c-button c-button--{{this._self.name}}
-        {{#if supports.width}}c-button--width-long{{/if}}
         {{#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 supports.width}}c-button--width-long{{/if}}
         {{#if type}}{{type}}{{/if}}"
         {{#if disabled}}disabled{{/if}}>
         <span class="c-button__text">__icon--after</span>
@@ -104,16 +102,14 @@
     <dt><code>&lt;a&gt;</code></dt>
     <dd>
       <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if supports.width}}c-button--width-long{{/if}}
         {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/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 supports.width}}c-button--width-long{{/if}}
         {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/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>
@@ -127,8 +123,7 @@
   <dd><dl>
     <dt><code>&lt;button&gt;</code></dt>
     <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
+      <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>
@@ -144,17 +139,16 @@
     {{#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{{/if}}>
+      <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{{/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{{/if}}>
+        {{#if disabled}}disabled tabindex="-1"{{/if}}>
         <span class="c-button__text">--width-long</span>
       </a>
     </dd>

package/src/lib/_imports/components/c-button/{docs.css → demo.css} RENAMED Viewed

@@ -1,10 +1,5 @@
 /* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
-dd > * {
-  margin-right: 0.5em;
-  vertical-align: middle;
-}
 .c-button > i {
   font-style: normal;
 }

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

@@ -18,15 +18,23 @@
   display: inline-block;
+  /* To ensure identical <button> and <a> instances have same width */
+  box-sizing: border-box;
   border-width: var(--global-border-width--normal);
   border-style: solid;
-  font-weight: 500;
   @extend %x-truncate--one-line;
 }
+.c-button:not(.c-button--as-link) {
+  font-weight: var(--medium);
+}
 a.c-button {
   text-decoration: none;
+  text-align: center;
+}
+a.c-button--is-busy {
+  cursor: default;
 }
 .c-button:not(:--disabled) {
@@ -79,7 +87,7 @@ a.c-button {
     var(--global-color-accent--dark);
 }
-.c-button--primary:focus:not(:active) {
+.c-button--primary:focus:not(:active, .c-button--is-busy) {
   color: var(--global-color-primary--xx-light);
   background-color: var(--global-color-accent--normal);
   border-color: var(--global-color-primary--xx-light);
@@ -118,7 +126,7 @@ a.c-button {
     var(--global-color-accent--dark);
 }
-.c-button--secondary:focus:not(:active) {
+.c-button--secondary:focus:not(:active, .c-button--is-busy) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-accent--weak);
   border-color: var(--global-color-primary--xx-dark);
@@ -156,7 +164,7 @@ a.c-button {
     var(--global-color-accent--dark);
 }
-.c-button--tertiary:focus:not(:active) {
+.c-button--tertiary:focus:not(:active, .c-button--is-busy) {
   color: var(--global-color-primary--xx-dark);
   background-color: var(--global-color-primary--light);
   border-color: var(--global-color-primary--xx-dark);
@@ -226,6 +234,7 @@ a.c-button {
   padding-inline: unset;
   font-size: inherit;
+  font-family: inherit;
 }
 .c-button--as-link:where(:not(:--disabled)):hover {
   @extend .x-link--hover;
@@ -255,7 +264,7 @@ a.c-button {
   .c-button--as-link
 ) {
   width: auto;
-  --max-width: 100%;
+  --max-width: auto;
 }
 .c-button--width-short {
   width: var(--min-width);