@tacc/core-styles 1.0.0 → 2.0.0

package/src/lib/_imports/components/align/align.hbs

@@ -0,0 +1,51 @@
+<dl>
+
+  <dt>Images</dt>
+  <dd>
+    {{> @img class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @img class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @img class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+
+  <dt>Figures</dt>
+  <dd>
+    {{> @figure class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @figure class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @figure class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+
+  <dt>Figure Blockquotes<br />
+    <small>i.e. <code>&lt;figure class="s-blockquote"&gt;</code></small></dt>
+  <dd>
+    {{> @s-blockquote class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @s-blockquote class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @s-blockquote class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+
+  <dt>Blockquotes</dt>
+  <dd>
+    {{> @blockquote class="align-right" }}
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    {{> @blockquote class="align-left" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+    <p>{{> @text-of-one-paragraph-short }}</p>
+    <p>{{> @text-of-one-paragraph-long }}</p>
+    {{> @blockquote class="align-center" }}
+    <p>{{> @text-of-one-paragraph-medium }}</p>
+  </dd>
+</dl>

package/src/lib/_imports/components/align/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this

package/src/lib/_imports/components/align/demo.css

@@ -0,0 +1,7 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.align-right,
+.align-left,
+.align-center {
+  max-width: 50%; /* a default is sensible, but leave it to client */
+}

package/src/lib/_imports/components/align/readme.md

@@ -0,0 +1,31 @@
+Simple classes to align media or content within paragraphs:
+- `align-left`
+- `align-right`
+- `align-center`
+
+> **⚠️ Important**
+>
+> The alignment can **not** be seen on client without a width on the element. _The demo adds a width._
+
+> **☞ Remember**
+>
+> The benefit of these classes instead of other solutions (e.g. `style="float:right"`):
+>
+> 1. Spacing is consistent and aware of its own alignment.
+> 2. No need for [deprecated `<img align="…">` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#deprecated_attributes).
+> 3. No need for [deprecated `<center>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center).
+
+> **ⓘ Notice**
+>
+> These classes are from [Django CMS Picture] ([source]), but suitable for general usage, especially in [TACC-Docs], which does not use Django CMS.
+
+[Django CMS Picture]: https://github.com/django-cms/djangocms-picture#readme
+[source]: https://github.com/django-cms/djangocms-picture/blob/2.3.0/djangocms_picture/models.py#L24-L34
+[TACC-Docs]: https://github.com/TACC/TACC-Docs/
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

package/src/lib/_imports/components/align.css

@@ -0,0 +1,33 @@
+/* Basic Structure */
+
+.align-right,
+.align-left {
+  margin-bottom: var(--global-space--grid-gap);
+}
+.align-right {
+  float: right;
+  margin-left: var(--global-space--grid-gap);
+}
+.align-left {
+  float: left;
+  margin-right: var(--global-space--grid-gap);
+}
+.align-center {
+  /* Client should manage display */
+  /* FAQ: Display is likely block-ish e.g. block, inline-block, table */
+  /* FAQ: We cannot assume which display is best for client */
+  /* display: ... */
+  margin-inline: auto;
+}
+
+
+
+/* Edge Cases */
+
+/* To arbitrarily force wrap to prevent taking up too much content */
+.align-right,
+.align-left,
+.align-center {
+  /* NOTE: Demo has been given the default */
+  /* max-width: 50%; /* a default is sensible, but leave it to client */
+}

package/src/lib/_imports/components/bootstrap/bootstrap--container.hbs

@@ -1,4 +1,4 @@
 <div class="container">
   <h1>Lorem Ipsum</h1>
-  {{> @loremipsum }}
+  {{> @loremipsum-paragraphs }}
 </div>

package/src/lib/_imports/components/bootstrap/bootstrap--modal.hbs

@@ -14,7 +14,7 @@
             </button>
           </div>
           <div class="modal-body">
-            {{> @loremipsum }}
+            {{> @loremipsum-paragraphs }}
           </div>
           <div class="modal-footer">
             <button type="button" class="c-button c-button--secondary" data-dismiss="modal">

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

@@ -36,6 +36,11 @@ a.c-button {
 a.c-button--is-busy {
   cursor: default;
 }
+.c-button:--disabled {
+  /* WARNING: Opinionated */
+  -webkit-user-select: none;
+  user-select: none;
+}
 
 .c-button:not(:--disabled) {
   cursor: pointer; /* WARNING: Opinionated */
@@ -239,7 +244,7 @@ a.c-button--is-busy {
 .c-button--as-link:where(:not(:--disabled)):hover {
   @extend .x-link--hover;
 }
-.c-button--as-link:active {
+.c-button--as-link:where(:not(:--disabled)):active {
   @extend .x-link--active;
 }
 

package/src/lib/_imports/components/c-card/_c-card--many-variable.hbs

@@ -0,0 +1,107 @@
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+    <a href="#" class="c-button c-button--primary">Action</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action</a>
+    <a href="#" class="c-button c-button--primary">
+        <i class="icon icon-user">&gt;</i>
+        Action + Icon
+    </a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>Any <button class="c-button c-button--as-link">button--as-link</button> and any <a href="#">link</a> are <em>not</em> considered card actions and should <em>not</em> be affected by card styles.</p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#"><i class="icon icon-push-left">&gt;</i> Learn less</a>
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action 1</a>
+    <a href="#" class="c-button c-button--primary">Action 2</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>{{> @text-of-one-paragraph-short }}</p>
+
+    <a href="#" class="c-button c-button--primary">Action 1</a>
+    <a href="#" class="c-button c-button--primary">Action 2</a>
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If actions are wrapped in a <kbd>&lt;p&gt;</kbd> tag, automatic layout is abandoned.</p>
+
+    <p>
+        <a href="#" class="c-button c-button--primary">Action 1</a>
+        <a href="#" class="c-button c-button--primary">Action 2</a>
+    </p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If actions are wrapped in a <kbd>&lt;p&gt;</kbd> tag, automatic layout is abandoned.</p>
+
+    <p>
+        <a href="#"><i class="icon icon-push-left">&gt;</i> Learn less</a>
+        <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+    </p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If you wrap actions in a <kbd>&lt;p&gt;</kbd> tag, vertical spacing will be slightly off.*</p>
+
+    <a href="#" class="c-button c-button--primary">Action 1</a>
+    <a href="#" class="c-button c-button--primary">Action 2</a>
+    <p>
+        <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+    </p>
+</article>
+<article class="c-card c-card--{{this._self.name}}">
+    <h3>Card - {{this._self.label}}</h3>
+
+    <p>If you wrap actions in a <kbd>&lt;p&gt;</kbd> tag, vertical spacing will be slightly off.*</p>
+
+    <p>
+        <a href="#" class="c-button c-button--primary">Action 1</a>
+        <a href="#" class="c-button c-button--primary">Action 2</a>
+    </p>
+    <a href="#"><i class="icon icon-push-right">&gt;</i> Learn more</a>
+</article>
+
+<p style="grid-column: 1/-1;">* Wrapping in a <kbd>&lt;p&gt;</kbd> tag was a fix in early 2023-01, but is now non-standard.</p>

package/src/lib/_imports/components/c-card/_c-card--one-image.hbs

@@ -0,0 +1,6 @@
+<article class="c-card c-card--image">
+  <h3>Card - Image</h3>
+  <!--<p>{{> @text-of-one-paragraph-short }}</p>-->
+  <p class="c-message c-message--scope-inline c-message--type-warning">Styles not in Core yet. See <a href="https://dev.tup.tacc.utexas.edu/design-system/pattern-library-manual/c-card/">TUP Demo</a> instead.</p>
+  <img src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png" />
+</article>

package/src/lib/_imports/components/c-card/_c-card--one-plain.hbs

@@ -0,0 +1,4 @@
+<article class="c-card c-card--plain">
+  <h3>Card - Plain</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</article>

package/src/lib/_imports/components/c-card/_c-card--one-standard.hbs

@@ -0,0 +1,15 @@
+{{#if variant}}
+
+<article class="c-card c-card--standard-{{variant}}">
+  <h3>Card - Standard {{variant}}</h3>
+  <p>This is a backup variant. <span class="c-message--scope-inline c-message--type-warning">Only use if <code>c-card--standard</code> fails.</span></p>
+</article>
+
+{{else}}
+
+<article class="c-card c-card--standard">
+  <h3>Card - Standard</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</article>
+
+{{/if}}

package/src/lib/_imports/components/c-card/_c-card--one-transparent.hbs

@@ -0,0 +1,4 @@
+<article class="c-card">
+  <h3>Card - Default (Transparent)</h3>
+  <p>{{> @text-of-one-paragraph-short }}</p>
+</article>

package/src/lib/_imports/components/c-card/_c-card--one-with-grid.hbs

@@ -0,0 +1,26 @@
+{{#if only-standard}}
+
+<article class="c-card c-card--{{this._self.name}}">
+  <h3>Card - {{this._self.label}}</h3>
+  <p>Standard card and its explicit variations. <span class="c-message--scope-inline c-message--type-warning">The explicit variations are only if <code>c-card--standard</code> automatic variation fails and cannot be fixed fast enough.</span></p>
+  <div class="o-grid o-grid--col-min-width">
+    {{> @c-card--one-standard }}
+    {{> @c-card--one-standard variant=1 }}
+    {{> @c-card--one-standard variant=2 }}
+    {{> @c-card--one-standard variant=3 }}
+  </div>
+</article>
+
+{{else}}
+
+<article class="c-card c-card--{{this._self.name}}">
+  <h3>Card - {{this._self.label}}</h3>
+  <div class="o-grid o-grid--col-min-width">
+    {{> @c-card--one-transparent }}
+    {{> @c-card--one-plain }}
+    {{> @c-card--one-standard }}
+    {{> @c-card--one-image }}
+  </div>
+</article>
+
+{{/if}}

package/src/lib/_imports/components/c-card/c-card--frontera.demo.css

@@ -0,0 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.o-grid--col-min-width {
+  --width: 320px;
+}

package/src/lib/_imports/components/{c-card.html → c-card/c-card--frontera.hbs}

@@ -1,5 +1,6 @@
-<div class="o-grid o-grid--col-min-width" style="--width: 320px">
-  <a href="./" class="c-card {{modifier_class}}">
+<!-- FAQ: Not using {{this._self.name}} because class is frontera-about-page -->
+<div class="o-grid o-grid--col-min-width">
+  <a href="#" class="c-card c-card--frontera-about-page">
     <figure>
       <img
         src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
@@ -9,7 +10,7 @@
     </figure>
   </a>
 
-  <a href="./" class="c-card {{modifier_class}}">
+  <a href="#" class="c-card c-card--frontera-about-page">
     <figure>
       <img
         src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
@@ -19,7 +20,7 @@
     </figure>
   </a>
 
-  <a href="./" class="c-card {{modifier_class}}">
+  <a href="#" class="c-card c-card--frontera-about-page">
     <img
       src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
       alt=""
@@ -27,7 +28,7 @@
     <h3>Link ▸ Image + Text</h3>
   </a>
 
-  <div class="c-card {{modifier_class}}" style="display: inline-block">
+  <div class="c-card c-card--frontera-about-page">
     <figure>
       <img
         src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
@@ -37,7 +38,7 @@
     </figure>
   </div>
 
-  <div class="c-card {{modifier_class}}" style="display: inline-block">
+  <div class="c-card c-card--frontera-about-page">
     <img
       src="https://cep.tacc.utexas.edu/media/filer_public_thumbnails/filer_public/fb/3f/fb3fd4c3-6360-4759-b607-f393b84558c0/spectrum-wide-320px.png__320x160_q85_subject_location-157%2C78_subsampling-2.png"
       alt=""

package/src/lib/_imports/components/c-card/c-card--frontera.readme.md

@@ -0,0 +1,5 @@
+A container (that may be a link) with an image and a large heading beneath it.
+
+> **ⓧ Deprecated**
+>
+> This was created for an incomplete About page on [Frontera (dev) website](https://dev.fronteraweb.tacc.utexas.edu/). It is not intended to be used further. It is replaced by other card types or patterns.

package/src/lib/_imports/components/c-card/c-card.demo.css

@@ -0,0 +1,11 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+/* To make a card with a grid inside span all columns */
+.o-section > .c-card:has(.o-grid) {
+  grid-column: 1/-1
+}
+
+/* To prevent cards from stretching to match grid's equal row height */
+.o-grid--col-min-width {
+  grid-auto-rows: unset;
+}

package/src/lib/_imports/components/c-card/c-card.hbs

@@ -0,0 +1,36 @@
+<h2>Table of Contents</h2>
+<nav class="c-nav">
+  <ul>
+    <li><a href="#section--null">Section (Default)</a></li>
+    <li><a href="#section--light">Section - Light</a></li>
+    <li><a href="#section--muted">Section - Muted</a></li>
+    <li><a href="#section--dark">Section - Dark</a></li>
+  </ul>
+</nav>
+<h2 id="section--null">Section (Default a.k.a Unstyled a.k.a Transparent)</h2>
+<section class="o-section  o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</section>
+<hr />
+<h2 id="section--light">Section - Light</h2>
+<section class="o-section o-section--style-light  o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</section>
+<hr />
+<h2 id="section--muted">Section - Muted</h2>
+<section class="o-section o-section--style-muted  o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</section>
+<hr />
+<h2 id="section--dark">Section - Dark</h2>
+<section class="o-section o-section--style-dark  o-grid o-grid--col-min-width">
+  {{> @c-card--many-variable }}
+  {{> @c-card--one-with-grid }}
+  {{> @c-card--one-with-grid only-standard=true}}
+</section>

package/src/lib/_imports/components/c-card/c-card.readme.md

@@ -0,0 +1,33 @@
+Container with content and action(s) about a single subject.
+
+| Class (Std.)               | Class (Alt.)             | Description
+| - | - | - |
+| `.c-card`                  | `.card`                  | add padding to content
+| `.c-card--plain`           | `.card--plain`           | add background*
+| `.c-card--plain-hr-top`    | `.card--plain-hr-top`    | prepend an `<hr>`
+| `.c-card--plain-hr-bottom` | `.card--plain-hr-bottom` | append an `<hr>`
+| `.c-card--standard`        | `.card--standard`        | add background + border*
+
+<small>* Colors depend on card context/parent.</small>
+
+---
+
+Future features that will be added when client testing is complete:
+
+| Class (Std.)               | Class (Alt.)             | Description
+| - | - | - |
+| `.c-card--image-...`       | `.card--image-...`       | position a single image
+| `.c-card--image-top`       | `.card--image-top`       | position image to top
+| `.c-card--image-bottom`    | `.card--image-bottom`    | position image to bottom
+| `.c-card--image-left`      | `.card--image-left`      | position image to left
+| `.c-card--image-right`     | `.card--image-right`     | position image to right
+
+---
+
+Backup classes if `c-card--standard` automatic styles fail:
+
+| Class (Std.)          | Class (Alt.)        | Description
+| - | - | - |
+| `.c-card--standard-1` | `.card--standard-1` | teal border, gray background
+| `.c-card--standard-2` | `.card--standard-2` | teal border, white background
+| `.c-card--standard-3` | `.card--standard-3` | brown border, white background

package/src/lib/_imports/components/c-card/config.yml

@@ -0,0 +1,23 @@
+context:
+  shouldLoadCMS: true
+  📝 shouldLoadCMS: this pattern is not intended nor expected for use beyond CMS
+variants:
+  - name: default
+    label: Default (Transparent)
+  - name: plain
+  - name: standard
+  - name: standard-1
+    status: backup
+  - name: standard-2
+    status: backup
+  - name: standard-3
+    status: backup
+  # - name: image
+  #   status: prototype
+  - name: frontera
+    status: deprecated
+    📝 name: using "frontera-about-page" breaks the demo
+    label: Frontera About Page
+    context:
+      supportStyles:
+        - ../../assets/components/c-card--frontera-about-page.css

package/src/lib/_imports/components/c-card--frontera-about-page.css

@@ -0,0 +1,48 @@
+@import url("../tools/x-article-link.css");
+
+.c-card--frontera-about-page {
+  width: fit-content;
+
+  border-bottom: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+  margin-bottom: 4.6rem;
+}
+
+
+
+/* Plugins */
+
+/* Plugins: Link / Image with Link */
+a.c-card--frontera-about-page {
+  display: inline-block;
+}
+a.c-card--frontera-about-page /* FAQ: Links may be underlined by default */,
+a.c-card--frontera-about-page:hover {
+  text-decoration: none;
+}
+a.c-card--frontera-about-page:hover { @extend %x-article-link-hover; }
+a.c-card--frontera-about-page:active { @extend %x-article-link-active; }
+
+/* Plugins: * > Image + Text */
+.c-card--frontera-about-page img + h3 {
+  color: var(--global-color-primary--xx-dark);
+  font-size: var(--global-font-size--x-large);
+  font-weight: var(--bold);
+
+  margin-top: 1.6rem;
+}
+.c-card--frontera-about-page img ~ :last-child {
+  margin-bottom: 1.25rem;
+}
+
+/* Plugins: * > Image with Caption */
+.c-card--frontera-about-page figure {
+  margin: 0;
+}
+.c-card--frontera-about-page figcaption {
+  color: var(--global-color-primary--xx-dark);
+  font-size: var(--global-font-size--x-large);
+  font-weight: var(--bold);
+
+  margin-top: 1.6rem;
+  margin-bottom: 1.25rem;
+}