Convert gl-cards to use CardComponent

- refactoring to use the component for standards

app/views/admin/health_check/show.html.haml

@@ -23,8 +23,8 @@
       %code= metrics_url(token: Gitlab::CurrentSettings.health_check_access_token)
     = render_if_exists 'admin/health_check/health_check_url'
 %hr
-.gl-card
-  .gl-card-header
+= render Pajamas::CardComponent.new do |c|
+  = c.header do
     Current Status:
     - if no_errors
       = sprite_icon('check', css_class: 'cgreen')
@@ -32,7 +32,7 @@
     - else
       = sprite_icon('warning-solid', css_class: 'cred')
       #{ s_('HealthCheck|Unhealthy') }
-  .gl-card-body
+  = c.body do
     - if no_errors
       #{ s_('HealthCheck|No Health Problems Detected') }
     - else

app/views/groups/runners/_settings.html.haml

@@ -3,8 +3,9 @@
 - if Feature.enabled?(:stale_runner_cleanup_for_namespace_development, @group) && @group.licensed_feature_available?(:stale_runner_cleanup_for_namespace)
   .gl-mb-5
     #stale-runner-cleanup-form{ data: { group_full_path: @group.full_path, stale_timeout_secs: ::Ci::Runner::STALE_TIMEOUT.to_i } }
-.gl-card.gl-px-8.gl-py-6.gl-line-height-20
-  .gl-card-body.gl-display-flex{ :class => "gl-p-0!" }
+= render Pajamas::CardComponent.new(card_options: { class: 'gl-px-8 gl-py-6 gl-line-height-20' },
+                                    body_options: { class: 'gl-display-flex gl-p-0!'}) do |c|
+  = c.body do
     .gl-banner-illustration
       = image_tag('illustrations/rocket-launch-md.svg', alt: s_('Runners|Rocket launch illustration'))
     .gl-banner-content

app/views/layouts/terms.html.haml

@@ -16,16 +16,17 @@
 
         %div{ class: "#{container_class} limit-container-width" }
           .content{ id: "content-body" }
-            .gl-card
-              .gl-card-header
+            = render Pajamas::CardComponent.new do |c|
+              = c.header do
                 = brand_header_logo({add_gitlab_black_text: true})
-              - if header_link?(:user_dropdown)
-                .navbar-collapse
-                  %ul.nav.navbar-nav
-                    %li.header-user.dropdown
-                      = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
-                        = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar", data: { qa_selector: 'user_avatar' }
-                        = sprite_icon('angle-down', css_class: 'caret-down')
-                      .dropdown-menu.dropdown-menu-right
-                        = render 'layouts/header/current_user_dropdown'
-              = yield
+              = c.body do
+                - if header_link?(:user_dropdown)
+                  .navbar-collapse
+                    %ul.nav.navbar-nav
+                      %li.header-user.dropdown
+                        = link_to current_user, class: user_dropdown_class, data: { toggle: "dropdown" } do
+                          = image_tag avatar_icon_for_user(current_user, 23), width: 23, height: 23, class: "header-user-avatar", data: { qa_selector: 'user_avatar' }
+                          = sprite_icon('angle-down', css_class: 'caret-down')
+                        .dropdown-menu.dropdown-menu-right
+                          = render 'layouts/header/current_user_dropdown'
+                = yield

app/views/projects/new.html.haml

@@ -16,8 +16,8 @@
         = render 'new_project_fields', f: f, project_name_id: "blank-project-name"
 
     #create-from-template-pane.tab-pane
-      .gl-card.gl-my-5
-        .gl-card-body
+      = render Pajamas::CardComponent.new(card_options: { class: 'gl-my-5' }) do |c|
+        = c.body do
           %div
             - contributing_templates_url = 'https://gitlab.com/gitlab-org/project-templates/contributing'
             - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: contributing_templates_url }

app/views/shared/topics/_topic.html.haml

@@ -2,8 +2,9 @@
 - detail_page_link = topic_explore_projects_path(topic_name: topic.name)
 
 .col-lg-3.col-md-4.col-sm-12
-  .gl-card.gl-mb-5
-    .gl-card-body.gl-display-flex.gl-align-items-center
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' },
+                                      body_options: { class: 'gl-display-flex gl-align-items-center' }) do |c|
+    = c.body do
       .avatar-container.rect-avatar.s40.gl-flex-shrink-0
         = link_to detail_page_link do
           = topic_icon(topic, class: "avatar s40")

app/views/shared/users/_user.html.haml

 - user = local_assigns.fetch(:user)
 
 .col-lg-3.col-md-4.col-sm-12
-  .gl-card.gl-mb-5
-    .gl-card-body
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }) do |c|
+    = c.body do
       = image_tag avatar_icon_for_user(user, 40), class: "avatar s40", alt: ''
 
       .user-info

ee/app/views/admin/application_settings/_elasticsearch_form.html.haml

@@ -17,8 +17,9 @@
       = form_errors(@application_setting)
 
       %fieldset
-        .gl-card.gl-bg-gray-10.gl-mb-6
-          .gl-card-body
+        - component_params = { card_options: { class: 'gl-bg-gray-10 gl-mb-6' } }
+        = render Pajamas::CardComponent.new(**component_params) do |c|
+          = c.body do
             - halted_migrations = elasticsearch_available && Elastic::DataMigrationService.halted_migrations?
             - if halted_migrations
               = render Pajamas::AlertComponent.new(variant: :warning,
@@ -123,8 +124,8 @@
                 = _('Elasticsearch HTTP client timeout value in seconds.')
                 = _('To use the system\'s default, set this value to 0.')
 
-        .gl-card.gl-bg-gray-10.gl-mb-6
-          .gl-card-body
+        = render Pajamas::CardComponent.new(**component_params) do |c|
+          = c.body do
             %h4= _('Elasticsearch indexing restrictions')
             .form-group
               = f.gitlab_ui_checkbox_component :elasticsearch_limit_indexing, s_('AdminSettings|Limit the number of namespaces and projects that can be indexed.'), checkbox_options: { class: 'js-limit-checkbox' }
@@ -143,8 +144,8 @@
               - else
                 = f.text_field :elasticsearch_project_ids, class: 'js-elasticsearch-projects', value: elasticsearch_project_ids, data: { selected: elasticsearch_objects_options(@application_setting.elasticsearch_limited_projects(true)).to_json }
 
-        .gl-card.gl-bg-gray-10.gl-mb-6
-          .gl-card-body
+        = render Pajamas::CardComponent.new(**component_params) do |c|
+          = c.body do
             %h4= _('Custom analyzers: language support')
             %h5
               = _('Chinese language support using')
@@ -164,8 +165,8 @@
             .form-group
               = f.gitlab_ui_checkbox_component :elasticsearch_analyzers_kuromoji_search, s_('AdminSettings|Enable kuromoji custom analyzer: Search'), checkbox_options: { disabled: !Gitlab::CurrentSettings.elasticsearch_analyzers_kuromoji_enabled? }, help_text: s_('AdminSettings|Only enable search after installing the plugin, enabling indexing, and recreating the index.')
 
-        .gl-card.gl-bg-gray-10.gl-mb-6
-          .gl-card-body
+        = render Pajamas::CardComponent.new(**component_params) do |c|
+          = c.body do
             %h4= _('Elasticsearch AWS IAM credentials')
             .form-group
               = f.gitlab_ui_checkbox_component :elasticsearch_aws, s_('AdminSettings|Use AWS hosted Elasticsearch with IAM credentials')

ee/app/views/groups/feature_discovery_moments/advanced_features_dashboard.html.haml

@@ -23,8 +23,8 @@
 
   .gl-display-grid.gl-sm-grid-template-columns-2.gl-md-grid-template-columns-3.gl-lg-grid-template-columns-4.gl-gap-6
     - cross_stage_fdm_highlighted_features.each do |value|
-      .gl-card.gl-max-w-50.gl-rounded-lg
-        .gl-card-body
+      = render Pajamas::CardComponent.new(card_options: { class: 'gl-max-w-50 gl-rounded-lg' }) do |c|
+        = c.body do
           .gl-w-7.gl-h-7= image_tag("illustrations/#{value[:icon_name]}.svg", class: 'gl-w-full')
           %h4.gl-mb-3.gl-font-base.gl-line-height-20= value[:title]
           %p.gl-font-sm.gl-text-gray-700.gl-line-height-20= value[:desc]
@@ -37,8 +37,9 @@
 
   .gl-display-grid.gl-sm-grid-template-columns-2.gl-md-grid-template-columns-3.gl-gap-6
     - cross_stage_fdm_value_statements.each do |value|
-      .gl-card.gl-rounded-lg
-        .gl-card-body.gl-p-6
+      = render Pajamas::CardComponent.new(card_options: { class: 'gl-rounded-lg' },
+                                          body_options: { class: 'gl-p-6'}) do |c|
+        = c.body do
           .gl-w-8.gl-h-8= image_tag("illustrations/#{value[:icon_name]}.svg", class: 'gl-w-full')
           %h4.gl-mt-5.gl-mb-3.gl-font-lg.gl-line-height-20= value[:title]
           %p.gl-font-sm.gl-text-gray-700.gl-line-height-20= value[:desc]

ee/app/views/shared/_ultimate_trial_callout_content.html.haml

@@ -5,8 +5,9 @@
 
 .gl-display-none.gl-md-display-block.container-limited{ class: 'gl-pt-6! gl-pb-2!', data: { track_action: 'render', track_label: banner_title } }
   .user-callout.promotion-callout.thin-callout.js-gold-trial-callout{ class: 'gl-mt-0!', data: { uid: 'trial_callout_dismissed', feature_id: callout, dismiss_endpoint: callouts_path } }
-    .gl-card.gl-px-8.gl-py-6
-      .gl-card-body.gl-display-flex{ class: 'gl-p-0!' }
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-px-8 gl-py-6' },
+                                          body_options: { class: 'gl-display-flex gl-p-0!'}) do |c|
+      = c.body do
         .gl-banner-illustration
           = image_tag 'illustrations/golden_tanuki.svg', class: 'svg gl-w-8!'
         .gl-banner-content