QA Feedback: Add icon to community card

Author: jlchilders11

static/css/v3/community-card.css

@@ -4,8 +4,13 @@
 */
 
 .community-card .content-detail-icon {
-    border: none;
-    gap: var(--space-medium);
+  border: none;
+  gap: var(--space-medium);
+}
+
+.community-card .content-detail-icon__icon {
+  color: var(--color-text-primary);
+
 }
 
 .community-card .content-detail-icon__cta {

static/css/v3/content.css

@@ -35,8 +35,8 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--space-card);
-  height: var(--space-card);
+  width: var(--space-xlarge);
+  height: var(--space-xlarge);
   transition: color 0.2s ease;
 }
 
@@ -46,8 +46,6 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) {
 }
 
 .content-detail-icon__icon svg {
-  width: 100%;
-  height: 100%;
   display: block;
 }
 
@@ -66,7 +64,7 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) {
 
 .content-detail-icon--has-icon .content-detail-icon__title,
 .content-detail-icon--has-badge .content-detail-icon__title {
-  padding-right: var(--space-icon-offset);
+  padding-right: var(--space-xlarge);
 }
 
 .content-detail-icon__title-link {

templates/includes/icon.html

@@ -43,6 +43,10 @@
 <svg class="{{ icon_class|default:'icon' }}" width="{{ icon_size|default:24 }}" height="{{ icon_size|default:24 }}" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
   <path d="M7.6639 12.3332H6.33057L6.32997 13.5H5V2.5H6.32997L6.33057 3.66657H7.6639V4.9999H8.99724V5.9999H10.3306V7.33324H11.6639V8.66657H10.3306V9.9999H8.99724V10.9999H7.6639V12.3332Z" fill="#050816"/>
 </svg>
+{% elif icon_name == "bullseye-pixel" %}
+<svg class="{{ icon_class|default:'icon' }}" width="{{ icon_size|default:24 }}" height="{{ icon_size|default:24 }}" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path d="M3.99992 1.33337H10.6666V2.66671H3.99992V1.33337ZM2.66659 4.00004V2.66671H3.99992V4.00004H2.66659ZM2.66659 12H1.33325V4.00004H2.66659V12ZM3.99992 13.3334H2.66659V12H3.99992V13.3334ZM11.9999 13.3334H3.99992V14.6667H11.9999V13.3334ZM13.3333 12V13.3334H11.9999V12H13.3333ZM13.3333 12H14.6666V5.33337H13.3333V12ZM7.99992 4.00004H5.33325V5.33337H3.99992V10.6667H5.33325V12H10.6666V10.6667H11.9999V8.00004H10.6666V10.6667H5.33325V5.33337H7.99992V4.00004ZM9.33325 9.33337V6.66671H10.6666V5.33337H11.9999V4.00004H14.6666V2.66671H13.3333V1.33337H11.9999V4.00004H10.6666V5.33337H9.33325V6.66671H6.66658V9.33337H9.33325Z" />
+</svg>
 {% else %}
 <svg class="{{ icon_class|default:'icon' }}"
      width="{{ icon_size|default:24 }}"

templates/v3/includes/_community_card.html

@@ -27,7 +27,7 @@
   <ul class="card-group__list">
     {% for item in items %}
       <li class="card-group__item community-card">
-        {% include 'v3/includes/_content_detail_card_item.html' with title=item.title description=item.description cta_href=item.cta_url cta_label=item.cta_label only %}
+        {% include 'v3/includes/_content_detail_card_item.html' with title=item.title description=item.description cta_href=item.cta_url cta_label=item.cta_label icon_name="bullseye-pixel" icon_size=16 only %}
       </li>
       {% endfor %}
     </ul>

templates/v3/includes/_content_detail_card_item.html

@@ -5,6 +5,7 @@
     description (required) — card body text
     icon_name   (optional) — icon name for includes/icon.html (e.g. "bullseye-arrow").
                  If omitted (and badge_count not set), card is rendered without icon and modifier --has-icon is not applied.
+    icon_size   (optional) - Size in pixels of icon, defaults to 24
     badge_count (optional) — when set (e.g. in carousel), shows a non-clickable count badge instead of icon.
     title_url   (optional) — if set, title is wrapped in a link
     cta_label   (optional) — if set with cta_href, renders a CTA link below description (or span if cta_as_span)
@@ -21,7 +22,7 @@
   </div>
   {% elif icon_name %}
   <div class="content-detail-icon__icon" aria-hidden="true">
-    {% include "includes/icon.html" with icon_name=icon_name icon_class="content-detail-icon__icon-svg" icon_size=24 %}
+    {% include "includes/icon.html" with icon_name=icon_name icon_class="content-detail-icon__icon-svg" icon_size=icon_size|default:24 %}
   </div>
   {% endif %}
   <h3 class="content-detail-icon__title">