feat/tup-635: Add header demo to core-styles (#258)

* Added header demo to core-styles

* Added additional header varients to demo

* Made changes requested in PR

* renaming to better header components

* fix: update import based on latest changes

---------

Co-authored-by: Wesley Bomar <wbomar@tacc.utexas.edu>

src/lib/_imports/trumps/s-cms-nav.html → src/lib/_imports/trumps/_s-cms-nav/_s-cms-nav.hbs

@@ -6,7 +6,7 @@
 - Bootstrap class names
 - extra markup (`a > span`)
 -->
-<ul class="s-cms-nav navbar-nav">
+<ul class="s-cms-nav navbar-nav mr-auto">
   <li class="nav-item active">
     <a class="nav-link" href="/"><span>Frontera</span></a>
   </li>

src/lib/_imports/trumps/s-portal-nav.html → src/lib/_imports/trumps/_s-portal-nav/_s-portal-nav.hbs

@@ -9,18 +9,12 @@
 <ul class="s-portal-nav navbar-nav">
   <!-- When user is not logged in, there are zero dropdown(-*) classes -->
   <li class="nav-item dropdown">
-    <a
-      class="nav-link dropdown-toggle"
-      href="#"
-      data-toggle="dropdown"
-      aria-haspopup="true"
-      aria-expanded="false"
-    >
+    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       <i class="icon icon-user"></i>
       <span>username</span>
       <span class="sr-only">Toggle Dropdown</span>
     </a>
-    <nav class="dropdown-menu dropdown-menu-right show">
+    <nav class="dropdown-menu dropdown-menu-right">
       <a class="dropdown-item" href="/workbench/dashboard">
         <i class="icon icon-dashboard"></i> My Dashboard
       </a>
@@ -35,4 +29,4 @@
       </a>
     </nav>
   </li>
-</ul>
+</ul>

src/lib/_imports/trumps/s-header/config.yml

@@ -0,0 +1,11 @@
+context:
+  shouldLoadBootstrap: true
+  shouldLoadCMS: true
+  supportStyles:
+    - ../../assets/core-styles.header.css
+    - ../../assets/core-styles.theme.default.css
+variants:
+  - name: with-branding
+    label: With Branding
+  - name: default
+    label: Without Branding

src/lib/_imports/trumps/s-header/s-header--with-branding.hbs

@@ -0,0 +1,32 @@
+<!-- FAQ:
+
+This is the markup of the #s-header, as of 2020-03-11,
+from https://frontera-portal.tacc.utexas.edu/. It has:
+
+- Bootstrap class names
+  (also via `./s-portal-nav.html`)
+  (also via `./s-cms-nav.html`)
+- Bootstrap attributes
+  (also via `./s-portal-nav.html`)
+- multiple internal scope (`s-`) classes
+  (only via `./s-portal-nav.html`)
+  (only via `./s-cms-nav.html`)
+- FontAwesome class names
+  (only via `./s-portal-nav.html`)
+- illegally-nested markup (`ul > div > li`)
+  (only via `./s-portal-nav.html`)
+-->
+<div class="branding-header">
+  <a href="https://www.nsf.gov/" target="_blank">
+    <img class="branding-logo branding-nsf" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/nsf-white.png" alt="NSF Logo">
+  </a>
+  <span class="branding-seperator"></span>
+  <a href="https://www.tacc.utexas.edu/" target="_blank">
+    <img class="branding-logo branding-tacc" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/tacc-white.png" alt="TACC Logo">
+  </a>
+  <span class="branding-seperator"></span>
+  <a href="https://www.utexas.edu/" target="_blank">
+    <img class="branding-logo branding-utaustin" src="http://tacc.utexas.edu/static/site_cms/img/org_logos/utaustin-white.png" alt="University of Texas at Austin Logo">
+  </a>
+</div>
+{{> @s-header}}

src/lib/_imports/trumps/s-header/s-header.demo.css

@@ -0,0 +1,10 @@
+:root {
+    --global-font-family: var(--global-font-family--sans);
+    --font-family-sans-serif: var(--global-font-family--sans);
+    --font-family-monospace: var(--global-font-family--mono);
+}
+
+main {
+    padding-block: unset;
+    width: unset;
+}

src/lib/_imports/trumps/s-header/s-header.hbs

@@ -0,0 +1,14 @@
+<nav id="s-header" class="s-header navbar navbar-expand-lg navbar-dark">
+  <a class="navbar-brand" href="/">
+    <img src="http://tacc.utexas.edu/static/site_cms/img/org_logos/portal.png" alt="Portal Logo"
+      class="nav-logo-double nav-logo-frontera-double" />
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExpandTarget"
+    aria-controls="navbarsExpandTarget" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="navbarsExpandTarget">
+    {{> @s-cms-nav}} {{> @s-portal-nav}}
+  </div>
+</nav>

src/lib/_imports/trumps/s-portal-nav.css

@@ -28,3 +28,11 @@ ul.s-portal-nav {
   /* To overwrite @tacc/core-styles */
   text-decoration: none; /* copied from Bootstrap */
 }
+
+
+.s-portal-nav .icon {
+  margin-right: 0.25em;
+
+  font-size: 1.5em;
+  vertical-align: middle;
+}