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,51 +10,53 @@ 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
-			ul.nav.nav-tabs
+		.col-xs-12
-				li.active(role="presentation")
+			.ol-tabs-scrollable
-					a(
+				.nav-tabs-container
-						role="tab"
+					ul.nav.nav-tabs
-						data-toggle="tab"
+						li.active(role="presentation")
-						href='#' + managingYourSubscription
+							a(
-						aria-controls=managingYourSubscription
+								role="tab"
+								data-toggle="tab"
+								href='#' + managingYourSubscription
+								aria-controls=managingYourSubscription
+							)
+								| #{translate('managing_your_subscription')}
+						li(role="presentation")
+							a(
+								role="tab"
+								data-toggle="tab"
+								href='#' + overleafIndividualPlans
+								aria-controls=overleafIndividualPlans
+							)
+								| #{translate('overleaf_individual_plans')}
+						li(role="presentation")
+							a(
+								role="tab"
+								data-toggle="tab"
+								href='#' + overleafGroupPlans
+								aria-controls=overleafGroupPlans
+							)
+								| #{translate('overleaf_group_plans')}
+
+				.tab-content
+					.tab-pane.active(
+						role="tabpanel"
+						id=managingYourSubscription
+						data-ol-faq-tab-content=managingYourSubscription
 					)
-						| #{translate('managing_your_subscription')}
+						+managingYourSubscription()
-				li(role="presentation")
+					.tab-pane(
-					a(
+						role="tabpanel"
-						role="tab"
+						id=overleafIndividualPlans
-						data-toggle="tab"
+						data-ol-faq-tab-content=overleafIndividualPlans
-						href='#' + overleafIndividualPlans
-						aria-controls=overleafIndividualPlans
 					)
-						| #{translate('overleaf_individual_plans')}
+						+overleafIndividualPlans()
-				li(role="presentation")
+					.tab-pane(
-					a(
+						role="tabpanel"
-						role="tab"
+						id=overleafGroupPlans
-						data-toggle="tab"
+						data-ol-faq-tab-content=overleafGroupPlans
-						href='#' + overleafGroupPlans
-						aria-controls=overleafGroupPlans
 					)
-						| #{translate('overleaf_group_plans')}
+						+overleafGroupPlans()
-	.row.plans-faq-questions-section
-		.col-xs-12.faq-questions-container
-			.tab-content
-				.tab-pane.active(
-					role="tabpanel"
-					id=managingYourSubscription
-					data-ol-faq-tab-content=managingYourSubscription
-				)
-					+managingYourSubscription()
-				.tab-pane(
-					role="tabpanel"
-					id=overleafIndividualPlans
-					data-ol-faq-tab-content=overleafIndividualPlans
-				)
-					+overleafIndividualPlans()
-				.tab-pane(
-					role="tabpanel"
-					id=overleafGroupPlans
-					data-ol-faq-tab-content=overleafGroupPlans
-				)
-					+overleafGroupPlans()

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,49 +39,67 @@
   }
 }
 
-.website-redesign-ol-tabs {
+.ol-tabs-scrollable {
   // Styling for Website redesign, it will be used in CMS Later on.
-  .nav-tabs {
+  max-width: 800px;
-    border: 0 !important;
+  margin: 0 auto;
-    margin-bottom: 0;
-    margin-top: -@line-height-computed; //- adjusted for portal-name
-    padding: @padding-lg 0 @padding-md;
-    text-align: center;
-  }
 
-  .nav-tabs > li {
+  .nav-tabs-container {
-    display: inline-block;
+    overflow-x: auto;
-    float: none;
+    margin-bottom: var(--spacing-11);
 
-    a {
+    .nav-tabs {
-      border: 0;
+      border: 0 !important;
-      color: @neutral-70;
+      margin: 0 auto;
-      border-bottom: 3px solid @neutral-20 !important;
+      padding: 0;
-      margin-right: unset;
+      text-align: center;
-      padding: var(--spacing-04);
+      min-width: max-content; // This is for horizontal scrolling
 
-      &:focus,
+      li {
-      &:hover {
+        display: inline-block;
+        float: none;
+        margin-bottom: 0; //override navs.less
+
+        a {
+          border: 0;
+          color: @neutral-70;
+          border-bottom: 3px solid @neutral-20 !important;
+          margin-right: unset;
+          padding: var(--spacing-04);
+
+          &:focus,
+          &:hover {
+            background-color: transparent !important;
+            border: 0;
+          }
+        }
+      }
+
+      li.active > a {
         background-color: transparent !important;
-        border: 0;
+        border: 0 !important;
+        border-bottom: 3px solid @emerald-green !important;
+        color: @neutral-90 !important;
+
+        &:hover {
+          border-bottom: 3px solid @emerald-green !important;
+        }
+      }
+
+      @media (max-width: @screen-xs-max) {
+        text-align: left;
       }
     }
   }
 
-  li.active > a {
+  .tab-content {
-    background-color: transparent !important;
+    border: 0 !important; //override navs.less
-    border: 0 !important;
+    padding: 0 !important; //override navs.less
-    border-bottom: 3px solid @emerald-green !important;
-    color: @neutral-90 !important;
-
-    &:hover {
-      border-bottom: 3px solid @emerald-green !important;
-    }
   }
 
-  .tab-content:extend(.container) {
+  .ol-accordions-container :first-child {
-    background-color: transparent !important;
+    // remove top padding so we have spacing-11 between tab nav and tab content
-    border: none !important;
+    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';