feat: tup-463 c-content-block and generics/attributes from tup-ui (#246)

* style: fix a quote mistake * feat: tup-624: added generics/attributes to demo (#244) * added generics/attributes to demo * added disabled attr pointer-events to generics/attributes --------- Co-authored-by: Wesley B <[email protected]> * feat: tup-619 c-content-block migration (#245) * feat: tup-610 content-block migration * quick fix, moved import from base to cms * moved import from base to cms * delete dist file for content-block --------- Co-authored-by: Wesley B <[email protected]> --------- Co-authored-by: Tomas Gonzalez <[email protected]>
TACC · Oct 13, 2023 · 4249947 · 4249947
1 parent bb9477d
commit 4249947
Show file tree

Hide file tree

Showing 22 changed files with 214 additions and 149 deletions.
diff --git a/dist/components/c-button.css b/dist/components/c-button.css
diff --git a/dist/components/c-content-block.css b/dist/components/c-content-block.css
diff --git a/dist/components/c-form--login.css b/dist/components/c-form--login.css
diff --git a/dist/components/c-form.css b/dist/components/c-form.css
diff --git a/dist/components/django-cms-forms.css b/dist/components/django-cms-forms.css
diff --git a/dist/core-styles.base.css b/dist/core-styles.base.css
diff --git a/dist/core-styles.cms.css b/dist/core-styles.cms.css
diff --git a/dist/generics/attributes.css b/dist/generics/attributes.css
diff --git a/dist/generics/attributes/attributes.css b/dist/generics/attributes/attributes.css
diff --git a/dist/generics/attributes/demo.css b/dist/generics/attributes/demo.css
@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.18.0+ | MIT | github.com/TACC/Core-Styles */
diff --git a/dist/trumps/s-form--login.css b/dist/trumps/s-form--login.css
diff --git a/dist/trumps/s-form.css b/dist/trumps/s-form.css
diff --git a/src/lib/_imports/components/c-button.css b/src/lib/_imports/components/c-button.css
@@ -53,8 +53,6 @@ a:--c-button--is-busy {
 ) {
   color: var(--global-color-primary--dark);
   border-color: var(--global-color-primary--dark);
-
-  pointer-events: none;
 }
 :--c-button:--disabled:not(
   :--c-button--is-busy,

diff --git a/src/lib/_imports/components/c-button/c-button.hbs b/src/lib/_imports/components/c-button/c-button.hbs
@@ -1,163 +1,167 @@
 <dl>
   {{#if supports.type}}
   <dt>Type</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--primary"
-      {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--primary</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </button>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--primary</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </button>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--secondary</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary"
-      {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--primary</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--tertiary</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--secondary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--secondary</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--primary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--primary</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--tertiary" {{#if disabled}}disabled
+          tabindex="-1" {{/if}}>
+          <span class="c-button__text">--tertiary</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.states}}
+    {{#if supports.states}}
   <dt>States</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">default</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled>
-        <span class="c-button__text">--is-busy</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">default</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} 
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">disabled-attr</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled>
+          <span class="c-button__text">--is-busy</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">default</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
-        {{#if type}}{{type}}{{/if}}"
-        disabled tabindex="-1">
-        <span class="c-button__text">--is-busy</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">default</span>
+        </a>
+        <a disabled href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}">
+          <span class="c-button__text">disabled-attr</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--is-busy
+        {{#if type}}{{type}}{{/if}}" disabled tabindex="-1">
+          <span class="c-button__text">--is-busy</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.icons}}
+    {{#if supports.icons}}
   <dt>Icons</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <i class="c-button__icon--before" aria-description="validate input">…</i>
-        <span class="c-button__text">__icon--before</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}}
-        {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">__icon--after</span>
-        <i class="c-button__icon--after" aria-description="exit page">X</i>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <i class="c-button__icon--before" aria-description="validate input">…</i>
+          <span class="c-button__text">__icon--before</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}}
+        {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">__icon--after</span>
+          <i class="c-button__icon--after" aria-description="exit page">X</i>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.width}}
+    {{#if supports.width}}
   <dt>Width</dt>
-  <dd><dl>
-    <dt><code>&lt;button&gt;</code></dt>
-    <dd>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </button>
-      <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled{{/if}}>
-        <span class="c-button__text">--width-long</span>
-    </dd>
+  <dd>
+    <dl>
+      <dt><code>&lt;button&gt;</code></dt>
+      <dd>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </button>
+        <button class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}" {{#if
+          disabled}}disabled{{/if}}>
+          <span class="c-button__text">--width-long</span>
+      </dd>
 
-    {{#if supports.link-tag}}
-    <dt><code>&lt;a&gt;</code></dt>
-    <dd>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-short</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-medium</span>
-      </a>
-      <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
-        {{#if disabled}}disabled tabindex="-1"{{/if}}>
-        <span class="c-button__text">--width-long</span>
-      </a>
-    </dd>
+      {{#if supports.link-tag}}
+      <dt><code>&lt;a&gt;</code></dt>
+      <dd>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-short {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-short</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-medium {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-medium</span>
+        </a>
+        <a href="#" class="c-button c-button--{{this._self.name}} c-button--width-long {{#if type}}{{type}}{{/if}}"
+          {{#if disabled}}disabled tabindex="-1" {{/if}}>
+          <span class="c-button__text">--width-long</span>
+        </a>
+      </dd>
+      {{/if}}
+    </dl>
+  <dd>
     {{/if}}
-  </dl><dd>
-  {{/if}}
 
-  {{#if supports.size}}
+    {{#if supports.size}}
   <dt>Size</dt>
   <dd>
     {{#if supports.size-small}}
     <dl>
       <dt><code>&lt;button&gt;</code></dt>
       <dd>
         <button class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </button>
       </dd>
@@ -166,8 +170,7 @@
       <dt><code>&lt;a&gt;</code></dt>
       <dd>
         <a href="#" class="c-button c-button--{{this._self.name}} c-button--size-small
-          {{#if type}}{{type}}{{/if}}"
-          {{#if disabled}}disabled{{/if}}>
+          {{#if type}}{{type}}{{/if}}" {{#if disabled}}disabled{{/if}}>
           <span class="c-button__text">--size-small</span>
         </a>
       </dd>
@@ -177,5 +180,5 @@
     <small>(no small size allowed)</small>
     {{/if}}
   <dd>
-  {{/if}}
-</dl>
+    {{/if}}
+</dl>
diff --git a/src/lib/_imports/components/c-content-block.css b/src/lib/_imports/components/c-content-block.css
@@ -0,0 +1,9 @@
+:is(.c-content-block, .content-block) {
+    margin-bottom: var(--global-space--bootstrap-gap);
+    padding: var(--global-space--pattern-pad);
+}
+
+:is(.c-content-block, .content-block) :is(h1, h2, h3, h4, h5, h6) {
+    border-left: var(--global-border-width--xx-thick) solid var(--global-color-accent--tertiary);
+    padding-left: 10px;
+}
diff --git a/src/lib/_imports/components/c-content-block/c-content-block.hbs b/src/lib/_imports/components/c-content-block/c-content-block.hbs
@@ -0,0 +1,33 @@
+<dl>
+    <dt>Staff Profile</dt>
+    <dd>
+        <div class="content-block">
+            <img class="img-fluid" />
+            <img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Exampleavatar.png"
+                title="University of Texas at Austin" class="img-fluid" />
+        </div>
+
+        <div class="content-block">
+            <h3>Education</h3>
+
+            <p><strong>Ph.D., Computer Engineering</strong><br>
+                Clemson University, 2000</p>
+
+            <p><strong>M.S., Computer Engineering</strong><br>
+                Clemson University, 1993</p>
+
+            <p><strong>B.S., Electrical Engineering</strong><br>
+                Clemson University, B.S. (Electrical Engineering), 1991</p>
+        </div>
+    </dd>
+
+    <dt>Newsletters</dt>
+    <dd>
+        <article class="content-block">
+            <h3>EPIC + WeTeach_CS Newsletter</h3>
+
+            <p>Stay connected with our biweekly <a href="#">newsletter</a>.</p>
+            <a class="c-button c-button--primary" href="#">Newsletter Signup</a>
+        </article>
+    </dd>
+</dl>
diff --git a/src/lib/_imports/core-styles.base.css b/src/lib/_imports/core-styles.base.css
@@ -12,6 +12,7 @@
 /* https://confluence.tacc.utexas.edu/x/b53tDg */
 @import url("./generics/fonts.css");
 @import url("./generics/pseudo-elements.css");
+@import url("./generics/attributes.css");
 
 /* ELEMENTS */
 /* To override Bootstrap */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		/! @tacc/core-styles 2.18.0+ \| MIT \| github.com/TACC/Core-Styles /