feat(demo): support custom cms & portal css files (#95)

docs/index.md

@@ -8,6 +8,8 @@ The pattern CSS is available via [@tacc/core-styles].
 
 The patterns are organized by [ITCSS][tacc itcss].
 
+Any patterns that expect Bootstrap are tested on [Bootstrap 4.3.1][bootstrap].
+
 ---
 
 Known Clients:
@@ -23,6 +25,7 @@ Known Clients:
 
 [tacc shared css]: https://confluence.tacc.utexas.edu/x/eJR9E
 [tacc itcss]: https://confluence.tacc.utexas.edu/x/IAA9Cw
+[bootstrap]: https://getbootstrap.com/docs/4.3/
 
 <script type="module">
 Array.from(document.body.querySelectorAll('a'))

fractal.config.js

@@ -49,7 +49,7 @@ fractal.components.set('resources', {
   },
 });
 fractal.components.set('default.context', {
-  shouldSkipPattern: true, // true, because …base.css loads most components
+  shouldSkipPattern: true, // true, because core-styles.….css loads most
   globalStyles: [{
     isInternal: true,
     layer: 'base',
@@ -58,6 +58,16 @@ fractal.components.set('default.context', {
     isInternal: true,
     layer: 'base',
     path: '/assets/core-styles.base.css'
+  }],
+  cmsStyles: [{
+    isInternal: true,
+    layer: 'base',
+    path: '/assets/core-styles.cms.css'
+  }],
+  portalStyles: [{
+    isInternal: true,
+    layer: 'base',
+    path: '/assets/core-styles.portal.css'
   }]
 });
 

src/lib/_imports/_preview.hbs

@@ -34,7 +34,13 @@
 {{#unless _target.context.shouldSkipCMS }}
 <!-- Styles: Global (for current pattern): CMS -->
 <style>
-@import url('{{path "/assets/core-styles.cms.css"}}');
+{{#each cmsStyles}}
+  {{#if this.isInternal}}
+  @import url('{{path this.path}}');
+  {{else}}
+  @import url('{{this.path}}');
+  {{/if}}
+{{/each}}
 </style>
 {{/unless}}
 {{/if}}
@@ -43,7 +49,13 @@
 {{#unless _target.context.shouldSkipPortal }}
 <!-- Styles: Global (for current pattern): Portal -->
 <style>
-@import url('{{path "/assets/core-styles.portal.css"}}');
+{{#each portalStyles}}
+  {{#if this.isInternal}}
+  @import url('{{path this.path}}');
+  {{else}}
+  @import url('{{this.path}}');
+  {{/if}}
+{{/each}}
 </style>
 {{/unless}}
 {{/if}}

src/lib/_imports/components/c-form/c-form.hbs

@@ -1,3 +1,6 @@
+<p class="c-message c-message--scope-global">
+  This component currently depends on CMS stylesheets. When this component is used on the Portal, the font size should not be this small. When this component is proven to work independent of CMS, its demo font will not match CMS and this message will be removed.
+</p>
 <form action="" method="POST" enctype="multipart/form-data" class="c-form">
 
   <h3 class="c-form__title">Title of Form</h3>

src/lib/_imports/components/c-form/config.yml

@@ -1,2 +1,3 @@
 context:
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadCMS: true 
+  📝 shouldLoadCMS: temporary dependence, until proven to work on Portal

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

@@ -1,5 +1,6 @@
 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
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: because this is demo but this is CMS pattern
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
 label: Django CMS Forms

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

@@ -1,3 +1,6 @@
+<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>

src/lib/_imports/core-styles.base.css

@@ -45,7 +45,6 @@
 @import url("./components/cortal.icon.css");
 
 /* TRUMPS */
-@import url("./trumps/s-affixed-input-wrapper.css");
 @import url("./trumps/s-blockquote.css");
 @import url("./trumps/s-breadcrumbs.css");
 @import url("./trumps/s-footer.css");

src/lib/_imports/core-styles.cms.css

@@ -24,6 +24,7 @@
 /* (none) */
 
 /* TRUMPS */
+@import url("./trumps/s-affixed-input-wrapper.css");
 /* To explain the in-limbo Core-CMS doc page styles */
 /* FAQ: Commented out because Core-CMS doc pages load these directly */
 /* IMPORTANT: If CMS docs are moved to TACC-Docs, then kill these stylesheets */

src/lib/_imports/elements/table/config.yml

@@ -1,5 +1,3 @@
-context:
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
 variants:
   - name: default
     label: Basic

src/lib/_imports/objects/o-fixed-header-table/config.yml

@@ -1,8 +1,10 @@
-status: ready
+status: prototype
 order: 1
 context:
-  shouldLoadBootstrap: true # not yet tested without Bootstrap
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: >-
+    not yet tested without Bootstrap
+    (known dependencies: <caption> font color)
   data:
     cols:
       - ID

src/lib/_imports/objects/o-table-wrap/config.yml

@@ -45,8 +45,10 @@ variants:
             custom-1: 250.0 MB
             time: 04/20/2020 15:03:10
 context:
-  shouldLoadBootstrap: true # not yet tested without Bootstrap
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: >-
+    not yet tested without Bootstrap
+    (known dependencies: <caption> font color)
   data:
     cols:
       - ID

src/lib/_imports/settings/font--cms.css

@@ -9,9 +9,9 @@
   /* WARNING: These are only for CMS sites using Core-Styles v1+ */
   --global-font-size--x-small: 1.0rem;
   --global-font-size--small: 1.2rem;
-  --global-font-size--medium: 1.8rem;
-  --global-font-size--large: 2.1rem;
-  --global-font-size--x-large: 2.8rem;
-  --global-font-size--xx-large: 3.2rem; /* retained from pre-2023 */
-  --global-font-size--xxx-large: 4.1rem; /* retained from pre-2023 */
+  --global-font-size--medium: 1.4rem;
+  --global-font-size--large: 1.8rem;
+  --global-font-size--x-large: 2.1rem;
+  --global-font-size--xx-large: 2.8rem;
+  --global-font-size--xxx-large: var(--global-font-size--xx-large);
 }

src/lib/_imports/settings/font--portal.css

@@ -12,6 +12,6 @@
   --global-font-size--medium: 1.4rem;
   --global-font-size--large: 1.6rem;
   --global-font-size--x-large: 2.0rem;
-  --global-font-size--xx-large: 2.0rem; /* no larger sizes found in tup */
-  --global-font-size--xxx-large: 2.0rem; /* no larger sizes found in tup */
+  --global-font-size--xx-large: var(--global-font-size--x-large);
+  --global-font-size--xxx-large: var(--global-font-size--x-large);
 }

src/lib/_imports/trumps/s-affixed-input-wrapper/config.yml

@@ -1,3 +1,4 @@
+label: (CMS) S Affixed Input Wrapper
 context:
-  shouldLoadBootstrap: true # not yet tested without Bootstrap
-  shouldLoadCMS: true # temporary dependence, until proven to work on Portal
+  shouldLoadCMS: true
+  📝 shouldLoadBootstrap: temporary dependence, until proven to work on Portal