GH-101: Search

postcss.js

@@ -35,20 +35,12 @@ function parallelCallback(err, results) {
 // SEE: https://www.npmjs.com/package/postcss#js-api
 /**
  * Build styles for the Core CMS
- * @param {boolean} [shouldFreezeVariables=false] - Whether to freeze values of custom properties
  */
-function buildStylesCore({shouldFreezeVariables = false} = {}) {
+function buildStylesCore() {
  let command;
- let sourceDir;
- let configDir;
 
- if (shouldFreezeVariables === true) {
- sourceDir = 'freeze_variables/';
- configDir = 'conf/css/freeze_variables/';
- } else {
- sourceDir = '';
- configDir = standardConfigDir;
- }
+ const sourceDir = '';
+ const configDir = standardConfigDir;
 
  // Quote globbed paths to prevent OS from parsing them
  // SEE: https://github.com/postcss/postcss-cli/issues/142#issuecomment-310681302
@@ -69,20 +61,12 @@ function buildStylesCustom() {
  exec(command, execCallback);
 }
 
-// The confusing is worth explaining (and fixing if we know how)
-console.warn('The commands are run in parallel so the output may be out of order.' + "\n");
+// To explain why output is not sequiential
+console.warn('The output may be out of order because the commands are run in parallel.' + "\n");
 
 // Build process for styles may be run in parallel because they are independent
 // SEE: https://stackoverflow.com/a/10776939/11817077
 parallel([
- // Always build Core assets
  buildStylesCore,
-
- // Build custom assets, except for Core
- () => { if (env.CUSTOM_ASSET_DIR !== 'core-cms') buildStylesCustom() },
-
- // Temporarily build "frozen variables" from Core
- // FAQ: This is an advanced solution to a problem that should not exist
- () => { buildStylesCore({shouldFreezeVariables: true}) },
- // NOTE: Do NOT support freezing variables for custom projects
+ buildStylesCustom
 ], parallelCallback);

taccsite_cms/static/site_cms/css/src/_imports/elements/tacc-search-bar.css

@@ -1,67 +1,21 @@
 /*
 Search Bar
 
-Styles for search bar cloned from Portal codebase, but also relying on Bootstrap ([whose version usage is complicated][bootstrap-versions]):
-- Bootstrap 4.0.0 (loaded as external file in CMS via `<link>` in template)
-- relevant delta (manually built) from Bootstrap 4.0.0 (CMS) to 4.3.1 (Portal)
+A custom search bar originally designed for the header.
 
-[bootstrap-versions]: https://confluence.tacc.utexas.edu/x/OAACBw
-
-Markup: s-search-bar.html
+Markup: tacc-search-bar.html
 
 Styleguide Elements.TACC.SearchBar
 */
 
-
-
-/* FAQ: The `.s-search-bar` was to override Bootstrap class specificity */
-
-/* tacc-search-bar.s-search-bar::part(form) { */
 [part="form"] {
- /* FAQ: Ensure search field font matches Portal */
- /* SEE: https://confluence.tacc.utexas.edu/x/cYAZCg */
- font-family: "Roboto";
-
- /* Copied from `.container` from Portal */
- /* SEE: https://github.com/TACC/Frontera-Portal/blob/master/client/src/components/DataFiles/DataFilesSearchbar/DataFilesSearchbar.module.css */
- display: flex;
- flex-direction: row;
- align-items: center;
-
- /* To fill available space */
+ /* To fill available space of `:host` */
  width: 100%;
-}
-
-/* FAQ: Added `#s-header` to trump `.workbench-content .btn-secondary` specificity because it should match (thus override); could have used merely `.s-header`, but CMS use of `@apply` brings in CSS pseudo-class styles, while Portal use of `composes` does not, so `:hover` styles have effect in CMS while they do not have effect in Portal, hence using `#s-header` to create a more specific selector */
-/* !!!: This causes the same bug it does in Portal; no `:hover` state */
-/* #s-header tacc-search-bar.s-search-bar::part(button) { */
-[part="button"] {
- @extend .c-button--secondary;
-
- /* Copied from `.workbench-content .btn-secondary` from Portal `Workbench.scss` */
- background-color: #F4F4F4;
- color: #484848;
- border: 1px solid #AFAFAF;
-}
-
-.input-group {
- /* If link text uses 2 lines, header grows taller (but it must not do so) */
- flex-wrap: nowrap;
-}
-
-/* tacc-search-bar.s-search-bar::part(button__icon) { */
-[part="button__icon"] {
- @extend .c-button__icon--before;
-}
-
-/* tacc-search-bar.s-search-bar::part(input) { */
-[part="input"] {
- @extend .form-control;
- @extend input.form-control;
+ height: 100%;
 }
 
 /* Show search bar after all relevant styles have loaded */
 /* FAQ: Manage visibility of search bar to avoid FOUC */
-/* HACK: This should be done via a dynamically-added `-is-loaded` class */
-/* tacc-search-bar.s-search-bar::part(form) { */
+/* HACK: This should be done via dynamic `[data-status="loaded"]` */
+/* SEE: /.../templates/nav_search.raw.html */
 :host { visibility: visible; height: auto; }

taccsite_cms/static/site_cms/css/src/_imports/trumps/s-header.css

@@ -397,8 +397,7 @@ Styleguide Trumps.Scopes.Header
  2. If menu is open, and user clicks anywhere outside the navbar, then menu will remain open. But a dropdown anywhere that was open would be closed after the click.
  */
  .s-header .navbar-collapse {
- /* This `position` expects Bootstrap's `.navbar { position: relative }` */
- position: absolute;
+ position: absolute; /* expects Bootstrap `.navbar { position: relative }` */
 
  top: 100%;
  left: 0;
@@ -890,69 +889,124 @@ Styleguide Trumps.Scopes.Header
 
 
 
-/* Search: Spacing */
+/* Search: Variables */
 
-/* Create space between search bar & portal nav ONLY IF both elements exist */
-.s-header.is-on-portal .s-search-bar,
-/* To apply style to old markup (see "Portal & Docs Selectors") */
-/* TODO: Hardcode `is-on-portal` in Portal & Docs markup */
-:--for-docs .s-header .s-search-bar,
-:--for-portal .s-header .s-search-bar {
- margin-right: var(--space-after-search-before-nav, 0);
-}
-/* Create space before search bar EVEN IF only search bar exists */
 .s-header .s-search-bar {
- margin-left: var(--space-before-search, 0);
+ --button-horz-pad: 10px;
+ --input-horz-pad: 0.125em;
 }
-/* To apply style to old markup (see "Portal & Docs Selectors") */
-:--for-docs .s-header .s-search-bar,
-:--for-portal .s-header .s-search-bar {
- margin-left: var(--space-before-search, 0) !important;
-}
-
-
-
-/* Search: Desktop */
-
 @media (--nav-expanded) {
-
  .s-header .s-search-bar {
+ --input-height: 26px;
+ /* WARNING: Do not use `rem` until `html { 62.5%; }` */
+ --button-font-size: 18px;
+ --input-font-size: 14px;
+
  /* To match design */
  --space-after-search-before-nav: 12px;
 
  /* To insert flexible space between search bar and CMS nav */
  --space-before-search: auto;
  }
+}
+@media (--nav-compressed) {
+ .s-header .s-search-bar {
+ /* NOTE: Deviates from design cuz "Mobile Nav Top Row" height deviates */
+ --input-height: 38px;
+ /* WARNING: Do not use `rem` until `html { 62.5%; }` */
+ --button-font-size: 24px;
+ --input-font-size: 18px;
 
- .s-header .s-search-bar,
- .s-header .s-search-bar::part(input),
- .s-header .s-search-bar::part(button) {
- font-size: 14px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
+ /* SEE: "Mobile Nav Top Row" */
+ /* --space-after-search-before-nav: … */
+
+ /* To line up navbar left-hand content with logo */
+ --space-before-search: env(--header-navbar-left-pad);
  }
+}
+
+
+
+/* Search: Elements */
 
+.s-header .s-search-bar {
+ /* To remove all whitespace */
+ /* NOTE: A `font-size: 0` is not necessary if tag whitespace is removed */
+ font-size: 0;
 }
 
+.s-header .s-search-bar::part(form) {
+ display: flex;
+ align-items: center;
 
+ position: relative;
+}
+.s-header .s-search-bar::part(button) {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
 
-/* Search: Mobile */
+ box-sizing: content-box;
+ height: var(--input-height);
+ align-items: center; /* works if has flex layout (does if class is `.icon`) */
 
-@media (--nav-compressed) {
+ margin: 0;
+ padding: 0 var(--button-horz-pad);
 
- /* To add constant space between CMS nav and search bar */
- .s-header .s-search-bar {
- /* SEE: "Mobile Nav Top Row" */
- /* --space-after-search-before-nav: … */
+ background-color: transparent;
+ border: none;
 
- /* To line up navbar left-hand content with logo */
- --space-before-search: env(--header-navbar-left-pad);
- }
+ color: env(--header-text-color);
+ font-size: var(--button-font-size);
+}
+.s-header .s-search-bar::part(input) {
+ display: block;
+ width: 100%;
+ height: var(--input-height);
+
+ margin: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ /* To indent text by the width of embedded button plus actual padding */
+ /* FAQ: Using `text-indent` has text overflow as user enters beyond width */
+ /* HELP: Using `text-indent` is prefered (simpler)... how to do sans bug? */
+ padding-left: calc(
+ var(--button-horz-pad) +
+ var(--button-font-size) +
+ var(--button-horz-pad) +
+ var(--input-horz-pad)
+ );
+ padding-right: var(--input-horz-pad);
+
+ background-color: env(--header-search-bkgd-color);
+ border: env(--border-width--normal) solid env(--header-search-brdr-color);
+ border-radius: 5px;
 
- .s-header .s-search-bar,
- .s-header .s-search-bar::part(input),
- .s-header .s-search-bar::part(button) {
- font-size: 18px; /* WARNING: Do not use `rem` until `html { 62.5%; }` */
- }
+ color: env(--header-text-color);
+ font-size: var(--input-font-size);
+}
+
+
+
+/* Search: Spacing (Margin) */
 
+/* Create space between search bar & portal nav ONLY IF both elements exist */
+.s-header.is-on-portal .s-search-bar,
+/* To apply style to old markup (see "Portal & Docs Selectors") */
+/* TODO: Hardcode `is-on-portal` in Portal & Docs markup */
+:--for-docs .s-header .s-search-bar,
+:--for-portal .s-header .s-search-bar {
+ margin-right: var(--space-after-search-before-nav, 0);
+}
+/* Create space before search bar EVEN IF only search bar exists */
+.s-header .s-search-bar {
+ margin-left: var(--space-before-search, 0);
+}
+/* To apply style to old markup (see "Portal & Docs Selectors") */
+:--for-docs .s-header .s-search-bar,
+:--for-portal .s-header .s-search-bar {
+ margin-left: var(--space-before-search, 0) !important;
 }
 
 
@@ -977,7 +1031,7 @@ Styleguide Trumps.Scopes.Header
  .s-header .s-search-bar {
  /* To make space for portal nav in which to shove portal nav */
  --space-after-search-before-nav: calc(
- var(--portal-navlink-max-width) + (env(--border-width--normal) * 2)
+ var(--portal-navlink-max-width) + 5px
  );
  }
  .s-header .s-portal-nav {
@@ -999,9 +1053,7 @@ Styleguide Trumps.Scopes.Header
 
  /* To make a fake background */
  /* HACK: Create background with a pseudo element that matches "row" height */
- .s-header .s-portal-nav {
- position: relative; /* for `position: absolute` child/pseudo element */
- }
+ .s-header .s-portal-nav { position: relative; }
  .s-header .s-portal-nav::before {
  content: '';
  position: absolute;

taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.css

@@ -0,0 +1,47 @@
+/*
+Hide
+
+Different ways and reasons to hide elements.
+
+Resources:
+- https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/
+- https://codepen.io/vincent-valentin/full/JjGmxzV
+
+Markup: u-hide.css
+
+Styleguide Core.Trumps.Utilities.Hide
+*/
+
+/* Hides content for all users, even screen readers */
+.u-hide--for-all {
+ display: none;
+}
+.u-hide--for-all-but-has-layout {
+ visibility: hidden;
+}
+
+/* Replace text with image; meets WCAG 2.0 success criteria */
+/* SEE: https://www.w3.org/TR/WCAG20-TECHS/C30.html */
+.u-hide--text-image-replacement {
+ /* background-image: url('…'); */
+}
+.u-hide--text-image-replacement .u-hide__text {
+ position: absolute;
+ left: -9999em;
+}
+
+/* Hides content for visual users, retain hidden text for screen readers */
+/* SEE: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */
+.u-hide--visually:not(:focus):not(:active) {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+
+ /* Added by TACC based on other examples */
+ border: none;
+ padding: 0;
+}

taccsite_cms/static/site_cms/css/src/_imports/trumps/u-hide.html

@@ -0,0 +1,20 @@
+<section>
+ <article id="u-hide--for-all">
+ <h4>Hide For All Users</h4>
+ <div>Element A</div>
+ <div class="u-hide--for-all">Element B (Hidden For All)</div>
+ <div class="u-hide--for-all-but-has-layout">Element C (Hidden For All) (Has Layout)</div>
+ </article>
+ <article id="u-hide--text-image-replacement">
+ <h4>Hide Text To Replace With Image</h4>
+ <header class="u-hide--text-image-replacement">
+ <span class="u-hide__text">Text Element</span>
+ </header>
+ </article>
+ <article id="u-hide--visually">
+ <h4>Hide Visually</h4>
+ <div>Element A</div>
+ <div class="u-hide--visually">Element B (Hidden)</div>
+ <button class="u-hide--visually">Element C (Hidden) (Focusable)</button>
+ </article>
+</section>

taccsite_cms/static/site_cms/css/src/_themes/theme.default.json

@@ -10,6 +10,8 @@
  "--header-bkgd-color": "var(--global-color-primary--xx-dark)",
  "// --header-link-bkgd-color": "unique, not registered in global colors",
  "--header-link-bkgd-color": "#313131",
+ "--header-search-brdr-color": "var(--global-color-primary--dark)",
+ "--header-search-bkgd-color": "#313131",
  "--header-portal-nav-bkgd-color": "var(--global-color-primary--x-dark)"
 
  }