@tacc/core-styles 2.14.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",

package/src/lib/_imports/_partials/field-errors.hbs

@@ -0,0 +1 @@
+{{> @form-errors class=class wrapClass=wrapClass typeName="field" }}

package/src/lib/_imports/_partials/form--login.hbs

@@ -0,0 +1,84 @@
+{{#message}}
+{{> @message content=. }}
+{{/message}}
+
+<form action="" class="{{ class.root }} {{ class.modifier }}">
+  <h3 {{#if class.title }}class="{{ class.title }}"{{/if}}>
+    <img
+      src="https://www.tacc.utexas.edu/static/assets/TACC-formal-Black-1c-5602fc8f.svg"
+      alt="TACC Logo"
+    />
+    <span>Log In</span>
+  </h3>
+  <p {{#if class.desc }}class="{{ class.desc }}"{{/if}}>to continue to the TACC User Portal</p>
+
+  {{> @form-errors class=class.errors wrapClass=class.form_errors_wrap }}
+
+  <div class="{{ class.field }} {{ class.has_required }}">
+    <label for="username">
+      User Name
+      <span class="{{ class.badge }}">Required</span>
+    </label>
+    <input
+      name="username"
+      type="text"
+      autocomplete="username"
+      id="username"
+      required
+    >
+  </div>
+  <div class="{{ class.field }} {{ class.has_required }}">
+    <label for="password">
+      Password
+      <span {{#if class.badge }}class="{{ class.badge }}"{{/if}}>Required</span>
+    </label>
+    <input
+      name="password"
+      type="password"
+      autocomplete="current-password"
+      id="password"
+      required
+    >
+  </div>
+  <footer {{#if class.buttons }}class="{{ class.buttons }}"{{/if}}>
+    <a
+      href="https://accounts.tacc.utexas.edu/register"
+      rel="noreferrer"
+      target="_blank"
+    >
+      Create Account
+    </a>
+    <button {{#if class.button }}class="{{ class.button }}"{{/if}} type="submit">
+      Log In
+    </button>
+  </footer>
+  <nav {{#if class.nav }}class="{{ class.nav }}"{{/if}}>
+    <p>Having trouble logging in?</p>
+    <a
+      href="https://example.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      Reset Password
+    </a>
+    <a
+      href="https://example.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+      Account Help
+    </a>
+  </nav>
+</form>
+<script type="module">
+  import toggleFieldErrors from '{{ path "/components/raw/c-form/toggle-field-errors.js" }}';
+
+  const form = document.querySelector('form');
+  const selector = '{{{ selectors.errorList }}}';
+
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    console.log({ form, selector });
+    toggleFieldErrors( form, selector );
+  });
+</script>

package/src/lib/_imports/_partials/form-errors.hbs

@@ -0,0 +1,12 @@
+{{#if wrapClass}}
+<div class="{{ wrapClass }}" style="display:none;">
+{{/if}}
+  <ul {{#if class }}class="{{ class }}"{{/if}}{{#unless wrapClass}} style="display:none;"{{/unless}}>
+    <li>
+      Sample <strong>{{#if typeName}}{{typeName}}{{else}}form{{/if}}</strong>
+      error. <a href="https://example.com" target="_blank">Link.</a>
+    </li>
+  </ul>
+{{#if wrapClass}}
+</div>
+{{/if}}

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

@@ -0,0 +1,456 @@
+{{#message}}
+{{> @message content=. }}
+{{/message}}
+
+{{#if markup.wrap_start}}
+{{{markup.wrap_start}}}
+{{else}}
+<form action="" method="POST" enctype="multipart/form-data" class="{{ class.root }}">
+
+  <h3 {{#if class.title }}class="{{ class.title }}"{{/if}}>
+    (Optional) Title of Form
+  </h3>
+  <p {{#if class.desc }}class="{{ class.desc }}"{{/if}}>
+    (Optional) Description of the form.
+  </p>
+{{/if}}
+
+  {{> @form-errors class=class.errors wrapClass=class.form_errors_wrap }}
+
+  <div class="{{ class.field }} {{ class.has_required }}">
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="name">
+      Name
+      <span {{#if class.badge }}class="{{ class.badge }}"{{/if}}
+        aria-label="(required)">*</span>
+    </label>
+
+    <input
+      type="text"
+      name="name"
+      required=""
+      placeholder="Your name"
+      id="name"
+    />
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      We use this to identify your submission.
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="favorite-fruit">Favorite Fruit</label>
+
+    <select name="favorite-fruit" id="favorite-fruit">
+      <option value="" selected="">
+        Please select an option
+      </option>
+      <option value="Apple">Apple</option>
+      <option value="Banana">Banana</option>
+      <option value="Cherry">Cherry</option>
+      <option value="Durian">Durian</option>
+      <option value="Other">Other</option>
+      <option value="Whatever">Whatever</option>
+    </select>
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      Choose your favorite fruit.
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="wake-up-time">Wake Up Time</label>
+
+    <input
+      type="time"
+      name="wake-up-time"
+      id="wake-up-time"
+    />
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      We use this to know when to wake you up.
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label>Radio stations</label>
+
+    {{#with inputListTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}menu{{/if}}
+      {{#if ../class.radio_menu }}class="{{../class.radio_menu}}"{{/if}}
+      id="radio-stations"
+    >
+      <li>
+        <label for="radio-stations-0">
+          <input
+            type="radio"
+            name="radio-stations"
+            value="LX 1234"
+            id="radio-stations-0"
+          />
+          LX 1234
+        </label>
+      </li>
+      <li>
+        <label for="radio-stations-1">
+          <input
+            type="radio"
+            name="radio-stations"
+            value="LOVE 45"
+            id="radio-stations-1"
+          />
+          LOVE 45
+        </label>
+      </li>
+      <li>
+        <label for="radio-stations-2">
+          <input
+            type="radio"
+            name="radio-stations"
+            value="OLD 555"
+            id="radio-stations-2"
+          />
+          OLD 555
+        </label>
+      </li>
+    </{{#if tag}}{{tag}}{{else}}menu{{/if}}>
+    {{/with}}
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      Which radio stations do you prefer?
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div class="{{ class.field }} {{ class.has_checkbox }}">
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <input
+      type="checkbox"
+      name="checking-out"
+      id="checking-out"
+    />
+
+    <label for="checking-out">Checking Out?</label>
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      Are you checking out today?
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="">
+      Which fish do you want?
+    </label>
+
+    {{#with inputListTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}menu{{/if}}
+      {{#if ../class.check_menu }}class="{{../class.check_menu}}"{{/if}}
+      id="which-fish-do-you-want"
+    >
+      <li>
+        <label for="which-fish-do-you-want-0">
+          <input
+            type="checkbox"
+            name="which-fish-do-you-want"
+            value="one fish"
+            id="which-fish-do-you-want-0"
+          />
+          one fish
+        </label>
+      </li>
+      <li>
+        <label for="which-fish-do-you-want-1">
+          <input
+            type="checkbox"
+            name="which-fish-do-you-want"
+            value="two fish"
+            id="which-fish-do-you-want-1"
+          />
+          two fish
+        </label>
+      </li>
+      <li>
+        <label for="which-fish-do-you-want-2">
+          <input
+            type="checkbox"
+            name="which-fish-do-you-want"
+            value="red fish"
+            id="which-fish-do-you-want-2"
+          />
+          red fish
+        </label>
+      </li>
+      <li>
+        <label for="which-fish-do-you-want-3">
+          <input
+            type="checkbox"
+            name="which-fish-do-you-want"
+            value="blue fish"
+            id="which-fish-do-you-want-3"
+          />
+          blue fish
+        </label>
+      </li>
+      <li>
+        <label for="which-fish-do-you-want-4">
+          <input
+            type="checkbox"
+            name="which-fish-do-you-want"
+            value="all the fish"
+            id="which-fish-do-you-want-4"
+          />
+          all the fish
+        </label>
+      </li>
+    </{{#if tag}}{{tag}}{{else}}menu{{/if}}>
+    {{/with}}
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="hangry-time">Hangry Time</label>
+
+    <select name="hangry-time" id="hangry-time">
+      <option value="" selected="">
+        Please select an option
+      </option>
+      <option value="Morning">Morning</option>
+      <option value="Noon">Noon</option>
+      <option value="Afternoon">Afternoon</option>
+      <option value="Evening">Evening</option>
+      <option value="Night">Night</option>
+      <option value="Midnight">Midnight</option>
+    </select>
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      At which time of day do you get hangry?
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="life-story">Life Story</label>
+
+    <textarea
+      name="life-story"
+      cols="40"
+      rows="10"
+      id="life-story"
+    ></textarea>
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      Go on, tell me everything.
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="what-day-is-it">What day is it?</label>
+
+    <input
+      type="date"
+      name="what-day-is-it"
+      id="what-day-is-it"
+    />
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      Please enter today's date.
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div {{#if class.field }}class="{{ class.field }}"{{/if}}>
+    {{#if (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/if}}
+
+    <label for="your-favorite-picture">Your favorite picture</label>
+
+    <input
+      type="file"
+      name="your-favorite-picture"
+      id="your-favorite-picture"
+    />
+
+    {{#unless (eq errorLoc "top")}}
+      {{> @field-errors class=class.errors wrapClass=class.field_errors_wrap }}
+    {{/unless}}
+
+    {{#with helpTextTag as | tag |}}
+    <{{#if tag}}{{tag}}{{else}}small{{/if}} class="{{../class.hint}}">
+      Upload your favorite image.
+      <small class="{{../class.hint}}">
+        Supported types:
+        <code>.jpeg</code>,<code>.jpg</code>,<code>.gif</code>,<code>.png</code>
+      </small>
+    </{{#if tag}}{{tag}}{{else}}small{{/if}}>
+    {{/with}}
+  </div>
+
+  <div class="{{ class.field }} {{ class.has_spam_filter }} {{ class.has_required }}">
+    <label for="recaptcha_g9y93gP8">
+      Are you a robot?
+      <span {{#if class.badge }}class="{{ class.badge }}"{{/if}}
+        aria-label="(required)">*</span>
+    </label>
+
+    <script src="https://www.google.com/recaptcha/api.js"></script>
+    <script type="text/javascript">
+      // Submit function to be called, after reCAPTCHA was successful. var
+      onSubmit_9e32f28ccb9545109ff6ae891f9af324 = function(token){" "}
+      {console.log("reCAPTCHA validated for 'data-widget-uuid=\"9e32f28ccb9545109ff6ae891f9af324\"'")};
+    </script>
+    <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" required="" id="recaptcha_g9y93gP8" data-widget-uuid="9e32f28ccb9545109ff6ae891f9af324" data-callback="onSubmit_9e32f28ccb9545109ff6ae891f9af324" data-size="normal"></div>
+  </div>
+
+  <footer {{#if class.buttons }}class="{{ class.buttons }}"{{/if}}>
+    <button
+      {{#if class.button }}class="{{ class.button }}"{{/if}}
+      type="submit"
+    >
+      Submit
+    </button>
+    <button
+      id="toggle-field-errors"
+      {{#if class.button }}class="{{ class.button }}"{{/if}}
+      type="button"
+    >
+      Toggle Field Errors
+    </button>
+    <button
+      id="toggle-required-fields"
+      {{#if class.button }}class="{{ class.button }}"{{/if}}
+      type="button"
+    >
+      Toggle Required Fields
+    </button>
+  </footer>
+
+{{#if markup.wrap_end}}
+{{{markup.wrap_end}}}
+{{else}}
+</form>
+{{/if}}
+
+<script type="module">
+  import toggleFieldErrors from '{{ path "/components/raw/c-form/toggle-field-errors.js" }}';
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('toggle-field-errors');
+    const form = document.querySelector('form');
+    const selector = '{{{ selectors.errorList }}}'
+
+    toggle.addEventListener('click', () => {
+      toggleFieldErrors( form, selector );
+    });
+  });
+</script>
+<script type="module">
+  import toggleRequiredFields from '{{ path "/components/raw/c-form/toggle-required-fields.js" }}';
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggle = document.getElementById('toggle-required-fields');
+    const form = toggle.closest('form');
+
+    toggle.addEventListener('click', () => {
+      toggleRequiredFields( form, {
+        shouldScrollToFirst: true,
+        classNames: { wrapRequired: '{{{ classNames.has_required }}}' },
+        selectors: { wrap: '{{{ selectors.wrap }}}' }
+      });
+    });
+  });
+</script>
+<script type="module">
+  document.addEventListener('DOMContentLoaded', () => {
+    const form = document.querySelector('form');
+
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+
+      /* TODO: Show success message on form */
+      alert('Form was not submitted, because this is an incomplete demo.');
+    });
+  });
+</script>

package/src/lib/_imports/_partials/link-list.hbs

@@ -1,9 +1,19 @@
-{{#each links as | link |}}{{#if ../is-list}}<li>{{/if}}{{!
-
-  }}<a
-      {{#if link.href}}href="{{#if is-anchor-href}}#{{/if}}{{link.href}}"{{/if}}
-      {{#if link.id}}id="{{link.id}}"{{/if}}>{{!
-      }}{{link.name}}{{!
-  }}</a>{{!
-
-}}{{#if ../is-list}}</li>{{/if}}{{/each}}
+{{#each links as | link |}}
+  {{#if ../is-list}}
+  <li>
+  {{/if}}
+    <a
+      {{#if link.href~}}href="
+        {{~#if is-anchor-href}}#{{link.href~}}
+        {{~else if is-internal}}{{path link.href~}}
+        {{~else}}{{link.href}}{{/if~}}
+      "{{~/if}}
+      {{#if link.id}}id="{{link.id}}"{{/if}}
+      {{#if link.target}}target="{{link.target}}"{{/if}}
+    >
+      {{{link.name}}}
+    </a>
+  {{#if ../is-list}}
+  </li>
+  {{/if}}
+{{/each}}

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

@@ -29,10 +29,10 @@
 
   @extend .x-truncate--one-line;
 }
-:--c-button:not(:--disabled) {
+:--c-button:where(:not(:--disabled)) {
   cursor: pointer; /* WARNING: Opinionated */
 }
-:--c-button:not(:--c-button--as-link) {
+:--c-button:where(:not(:--c-button--as-link)) {
   font-weight: var(--medium);
 }
 
@@ -294,13 +294,13 @@ a:--c-button--is-busy {
 
 /* Modifiers: Sizes */
 
-:--c-button:not(
+:--c-button:where(:not(
   :--c-button--width-short,
   :--c-button--width-medium,
   :--c-button--width-long,
   :--c-button--size-small,
   :--c-button--as-link
-) {
+)) {
   width: auto;
   --max-width: auto;
 }

package/src/lib/_imports/components/c-form/c-form--login.hbs

@@ -0,0 +1 @@
+{{> @form--login class=classNames selectors=selectors message=message }}