@tacc/core-styles 0.11.0 → 2.0.0

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

@@ -0,0 +1,365 @@
+<p class="c-message c-message--scope-global">
+  This component currently depends on CMS stylesheets. When this component is used on the Portal, the font size should not be this small. When this component is proven to work independent of CMS, its demo font will not match CMS and this message will be removed.
+</p>
+<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

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

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

@@ -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>

package/src/lib/_imports/components/c-form/toggle-field-errors.js

@@ -0,0 +1,101 @@
+/** To toggle error list visibility */
+
+/**
+ * @constant
+ * @default
+ * @type {object.<string,*>}
+ */
+ const DEFAULT_CLASS_NAMES = {
+  jsShow: 'js-show-errors',
+  jsHide: 'js-hide-errors'
+};
+
+/**
+ * @constant
+ * @default
+ * @type {object.<string,*>}
+ */
+const DEFAULT_CALLBACKS = {
+  hideEach: function ( list ) {
+    list.style.display = 'none';
+  },
+  showEach: function ( list ) {
+    list.style.display = '';
+  },
+  showAll: ( lists ) => {
+    lists[0].scrollIntoView( false );
+  }
+};
+
+/**
+ * On each error list hide/show
+ * @callback onEach
+ * @param {HTMLElement} list
+ */
+/**
+ * After all error lists are hidden/shown
+ * @callback afterAll
+ * @param {array.<HTMLElement>} lists
+ */
+
+/**
+ * HIDE an error list
+ * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} field
+ * @param {string} errorListClass - class on field's wrapper
+ */
+function hideErrorList( list, classNames, callback ) {
+  list.classList.add( classNames.jsHide );
+  list.classList.remove( classNames.jsShow );
+  if ( typeof callback === 'function' ) {
+    callback( list );
+  }
+}
+
+/**
+ * SHOW an error list
+ * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} field
+ * @param {string} errorListClass - class on field's wrapper
+ */
+function showErrorList( list, classNames, callback ) {
+  list.classList.add( classNames.jsShow );
+  list.classList.remove( classNames.jsHide );
+  if ( typeof callback === 'function' ) {
+    callback( list );
+  }
+}
+
+/**
+ * Toggle error lists' visibility
+ * @param {Document|HTMLElement} [scope=document] - where to search for lists
+ * @param {string} [selector] - selector to find error lists
+ * @param {object.<string,function>} [optCallbacks]
+ * @param {onEach} [optCallbacks.showEach] - on each list show
+ * @param {onEach} [optCallbacks.hideEach] - on each list hide
+ * @param {afterAll} [optCallbacks.showAll] - on all lists shown
+ * @param {afterAll} [optCallbacks.hideAll] - on all lists hidden
+ */
+export default function toggleErrorLists( scope, selector, optCallbacks ) {
+  const classNames = DEFAULT_CLASS_NAMES;
+  const callbacks = Object.assign( DEFAULT_CALLBACKS, optCallbacks );
+  const lists = scope.querySelectorAll( selector );
+
+  let didHide = false;
+  let didShow = false;
+
+  [ ...lists ].forEach( list => {
+    if ( list.classList.contains( classNames.jsShow ) ) {
+      hideErrorList( list, classNames, callbacks.hideEach );
+      didHide = true;
+    } else {
+      showErrorList( list, classNames, callbacks.showEach );
+      didShow = true;
+    }
+  });
+
+  if ( didHide && typeof callbacks.hideAll === 'function' ) {
+    callbacks.hideAll( lists );
+  }
+  if ( didShow && typeof callbacks.showAll === 'function' ) {
+    callbacks.showAll( lists );
+  }
+}

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

@@ -0,0 +1,85 @@
+/** To toggle required attribute (and classes) of fields (and field wrappers) */
+
+/**
+ * @constant
+ * @default
+ * @type {object.<string,*>}
+ */
+ const DEFAULT_CLASS_NAMES = {
+  errorList: null,
+  jsIs: 'js-is-required',
+  jsNot: 'js-not-required'
+};
+
+/**
+ * @constant
+ * @default
+ * @type {object.<string,*>}
+ */
+ const DEFAULT_OPTIONS = {
+  shouldScrollToFirst: false
+};
+
+/**
+ * Make a field NOT required (and update field wrapper accordingly)
+ * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} field
+ * @param {string} wrapClassRequired - class on field's wrapper
+ */
+function unRequireField( field, classNames ) {
+  const wrap = field.closest('.' +  classNames.wrap );
+
+  field.required = false;
+  field.classList.add( classNames.jsNot );
+  field.classList.remove( classNames.jsIs );
+  if ( wrap && classNames.wrapRequired ) {
+    wrap.classList.remove( classNames.wrapRequired );
+  }
+}
+
+/**
+ * Make a field REQUIRED (and update field wrapper accordingly)
+ * @param {HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement} field
+ * @param {string} wrapClassRequired - class on field's wrapper
+ */
+function requireField( field, classNames ) {
+  const wrap = field.closest('.' + classNames.wrap );
+
+  field.required = true;
+  field.classList.add( classNames.jsIs );
+  field.classList.remove( classNames.jsNot );
+  if ( wrap && classNames.wrapRequired ) {
+    wrap.classList.add( classNames.wrapRequired );
+  }
+}
+
+/**
+ * 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 {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
+  });
+  const options = Object.assign( DEFAULT_OPTIONS, opts );
+  const requiredFields = scope.querySelectorAll(`
+    [required]:is(input, select, textarea),
+    .` + classNames.jsNot + `
+  `);
+
+  [ ...requiredFields ].forEach( field => {
+    if ( field.hasAttribute('required') ) {
+      unRequireField( field, classNames );
+    } else {
+      requireField( field, classNames );
+    }
+  });
+
+  if ( options.shouldScrollToFirst ) {
+    requiredFields[0].scrollIntoView( false );
+  }
+}