[44481]Expandable Enterprise Edition banners (#11503)

* make enterprise banner component extendible

* make the collapsible input public

* use spot classes for icons

* replace EE banners in admin settings

* replave EE banner for custom fields, project filters, stutus form, and wp form configurations

* replace EE banner in WP filters. WP table view configurations and add widget modal

* undo some replacements

app/views/admin/settings/projects_settings/show.html.erb

@@ -61,6 +61,7 @@ See COPYRIGHT and LICENSE files for more details.
           angular_component_tag 'op-enterprise-banner',
                                 inputs: {
                                   textMessage: t('text_project_custom_field_html'),
+                                  collapsible: true,
                                   moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_projects][:href],
                                 }
           %>

app/views/admin/settings/work_packages_settings/_enterprise_feature_hint.html.erb

@@ -3,6 +3,7 @@
     <%=
     angular_component_tag 'op-enterprise-banner',
                           inputs: {
+                            collapsible: true,
                             textMessage: explanation,
                             moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:attribute_highlighting][:href],
                           }

app/views/custom_fields/_form.html.erb

@@ -74,6 +74,7 @@ See COPYRIGHT and LICENSE files for more details.
           <div class="form--field-instructions -no-italic -xwide">
             <%= angular_component_tag 'op-enterprise-banner',
                                       inputs: {
+                                        collapsible: true,
                                         textMessage: t('text_wp_custom_field_html'),
                                         moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_multiselect][:href],
                                       }

app/views/custom_fields/_tab.html.erb

@@ -32,6 +32,7 @@ See COPYRIGHT and LICENSE files for more details.
     <%=
     angular_component_tag 'op-enterprise-banner',
                           inputs: {
+                            collapsible: true,
                             textMessage: t('text_project_custom_field_html'),
                             moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_projects][:href],
                           }
@@ -44,6 +45,7 @@ See COPYRIGHT and LICENSE files for more details.
     <%=
     angular_component_tag 'op-enterprise-banner',
                           inputs: {
+                            collapsible: true,
                             textMessage: t('text_wp_custom_field_html'),
                             moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_multiselect][:href],
                           }

app/views/projects/filters/_form.html.erb

@@ -87,6 +87,7 @@
       <%=
       angular_component_tag 'op-enterprise-banner',
                             inputs: {
+                              collapsible: true,
                               textMessage: t('ee.upsale.project_filters.description_html'),
                               moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:custom_field_projects][:href],
                             }

app/views/statuses/_form.html.erb

@@ -51,6 +51,7 @@ See COPYRIGHT and LICENSE files for more details.
         <%=
           angular_component_tag 'op-enterprise-banner',
                                 inputs: {
+                                  collapsible: true,
                                   textMessage: t('text_wp_status_read_only_html'),
                                   moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:status_read_only][:href],
                                 }

app/views/types/form/_form_configuration.html.erb

@@ -41,6 +41,7 @@ See COPYRIGHT and LICENSE files for more details.
           %>
           <%= angular_component_tag 'op-enterprise-banner',
                                     inputs: {
+                                      collapsible: true,
                                       opReferrer: 'form-configuration',
                                       textMessage: t('types.edit.more_info_text_html'),
                                       moreInfoLink: OpenProject::Static::Links.links[:enterprise_docs][:form_configuration][:href],

frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.html

@@ -7,25 +7,36 @@
 
     <img [src]="image.enterprise_edition" class="hidden-for-mobile op-enterprise-banner--image">
     <div class="op-toast--content">
-      <div class="op-enterprise-banner--title">
-        <op-icon icon-classes="button--icon icon-medal"></op-icon> &nbsp;
-        <span [textContent]="text.enterpriseFeature"></span>
+      <div class="op-enterprise-banner--header">
+        <span class="spot-icon spot-icon_medal"></span>
+        <span [textContent]="text.enterpriseFeature" class="op-enterprise-banner--title"></span>
+        <button
+          *ngIf="collapsible"
+          class="op-enterprise-banner--collapsible-button"
+          type="button"
+          (click)="toggleCollapse()"
+        >
+          <span class="spot-icon"
+                [ngClass]="collapsed ? 'spot-icon_arrow-down1' : 'spot-icon_arrow-up1'"
+                aria-hidden="true">
+          </span>
+        </button>
       </div>
       <br>
 
       <span class="op-enterprise-banner--description" [innerHtml]="textMessage"></span>
 
-      <span class="op-enterprise-banner--description">
+      <span class="op-enterprise-banner--description" *ngIf="!collapsed">
         <strong [textContent]="text.become_hero"></strong> {{text.you_contribute}}
       </span>
 
-      <div class="op-enterprise-banner--buttons">
+      <div class="op-enterprise-banner--buttons" *ngIf="!collapsed">
         <a
           *ngIf="moreInfoLink"
           [attr.href]="moreInfoLink"
-          class="button--link  op-enterprise-banner--info-button"
+          class="op-enterprise-banner--info-button"
           target=”_blank”>
-          <op-icon icon-classes="icon icon-external-link"></op-icon>
+          <span class="spot-icon spot-icon_external-link"></span> 
           {{ text.more_info_text }}
         </a>
 
@@ -33,7 +44,7 @@
           [href]="pricingUrl"
           target=”_blank”
           class="button -highlight">
-          <op-icon icon-classes="button--icon icon-medal"></op-icon>
+          <span class="spot-icon spot-icon_medal"></span>
           {{ text.upgrade }}
         </a>
 

frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.sass

@@ -2,17 +2,21 @@
 
 .op-enterprise-banner
 
-  &--title
-    font-weight: 400
+  &--header
     font-size: 20px
     line-height: 24px
-    display: flex
+    display: grid
+    grid-template-columns: auto auto 1fr
     margin-top: 10px
+    align-items: center
+
+  &--title
+    margin-left: $spot-spacing-0_5
 
   &--description
     display: block
     @include spot-body-small
-    margin-bottom: $spot-spacing-0-75
+    margin-bottom: $spot-spacing-0_75
 
   &--image
     width: 115px
@@ -25,5 +29,17 @@
     justify-content: end
 
   &--info-button
-    padding-top: 1rem
-    padding-right: 1.5rem
+    padding-top: $spot-spacing-1_25
+    padding-right: $spot-spacing-1_5
+
+    .spot-icon:before
+      padding-right: 0.875rem
+
+  &--collapsible-button
+    background: transparent
+    color: $spot-color-main
+    border: 0
+    padding: $spot-spacing-0_5 $spot-spacing-0_5
+    cursor: pointer
+    display: flex
+    justify-content: end

frontend/src/app/shared/components/enterprise-banner/enterprise-banner.component.ts

@@ -33,6 +33,10 @@ export class EnterpriseBannerComponent implements OnInit {
 
   @Input() public moreInfoLink:string;
 
+  @Input() public collapsible:boolean;
+
+  public collapsed = false;
+
   link:string;
 
   pricingUrl = pricingUrl;
@@ -64,5 +68,10 @@ export class EnterpriseBannerComponent implements OnInit {
 
   ngOnInit():void {
     this.link = this.bannersService.getEnterPriseEditionUrl({ referrer: this.opReferrer });
+    this.collapsed = this.collapsible;
+  }
+
+  toggleCollapse():void {
+    this.collapsed = !this.collapsed;
   }
 }