Update cards in the milestone view

Update issues and merge requests cards in the milestone view
to use a Pajamas complaint CardComponent.
Remove old custom styles.

Changelog: changed

app/assets/stylesheets/page_bundles/milestone.scss

@@ -40,39 +40,6 @@ $status-box-line-height: 26px;
       }
     }
   }
-
-  .card-header {
-    line-height: $line-height-base;
-    padding: 14px 16px;
-    display: flex;
-    justify-content: space-between;
-
-    .title {
-      flex: 1;
-      flex-grow: 2;
-    }
-
-    .issuable-count-weight {
-      white-space: nowrap;
-
-      .counter,
-      .weight {
-        color: var(--gray-500, $gray-500);
-        font-weight: $gl-font-weight-bold;
-      }
-    }
-
-    &.text-white {
-      .issuable-count-weight svg {
-        fill: $white;
-      }
-
-      .issuable-count-weight .counter,
-      .weight {
-        color: var(--white, $white);
-      }
-    }
-  }
 }
 
 .milestone-sidebar {

app/helpers/milestones_helper.rb

+# frozen_string_literal: true
+
+module MilestonesHelper
+  def milestone_header_class(primary, issuables)
+    header_color = milestone_header_color(primary: primary)
+    header_border = milestone_header_border(issuables)
+
+    "#{header_color} #{header_border} gl-display-flex"
+  end
+
+  def milestone_counter_class(primary)
+    primary ? 'gl-text-white' : 'gl-text-gray-500'
+  end
+
+  private
+
+  def milestone_header_color(primary: false)
+    return '' unless primary
+
+    'gl-bg-blue-500 gl-text-white'
+  end
+
+  def milestone_header_border(issuables)
+    issuables.empty? ? 'gl-border-bottom-0 gl-rounded-base' : ''
+  end
+end

app/views/shared/milestones/_issuables.html.haml

 - show_counter = local_assigns.fetch(:show_counter, false)
 - primary = local_assigns.fetch(:primary, false)
-- panel_class = primary ? 'bg-primary text-white' : ''
 
-.card
-  .card-header{ class: panel_class }
-    .header.gl-mb-2
-      .title
-        = title
-    .issuable-count-weight.gl-ml-3
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0' }, header_options: { class: milestone_header_class(primary, issuables) }) do |c|
+  - c.header do
+    .gl-flex-grow-2
+      = title
+    .gl-ml-3.gl-flex-shrink-0.gl-font-weight-bold.gl-white-space-nowrap{ class: milestone_counter_class(primary) }
       - if show_counter
-        %span.counter
+        %span
           = sprite_icon('issues', css_class: 'gl-vertical-align-text-bottom')
           = number_with_delimiter(issuables.length)
       = render_if_exists "shared/milestones/issuables_weight", issuables: issuables
-
-  - class_prefix = dom_class(issuables).pluralize
-  %ul{ class: "content-list milestone-#{class_prefix}-list", id: "#{class_prefix}-list-#{id}" }
-    = render partial: 'shared/milestones/issuable',
-             collection: issuables,
-             as: :issuable,
-             locals: { show_project_name: show_project_name }
+  = c.body do
+    - class_prefix = dom_class(issuables).pluralize
+    %ul{ class: "content-list milestone-#{class_prefix}-list", id: "#{class_prefix}-list-#{id}" }
+      = render partial: 'shared/milestones/issuable',
+              collection: issuables,
+              as: :issuable,
+              locals: { show_project_name: show_project_name }

spec/helpers/milestones_helper_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe MilestonesHelper do
+  let_it_be(:issuable) { build(:merge_request) }
+
+  describe '#milestone_header_class' do
+    using RSpec::Parameterized::TableSyntax
+
+    color_primary = 'gl-bg-blue-500 gl-text-white'
+    border_empty = 'gl-border-bottom-0 gl-rounded-base'
+
+    where(:primary, :issuables, :header_color, :header_border) do
+      true  | [issuable] | color_primary | ''
+      true  | []         | color_primary | border_empty
+      false | []         | ''            | border_empty
+      false | [issuable] | ''            | ''
+    end
+
+    with_them do
+      subject { helper.milestone_header_class(primary, issuables) }
+
+      it { is_expected.to eq("#{header_color} #{header_border} gl-display-flex") }
+    end
+  end
+
+  describe '#milestone_counter_class' do
+    context 'when primary is set to true' do
+      subject { helper.milestone_counter_class(true) }
+
+      it { is_expected.to eq('gl-text-white') }
+    end
+
+    context 'when primary is set to false' do
+      subject { helper.milestone_counter_class(false) }
+
+      it { is_expected.to eq('gl-text-gray-500') }
+    end
+  end
+end