Merge branch 'update-banner' into 'master'

Update rails Banner component

See merge request !137530



Merged-by: Julia Miocene <jmiocene@gitlab.com>
Approved-by: Michael Becker <11881043-wandering_person@users.noreply.gitlab.com>
Approved-by: Sascha Eggenberger <seggenberger@gitlab.com>
Approved-by: Jarka Košanová <jarka@gitlab.com>
Approved-by: Rudy Crespo <rcrespo@gitlab.com>
Reviewed-by: Michael Becker <11881043-wandering_person@users.noreply.gitlab.com>
Reviewed-by: Rudy Crespo <rcrespo@gitlab.com>

app/components/pajamas/banner_component.html.haml

 -# This is using gl-card classes to match Vue component
 -# Here's the issue to refactor away from gl-card
 -# https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2324
+
 .gl-banner.gl-card.gl-pl-6.gl-pr-8.gl-py-6{ @banner_options, class: banner_class }
-  .gl-display-flex
+  .gl-card-body.gl-display-flex.gl-p-0!
     - if illustration?
       .gl-banner-illustration
         = illustration
@@ -11,7 +12,7 @@
         = image_tag @svg_path, alt: ""
 
     .gl-banner-content
-      %h1.gl-banner-title= title
+      %h2.gl-banner-title= title
 
       = content
 

app/components/pajamas/banner_component.rb

@@ -36,8 +36,9 @@ def initialize(
 
     def banner_class
       classes = []
-      classes.push('gl-border-none') if @embedded
+      classes.push('gl-bg-gray-10!') unless introduction?
       classes.push('gl-banner-introduction') if introduction?
+      classes.push('gl-border-none!') if @embedded
       classes.join(' ')
     end
 

spec/components/pajamas/banner_component_spec.rb

@@ -23,7 +23,7 @@
     end
 
     it 'renders its title' do
-      expect(page).to have_css "h1[class='gl-banner-title']", text: title
+      expect(page).to have_css "h2[class='gl-banner-title']", text: title
     end
 
     it 'renders a close button' do
@@ -65,7 +65,7 @@
     describe 'embedded' do
       context 'by default (false)' do
         it 'keeps the banner\'s borders' do
-          expect(page).not_to have_css ".gl-banner.gl-border-none"
+          expect(page).not_to have_css ".gl-banner.gl-border-none\\!"
         end
       end
 
@@ -73,7 +73,7 @@
         let(:options) { { embedded: true } }
 
         it 'removes the banner\'s borders' do
-          expect(page).to have_css ".gl-banner.gl-border-none"
+          expect(page).to have_css ".gl-banner.gl-border-none\\!"
         end
       end
     end
@@ -82,6 +82,7 @@
       context 'by default (promotion)' do
         it 'does not apply introduction class' do
           expect(page).not_to have_css ".gl-banner-introduction"
+          expect(page).to have_css ".gl-banner.gl-bg-gray-10\\!"
         end
       end