@tacc/core-styles 0.11.0 → 1.0.0

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 );
+  }
+}

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

@@ -0,0 +1,176 @@
+@import url("../components/c-button.css");
+@import url("../components/c-message.css");
+@import url('../tools/x-link.css');
+
+
+
+/* Title & Description */
+
+.c-form__desc {
+  margin-block: 25px;
+}
+
+
+
+/* Help Text */
+
+.c-form__help {
+  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 */
+) + .c-form__help {
+    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 */
+.c-form__help > :not(details, a, samp) {
+  font-style: initial;
+}
+
+
+
+/* Fields */
+/* TODO: Make fieldset-child <div>s be opt-out automatic field-wrappers.
+    0. [ ] Define `fieldset > div { @extend .c-form__field; }` ruleset.
+    1. [ ] Create `.c-form--no-auto-wrappers`.
+    2. [ ] Define `.c-form:not(.c-form--no-auto-wrappers) fieldset > div` rules.
+*/
+
+.c-form__field {
+  margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
+}
+
+.c-form__field:not(.has-type-check) {
+  display: flex;
+  flex-direction: column;
+}
+.c-form__field:not(.has-type-check) > .c-form__errors {
+  order: 1; /* i.e. move to end */
+}
+
+.c-form__field.has-type-check {
+  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';
+}
+.c-form__field.has-type-check .c-form__errors { grid-area: error; }
+.c-form__field.has-type-check input           { grid-area: input; }
+.c-form__field.has-type-check label           { grid-area: label; }
+.c-form__field.has-type-check .c-form__help   { grid-area: notes; }
+.c-form__field.has-type-check label {
+  margin-bottom: 0; /* overwrite forms.css label */
+}
+
+.c-form__field > ul:where(:not(.c-form__errors)) label {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  font-weight: revert; /* undo html-elements.cms.css */
+}
+.c-form__field > ul:where(:not(.c-form__errors)) li:last-child label {
+  margin-bottom: 0; /* overwrite forms.css label */
+}
+
+/* Field: Required, Asterisk, Important */
+
+.c-form__field .c-form__star {
+  margin-left: 0.5em;
+}
+.c-form__field.has-required .c-form__star {
+  color: var(--global-color-danger--dark);
+}
+.c-form__field:not(.has-required) .c-form__star
+/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
+  color: var(--global-color-warning--dark);
+}
+/* To replace asterisk character with text */
+.c-form__field .c-form__star {
+  width: 0;
+  display: inline-block;
+  visibility: hidden;
+  line-height: 0;
+}
+.c-form__field .c-form__star::after {
+  visibility: visible;
+  line-height: initial;
+}
+.c-form__field.has-required .c-form__star::after {
+  content: '(required)';
+}
+.c-form__field:not(.has-required) .c-form__star::after
+/* NOTE: Manual markup ONLY; form plugin can't render non-required asterisk */ {
+  content: '(important)';
+}
+
+
+
+/* Errors */
+
+.c-form__field ul.c-form__errors {
+  margin-top: 1rem; /* mimic ul margin-bottom */
+  margin-bottom: 0; /* overwrite ul margin-bottom */
+}
+
+ul.c-form__errors {
+  list-style: none;
+  padding-inline: 0;
+}
+
+.c-form > .c-form__errors {
+  @extend .c-message;
+  @extend .c-message--type-error;
+  @extend .c-message--scope-section;
+  @extend .c-message--scope-section.c-message--type-error;
+}
+.c-form__field .c-form__errors li {
+  @extend .c-message;
+  @extend .c-message--type-error;
+  @extend .c-message--scope-inline;
+}
+
+
+
+/* Lists */
+
+.c-form__field > ul:where(:not(.c-form__errors)) {
+  list-style: none;
+
+  padding-left: 0;
+}
+
+
+
+/* Buttons */
+
+.c-form__buttons {
+  margin-top: 35px;
+}
+
+/* To style obvious buttons that neglect class */
+.c-form__buttons button[type="submit"] {
+  @extend .c-button;
+  @extend .c-button--primary;
+}
+
+.c-form__button {
+  @extend .c-button;
+}
+.c-form__button[type="submit"] {
+  @extend .c-button--primary;
+}
+.c-form__button:where(:not([type="submit"], [type="reset"])) {
+  @extend .c-button--secondary;
+}
+.c-form__button[type="reset"] {
+  @extend .c-button--tertiary;
+}

package/src/lib/_imports/components/c-message.css

@@ -3,51 +3,88 @@ Message
 
 Inform user about a temporary status.
 
-- .c-message--info - neither positive nor negative
-- .c-message--success - a positive status
-- .c-message--warning - a minor negative status
-- .c-message--danger - a major negative status
+- .c-message--type-info - neither positive nor negative
+- .c-message--type-success - a positive status
+- .c-message--type-warning - a minor negative status
+- .c-message--type-danger - a major negative status
+- .c-message--scope-inline - an error for one interatction on a page
+- .c-message--scope-section - an error for a whole section of a page
 
 Reference:
 - https://getbootstrap.com/docs/4.0/components/alerts/
 
 Styleguide Components.Message
 */
-@import url('../settings/color.css');
+@import url('../tools/x-link.css');
 
-/* Base */
 
-.c-message {
-  padding: 15px 20px;
-  border: var(--global-border--thick);
-  font-size: var(--global-font-size--small);
-}
 
 /* Elements */
 
-.c-message a {
-  color: inherit;
+/* To avoid clash of link color with message color */
+.c-message a,
+.c-message .c-button--as-link {
+  color: inherit !important; /* override :hover and :active */
+}
+
+/* To distinguish link from message text */
+.c-message a,
+.c-message .c-button--as-link {
+  @extend .x-link--irregular;
+}
+.c-message a:hover,
+.c-message .c-button--as-link:hover {
+  @extend .x-link--irregular--hover;
+}
+.c-message a:active,
+.c-message .c-button--as-link:active {
+  @extend .x-link--irregular--active;
 }
 
+
+
 /* Modifiers */
 
-.c-message--info {
+/* Structure */
+
+.c-message--scope-inline,
+.c-message--scope-section {
+  font-size: var(--global-font-size--small);
+}
+
+.c-message--scope-section {
+  padding: 15px 20px;
+  border: var(--global-border--thick);
+}
+
+/* Skin */
+
+.c-message--type-info {
   color: var(--global-color-info--dark);
-  background-color: var(--global-color-info--light);
-  border-color: var(--global-color-info--normal);
 }
-.c-message--success {
+.c-message--type-success {
   color: var(--global-color-success--dark);
-  background-color: var(--global-color-success--weak);
-  border-color: var(--global-color-success--normal);
 }
-.c-message--warning {
+.c-message--type-warning {
   color: var(--global-color-warning--dark);
-  background-color: var(--global-color-warning--weak);
-  border-color: var(--global-color-warning--normal);
 }
-.c-message--error {
+.c-message--type-error {
   color: var(--global-color-danger--dark);
-  background-color: var(--global-color-danger--weak);
+}
+
+.c-message--scope-section.c-message--type-info {
+  background-color: var(--global-color-info--x-light);
+  border-color: var(--global-color-info--normal);
+}
+.c-message--scope-section.c-message--type-success {
+  background-color: var(--global-color-success--x-light);
+  border-color: var(--global-color-success--normal);
+}
+.c-message--scope-section.c-message--type-warning {
+  background-color: var(--global-color-warning--x-light);
+  border-color: var(--global-color-warning--normal);
+}
+.c-message--scope-section.c-message--type-error {
+  background-color: var(--global-color-danger--x-light);
   border-color: var(--global-color-danger--normal);
 }

package/src/lib/_imports/components/cortal.icon.css

@@ -61,19 +61,28 @@ Styleguide Components.Cortal.Icon
 [class*='icon-nav-'] {
   border: solid var(--color, var(--global-color-primary--xx-dark));
   border-width: 0 0.25em 0.25em 0;
-  font-size: 8px;
+  font-size: 8px; /* thus 1px = 0.125em */
   /* display: inline-block; */ /* let `.icon`'s `display: inline-flex;` do it */
   /* padding: var(--size); */ /* let `.icon`'s equal `width` & `height` do it */
 }
+/* To rotate icon each direction and move graphic to stay within icon box */
+/* NOTE: For '-up' and '-down':
+         - translate gave (sub-pixel) better horz. align than relative position
+         - relative position gave easier vertical alignment
+         So 'left' and 'right' (for consistency) use translate for horz. move */
 .icon-nav-up {
-  transform: rotate(-135deg);
+  position: relative;
+  top: 2px;
+  transform: rotate(-135deg) translate(-1px, 1px);
 }
 .icon-nav-left {
-  transform: rotate(135deg);
+  transform: rotate(135deg) translate(-1px, -1px);
 }
 .icon-nav-down {
-  transform: rotate(45deg);
+  position: relative;
+  top: -2px;
+  transform: rotate(45deg) translate(1px, -1px);
 }
 .icon-nav-right {
-  transform: rotate(-45deg);
-}
+  transform: rotate(-45deg) translate(-1px, -1px);
+}

package/src/lib/_imports/components/django-cms-forms/config.yml

@@ -0,0 +1,5 @@
+context:
+  # only for temp demo instance of this pattern (which should be in CMS)
+  shouldLoadCMS: true # because this is demo but this is CMS pattern
+  shouldSkipPattern: false # because …base.css does not load this CMS pattern
+label: Django CMS Forms