enhance(card): linked images (#419)

* enhance(card): table of contents for image cards * feat(x-link): block-link * docs(card): add linked images to demo * fix(card): linked image layout bugs and missing ux
TACC · Oct 31, 2024 · 03047f8 · 03047f8
1 parent 862bbd0
commit 03047f8
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 20 deletions.
diff --git a/dist/components/c-card.css b/dist/components/c-card.css
diff --git a/dist/core-styles.cms.css b/dist/core-styles.cms.css
diff --git a/dist/core-styles.docs.css b/dist/core-styles.docs.css
diff --git a/src/lib/_imports/components/c-card.css b/src/lib/_imports/components/c-card.css
@@ -1,5 +1,6 @@
 @import url("../objects/o-section.selectors.css");
 @import url("../tools/selectors.css");
+@import url("../tools/x-link.css");
 
 @import url("./c-button.selectors.css");
 @import url("./c-card.selectors.css");
@@ -128,7 +129,7 @@
 :--c-card > p > a:not(:--c-button):has(.icon):not(:last-child) {
     margin-right: 1rem;
 }
-:--c-card > :is(:--action) {
+:--c-card > :--action:not(:--c-card__image) {
     vertical-align: middle;
 
     margin-bottom: 2rem; /* mimic <p> `margin-bottom` */
@@ -255,8 +256,8 @@
     /* Repeat many times, because element count is unknown */
     grid-template-rows: repeat(10, min-content);
 }
-:--c-card--image-left > img,
-:--c-card--image-right > img {
+:--c-card--image-left > :--c-card__image,
+:--c-card--image-right > :--c-card__image {
     grid-row-start: 1;
     grid-row-end: -1;
 
@@ -267,15 +268,15 @@
 :--c-card--image-left {
     grid-template-columns: var(--image-width) 1fr; /* to overwrite `.c-card` */
 }
-:--c-card--image-left > img {
+:--c-card--image-left > :--c-card__image {
     grid-column-start: 1;
     grid-column-end: span 1;
 }
 
 :--c-card--image-right {
     grid-template-columns: 1fr var(--image-width); /* to overwrite `.c-card` */
 }
-:--c-card--image-right > img {
+:--c-card--image-right > :--c-card__image {
     grid-column-start: 2;
     grid-column-end: span 1;
 }
@@ -295,35 +296,50 @@
     grid-template-columns: var(--global-space--pattern-pad) 1fr var(--global-space--pattern-pad);
     padding-inline: unset;
 }
-:--c-card--image-top > :not(img),
-:--c-card--image-bottom > :not(img) {
+:--c-card--image-top > :not(:--c-card__image),
+:--c-card--image-bottom > :not(:--c-card__image) {
     /* Span only columns for content */
     grid-column-start: 2;
     grid-column-end: -2;
 }
-:--c-card--image-top > img,
-:--c-card--image-bottom > img {
+:--c-card--image-top > :--c-card__image,
+:--c-card--image-bottom > :--c-card__image {
     /* Span all columns, padding and content */
     grid-column-start: 1;
     grid-column-end: -1;
 }
 
-:--c-card--image-top > img {
+:--c-card--image-top > :--c-card__image {
     grid-row-start: 1;
     margin-bottom: var(--global-space--pattern-pad);
 }
 :--c-card--image-bottom > :is(h1, h2, h3, h4, h5):first-of-type {
     margin-top: unset; /* to avoid combining margin with image */
 }
 
-:--c-card--image-bottom > img {
+:--c-card--image-bottom > :--c-card__image {
     grid-row-end: -1;
     margin-top: var(--global-space--pattern-pad);
 }
 :--c-card--image-bottom > p:last-of-type {
     margin-bottom: unset; /* to avoid combining margin with image */
 }
 
+/* Image: Link */
+
+:--c-card__image-link {
+    @mixin block-link;
+}
+:--c-card__image-link:not([href]) {
+    @mixin block-link--disabled;
+}
+:--c-card__image-link:hover {
+    @mixin block-link--hover;
+}
+:--c-card__image-link:active {
+    @mixin block-link--active;
+}
+
 /* Image: Contact Card */
 
 :--c-card--image-top h4 {

diff --git a/src/lib/_imports/components/c-card.selectors.css b/src/lib/_imports/components/c-card.selectors.css
@@ -50,3 +50,10 @@
 @custom-selector :--c-card--image-right
     .c-card--image-right,
     .card--image-right;
+
+@custom-selector :--c-card__image
+    img,
+    :--c-card__image-link;
+
+@custom-selector :--c-card__image-link
+    a:has(> img);
diff --git a/src/lib/_imports/components/c-card/_c-card--image.hbs b/src/lib/_imports/components/c-card/_c-card--image.hbs
@@ -3,11 +3,27 @@
 
   <h4><a href="#">Bender Rodríguez</a></h4>
   <p>Planet Express Worker</p>
-  <p>Anti-hero in Futurama</p>
+  <p>(Anti-hero in Futurama)</p>
+  <p><strong>
+    {{#if image-link}}
+    Image <em>IS</em> a link
+    {{else}}
+    Image is <em>NOT</em> a link
+    {{/if}}
+  </strong></p>
+  {{#if image-link}}
+  <a href="{{image-link}}">
+    <img class="img-fluid" width="234px" height="293px"
+      src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
+      title="University of Texas at Austin" class="img-fluid"
+    />
+  </a>
+  {{else}}
   <img class="img-fluid" width="234px" height="293px"
     src="https://cohro.ukzn.ac.za/wp-content/uploads/2019/02/profile-placeholder.png"
     title="University of Texas at Austin" class="img-fluid"
   />
+  {{/if}}
 
 {{else}}
 
@@ -16,7 +32,12 @@
   {{#if tall}}
   {{> @message tag="p" type="warning" scope="inline" content="Narrow images might not fill space available. Just use a wider image." }}
   {{/if}}
+  {{#if image-link}}
+  <a href="{{image-link}}">
+    <img src="{{> @img-url wide=wide tall=tall medium=true }}" />
+  </a>
+  {{else}}
   <img src="{{> @img-url wide=wide tall=tall medium=true }}" />
-
+  {{/if}}
 {{/if}}
 </article>
diff --git a/src/lib/_imports/components/c-card/c-card--images.hbs b/src/lib/_imports/components/c-card/c-card--images.hbs
@@ -1,3 +1,13 @@
+<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">
     <h3>Transparent Card Image</h3>
@@ -7,9 +17,17 @@
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
+    <h3>Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
     <h3>Plain Card Image</h3>
@@ -19,13 +37,21 @@
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
+    <h3>Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#"}}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>
 <hr>
-<h2 id="section--null">Section - Light</h2>
+<h2 id="section--light">Section - Light</h2>
 <section class="o-section o-section--style-light">
     <h3>Transparent Card Image</h3>
     <section class="o-section s-image-grid">
@@ -34,9 +60,17 @@
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
+    <h3>Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
     <h3>Plain Card Image</h3>
@@ -46,13 +80,21 @@
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
+    <h3>Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>
 <hr>
-<h2 id="section--null">Section - Muted</h2>
+<h2 id="section--muted">Section - Muted</h2>
 <section class="o-section o-section--style-muted">
     <h3>Transparent Card Image</h3>
     <section class="o-section s-image-grid">
@@ -61,9 +103,17 @@
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
+    <h3>Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
     <h3>Plain Card Image</h3>
@@ -73,13 +123,21 @@
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
+    <h3>Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>
 <hr>
-<h2 id="section--null">Section - Dark</h2>
+<h2 id="section--dark">Section - Dark</h2>
 <section class="o-section o-section--style-dark">
     <h3>Transparent Card Image</h3>
     <section class="o-section s-image-grid">
@@ -88,9 +146,17 @@
         {{> @c-card--image position="right" tall=true variant="transparent" }}
         {{> @c-card--image position="left" tall=true variant="transparent" }}
     </section>
+    <h3>Transparent Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="transparent" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="transparent" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Transparent</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="transparent" is-staff=true image-link="#" }}
     </section>
 
     <h3>Plain Card Image</h3>
@@ -100,8 +166,16 @@
         {{> @c-card--image position="right" tall=true variant="plain" }}
         {{> @c-card--image position="left" tall=true variant="plain" }}
     </section>
+    <h3>Plain Card Image with Link</h3>
+    <section class="o-section s-image-grid">
+        {{> @c-card--image position="top" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="bottom" wide=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="right" tall=true variant="plain" image-link="#" }}
+        {{> @c-card--image position="left" tall=true variant="plain" image-link="#" }}
+    </section>
     <h3>Contact Card with Image - Plain</h3>
     <section class="o-section s-image-grid">
         {{> @c-card--image position="top" wide=true variant="plain" is-staff=true }}
+        {{> @c-card--image position="top" wide=true variant="plain" is-staff=true image-link="#" }}
     </section>
 </section>
diff --git a/src/lib/_imports/tools/x-link.css b/src/lib/_imports/tools/x-link.css
@@ -1,3 +1,5 @@
+/* Regular Links */
+
 @define-mixin link {
   color: var(--global-color-accent--normal);
 
@@ -41,6 +43,10 @@
   @mixin link--active;
 }
 
+
+
+/* Irregular Links */
+
 @define-mixin link--irregular {
   @mixin link;
 
@@ -59,7 +65,6 @@
   @mixin link--irregular--disabled;
 }
 
-
 @define-mixin link--irregular--hover {
   @mixin link--hover;
 
@@ -79,3 +84,27 @@
 .x-link--irregular--active {
   @mixin link--irregular--active;
 }
+
+
+
+/* Block Links */
+
+@define-mixin block-link {
+  --border-width: var(--global-border-width--thick);
+
+  outline-color: var(--global-color-accent--normal);
+
+  outline-width: var(--border-width);
+}
+
+@define-mixin block-link--disabled {
+  @mixin link--disabled;
+}
+
+@define-mixin block-link--hover {
+  outline-style: solid;
+}
+
+@define-mixin block-link--active {
+  outline-style: dotted;
+}