Editor tab styles

src/app/components/content/IsaacContent.tsx

@@ -8,7 +8,7 @@ import {IsaacFigure} from "./IsaacFigure";
 import {IsaacGlossaryTerm} from "./IsaacGlossaryTerm";
 import {ContentDTO} from "../../../IsaacApiTypes";
 import {IsaacQuickQuestion} from "./IsaacQuickQuestion";
-import {IsaacTabs} from "./IsaacTabs";
+import {IsaacTabs, isTabs} from "./IsaacTabs";
 import {IsaacAccordion} from "./IsaacAccordion";
 import {IsaacHorizontal} from "./IsaacHorizontal";
 import {RouteComponentProps, withRouter} from "react-router-dom";
@@ -75,6 +75,7 @@ export const IsaacContent = withRouter((props: IsaacContentProps) => {
             default:
                 switch (layout) {
                     case "tabs": selectedComponent = <IsaacTabs {...props} />; break;
+                    case isTabs(layout): selectedComponent = <IsaacTabs {...props} style={layout?.split('/')[1]} />; break;
                     case "callout": selectedComponent = <IsaacCallout {...props} />; break;
                     case "accordion": selectedComponent = <IsaacAccordion {...props} />; break;
                     case "horizontal": selectedComponent = <IsaacHorizontal {...props} />; break;

src/app/components/content/IsaacHints.tsx

@@ -79,13 +79,16 @@ export const IsaacTabbedHints = ({hints, questionPartId}: HintsProps) => {
     }, [hints]);
 
     return <div className="tabbed-hints">
-        {hints && <Tabs onActiveTabChange={logHintView} className="no-print" style="dropdowns" tabTitleClass="hint-tab-title" tabContentClass="mt-1" deselectable activeTabOverride={-1}>
-            {Object.assign({}, ...hints.map((hint, index) => ({
-                [titles[index]]: <div className="mt-3 mt-lg-4 pt-2">
-                    <IsaacContent doc={hint} />
-                </div>
-            })))}
-        </Tabs>}
+        {hints && !!hints.length && <>
+            <h5 className="text-theme mb-2">Need some help?</h5>
+            <Tabs onActiveTabChange={logHintView} className="no-print" style="dropdowns" tabTitleClass="hint-tab-title" tabContentClass="mt-1" deselectable activeTabOverride={-1}>
+                {Object.assign({}, ...hints.map((hint, index) => ({
+                    [titles[index]]: <div className="mt-3 mt-lg-4 pt-2">
+                        <IsaacContent doc={hint} />
+                    </div>
+                })))}
+            </Tabs>
+        </>}
         <PrintOnlyHints hints={hints} />
     </div>;
 };

src/app/components/content/IsaacTabs.tsx

@@ -1,5 +1,5 @@
 import React, {ReactElement, useEffect, useState} from "react";
-import {Tabs} from "../elements/Tabs";
+import {Tabs, TabStyle} from "../elements/Tabs";
 import {ContentDTO} from "../../../IsaacApiTypes";
 import {IsaacContent} from "./IsaacContent";
 import {isAda, isDefined} from "../../services";
@@ -10,12 +10,17 @@ interface IsaacTabsProps {
         children: {title?: string; children?: ContentDTO[]}[],
         expandable?: boolean
     };
+    style?: TabStyle;
 }
 
 type IsaacTabChildren = {[title: string]: ReactElement};
 
+export const isTabs = (layout?: string) => {
+    return layout && layout.startsWith("tabs/") ? layout : false;
+};
+
 export const IsaacTabs = (props: any) => {
-    const { doc: { children: tabs, expandable} } = props as IsaacTabsProps;
+    const { doc: { children: tabs, expandable}, style } = props as IsaacTabsProps;
     const [ tabTitlesToContent , setTabTitlesToContent ] = useState<IsaacTabChildren>({});
 
     useEffect(() => {
@@ -30,7 +35,7 @@ export const IsaacTabs = (props: any) => {
     }, [tabs]);
 
     const adaCardClasses = "card card-body border bg-white pb-2 mb-4";
-    return <Tabs className={classNames("isaac-tab", {[adaCardClasses]: isAda})} tabContentClass="pt-4" expandable={expandable}>
+    return <Tabs className={classNames("isaac-tab", {[adaCardClasses]: isAda})} tabContentClass={style === "dropdowns" ? "pt-2" : "pt-4"} expandable={expandable} style={style}>
         {tabTitlesToContent}
     </Tabs>;
 };

src/app/components/elements/Tabs.tsx

@@ -10,7 +10,7 @@ import {Markup} from "./markup";
 import { AffixButton } from "./AffixButton";
 
 type StringOrTabFunction = string | ((tabTitle: string, tabIndex: number) => string);
-
+export type TabStyle = "tabs" | "buttons" | "dropdowns";
 interface TabsProps {
     className?: string;
     tabTitleClass?: StringOrTabFunction;
@@ -22,7 +22,7 @@ interface TabsProps {
     refreshHash?: string;
     expandable?: boolean;
     singleLine?: boolean;
-    style?: "tabs" | "buttons" | "dropdowns";
+    style?: TabStyle;
 }
 
 function callOrString(stringOrTabFunction: StringOrTabFunction | undefined, tabTitle: string, tabIndex: number) {
@@ -84,22 +84,16 @@ const ButtonNavbar = ({children, activeTab, changeTab, tabTitleClass=""}: TabsPr
 };
 
 const DropdownNavbar = ({children, activeTab, changeTab, tabTitleClass=""}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
-    return <div className="my-3">
-        {!!Object.keys(children).length && <h5 className="text-theme mb-2">Need some help?</h5>}
-        <div>
-            {Object.keys(children).map((tabTitle, i) =>
-                <AffixButton key={tabTitle} color="tint" className={classNames("btn-dropdown me-2 mb-2", tabTitleClass, {"active": activeTab === i + 1})} onClick={() => changeTab(i + 1)} affix={{
-                    affix: "icon-chevron-down",
-                    position: "suffix",
-                    type: "icon",
-                }}>
-                    {tabTitle}
-                </AffixButton>
-            )}
-        </div>
-        {activeTab > 0 && <div className="mt-3">
-            {children[activeTab]}
-        </div>}
+    return <div className="mt-3 mb-1">
+        {Object.keys(children).map((tabTitle, i) =>
+            <AffixButton key={tabTitle} color="tint" className={classNames("btn-dropdown me-2 mb-2", tabTitleClass, {"active": activeTab === i + 1})} onClick={() => changeTab(i + 1)} affix={{
+                affix: "icon-chevron-down",
+                position: "suffix",
+                type: "icon",
+            }}>
+                {tabTitle}
+            </AffixButton>
+        )}
     </div>;
 };
 
@@ -133,7 +127,7 @@ export const Tabs = (props: TabsProps) => {
 
     return <div className={classNames({"mt-4": isDefined(expandButton)}, outerClasses)} ref={updateExpandRef}>
         {expandButton}
-        <div className={classNames(className, innerClasses, "position-relative")}>
+        <div className={classNames(className, innerClasses, `tab-style-${style}`, "position-relative")}>
             {style === "tabs"
                 ? <TabNavbar activeTab={activeTab} changeTab={changeTab} {...props}>{children}</TabNavbar>
                 : style === "buttons"

src/scss/common/tabs.scss

@@ -1,12 +1,27 @@
 // ISAAC
 .isaac-tab {
   border: solid 1px $gray-103;
-  box-shadow: 0 2px 30px 0 $shadow-08;
-  padding: 1.5rem 1.5rem 0.5rem;
+  padding: 1.5rem;
   margin-top: 1.5rem;
-  margin-bottom: 3rem;
-  overflow: auto;
-  background-color: #fff !important;
+  margin-bottom: 2rem;
+
+  &:not(.tab-style-dropdowns) {
+    background-color: #fff;
+    box-shadow: 0 2px 30px 0 $shadow-08;
+    overflow: auto; // unsure what this was for originally, on dropdowns it cuts off the first button's box shadow
+  }
+  &.tab-style-dropdowns {
+    padding: 0 0 1.5rem;
+    margin-top: 0;
+    .tab-content .tab-pane {
+      background-color: #fff;
+      padding: 0.5rem;
+
+      .content-video-container {
+        margin-bottom: 0;
+      }
+    }
+  }
 }
 
 

src/scss/phy/isaac.scss

@@ -363,7 +363,7 @@ $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colo
 @import "breadcrumbs";
 @import "../common/media";
 @import "../common/cookies";
-@import "../common/tabs";
+@import "tabs";
 @import "../common/cards";
 @import "../common/graph-sketcher-modal";
 @import "../common/carousel";

src/scss/phy/tabs.scss

@@ -0,0 +1,9 @@
+@import '../common/tabs';
+
+.isaac-tab {    
+  &.tab-style-dropdowns {
+    .tab-content .tab-pane {
+      background-color: $color-neutral-100;
+    }
+  }
+}