@tacc/core-styles 2.14.0 → 2.15.0

package/src/lib/_imports/components/django-cms-forms/django-cms-forms.hbs

@@ -1,408 +1 @@
-{{> @message
-    tag="p"
-    content='This component is maintained simuiltaneously with <a href="../detail/c-form" target="_parent">C Form</code></a> and should look identical. Eventually, the two should have a single source of truth. To learn more, read <a href="https://confluence.tacc.utexas.edu/x/vJd9E" target="_blank">(Confluence) APCD - Form Markup &amp; Styles</a>.'
-}}
-<div class="forms">
-
-  <h3 class="title">Title of Form</h3>
-  <div class="description">
-    I describe the form, but not very well.
-  </div>
-
-  <div class="form-wrapper">
-    <form action="" method="POST" enctype="multipart/form-data">
-      <div class="form-errors" style="display:none;">
-        <ul class="errorlist">
-          <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-        </ul>
-      </div>
-
-      <div class="field-wrapper textinput required">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="name">
-          Name<span class="asterisk">*</span>
-        </label>
-
-        <input
-          type="text"
-          name="name"
-          required=""
-          placeholder="Your name"
-          class="textinput"
-          id="name"
-        />
-
-        <div id="help-text-name" class="help-text">
-          We use this to identify your submission.
-        </div>
-      </div>
-
-      <div class="field-wrapper select">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="favorite-fruit">Favorite Fruit</label>
-
-        <select name="favorite-fruit" class="choicefield" 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 id="help-text-favorite-fruit" class="help-text">
-          Choose your favorite fruit.
-        </div>
-      </div>
-
-      <div class="field-wrapper timeinput">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="wake-up-time">Wake Up Time</label>
-
-        <input
-          type="time"
-          name="wake-up-time"
-          class="timeinput"
-          id="wake-up-time"
-        />
-
-        <div id="help-text-wake-up-time" class="help-text">
-          We use this to know when to wake you up.
-        </div>
-      </div>
-
-      <div class="field-wrapper radioselect">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="radio-stations_0">Radio stations</label>
-
-        <ul id="radio-stations" class="radioselect">
-          <li>
-            <label for="radio-stations_0">
-              <input
-                type="radio"
-                name="radio-stations"
-                value="LX 1234"
-                class="radioselect"
-                id="radio-stations_0"
-              />
-              LX 1234
-            </label>
-          </li>
-          <li>
-            <label for="radio-stations_1">
-              <input
-                type="radio"
-                name="radio-stations"
-                value="LOVE 45"
-                class="radioselect"
-                id="radio-stations_1"
-              />
-              LOVE 45
-            </label>
-          </li>
-          <li>
-            <label for="radio-stations_2">
-              <input
-                type="radio"
-                name="radio-stations"
-                value="OLD 555"
-                class="radioselect"
-                id="radio-stations_2"
-              />
-              OLD 555
-            </label>
-          </li>
-        </ul>
-
-        <div id="help-text-radio-stations" class="help-text">
-          Which radio stations do you prefer?
-        </div>
-      </div>
-
-      <div class="field-wrapper checkboxinput">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <input
-          type="checkbox"
-          name="checking-out"
-          class="booleanfield"
-          id="checking-out"
-        />
-
-        <label for="checking-out">Checking Out?</label>
-
-        <div id="help-text-checking-out" class="help-text">
-          Are you checking out today?
-        </div>
-      </div>
-
-      <div class="field-wrapper checkboxselectmultiple">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label>
-          Which fish do you want?
-        </label>
-
-        <ul id="which-fish-do-you-want" class="checkboxselectmultiple">
-          <li>
-            <label for="which-fish-do-you-want_0">
-              <input
-                type="checkbox"
-                name="which-fish-do-you-want"
-                value="one fish"
-                class="checkboxselectmultiple"
-                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"
-                class="checkboxselectmultiple"
-                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"
-                class="checkboxselectmultiple"
-                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"
-                class="checkboxselectmultiple"
-                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"
-                class="checkboxselectmultiple"
-                id="which-fish-do-you-want_4"
-              />
-              all the fish
-            </label>
-          </li>
-        </ul>
-      </div>
-
-      <div class="field-wrapper select">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="hangry-time">Hangry Time</label>
-
-        <select name="hangry-time" class="choicefield" 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 id="help-text-hangry-time" class="help-text">
-          At which time of day do you get hangry?
-        </div>
-      </div>
-
-      <div class="field-wrapper textarea">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="life-story">Life Story</label>
-
-        <textarea
-          name="life-story"
-          cols="40"
-          rows="10"
-          class="textarea"
-          id="life-story"
-        ></textarea>
-
-        <div id="help-text-life-story" class="help-text">
-          Go on, tell me everything.
-        </div>
-      </div>
-
-      <div class="field-wrapper dateinput">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="what-day-is-it">What day is it?</label>
-
-        <input
-          type="date"
-          name="what-day-is-it"
-          class="dateinput"
-          id="what-day-is-it"
-        />
-
-        <div id="help-text-what-day-is-it" class="help-text">
-          Please enter today's date.
-        </div>
-      </div>
-
-      <div class="field-wrapper clearablefileinput">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="your-favorite-picture">Your favorite picture</label>
-
-        <input
-          type="file"
-          name="your-favorite-picture"
-          class="filefield"
-          id="your-favorite-picture"
-        />
-
-        <div id="help-text-your-favorite-picture" class="help-text">
-          Upload your favorite image.
-          <small>
-            Supported types:
-            <code>.jpeg</code>,<code>.jpg</code>,<code>.gif</code>,<code>.png</code>
-          </small>
-        </div>
-      </div>
-
-      <div class="field-wrapper recaptchav2checkbox required">
-        <div class="field-errors" style="display:none;">
-          <ul class="errorlist">
-            <li>Sample <strong>form</strong> error. <a href="#">Link.</a></li>
-          </ul>
-        </div>
-
-        <label for="recaptcha_g9y93gP8">
-          Are you a robot?<span class="asterisk">*</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="button-wrapper submit">
-        <button class="form-button" type="submit" value="Submit">
-          Submit
-        </button>
-        <button id="toggle-field-errors" class="form-button" type="button">
-          Toggle Field Errors
-        </button>
-        <button id="toggle-required-fields" class="form-button" type="button">
-          Toggle Required Fields
-        </button>
-      </div>
-    </form>
-  </div>
-
-</div>
-
-<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 scope = document.querySelector('div.forms');
-
-    toggle.addEventListener('click', () => {
-      toggleFieldErrors( scope, '.field-errors, .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, 'field-wrapper', '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/django-cms-forms.css

@@ -1,176 +1,20 @@
-@import url("../components/c-button.css");
-@import url("../components/c-message.css");
-@import url("../components/c-message--expanded.css");
+/* FAQ: c-form.css styles s-form and django-cms-forms */
+@import url("./c-form.css");
+@import url("./c-form--cms.css");
 
 @import url("./django-cms-forms.hacks.css");
-@import url("./django-cms-forms--errors-via-c-message.css");
 
+/* No other styles necessary, because c-form supports s-form selectors */
+/* SEE ../components/c-form.css */
+/* SEE: ../tools/selectors.form.css */
 
+@custom-selector :--cms-form__field--no-checkbox
+  .field-wrapper:where(:not(.checkboxinput));
 
-/* Title & Description */
-
-.description {
-  margin-block: 25px;
-}
-
-
-
-/* Help Text */
-
-.help-text {
-  font-size: var(--global-font-size--small);
-  font-style: italic;
-}
-:not(
-  ul, /* FAQ: Lists already have margin-bottom */
-  label /* FAQ: Labels already have margin-bottom */
-) + .help-text {
-    margin-top: 0.3em; /* mimic Bootstrap _reboot.css label margin-bottom */
-}
-/* To prevent help text font-style from affecting any tags */
-/* FAQ: Help text can contain inline elements like <samp> */
-/* FAQ: Help text can be (ab)used to add headings between form fields */
-.help-text > :not(details, a, samp) {
-  font-style: initial;
-}
-
-
-
-/* Fields */
-
-.field-wrapper {
-  margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
-}
-
-.field-wrapper:not(.checkboxinput) {
+:--cms-form__field--no-checkbox {
   display: flex;
   flex-direction: column;
+  width: max-content;
 }
-.field-wrapper:not(.checkboxinput) > .field-errors {
-  order: 1; /* i.e. move to end */
-}
-
-.field-wrapper.checkboxinput {
-  display: inline-grid;
-
-  column-gap: 0.5em;
-  align-items: center;
-  grid-template-columns: min-content auto; /* shrink input, let label extend */
-  grid-template-areas:
-    'error _____'
-    'input label'
-    'notes notes';
-}
-.field-wrapper.checkboxinput .field-errors { grid-area: error; }
-.field-wrapper.checkboxinput input         { grid-area: input; }
-.field-wrapper.checkboxinput label         { grid-area: label; }
-.field-wrapper.checkboxinput .help-text    { grid-area: notes; }
-.field-wrapper.checkboxinput label {
-  margin-bottom: 0; /* overwrite forms.css label */
-}
-
-ul.radioselect label,
-ul.checkboxselectmultiple label {
-  display: flex;
-  gap: 0.5em;
-  align-items: center;
-  font-weight: revert; /* undo html-elements.cms.css */
-}
-ul.radioselect li:last-child label,
-ul.checkboxselectmultiple li:last-child label {
-  margin-bottom: 0; /* overwrite forms.css label */
-}
-
-/* Field: Required, Asterisk, Important */
-
-.field-wrapper .asterisk {
-  margin-left: 0.5em;
-}
-.field-wrapper.required .asterisk {
-  color: var(--global-color-danger--dark);
-}
-.field-wrapper:not(.required) .asterisk
-/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
-  color: var(--global-color-warning--dark);
-}
-/* To replace asterisk character with text */
-.field-wrapper .asterisk {
-  width: 0;
-  display: inline-block;
-  visibility: hidden;
-  line-height: 0;
-}
-.field-wrapper .asterisk::after {
-  visibility: visible;
-  line-height: initial;
-}
-.field-wrapper.required .asterisk::after {
-  content: '(required)';
-}
-.field-wrapper:not(.required) .asterisk::after
-/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
-  content: '(important)';
-}
-
-
-
-/* Errors */
-
-.field-errors ul {
-  margin-top: 1rem; /* mimic ul margin-bottom */
-}
-.form-errors ul,
-.field-errors ul {
-  margin-bottom: 0; /* overwrite ul margin-bottom */
-}
-.form-errors {
-  margin-bottom: 1rem; /* mimic ul margin-bottom */
-}
-
-.form-errors ul,
-.field-errors ul {
-  list-style: none;
-  padding-inline: 0;
-}
-
-
-
-/* Lists */
-
-ul.radioselect,
-ul.checkboxselectmultiple {
-  list-style: none;
-
-  padding-left: 0;
-}
-
-
-
-/* Layout */
-
-.button-wrapper {
-  margin-top: 35px;
-}
-
-
-
-/* Button */
-
-/* To style obvious buttons that neglect class */
-.button-wrapper button[type="submit"] {
-  @extend :--c-button;
-  @extend :--c-button--primary;
-}
-
-.form-button {
-  @extend :--c-button;
-}
-.form-button[type="submit"] {
-  @extend :--c-button--primary;
-}
-.form-button:where(:not([type="submit"], [type="reset"])) {
-  @extend :--c-button--secondary;
-}
-.form-button[type="reset"] {
-  @extend :--c-button--tertiary;
-}
+:--cms-form__field--no-checkbox > .field-errors { order: 1; }
+:--cms-form__field--no-checkbox > .help-text    { order: 2; }

package/src/lib/_imports/components/django-cms-forms.selectors.css

@@ -0,0 +1,37 @@
+@custom-selector :--cms-form
+    .forms;
+
+@custom-selector :--cms-form__title
+    .title;
+@custom-selector :--cms-form__desc
+    .description;
+
+@custom-selector :--cms-form__errors
+    :where(.form-errors, .field-errors);
+@custom-selector :--cms-form__errors_list
+    .errorlist;
+@custom-selector :--cms-form__errors--form /* submission errors */
+    :where(.form-errors .errorlist);
+@custom-selector :--cms-form__errors--field /* validation errors */
+    :where(.field-errors .errorlist);
+
+@custom-selector :--cms-form__field
+    .field-wrapper;
+@custom-selector :--cms-form__field--has-required
+    :--cms-form__field.required;
+@custom-selector :--cms-form__field--has-checkbox
+    :--cms-form__field.checkboxinput;
+
+@custom-selector :--cms-form__menu
+    :where(.radioselect, .checkboxselectmultiple);
+
+@custom-selector :--cms-form__help
+    .help-text;
+
+@custom-selector :--cms-form__badge
+    .asterisk;
+
+@custom-selector :--cms-form__buttons
+    .button-wrapper;
+@custom-selector :--cms-form__button
+    .form_button;

package/src/lib/_imports/components/pymdownx--tabbed.css

@@ -14,7 +14,7 @@
 .tabbed-set > label {
   @extend .x-tabs__tab;
 
-  margin-bottom: unset; /* overwrite form.cms.css which core-style.docs loads */
+  margin-bottom: unset; /* overwrite form.css which core-style.docs loads */
 }
 .tabbed-set > label:hover {
   @extend .x-tabs__tab--hover;

package/src/lib/_imports/core-styles.base.css

@@ -18,6 +18,7 @@
 @import url("./elements/root.css");
 /* NOTE: Load generic html-elements.css before specific elements/….css */
 @import url("./elements/html-elements.css");
+@import url("./elements/form.css");
 @import url("./elements/links.css");
 @import url("./elements/table.css");
 
@@ -45,6 +46,7 @@
 
 /* TRUMPS */
 @import url("./trumps/s-affixed-input-wrapper.css");
+@import url("./trumps/s-form.css");
 @import url("./trumps/s-blockquote.css");
 @import url("./trumps/s-breadcrumbs.css");
 @import url("./trumps/s-footer.css");

package/src/lib/_imports/core-styles.cms.css

@@ -20,7 +20,6 @@
 @import url("./elements/html-elements.cms.css");
 @import url("./elements/headings--cms.css");
 @import url("./elements/monospace.css");
-@import url("./elements/form.cms.css");
 @import url("./elements/table.cms.css");
 
 /* OBJECTS */

package/src/lib/_imports/core-styles.docs.css

@@ -14,7 +14,6 @@
 
 /* ELEMENTS */
 @import url("./elements/root--docs.css");
-@import url("./elements/form.cms.css");
 @import url("./elements/html-elements.cms.css");
 @import url("./elements/html-elements.docs.css");
 @import url("./elements/headings--docs.css");