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

@tacc/core-styles 0.11.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 (260) 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 "/assets/{{ _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--form.docs.css → bootstrap--form.demo.css} 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.readme.md CHANGED 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/config.yml CHANGED Viewed

@@ -1,16 +1,12 @@
-preview: '@preview.bootstrap'
+context:
+  shouldLoadBootstrap: true
 variants:
   - name: default
     hidden: true
   - name: container
     status: ready
   - name: modal
-    context:
-      supportStyles:
-        - /assets/components/c-button.css
+    status: prototype
   - name: form
     label: (Portal) Form
     status: prototype
-    context:
-      supportStyles:
-        - /assets/components/c-button.css

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

@@ -3,5 +3,5 @@
 /* All Bootstrap pattern library CSS loads for every component */
 /* FAQ: To support legacy client imports, Bootstrap file organization is odd */
-@import url("./bootstrap--form.docs.css");
-@import url("./bootstrap--modal.docs.css");
+@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.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/{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,6 +18,9 @@
   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;

package/src/lib/_imports/components/c-form/c-form.hbs ADDED Viewed

@@ -0,0 +1,362 @@
+<form action="" method="POST" enctype="multipart/form-data" class="c-form">
+  <h3 class="c-form__title">Title of Form</h3>
+  <div class="c-form__desc">
+    I describe the form, but not very well.
+  </div>
+  <ul class="c-form__errors" style="display:none;">
+    <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+  </ul>
+  <div class="c-form__field has-required">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label for="name">
+      Name<span class="c-form__star">*</span>
+    </label>
+    <input
+      type="text"
+      name="name"
+      required=""
+      placeholder="Your name"
+      id="name"
+    />
+    <div class="c-form__help">
+      We use this to identify your submission.
+    </div>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <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>
+    <div class="c-form__help">
+      Choose your favorite fruit.
+    </div>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label for="wake-up-time">Wake Up Time</label>
+    <input
+      type="time"
+      name="wake-up-time"
+      id="wake-up-time"
+    />
+    <div class="c-form__help">
+      We use this to know when to wake you up.
+    </div>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label>Radio stations</label>
+    <ul 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>
+    </ul>
+    <div class="c-form__help">
+      Which radio stations do you prefer?
+    </div>
+  </div>
+  <div class="c-form__field has-type-check">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <input
+      type="checkbox"
+      name="checking-out"
+      id="checking-out"
+    />
+    <label for="checking-out">Checking Out?</label>
+    <div class="c-form__help">
+      Are you checking out today?
+    </div>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label for="">
+      Which fish do you want?
+    </label>
+    <ul 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>
+    </ul>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <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>
+    <div class="c-form__help">
+      At which time of day do you get hangry?
+    </div>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label for="life-story">Life Story</label>
+    <textarea
+      name="life-story"
+      cols="40"
+      rows="10"
+      id="life-story"
+    ></textarea>
+    <div class="c-form__help">
+      Go on, tell me everything.
+    </div>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label for="what-day-is-it">What day is it?</label>
+    <input
+      type="date"
+      name="what-day-is-it"
+      id="what-day-is-it"
+    />
+    <div class="c-form__help">
+      Please enter today's date.
+    </div>
+  </div>
+  <div class="c-form__field">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label for="your-favorite-picture">Your favorite picture</label>
+    <input
+      type="file"
+      name="your-favorite-picture"
+      id="your-favorite-picture"
+    />
+    <div class="c-form__help">
+      Upload your favorite image.
+      <small>
+        Supported types:
+        <code>.jpeg</code>,<code>.jpg</code>,<code>.gif</code>,<code>.png</code>
+      </small>
+    </div>
+  </div>
+  <div class="c-form__field has-spam-check has-required">
+    <ul class="c-form__errors" style="display:none;">
+      <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
+    </ul>
+    <label for="recaptcha_g9y93gP8">
+      Are you a robot?<span class="c-form__star">*</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>
+  <div class="c-form__buttons">
+    <button class="c-form__button" type="submit">
+      Submit
+    </button>
+    <button id="toggle-field-errors" class="c-form__button" type="button">
+      Toggle Field Errors
+    </button>
+    <button id="toggle-required-fields" class="c-form__button" type="button">
+      Toggle Required Fields
+    </button>
+  </div>
+</form>
+<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');
+    toggle.addEventListener('click', () => {
+      toggleFieldErrors( form, '.c-form__errors');
+    });
+  });
+</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, 'c-form__field', 'has-required', {
+        shouldScrollToFirst: true
+      });
+    });
+  });
+</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/components/c-form/config.yml ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ context:
2	+ shouldLoadCMS: true # temporary dependence, until proven to work on Portal

package/src/lib/_imports/components/c-form/readme.md ADDED Viewed

@@ -0,0 +1,14 @@
+To style when raw [Form elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) are insufficient.
+> <details><summary><strong>✎ Inspiration</strong></summary>
+>
+> - [Django CMS Form Default Template](https://github.com/avryhof/djangocms-forms/blob/ab38b22/djangocms_forms/templates/djangocms_forms/form_template/default.html)
+>
+> </details>
+<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>