@tacc/core-styles 0.8.7 → 0.10.0

package/src/lib/_imports/_partials/css.hbs

@@ -0,0 +1,27 @@
+{{!-- To render library basics consistently regardless of external styles --}}
+{{!-- FAQ: overwrite CMS and/or Bootstrap (if present) --}}
+<style>
+  dl dl {
+    margin-block: 0;
+  }
+  dt, dd {
+    font-family: Arial, sans;
+    color: #484848;
+    line-height: normal;
+  }
+  dt {
+    font-weight: normal;
+    margin-bottom: 10px;
+  }
+  dt:not(:first-of-type) {
+    margin-top: 20px;
+  }
+  dd {
+    margin-bottom: 10px;
+    margin-left: 25px;
+  }
+  dd > * {
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+</style>

package/src/lib/_imports/_partials/loremipsum.hbs

@@ -0,0 +1,18 @@
+<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

package/src/lib/_imports/_partials/text-and-button-as-link.hbs

@@ -0,0 +1 @@
+<p>Pack my red box with five dozen quality jugs. A quick brown fox jumps over the <button class="c-button c-button--as-link">lazy dog</button>. A waxy gent chuckled over my fab jazzy quips.</p>

package/src/lib/_imports/_partials/text-and-link.hbs

@@ -0,0 +1 @@
+<p>Pack my red box with five dozen quality jugs. A quick brown fox jumps over the <a href="#">lazy dog</a>. A waxy gent chuckled over my fab jazzy quips.</p>

package/src/lib/_imports/_preview.bootstrap-cms.hbs

@@ -0,0 +1,5 @@
+{{> @bootstrap.css }}
+
+{{> @preview.cms subdir=_target.context.subdir }}
+
+{{> @bootstrap.js }}

package/src/lib/_imports/_preview.bootstrap.hbs

@@ -0,0 +1,5 @@
+{{> @bootstrap.css }}
+
+{{> @preview subdir=_target.context.subdir }}
+
+{{> @bootstrap.js }}

package/src/lib/_imports/_preview.cms.hbs

@@ -0,0 +1,3 @@
+{{> @cms.css }}
+
+{{> @preview subdir=_target.context.subdir }}

package/src/lib/_imports/_preview.hbs

@@ -1,13 +1,22 @@
-{{! styles: base (the current component) }}
+{{! To ensure HTML comments that follow are within the head, not before it }}
+{{! 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}}' />
+{{/each}}
+<!-- styles: base (the current component) -->
 {{#unless styles.shouldSkipBase}}
   <link
     rel='stylesheet'
-    href='{{path "/{{ subdir }}/{{ _target.baseHandle }}.css"}}'
+    href='{{path "/{{ _target.context.subdir }}/{{ _target.baseHandle }}.css"}}'
   />
 {{/unless}}
 
-{{! styles: global (for every component) }}
-{{! (manually configured) }}
+
+<!-- styles: global (for every component) -->
+<!-- (manually configured) -->
 {{#each styles.external.global}}
   <link rel='stylesheet' href='{{this}}' />
 {{/each}}
@@ -15,8 +24,8 @@
   <link rel='stylesheet' href='{{path this}}' />
 {{/each}}
 
-{{! styles: local (for current component) }}
-{{! (automatically found) }}
+<!-- styles: local (for current component) -->
+<!-- (automatically found) -->
 {{#each _target.resources.assets}}
   {{#if isCSS}}
     <link
@@ -25,7 +34,7 @@
     />
   {{/if}}
 {{/each}}
-{{! (manually configured) }}
+<!-- (manually configured) -->
 {{#each styles.external.local}}
   <link rel='stylesheet' href='{{this}}' />
 {{/each}}
@@ -33,8 +42,11 @@
   <link rel='stylesheet' href='{{path this}}' />
 {{/each}}
 
-{{! scripts: local (for current component) }}
-{{! (automatically found) }}
+{{! styles: specific to pattern library (so pattern library can override any) }}
+{{> @css }}
+
+<!-- scripts: local (for current component) -->
+<!-- (automatically found) -->
 {{#each _target.resources.assets}}
   {{#if isJS}}
     <script
@@ -43,5 +55,5 @@
   {{/if}}
 {{/each}}
 
-{{! markup }}
+<!-- markup (for current component) -->
 {{{yield}}}

package/src/lib/_imports/components/_components.config.yml

@@ -1 +1,2 @@
-preview: "@components.preview"
+context:
+  subdir: "components"

package/src/lib/_imports/components/bootstrap/bootstrap.container/bootstrap.container.hbs

@@ -0,0 +1,4 @@
+<div class="container">
+  <h1>Lorem Ipsum</h1>
+  {{> @loremipsum }}
+</div>

package/src/lib/_imports/components/bootstrap/bootstrap.container/config.yml

@@ -0,0 +1,3 @@
+preview: '@preview.bootstrap'
+label: Container
+status: ready

package/src/lib/_imports/components/bootstrap/bootstrap.container/readme.md

@@ -0,0 +1,54 @@
+To add wider [Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/grid/) containers.
+
+> **⚠️ Important**
+>
+> Because Bootstrap grid is so complex, only essential changes are recommended.
+
+> **ⓘ Notice**
+>
+> Bootstrap grid is powerful, popular, and present; so we do use it as our grid.
+
+<table style="caption-side: bottom;">
+  <caption>
+
+  The columns are added using TACC's `xx-wide` and `xxx-wide` custom properties and media queries.
+
+  <caption>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Extra extra large <br>
+        <small>≥1680px</small>
+      </th>
+      <th>Extra extra extra large <br>
+        <small>≥1920px</small>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Max container width</td>
+      <td>1580px</td>
+      <td>1800px</td>
+    </tr>
+    <tr>
+      <td># of columns</td>
+      <td colspan="2">12</td>
+    </tr>
+    <tr>
+      <td>Gutter width</td>
+      <td colspan="2">30px (15px on each side of a column)</td>
+    </tr>
+    <tr>
+      <td>Nestable</td>
+      <td colspan="2">Yes</td>
+    </tr>
+  </tbody>
+</table>
+
+<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/bootstrap.modal/bootstrap.modal.hbs

@@ -0,0 +1,53 @@
+<link rel="stylesheet" href="{{path '/components/c-button.css'}}" />
+
+<dl>
+  <dt>Dynamic</dt>
+  <dd>
+    <button type="button" class="c-button c-button--secondary" data-toggle="modal" data-target="#exampleModalScrollable">
+      Launch modal
+    </button>
+    <div id="exampleModalScrollable" class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle">
+      <div class="modal-dialog modal-dialog-scrollable" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            {{> @loremipsum }}
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="c-button c-button--secondary" data-dismiss="modal">
+              Close
+            </button>
+            <button type="button" class="c-button c-button--primary">
+              Fake action
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </dd>
+  <dt>Static</dt>
+  <dd>
+    <div id="exampleModalStatic" class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalStaticTitle">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalStaticTitle">Modal title</h5>
+          </div>
+          <div class="modal-body">
+            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="c-button c-button--primary">
+              Fake action
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </dd>
+</dl>

package/src/lib/_imports/components/bootstrap/bootstrap.modal/config.yml

@@ -0,0 +1,2 @@
+preview: '@preview.bootstrap'
+label: Modal

package/src/lib/_imports/components/bootstrap/bootstrap.modal/docs.css

@@ -0,0 +1,12 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+#exampleModalStatic {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+    height: auto;
+}

package/src/lib/_imports/components/bootstrap/bootstrap.modal/readme.md

@@ -0,0 +1,8 @@
+To override and extend [Bootstrap Modals](https://getbootstrap.com/docs/4.3/components/modal/).
+
+<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/portal/bootstrap.form/bootstrap.form.hbs

@@ -0,0 +1,19 @@
+<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">
+  <br />
+  <label for="field-username">Username</label>
+  <div class="input-group">
+    <div class="input-group-prepend">
+      <div class="input-group-text">@</div>
+    </div>
+    <input type="text" class="form-control" id="field-username" name="username" placeholder="Username">
+  </div>
+  <br />
+  <label for="field-intro">Tell us about yourself</label>
+  <textarea class="form-control" id="field-intro" name="intro" rows="3"></textarea>
+  <br />
+  <button type="submit" class="c-button c-button--primary">Submit</button>
+</form>

package/src/lib/_imports/components/bootstrap/portal/bootstrap.form/config.yml

@@ -0,0 +1,3 @@
+preview: '@preview.bootstrap'
+label: Form
+status: prototype

package/src/lib/_imports/components/bootstrap/portal/bootstrap.form/docs.css

@@ -0,0 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+form {
+    margin: 1em;
+}

package/src/lib/_imports/components/bootstrap/portal/bootstrap.form/readme.md

@@ -0,0 +1,17 @@
+To override and extend [Bootstrap Forms](https://getbootstrap.com/docs/4.3/components/forms/).
+
+> **⚠️ WARNING**
+>
+> Core Styles are negligible, because this is used **only on Portal** to extend **its** overrides of Bootstrap.
+
+> **→ TO DO**
+>
+> - [ ] **Either** migrate Portal Bootstrap form styling to this component.
+> - [ ] **Or** return these styles to Portal (and remove form Core Styles).
+
+<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.container.css

@@ -1,18 +1,10 @@
-/*
-Container (Bootstrap)
-
-Add to Bootstrap styles. See:
-
-- [Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/grid/)
-
-Styleguide Components.Bootstrap.Grid
-*/
+@import url("../settings/max-width.css");
 @import url("../tools/media-queries.css");
 
-@media (--x-wide-and-above) {
+@media (--xx-wide-and-above) {
   .container { max-width: var(--global-max-width--x-wide); }
 }
-@media (--xx-wide-and-above) {
+@media (--xxx-wide-and-above) {
   .container { max-width: var(--global-max-width--xx-wide); }
 }
 /* FAQ: We can do this, but Design does not want to stretch this wide */

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

@@ -1,10 +1,3 @@
-/*
-Form (Bootstrap)
-Override Bootstrap styles. See:
-- [ReactStrap Forms](https://reactstrap.github.io/components/form/)
-- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/forms/)
-Styleguide Components.Bootstrap.Form
-*/
 @import url('../settings/border.css');
 
 .form-control {

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

@@ -1,15 +1,3 @@
-/* TODO: Migrate any other should-be-global Portal modal styles to here */
-/* FP-344: Consider a Modal component and a CSS module */
-/*
-Modal (Bootstrap)
-
-Override Bootstrap styles. See:
-
-- [ReactStrap Forms](https://reactstrap.github.io/components/modals/)
-- [Bootstrap Forms](https://getbootstrap.com/docs/4.4/components/modal/)
-
-Styleguide Components.Bootstrap.Modal
-*/
 @import url('../tools/x-truncate.css');
 
 .modal-content,

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

@@ -22,6 +22,7 @@
       </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"
@@ -41,6 +42,7 @@
         <span class="c-button__text">--tertiary</span>
       </a>
     </dd>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -60,6 +62,7 @@
         <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}}
@@ -73,6 +76,7 @@
         <span class="c-button__text">--is-busy</span>
       </a>
     </dd>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -96,6 +100,7 @@
         <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}}
@@ -113,6 +118,7 @@
         <i class="c-button__icon--after" aria-description="exit page">X</i>
       </a>
     </dd>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -135,6 +141,7 @@
         <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}}
@@ -151,6 +158,7 @@
         <span class="c-button__text">--width-long</span>
       </a>
     </dd>
+    {{/if}}
   </dl><dd>
   {{/if}}
 
@@ -168,6 +176,7 @@
         </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--size-small
@@ -176,6 +185,7 @@
           <span class="c-button__text">--size-small</span>
         </a>
       </dd>
+      {{/if}}
     </dl>
     {{else}}
     <small>(no small size allowed)</small>

package/src/lib/_imports/components/c-button/{c-button.config.yml → config.yml}

@@ -5,6 +5,7 @@ context:
     width: true
     size: true
     size-small: true
+    link-tag: true
 variants:
   # type
   - name: default
@@ -30,6 +31,7 @@ variants:
       supports:
         width: false
         size: false
+        link-tag: false
   # state
   - name: is-busy
     notes: For a button whose being clicked started an incomplete process (should have `disabled` attribute)

package/src/lib/_imports/components/c-button/{c-button_docs.css → docs.css}

@@ -1,3 +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;

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

@@ -1,4 +1,5 @@
 @import url("../tools/x-truncate.css");
+@import url('../tools/x-link.css');
 
 @custom-selector :--disabled
   :disabled,
@@ -7,6 +8,7 @@
 
 
 
+
 /* Base */
 
 .c-button {
@@ -20,7 +22,6 @@
   border-style: solid;
 
   font-weight: 500;
-  font-size: 0.75rem; /* 12px (10px design * 1.2 design-to-app ratio) */
 
   @extend %x-truncate--one-line;
 }
@@ -218,14 +219,19 @@ a.c-button {
 /* Modifiers: Types: As Link */
 
 .c-button--as-link {
-  color: var(--global-color-accent--normal);
+  @extend .x-link;
 
   background: unset;
   border: unset;
   padding-inline: unset;
+
+  font-size: inherit;
+}
+.c-button--as-link:where(:not(:--disabled)):hover {
+  @extend .x-link--hover;
 }
-.c-button--as-link:not(:--disabled):hover {
-  text-decoration: underline;
+.c-button--as-link:active {
+  @extend .x-link--active;
 }
 
 /* Modifiers: Types: Is Busy */
@@ -247,7 +253,10 @@ a.c-button {
   .c-button--width-long,
   .c-button--size-small,
   .c-button--as-link
-),
+) {
+  width: auto;
+  --max-width: 100%;
+}
 .c-button--width-short {
   width: var(--min-width);
 }

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

@@ -0,0 +1,53 @@
+/*
+Message
+
+Inform user about a temporary status.
+
+- .c-message--info - neither positive nor negative
+- .c-message--success - a positive status
+- .c-message--warning - a minor negative status
+- .c-message--danger - a major negative status
+
+Reference:
+- https://getbootstrap.com/docs/4.0/components/alerts/
+
+Styleguide Components.Message
+*/
+@import url('../settings/color.css');
+
+/* Base */
+
+.c-message {
+  padding: 15px 20px;
+  border: var(--global-border--thick);
+  font-size: var(--global-font-size--small);
+}
+
+/* Elements */
+
+.c-message a {
+  color: inherit;
+}
+
+/* Modifiers */
+
+.c-message--info {
+  color: var(--global-color-info--dark);
+  background-color: var(--global-color-info--light);
+  border-color: var(--global-color-info--normal);
+}
+.c-message--success {
+  color: var(--global-color-success--dark);
+  background-color: var(--global-color-success--weak);
+  border-color: var(--global-color-success--normal);
+}
+.c-message--warning {
+  color: var(--global-color-warning--dark);
+  background-color: var(--global-color-warning--weak);
+  border-color: var(--global-color-warning--normal);
+}
+.c-message--error {
+  color: var(--global-color-danger--dark);
+  background-color: var(--global-color-danger--weak);
+  border-color: var(--global-color-danger--normal);
+}

package/src/lib/_imports/elements/_elements.config.yml

@@ -1 +1,2 @@
-preview: "@elements.preview"
+context:
+  subdir: "elements"

package/src/lib/_imports/elements/bootstrap.css

@@ -0,0 +1,19 @@
+/*
+Elements (Bootstrap)
+
+Curated element styles from Bootstrap 4.
+
+Reference:
+
+- [Bootstrap Reboot](https://getbootstrap.com/docs/4.0/content/reboot/)
+
+Styleguide Elements.Bootstrap
+*/
+
+/* reboot.scss */
+button, input, optgroup, select, textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}