Merge pull request #18959 from overleaf/jel-faq-tabs

[web] New tab and accordion more reusable

GitOrigin-RevId: ed8340bc4b6312c4270edf1edf53c74a067aaccf

services/web/app/views/subscriptions/plans/_faq_new.pug

@@ -10,8 +10,11 @@ include ../../_mixins/eyebrow
 			h2
 				+eyebrow(translate("frequently_asked_questions"))
 				| #{translate("your_questions_answered")}
-	.row.plans-faq-header-section
+
-		.col-xs-12.website-redesign-ol-tabs
+	.row
+		.col-xs-12
+			.ol-tabs-scrollable
+				.nav-tabs-container
 					ul.nav.nav-tabs
 						li.active(role="presentation")
 							a(
@@ -37,8 +40,7 @@ include ../../_mixins/eyebrow
 								aria-controls=overleafGroupPlans
 							)
 								| #{translate('overleaf_group_plans')}
-	.row.plans-faq-questions-section
+
-		.col-xs-12.faq-questions-container
 				.tab-content
 					.tab-pane.active(
 						role="tabpanel"

services/web/app/views/subscriptions/plans/_plans_faq_tabs.pug

@@ -1,5 +1,5 @@
 mixin managingYourSubscription()
-	.accordions-container
+	.ol-accordions-container
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ1" aria-expanded="false" aria-controls="managingYourSubscriptionQ1")
 				| Can I change plans or cancel later?
@@ -32,7 +32,7 @@ mixin managingYourSubscription()
 
 
 mixin overleafIndividualPlans()
-	.accordions-container
+	.ol-accordions-container
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ1" aria-expanded="false" aria-controls="overleafIndividualPlansQ1")
 				| How does the free trial work?
@@ -103,7 +103,7 @@ mixin overleafIndividualPlans()
 
 
 mixin overleafGroupPlans()
-	.accordions-container
+	.ol-accordions-container
 		.custom-accordion-item
 			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1")
 				| What’s the difference between users and collaborators on an Overleaf group subscription?

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -616,99 +616,10 @@
 .plans-faq {
   .faq-heading-container {
     text-align: center;
+    margin-bottom: var(--spacing-13);
 
     @media (max-width: @screen-xs-max) {
       text-align: unset;
     }
   }
-
-  .plans-faq-header-section {
-    text-align: center;
-    max-width: 900px;
-    margin-top: var(--spacing-13);
-    margin-left: auto;
-    margin-right: auto;
-
-    .website-redesign-ol-tabs {
-      overflow-x: auto;
-
-      @media (max-width: @screen-xs-max) {
-        padding: unset;
-      }
-
-      .nav-tabs {
-        min-width: max-content; // This is for horizontal scrolling
-
-        @media (max-width: @screen-xs-max) {
-          display: flex;
-        }
-      }
-    }
-  }
-
-  .plans-faq-questions-section {
-    max-width: 850px;
-    margin: auto;
-
-    .faq-questions-container {
-      @media (max-width: @screen-xs-max) {
-        padding: unset;
-      }
-    }
-
-    .tab-content {
-      border: 0px;
-    }
-  }
-
-  .accordions-container :last-child {
-    border: 0px !important;
-  }
-
-  .accordions-container {
-    .custom-accordion-item {
-      width: 100%;
-      padding-top: var(--spacing-08);
-      padding-bottom: var(--spacing-09);
-      border-bottom: 1px solid var(--neutral-20);
-
-      .custom-accordion-header {
-        text-align: left;
-        width: 100%;
-        font-size: var(--font-size-04);
-        font-weight: 600;
-        line-height: var(--line-height-03);
-        color: var(--neutral-90);
-        background-color: unset;
-        border: unset;
-        display: flex;
-        justify-content: space-between;
-        padding: unset;
-
-        .custom-accordion-icon {
-          display: flex;
-          align-items: center;
-          transition: transform 0.35s ease;
-          margin-left: var(--spacing-08);
-        }
-
-        &:not(.collapsed) {
-          .custom-accordion-icon {
-            transform: rotate(180deg);
-            transition: transform 0.35s ease;
-          }
-        }
-      }
-
-      .custom-accordion-body {
-        background-color: unset;
-        text-align: left;
-        padding: unset;
-        padding-right: 2rem;
-        margin-top: var(--spacing-04);
-        font-size: var(--font-size-body-base);
-        line-height: var(--line-height-03);
-      }
-    }
-  }
 }

services/web/frontend/stylesheets/components/accordion.less

@@ -0,0 +1,50 @@
+.ol-accordions-container :last-child {
+  border: 0px !important;
+}
+
+.ol-accordions-container {
+  .custom-accordion-item {
+    width: 100%;
+    padding-top: var(--spacing-08);
+    padding-bottom: var(--spacing-09);
+    border-bottom: 1px solid var(--neutral-20);
+
+    .custom-accordion-header {
+      text-align: left;
+      width: 100%;
+      font-size: var(--font-size-04);
+      font-weight: 600;
+      line-height: var(--line-height-03);
+      color: var(--neutral-90);
+      background-color: unset;
+      border: unset;
+      display: flex;
+      justify-content: space-between;
+      padding: unset;
+
+      .custom-accordion-icon {
+        display: flex;
+        align-items: center;
+        transition: transform 0.35s ease;
+        margin-left: var(--spacing-08);
+      }
+
+      &:not(.collapsed) {
+        .custom-accordion-icon {
+          transform: rotate(180deg);
+          transition: transform 0.35s ease;
+        }
+      }
+    }
+
+    .custom-accordion-body {
+      background-color: unset;
+      text-align: left;
+      padding: unset;
+      padding-right: 2rem;
+      margin-top: var(--spacing-04);
+      font-size: var(--font-size-body-base);
+      line-height: var(--line-height-03);
+    }
+  }
+}

services/web/frontend/stylesheets/components/tabs.less

@@ -39,19 +39,26 @@
   }
 }
 
-.website-redesign-ol-tabs {
+.ol-tabs-scrollable {
   // Styling for Website redesign, it will be used in CMS Later on.
+  max-width: 800px;
+  margin: 0 auto;
+
+  .nav-tabs-container {
+    overflow-x: auto;
+    margin-bottom: var(--spacing-11);
+
     .nav-tabs {
       border: 0 !important;
-    margin-bottom: 0;
+      margin: 0 auto;
-    margin-top: -@line-height-computed; //- adjusted for portal-name
+      padding: 0;
-    padding: @padding-lg 0 @padding-md;
       text-align: center;
-  }
+      min-width: max-content; // This is for horizontal scrolling
 
-  .nav-tabs > li {
+      li {
         display: inline-block;
         float: none;
+        margin-bottom: 0; //override navs.less
 
         a {
           border: 0;
@@ -79,9 +86,20 @@
         }
       }
 
-  .tab-content:extend(.container) {
+      @media (max-width: @screen-xs-max) {
-    background-color: transparent !important;
+        text-align: left;
-    border: none !important;
+      }
+    }
+  }
+
+  .tab-content {
+    border: 0 !important; //override navs.less
+    padding: 0 !important; //override navs.less
+  }
+
+  .ol-accordions-container :first-child {
+    // remove top padding so we have spacing-11 between tab nav and tab content
+    padding-top: 0px !important;
   }
 }
 

services/web/frontend/stylesheets/main-style.less

@@ -78,6 +78,7 @@
 @import 'components/interstitial.less';
 
 // Components w/ JavaScript
+@import 'components/accordion.less';
 @import 'components/modals.less';
 @import 'components/tooltip.less';
 @import 'components/popovers.less';