Add eyebrow block to card component (#2144)

* Reorganize logos

* Add eyebrow block to card component

---------

Co-authored-by: Scott Vandehey <[email protected]>

Author: tylersticka

.changeset/hip-cars-collect.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add `eyebrow` block for including branding elements in card component headers

src/components/card/card.scss

@@ -31,6 +31,14 @@ $_content-gap: ms.step(-1, 1rem);
 
 $_cover-gap: ms.step(1, 1rem);
 
+/// We add more space between the eyebrow and heading so they won't feel as
+/// crowded if the eyebrow contains visual elements.
+///
+/// @type Number
+/// @access private
+
+$_eyebrow-gap: ms.step(1, 1rem);
+
 /// The focus outline feels a little snug directly on the outer edge, but we
 /// don't want to extend _too_ far out for fear of colliding with adjacent
 /// content. Doubling the size of the focus edge felt like a nice compromise.
@@ -198,9 +206,13 @@ $_cloud-height: fluid.fluid-clamp(
  *
  * This exists separately from the heading to encourage the use of the `header`
  * element within an `article`.
+ *
+ * 1. This display type and gap exist in case an `eyebrow` block is included.
  */
 
 .c-card__header {
+  display: grid; /* 1 */
+  gap: $_eyebrow-gap; /* 1 */
   grid-area: header;
 
   /**
@@ -223,6 +235,14 @@ $_cloud-height: fluid.fluid-clamp(
   @include headings.level(2);
 }
 
+/**
+ * The eyebrow should precede the heading visually.
+ */
+
+.c-card__eyebrow {
+  order: -1;
+}
+
 /**
  * This is the primary link, presumed but not required to be within the heading.
  */

src/components/card/card.stories.mdx

@@ -49,6 +49,7 @@ const singleDemoStory = (args) => {
 };
 const singleDemoBlockExamples = {
   heading: 'Lorem ipsum dolor sit amet',
+  eyebrow: `<img src="/media/logos/pleasantest.svg" alt="Pleasantest" width="180" height="58">`,
   cover: `<img src="/media/feature-ozzie-wide.jpg" alt="">`,
   content: `<p>Consectetur adipiscing elit...</p>`,
   footer: `<p>{{'now'|date('M j, Y')}}</p>`,
@@ -84,7 +85,7 @@ const singleDemoTransformSource = (_src, storyContext) => {
   }}
   argTypes={{
     show: {
-      options: ['heading', 'cover', 'content', 'footer'],
+      options: ['heading', 'eyebrow', 'cover', 'content', 'footer'],
       control: {
         type: 'inline-check',
       },
@@ -148,6 +149,22 @@ An optional `cover` block may be provided containing an image or other visual ob
   </Story>
 </Canvas>
 
+## With eyebrow
+
+If a card includes a heading, you may want to include additional elements that precede the heading visually without disrupting the element's outline. For example, a customer's logo in a card that links to a case study. Similar to [the Article Header object](/?path=/docs/objects-article-header--example), the contents of the `eyebrow` block will render below the heading in the DOM, but display above the heading visually.
+
+<Canvas>
+  <Story
+    name="Eyebrow"
+    args={{
+      href: '#',
+      show: ['heading', 'eyebrow', 'content'],
+    }}
+  >
+    {singleDemoStory.bind({})}
+  </Story>
+</Canvas>
+
 ## Horizontal
 
 If a card with a cover is meant to occupy its full container width, it may be preferable to display it horizontally at larger [breakpoints](/docs/design-tokens-breakpoint--page). The `c-card--horizontal@m`, `c-card--horizontal@l` and `c-card--horizontal@xl` modifier classes will do that from their respective breakpoints.
@@ -238,6 +255,7 @@ The `c-card--cloudy` modifier is meant to pair with `c-card--contained` and `t-d
 
 - `content` (optional): The main card content.
 - `cover` (optional): Designed to provide an image or other visual object. Will display using our `wide` [aspect ratio token](/story/design-tokens-aspect-ratio--page), and includes an effect on hover if the card includes an `href`.
+- `eyebrow` (optional): Content to precede the `heading` visually, such as a customer logo.
 - `footer` (optional): Information about the author or additional supporting content for the card.
 - `heading` (optional): The contents of the heading. The heading level may be customized using the `heading_level` property.
 

src/components/card/card.twig

@@ -13,6 +13,7 @@
 {% set _heading_level = heading_level|default(2) %}
 
 {% set _heading_block %}{% block heading %}{% endblock %}{% endset %}
+{% set _eyebrow_block %}{% block eyebrow %}{% endblock %}{% endset %}
 {% set _cover_block %}{% block cover %}{% endblock %}{% endset %}
 {% set _content_block %}{% block content %}{% endblock %}{% endset %}
 {% set _footer_block %}{% block footer %}{% endblock %}{% endset %}
@@ -34,6 +35,11 @@
           {{ _heading_block }}
         {% endif %}
       </h{{ _heading_level }}>
+      {% if _eyebrow_block is not empty %}
+        <div class="c-card__eyebrow">
+          {{_eyebrow_block}}
+        </div>
+      {% endif %}
     </{{ _header_tag_name }}>
   {% endif %}
 

src/components/card/demo/div.twig

@@ -5,6 +5,11 @@
       Lorem ipsum dolor sit amet
     {%- endif -%}
   {% endblock %}
+  {% block eyebrow %}
+    {%- if show_eyebrow -%}
+      <img src="/media/logos/pleasantest.svg" alt="Pleasantest" width="180" height="58">
+    {%- endif -%}
+  {% endblock %}
   {% block cover %}
     {%- if show_cover -%}
       <img src="/media/feature-ozzie-wide.jpg" alt="">

src/components/card/demo/single.twig

@@ -4,6 +4,11 @@
       Lorem ipsum dolor sit amet
     {%- endif -%}
   {% endblock %}
+  {% block eyebrow %}
+    {%- if show_eyebrow -%}
+      <img src="/media/logos/pleasantest.svg" alt="Pleasantest" width="180" height="58">
+    {%- endif -%}
+  {% endblock %}
   {% block cover %}
     {%- if show_cover -%}
       <img src="/media/feature-ozzie-wide.jpg" alt="">

src/objects/logo-group/demo/logos.json

@@ -1,30 +1,30 @@
 [
   {
     "alt": "Walmart",
-    "src": "media/client-logos/logo-walmart.svg"
+    "src": "media/logos/walmart.svg"
   },
   {
     "alt": "Deschutes Brewery",
-    "src": "media/client-logos/logo-deschutes.svg"
+    "src": "media/logos/deschutes.svg"
   },
   {
     "alt": "Obama '08",
-    "src": "media/client-logos/logo-obama.svg"
+    "src": "media/logos/obama.svg"
   },
   {
     "alt": "Treasure Coast Hospice",
-    "src": "media/client-logos/logo-treasurecoast.svg"
+    "src": "media/logos/treasurecoast.svg"
   },
   {
     "alt": "Entertainment",
-    "src": "media/client-logos/logo-entertainment.svg"
+    "src": "media/logos/entertainment.svg"
   },
   {
     "alt": "Hautelook",
-    "src": "media/client-logos/logo-hautelook.svg"
+    "src": "media/logos/hautelook.svg"
   },
   {
     "alt": "Ceasefire Oregon",
-    "src": "media/client-logos/logo-ceasefire.svg"
+    "src": "media/logos/ceasefire.svg"
   }
 ]