@tacc/core-styles 2.13.0 → 2.15.0

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

@@ -1,366 +1 @@
-{{#warning}}
-{{> @message tag="p" content=this }}
-{{/warning}}
-
-<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>
+{{> @form class=classNames selectors=selectors message=message }}

package/src/lib/_imports/components/c-form/config.yml

@@ -1,14 +1,28 @@
+context:
+  helpTextTag: div
+  inputListTag: ul
+  selectors:
+    errorList: .c-form__errors
+    wrap: .c-form__field
+  classNames:
+    root: c-form
+    title: c-form__title
+    desc: c-form__desc
+    errors: c-form__errors
+    field: c-form__field
+    badge: c-form__star
+    hint: c-form__help
+    has_required: has-required
+    has_checkbox: has-type-check
+    has_spam_filter: has-spam-check
+    buttons: c-form__buttons
+    button: c-form__button
 variants:
   - name: default
     status: prototype
-    context:
-      warning: This component looks better with <code>elements/form.cms.css</code>, but that styles is not loaded by default. To understand the problem, see "Portal" variant.
-      supportStyles:
-        - ../../assets/components/c-message.css
   - name: portal
     context:
       shouldLoadPortal: true
-      warning: This component looks better with <code>elements/form.cms.css</code>, but that styles is not loaded for this variant. When this component is used on the Portal, those necessary CMS styles are loaded via <code>LoginComponent.module.css</code> specifically for Login page, but incidentally loaded for entire Portal (and thus depended on). When this component is styled accurately independent of CMS, this message should be removed. <small>The solution is likely to change <code>elements/form.cms.css</code> to be <code>elements/form.css</code>.</small>
   - name: cms
     label: CMS
     status: ready

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

@@ -1,10 +1,4 @@
-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>
+To style when raw [Form elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content) alone are **not** sufficient.
 
 <script>
 /* To open external links in new window */

package/src/lib/_imports/components/c-form/toggle-required-fields.js

@@ -6,27 +6,44 @@
  * @type {object.<string,*>}
  */
  const DEFAULT_CLASS_NAMES = {
-  errorList: null,
+  /* The class added when required state has been changed and is active */
   jsIs: 'js-is-required',
-  jsNot: 'js-not-required'
+  /* The class added when required state has been changed and is not active */
+  jsNot: 'js-not-required',
+  /* The class for the wrapper of a field that is required */
+  wrapRequired: undefined,
 };
 
 /**
  * @constant
  * @default
- * @type {object.<string,*>}
+ * @type {object.<*,*>}
  */
  const DEFAULT_OPTIONS = {
-  shouldScrollToFirst: false
+  /* @type {boolean} - should scroll to the first required field */
+  shouldScrollToFirst: false,
+  /* @type {DEFAULT_CLASS_NAMES} */
+  classNames: {}
+};
+
+/**
+ * @constant
+ * @default
+ * @type {object.<string,*>}
+ */
+ const DEFAULT_SELECTORS = {
+  /* The wrapper of a field */
+  wrap: 'div'
 };
 
 /**
  * Make a field NOT required (and update field wrapper accordingly)
  * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} field
- * @param {string} wrapClassRequired - class on field's wrapper
+ * @param {DEFAULT_CLASS_NAMES} classNames
+ * @param {DEFAULT_SELECTORS} selectors
  */
-function unRequireField( field, classNames ) {
-  const wrap = field.closest('.' +  classNames.wrap );
+function unRequireField( field, classNames, selectors ) {
+  const wrap = field.closest( selectors.wrap );
 
   field.required = false;
   field.classList.add( classNames.jsNot );
@@ -39,10 +56,11 @@ function unRequireField( field, classNames ) {
 /**
  * Make a field REQUIRED (and update field wrapper accordingly)
  * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} field
- * @param {string} wrapClassRequired - class on field's wrapper
+ * @param {DEFAULT_CLASS_NAMES} classNames
+ * @param {DEFAULT_SELECTORS} selectors
  */
-function requireField( field, classNames ) {
-  const wrap = field.closest('.' + classNames.wrap );
+function requireField( field, classNames, selectors ) {
+  const wrap = field.closest( selectors.wrap );
 
   field.required = true;
   field.classList.add( classNames.jsIs );
@@ -55,16 +73,14 @@ function requireField( field, classNames ) {
 /**
  * Toggle required attribute (and classes) of fields (and field wrappers)
  * @param {Document|HTMLElement} [scope=document] - where to search for fields
- * @param {string} [wrapClass] - class on all field wrappers
- * @param {string} [wrapRequiredClass] - class on required fields' wrappers
  * @param {object.<string,*>} [opts]
+ * @param {DEFAULT_CLASS_NAMES} [opts.classNames] - to scroll to first such field
+ * @param {DEFAULT_SELECTORS} [opts.selectors] - to scroll to first such field
  * @param {boolean} [opts.shouldScrollToFirst] - to scroll to first such field
  */
-export default function toggleRequiredFields( scope = document, wrapClass, wrapRequiredClass, opts ) {
-  const classNames = Object.assign( DEFAULT_CLASS_NAMES, {
-    wrap: wrapClass,
-    wrapRequired: wrapRequiredClass
-  });
+export default function toggleRequiredFields( scope = document, opts ) {
+  const classNames = Object.assign( DEFAULT_CLASS_NAMES, opts.classNames );
+  const selectors = Object.assign( DEFAULT_SELECTORS, opts.selectors );
   const options = Object.assign( DEFAULT_OPTIONS, opts );
   const requiredFields = scope.querySelectorAll(`
     [required]:is(input, select, textarea),
@@ -73,9 +89,9 @@ export default function toggleRequiredFields( scope = document, wrapClass, wrapR
 
   [ ...requiredFields ].forEach( field => {
     if ( field.hasAttribute('required') ) {
-      unRequireField( field, classNames );
+      unRequireField( field, classNames, selectors );
     } else {
-      requireField( field, classNames );
+      requireField( field, classNames, selectors );
     }
   });
 

package/src/lib/_imports/components/c-form--cms.css

@@ -1,11 +1,12 @@
 @import url("../components/c-message.css");
 @import url("../components/c-message--expanded.css");
+@import url("../tools/selectors.form.css");
 
 
 
 /* Errors */
 
-.c-form > .c-form__errors {
+:--form__errors--form {
   @extend :--c-message;
   @extend :--c-message--type;
   @extend :--c-message--type-error;
@@ -13,7 +14,7 @@
   @extend :--c-message--scope-section;
   @extend :--c-message--type-error:--c-message--scope-section;
 }
-.c-form__field .c-form__errors li {
+:--form__errors--field li {
   @extend :--c-message;
   @extend :--c-message--type;
   @extend :--c-message--type-error;

package/src/lib/_imports/components/c-form--portal.css

@@ -1,11 +1,12 @@
 @import url("../components/c-message.css");
 @import url("../components/c-message--compact.css");
+@import url("../tools/selectors.form.css");
 
 
 
 /* Errors */
 
-.c-form > .c-form__errors {
+:--form__errors--form {
   @extend :--c-message;
   @extend :--c-message--type;
   @extend :--c-message--type-error;
@@ -13,7 +14,7 @@
   @extend :--c-message--scope-section;
   @extend :--c-message--type-error:--c-message--scope-section;
 }
-.c-form__field .c-form__errors li {
+:--form__errors--field li {
   @extend :--c-message;
   @extend :--c-message--type;
   @extend :--c-message--type-error;