feat: WC-274 component can opt for CMS styles

client/package.json

@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-eslint": "^8.0.1",
-    "@tacc/core-styles": "^2.39.4",
+    "@tacc/core-styles": "^2.45.0",
     "@testing-library/jest-dom": "^5.0.2",
     "@testing-library/react": "^16.0.1",
     "@types/js-cookie": "^3.0.6",

client/src/components/_common/CMSBreadcrumbs/CMSBreadcrumbs.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export default function CMSBreadcrumbs() {
+  /* TODO: Move to …module.css OR into Core-Styles */
+  /* https://github.com/TACC/Core-CMS/blob/v4.30.0/taccsite_cms/templates/nav_cms_breadcrumbs.html#L4-L11 */
+  const breadcrumbCSS = `
+    .s-breadcrumbs a:not([href]) {
+      opacity: 1;
+      color: unset;
+    }
+  `;
+
+  /* TODO: Migrate to JSX logic (when it exists) */
+  React.useEffect(() => {
+    // Disable href for the current page breadcrumb
+    const crumbs = document.getElementById('cms-breadcrumbs');
+    const secondLink = crumbs && crumbs.querySelector('li:nth-of-type(2) > a');
+    if (secondLink) secondLink.removeAttribute('href');
+  }, []);
+
+  /* TODO: Render based on data param, not as static content */
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: breadcrumbCSS }} />
+      <nav className="s-breadcrumbs" id="cms-breadcrumbs">
+        <ol itemScope itemType="https://schema.org/BreadcrumbList">
+          <li
+            itemScope
+            itemProp="itemListElement"
+            itemType="https://schema.org/ListItem"
+          >
+            <a href="/" itemProp="item">
+              <span itemProp="name">Index</span>
+            </a>
+            <meta itemProp="position" content="1" />
+          </li>
+          <li
+            itemScope
+            itemProp="itemListElement"
+            itemType="https://schema.org/ListItem"
+          >
+            <span itemProp="name">Browse Datasets</span>
+            <meta itemProp="position" content="2" />
+          </li>
+        </ol>
+      </nav>
+    </>
+  );
+}

client/src/components/_common/CMSBreadcrumbs/index.js

@@ -0,0 +1 @@
+export { default } from './CMSBreadcrumbs';

client/src/components/_common/CMSWrapper/CMSWrapper.jsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+import PropTypes from 'prop-types';
+
+function CMSWrapper({ children }) {
+  useEffect(() => {
+    // To (de)activate CMS styles on (un)mount
+    window.dispatchEvent(new CustomEvent('cms-styles-activated'));
+    return () => {
+      window.dispatchEvent(new CustomEvent('cms-styles-deactivated'));
+    };
+  }, []);
+
+  return (
+    <main id="mimic-cms" className="container">
+      {children}
+    </main>
+  );
+}
+
+CMSWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default CMSWrapper;

client/src/components/_common/CMSWrapper/index.js

@@ -0,0 +1 @@
+export { default } from './CMSWrapper';

client/src/components/_common/index.js

@@ -25,6 +25,8 @@ export {
   default as IntroMessage,
   isKnownMessage as isKnownIntroMessage,
 } from './IntroMessage';
+export { default as CMSBreadcrumbs } from './CMSBreadcrumbs';
+export { default as CMSWrapper } from './CMSWrapper';
 export { default as CustomMessage } from './CustomMessage';
 export { default as Pill } from './Pill';
 export { default as TextCopyField } from './TextCopyField';

client/src/index.css

@@ -1,4 +1,6 @@
-@import url('./styles/global.css');
+@import url('./styles/global.css') layer(portal);
+
+@layer portal {
 
 /*
   Sectioning Root
@@ -51,8 +53,7 @@ code {
 /* FAQ: The `html` and `body` boxes are only as tall as their content
         (which may be shorter than window height), cannot have siblings elements
         (would be influenced by force stretch), so force stretch outward. */
-html,
-body {
+body:not(.has-cms-ui) {
   /* As a stretched item */
   position: absolute;
   left: 0;
@@ -75,31 +76,34 @@ body {
 /* FAQ: The `.content` and `#react-root` boxes are only as tall as their content
         (which may be shorter than window height), can have siblings elements
         (would be influenced by force stretch), so gently stretch outward. */
-body {
+body:not(.has-cms-ui) {
   /* As a flex container */
   display: flex;
   flex-direction: column;
 }
-body > .content {
+body:not(.has-cms-ui) .content {
   /* As a flex item */
   flex-grow: 1;
 
   /* As a flex container */
   display: flex;
   flex-direction: column;
 }
-#react-root {
+body:not(.has-cms-ui) #react-root {
   /* As a flex item */
   flex-grow: 1;
 
   /* As a stretched item container */
   position: relative;
 }
-#react-root > :only-child {
+body:not(.has-cms-ui) #react-root > :only-child {
   /* As a stretched item */
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
 }
+
+/* end @layer portal */
+}

client/src/styles/components/bootstrap.tooltip.css

@@ -0,0 +1,7 @@
+i[data-bs-toggle="tooltip"] {
+  font-style: normal;
+}
+
+.tooltip-inner {
+    font-size: var(--global-font-size--medium);
+}

client/src/styles/global.css

@@ -4,7 +4,8 @@
 /* SETTINGS */
 @import url('@tacc/core-styles/src/lib/_imports/settings/border.css');
 @import url('./settings/color.css');
-@import url('./settings/font.css');
+@import url('@tacc/core-styles/dist/settings/font.css');
+@import url('@tacc/core-styles/dist/settings/font--portal.css');
 @import url('./settings/space.css');
 
 /* TOOLS */
@@ -29,6 +30,7 @@
 @import url('./components/bootstrap.nav.css');
 @import url('./components/bootstrap.utils.css');
 @import url('./components/bootstrap.button.css');
+@import url('./components/bootstrap.tooltip.css');
 @import url('./components/mui.tabs.css');
 
 /* TRUMPS */

server/portal/templates/base.html

@@ -16,17 +16,18 @@
     <link rel="canonical" href="{{request.get_full_path}}">
     <base href="/">
     {% block head_extra %}{% endblock %}
+    <style>
+      @layer portal, mimic-cms, header;
+      @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css") layer(portal);
+      @import url("/static/site_cms/css/build/core-styles.theme.default.css") layer(header);
+      @import url("/static/site_cms/css/build/core-styles.header.css") layer(header);
+    </style>
     {% if settings.PORTAL_CSS_FILENAMES|length %}
     <!-- Project CSS -->
       {% for stylesheet in settings.PORTAL_CSS_FILENAMES %}
       <link rel="stylesheet" href="{{ stylesheet }}">
       {% endfor %}
     {% endif %}
-    <!-- Vendor CSS -->
-    <link id="css-bootstrap" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <!-- Header CSS -->
-    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.theme.default.css">
-    <link rel="stylesheet" href="/static/site_cms/css/build/core-styles.header.css">
 
     {% block styles %}{% endblock %}
   </head>
@@ -38,6 +39,7 @@
       {% block content %}{% endblock %}
     </div>
     {% include 'includes/footer.html' %}
+    {% include 'includes/cms_ui.html' %}
     {% block scripts %}{% endblock %}
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

server/portal/templates/includes/cms_ui.html

@@ -0,0 +1,83 @@
+<style id="cms-ui-styles" media="not all">{# i.e. disabled #}
+  @layer mimic-cms, mimic-cms.base, mimic-cms.project;
+
+  @import url(/static/site_cms/css/build/core-styles.base.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-styles.cms.css) layer(mimic-cms.base);
+  @import url(/static/site_cms/css/build/core-cms.css) layer(mimic-cms.project);
+
+  /* To mimic a CMS idiosyncrasy */
+  /* https://github.com/TACC/Core-CMS/blob/v4.31.0/taccsite_cms/templates/base.html#L73-L76 */
+  #cms-content-container.container .container { padding-inline: 0; }
+
+  /* To mimic Bootstrap v4 (which CMS uses) */
+  .workbench-content .container { --bs-gutter-x: 15px; }
+  .workbench-content .row { --bs-gutter-x: 30px; }
+
+  /* To change high-level styles to match CMS */
+  .workbench-wrapper { color: var(--global-color-primary--x-dark); }
+  .workbench-content .container {
+    margin-left: revert-layer;
+    max-width: revert-layer;
+  }
+  .workbench-content .row {
+    margin-right: revert-layer;
+    margin-left: revert-layer;
+  }
+  body { -webkit-font-smoothing: revert; }
+  .c-button { --max-width: auto; }
+
+  /* To change Portal's Bootstrap styles to match CMS */
+  .workbench-wrapper .dropdown-menu,
+  .workbench-wrapper .dropdown-menu::before,
+  .workbench-wrapper .dropdown-menu::after,
+  .workbench-wrapper .dropdown-item,
+  .workbench-wrapper .dropdown-item:focus,
+  .workbench-wrapper .dropdown-item:hover,
+  .workbench-wrapper .dropdown-divider {
+    all: revert-layer;
+  }
+
+  /* To hide navbar */
+  /* TODO: Instead of this, component using CMS styles should not use navbar */
+  #react-root:has(#mimic-cms) .nav-sidebar {
+    display: none;
+  }
+</style>
+
+<script id="cms-ui-script" type="module">
+  let footerEl = null;
+  let footerOriginalMarkup = null;
+
+  const toggleStyles = (enabled) => {
+    const media = (enabled) ? 'all' : 'not all';
+    document.getElementById('cms-ui-styles').media = media;
+  };
+
+  const toggleLayout = (enabled) => {
+    document.body.classList.toggle('has-cms-ui', enabled);
+  };
+
+  const useCMSFooter = async () => {
+    footerEl = document.getElementById('footer');
+    footerOriginalMarkup = footerEl.outerHTML;
+
+    const { replaceFromURL } = await import('/static/site_cms/js/modules/importHTML.js');
+    footerEl = await replaceFromURL('/cms/markup/footer', footerEl);
+  };
+  const restorePortalFooter = () => {
+    footerEl.outerHTML = footerOriginalMarkup;
+  };
+
+  window.addEventListener('cms-styles-activated', async (event) => {
+    console.log(`event: ${event.type}`);
+    toggleStyles(true);
+    toggleLayout(true);
+    await useCMSFooter();
+  });
+  window.addEventListener('cms-styles-deactivated', (event) => {
+    console.log(`event: ${event.type}`);
+    toggleStyles(false);
+    toggleLayout(false);
+    restorePortalFooter();
+  });
+</script>

server/portal/templates/includes/footer.html

@@ -1,3 +1,3 @@
 {% load static %}
-<footer class="container-fluid">
+<footer id="footer">
 </footer>