@tacc/core-styles 0.11.0 → 2.0.0

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

@@ -0,0 +1,407 @@
+<p class="c-message c-message--scope-global">
+  This component is maintained simuiltaneously with <a href="{{path '../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>.
+</p>
+<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>

package/src/lib/_imports/components/django-cms-forms/readme.md

@@ -0,0 +1,20 @@
+To style forms built by [Django CMS forms][djcms-forms].
+
+> **⚠️ Important**
+>
+> **Only** intended for [Django CMS forms][djcms-forms]. To style a form **not** using that plugin, use [TACC form component]({{path './c-form' }}).
+
+> **ⓘ Notice**
+>
+> Most of the markup can be seen at [template][djcms-forms-tpl]. Some of the classes and markup come from [Django form field widgets][django-form-widgets].
+
+[djcms-forms]: https://pypi.org/project/djangocms-forms-maintained/ "DjangoCMS-Forms (Maintained)"
+[djcms-forms-tpl]: https://github.com/avryhof/djangocms-forms/blob/ab38b22/djangocms_forms/templates/djangocms_forms/form_template/default.html "DjangoCMS Forms (Maintained) Template"
+[django-form-widgets]: https://docs.djangoproject.com/en/2.2/ref/forms/widgets/ "Django Form Widgets"
+
+<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/django-cms-forms.css

@@ -0,0 +1,187 @@
+@import url("../components/c-button.css");
+@import url("../components/c-message.css");
+@import url('../tools/x-link.css');
+
+@import url("./django-cms-forms.hacks.css");
+
+
+
+/* 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) {
+  display: flex;
+  flex-direction: column;
+}
+.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;
+}
+
+.form-errors {
+  @extend .c-message;
+  @extend .c-message--type-error;
+  @extend .c-message--scope-section;
+  @extend .c-message--type-error.c-message--scope-section;
+}
+.field-errors li {
+  @extend .c-message;
+  @extend .c-message--type-error;
+  @extend .c-message--scope-inline;
+}
+
+
+
+/* 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;
+}

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

@@ -0,0 +1,59 @@
+/*
+Django CMS Form Hacks
+
+Render temporary messages to warn users and admins about unsupported feature(s) of the Django CMS Form plugin.
+
+Reference:
+
+- [FP-1808](https://jira.tacc.utexas.edu/browse/FP-1808)
+
+Styleguide Components.DjangoCMS.Forms.Hacks
+*/
+@custom-selector :--cms-logged-in   .cms-ready;
+@custom-selector :--cms-edit-mode   [class*="cms-structure-mode-"];
+/* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */
+/* @import url("@tacc/core-styles/src/lib/_imports/components/c-message.css"); */
+
+@custom-selector :--problem-field
+  .field-wrapper.checkboxselectmultiple.required;
+
+/* HACK: Messages about a required multi-checkbox field */
+:--problem-field > label::after {
+  display: block;
+  margin-top: 0.5em;
+
+  /* To override styles inherited from `django-cms-forms.css` */
+  font-weight: normal;
+
+  /* To mimic c-message */
+  /* https://github.com/TACC/tup-ui/blob/main/libs/core-styles/src/lib/_imports/components/c-message.css */
+  padding: 15px 20px;
+  border: var(--global-border--thick);
+  font-size: var(--global-font-size--small);
+  /* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */
+  /* @extend .c-message; */
+}
+/* To give error to admin */
+html:--cms-edit-mode :--problem-field > label::after {
+  content: 'A multi checkbox field that is required is not well implemented. Do not require this field or replace it with multiple required Yes/No radio fields.';
+
+  /* To mimic c-message c-message-error */
+  /* https://github.com/TACC/tup-ui/blob/main/libs/core-styles/src/lib/_imports/components/c-message.css */
+  color: var(--global-color-danger--dark);
+  background-color: var(--global-color-danger--weak);
+  border-color: var(--global-color-danger--normal);
+  /* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */
+  /* @extend .c-message--error; */
+}
+/* To give warning to user */
+html:not(:--cms-edit-mode) :--problem-field > label::after {
+  content: 'This field is not well implemented. Select all boxes to bypass the error with this field.';
+
+  /* To mimic c-message c-message-warning */
+  /* https://github.com/TACC/tup-ui/blob/main/libs/core-styles/src/lib/_imports/components/c-message.css */
+  color: var(--global-color-warning--dark);
+  background-color: var(--global-color-warning--weak);
+  border-color: var(--global-color-warning--normal);
+  /* TACC/Core-CMS#531: When merged, import and extend `.c-message(...)` */
+  /* @extend .c-message--warning; */
+}