Large style banner

Author: oliverguenther

app/components/enterprise_edition/banner_component.html.erb

@@ -13,8 +13,11 @@
       grid.with_area(:content) do
         flex_layout do |flex|
           flex.with_row do
-            if medium?
-              flex_layout(align_items: :center, mb: 3) do |title_flex|
+            if medium? || large?
+              flex_layout(
+                classes: "op-enterprise-banner--title-wrapper",
+                align_items: :center,
+                mb: 3) do |title_flex|
                 title_flex.with_column do
                   render(
                     Primer::Beta::Octicon.new(
@@ -36,7 +39,10 @@
 
           flex.with_row(classes: "op-enterprise-banner--description") do
             concat render(Primer::Beta::Text.new(tag: :p)) { description }
-            concat render(Primer::Beta::Text.new(tag: :p)) { plan_text }
+
+            unless large?
+              concat render(Primer::Beta::Text.new(tag: :p)) { plan_text }
+            end
           end
 
           if features.present?
@@ -45,8 +51,26 @@
             end
           end
 
+          if large?
+            flex.with_row(my: 2) do
+              video_tag @video,
+                        controls: false,
+                        class: "op-enterprise-banner--video-control",
+                        autoplay: true,
+                        loop: true,
+                        muted: true
+            end
+
+            flex.with_row do
+              render(Primer::Beta::Text.new(tag: :p, text_align: :center)) { plan_text }
+            end
+          end
+
           flex.with_row(mt: 1) do
-            render EnterpriseEdition::UpsellButtonsComponent.new(feature_key)
+            render EnterpriseEdition::UpsellButtonsComponent.new(
+              feature_key,
+              justify_content: (large? ? :center : :flex_start)
+            )
           end
         end
       end

app/components/enterprise_edition/banner_component.rb

@@ -41,12 +41,14 @@ class BannerComponent < ApplicationComponent
     include PlanForFeature
 
     DEFAULT_VARIANT = :inline
-    VARIANT_OPTIONS = %i[inline medium].freeze
+    VARIANT_OPTIONS = %i[inline medium large].freeze
 
     # @param feature_key [Symbol, NilClass] The key of the feature to show the banner for.
     # @param variant [Symbol, NilClass] The variant of the banner comopnent.
     # @param image [String, NilClass] Path to the image to show on the banner, or nil.
-    #   Required when variant is :medium.
+    #   Only applicable and required when variant is :medium.
+    # @param video [String, NilClass] Path to the video to show on the banner, or nil.
+    #   Only applicable and required when variant is :video.
     # @param i18n_scope [String] Provide the i18n scope to look for title, description, and features.
     #                            Defaults to "ee.upsell.{feature_key}"
     # @param dismissable [boolean] Allow this banner to be dismissed.
@@ -56,13 +58,15 @@ class BannerComponent < ApplicationComponent
     def initialize(feature_key, # rubocop:disable Metrics/AbcSize
                    variant: DEFAULT_VARIANT,
                    image: nil,
+                   video: nil,
                    i18n_scope: "ee.upsell.#{feature_key}",
                    dismissable: false,
                    show_always: false,
                    dismiss_key: feature_key,
                    **system_arguments)
       @variant = fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)
       @image = image
+      @video = video
       @dismissable = dismissable
       @dismiss_key = dismiss_key
       @show_always = show_always
@@ -74,6 +78,10 @@ def initialize(feature_key, # rubocop:disable Metrics/AbcSize
         raise ArgumentError, "The 'image' parameter is required when the variant is :medium."
       end
 
+      if @variant == :large && @video.nil?
+        raise ArgumentError, "The 'video' parameter is required when the variant is :large."
+      end
+
       @system_arguments = system_arguments
       @system_arguments[:tag] = :div
       @system_arguments[:mb] ||= 2
@@ -82,7 +90,8 @@ def initialize(feature_key, # rubocop:disable Metrics/AbcSize
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "op-enterprise-banner",
-        @variant == :medium ? "op-enterprise-banner_medium" : nil
+        @variant == :medium ? "op-enterprise-banner_medium" : nil,
+        @variant == :large ? "op-enterprise-banner_large" : nil
       )
 
       super
@@ -97,6 +106,10 @@ def medium?
       @variant == :medium
     end
 
+    def large?
+      @variant == :large
+    end
+
     def inline?
       @variant == :inline
     end

app/components/enterprise_edition/banner_component.sass

@@ -28,7 +28,8 @@
  / ++
  /
 
-$op-enterprise-banner-fixed-height: 220px
+$op-enterprise-banner-fixed-height-medium: 220px
+$op-enterprise-banner-fixed-height-large: 320px
 
 .op-enterprise-banner
   display: grid
@@ -47,7 +48,7 @@ $op-enterprise-banner-fixed-height: 220px
     padding: 0
     grid-template-areas: "content graphic"
     grid-template-columns: 2fr 1fr
-    height: $op-enterprise-banner-fixed-height
+    height: $op-enterprise-banner-fixed-height-medium
 
     @media screen and (max-width: $breakpoint-lg)
       grid-template-columns: 1fr
@@ -63,9 +64,38 @@ $op-enterprise-banner-fixed-height: 220px
       align-self: center
       padding: var(--base-size-16)
 
+  &_large
+    position: relative
+    padding: 0
+    display: flex
+    justify-content: center
+    grid-template-areas: "content"
+    grid-template-columns: 100%
+
+  &_large &
+    &--title-wrapper
+      justify-content: center
+
+    &--description
+      text-align: center
+
   &--image
     @include upsell-image
 
+  &--video-control
+    display: block
+    margin: 0 auto
+    max-width: 50vw
+    object-fit: contain
+    box-shadow: var(--shadow-floating-small)
+    border-radius: 25px
+    border: 1px solid var(--borderColor-default)
+
+    @media screen and (max-width: $breakpoint-md)
+      max-width: unset
+      width: 100%
+      border-radius: 15px
+
   &--visual
     display: grid
     align-self: start
@@ -77,7 +107,7 @@ $op-enterprise-banner-fixed-height: 220px
 
   &--close-icon
     .Button-visual
-      color: var(--enterprise-upsell-color)
+    color: var(--enterprise-upsell-color)
 
     &_hovering
       position: absolute

lookbook/docs/components/enterprise.md.erb

@@ -65,22 +65,6 @@ If none is provided, the link will go to the enterprise landing page on our webs
 
 There are three varations of the Enterprise banner.
 
-### Full-page upsell banner
-
-The full-page upsell banner is used an entire page is inaccessible to the current user because their plan does not include that feature (vs. only a part of that feature not being available). The full page banner also allows us to provide a feature video or large illustration.
-
-For example: when a community user clicks on the 'Team planner' module (but it's not included in their plan), or if they go to the Project admin settings and navigate to the 'Internal comments' tab under Work packages.
-
-```ruby
-render EnterpriseEdition::UpsellPageComponent.new(
-  :enterprise_feature,
-  video: "enterprise/some-video.mp4",
-  # or image: "enterprise/some-image.png"
-)
-```
-
-<%= embed OpenProject::EnterpriseEdition::UpsellPageComponentPreview, :default, panels: %i[] %>
-
 ### Inline upsell banners
 
 Inline upsell banners are useful when you want to indicate that part of a functionality or a page isn't available in the current plan. This allows the banner to be placed within a page where other parts are functional.
@@ -127,3 +111,20 @@ render EnterpriseEdition::BannerComponent.new(:enterprise_feature, variant: :med
 ```
 
 <%= embed OpenProject::EnterpriseEdition::BannerComponentPreview, :medium, panels: %i[] %>
+
+## Large variant banners
+
+The large variant upsell banner is used an entire page is inaccessible to the current user because their plan does not include that feature (vs. only a part of that feature not being available).
+This banner is used when there is an illustration video present that requires this amount of space.
+
+For example: when a community user clicks on the 'Team planner' module (but it's not included in their plan)
+
+```ruby
+render EnterpriseEdition::BannerComponent.new(
+  :enterprise_feature,
+  variant: :large,
+  video: "enterprise/some-video.mp4",
+)
+```
+
+<%= embed OpenProject::EnterpriseEdition::BannerComponentPreview, :large, panels: %i[] %>

lookbook/previews/open_project/enterprise_edition/banner_component_preview.rb

@@ -73,6 +73,17 @@ def medium
         )
       end
 
+      # @display min_height 600px
+      def large
+        render(
+          ::EnterpriseEdition::BannerComponent
+            .new(:date_alerts,
+                 variant: :large,
+                 video: "enterprise/date-alert-notifications.mp4",
+                 show_always: true)
+        )
+      end
+
       # @display min_height 350px
       def medium_dismissable
         render(

spec/components/enterprise_edition/banner_component_spec.rb

@@ -87,8 +87,8 @@
 
     allow(OpenProject::Token)
       .to receive(:lowest_plan_for)
-      .with(:some_enterprise_feature)
-      .and_return(plan)
+            .with(:some_enterprise_feature)
+            .and_return(plan)
 
     I18n.config.enforce_available_locales = !enforce_available_locales
 
@@ -269,4 +269,30 @@
       expect(component).to have_link("More information", href: "https://example.com")
     end
   end
+
+  context "with large variant" do
+    context "with video parameter" do
+      let(:component_args) { { variant: :large, video: "enterprise/date-alert-notifications.mp4" } }
+
+      it_behaves_like "renders the component"
+
+      it "renders with large variant class" do
+        render_component_in_mo
+
+        component = find_test_selector(component_test_selector)
+
+        expect(component[:class]).to include("op-enterprise-banner_large")
+      end
+    end
+
+    context "without video parameter" do
+      let(:component_args) { { variant: :large } }
+
+      it "raises an error" do
+        expect do
+          render_component_in_mo
+        end.to raise_error(ArgumentError, "The 'video' parameter is required when the variant is :large.")
+      end
+    end
+  end
 end