Add c-card--circle-cover modifier

Author: tylersticka

.changeset/clean-tools-happen.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add the `c-card--circle-cover` modifier for circular card covers, intended for team member listings

src/components/card/card.scss

@@ -75,6 +75,14 @@ $_focus-overflow: (size.$edge-large * -1);
   }
 }
 
+/**
+ * Center-align text content to better match a circular cover image
+ */
+
+.c-card--circle-cover {
+  text-align: center;
+}
+
 /**
  * Responsive horizontal modifiers
  *
@@ -101,6 +109,21 @@ $_focus-overflow: (size.$edge-large * -1);
       'cover cover .';
     grid-template-columns: repeat(3, 1fr); /* 2 */
     grid-template-rows: 1fr repeat(3, minmax(0, auto)) 1fr; /* 3 */
+
+    /**
+     * When the cover image is circular (and thus taller), give it a smaller
+     * amount of space and keep the text left-aligned.
+     */
+
+    &.c-card--circle-cover {
+      grid-template-areas:
+        'cover . .'
+        'cover header header'
+        'cover content content'
+        'cover footer footer'
+        'cover . .';
+      text-align: left;
+    }
   }
 }
 
@@ -204,6 +227,18 @@ $_focus-overflow: (size.$edge-large * -1);
   grid-area: cover;
   @include ratio-box.core-styles($ratio: aspect-ratio.$wide);
 
+  /**
+   * Square aspect ratio + fully rounded corners = circular cover image
+   */
+
+  .c-card--circle-cover & {
+    border-radius: size.$border-radius-full;
+
+    &::before {
+      padding-bottom: 100%;
+    }
+  }
+
   /**
    * Since this element is always visually on top, we can assume it needs a
    * bottom margin _unless_ it's an only child. Unfortunately we need to

src/components/card/card.stories.mdx

@@ -23,6 +23,9 @@ const singleDemoStory = (args) => {
   if (args.theme !== 'none') {
     classNames.push(`t-${args.theme}`);
   }
+  if (args.class) {
+    classNames.push(args.class);
+  }
   if (classNames.length > 0) {
     props.class = classNames.join(' ');
   }
@@ -157,6 +160,41 @@ If a card with a cover is meant to occupy its full container width, it may be pr
 
 Horizontal cards will attempt to span all available columns of a CSS Grid Layout. This comes in handy when displaying them [in a Deck](/docs/objects-deck--horizontal-card#with-horizontal-cards).
 
+## With circular cover
+
+The `c-card--circle-cover` modifier will change the appearance of the cover and adjacent content in the following ways:
+
+- The cover image's aspect ratio will be square.
+- The cover image will be fully rounded into a circle shape.
+- When vertical, the card's text alignment will be centered to better align with the circle.
+- When horizontal, the card's content will occupy more room than its image to account for the taller aspect ratio of the cover image.
+
+This variation is best suited for links to bio information, such as on our team page.
+
+<Canvas>
+  <Story
+    name="Circular Cover Image"
+    args={{ class: 'c-card--circle-cover', href: '#', horizontal: '@m' }}
+    parameters={{
+      docs: {
+        source: {
+          code: `{% embed '@cloudfour/components/card/card.twig' with {
+  class: 'c-card--circle-cover c-card--horizontal@m',
+  href: '#'
+} only %}
+  {% block heading %}Lorem ipsum dolor sit amet{% endblock %}
+  {% block cover %}<img src="https://placeimg.com/800/450/animals" alt="">{% endblock %}
+  {% block content %}<p>Consectetur adipiscing elit...</p>{% endblock %}
+  {% block footer %}<p>{{'now'|date('M j, Y')}}</p>{% endblock %}
+{% endembed %}`,
+        },
+      },
+    }}
+  >
+    {singleDemoStory.bind({})}
+  </Story>
+</Canvas>
+
 ## Contained
 
 A card with the `c-card--contained` class will gain a background color, padding and rounded corners. This can be helpful for offsetting the card visually from its surroundings.
@@ -230,5 +268,4 @@ When the card is a focal point and more contrast is desired, you may also attach
 
 ## Coming soon
 
-- Progressive enhancement based on CSS Grid support
 - Distinctly contained footers for PWA Stats (if necessary)