Merge pull request #1449 from isaacphysics/redesign/improve-ada-printing

Improve Ada printing behaviour

Author: axlewin

src/app/components/content/IsaacCodeSnippet.tsx

@@ -56,7 +56,8 @@ const IsaacCodeSnippet = ({doc}: IsaacCodeProps) => {
         </div>
         {doc.url && <Row>
             <Col className="text-center mb-2">
-                <a href={doc.url} onClick={logViewOnGitHub} target="_blank" rel="noopener noreferrer">View on GitHub</a>
+                <a className="no-print" href={doc.url} onClick={logViewOnGitHub} target="_blank" rel="noopener noreferrer">View on GitHub</a>
+                <a className="only-print" href={doc.url} target="_blank" rel="noopener noreferrer">{doc.url}</a>
             </Col>
         </Row>}
     </>;

src/app/components/elements/Tabs.tsx

@@ -32,8 +32,8 @@ function callOrString(stringOrTabFunction: StringOrTabFunction | undefined, tabT
 }
 
 // e.g.:   Tab 1 | Tab 2 | Tab 3
-const TabNavbar = ({singleLine, children, tabTitleClass, activeTab, changeTab}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
-    return <Nav tabs className={classNames("flex-wrap", {"guaranteed-single-line": singleLine})}>
+const TabNavbar = ({singleLine, children, tabTitleClass, activeTab, changeTab, className}: TabsProps & {activeTab: number; changeTab: (i: number) => void;}) => {
+    return <Nav tabs className={classNames(className, "flex-wrap", {"guaranteed-single-line": singleLine})}>
         {Object.keys(children).map((tabTitle, mapIndex) => {
             const tabIndex = mapIndex + 1;
             const linkClasses = callOrString(tabTitleClass, tabTitle, tabIndex);
@@ -129,7 +129,7 @@ export const Tabs = (props: TabsProps) => {
         {expandButton}
         <div className={classNames(className, innerClasses, `tab-style-${style}`, "position-relative")}>
             {style === "tabs"
-                ? <TabNavbar activeTab={activeTab} changeTab={changeTab} {...props}>{children}</TabNavbar>
+                ? <TabNavbar {...props} className="no-print" activeTab={activeTab} changeTab={changeTab}>{children}</TabNavbar>
                 : style === "buttons"
                     ? <ButtonNavbar activeTab={activeTab} changeTab={changeTab} {...props}>{children}</ButtonNavbar>
                     : <DropdownNavbar activeTab={activeTab} changeTab={changeTab} {...props}>{children}</DropdownNavbar>
@@ -138,9 +138,13 @@ export const Tabs = (props: TabsProps) => {
                 <TabContent activeTab={activeTab} className={tabContentClass}>
                     {Object.entries(children).map(([tabTitle, tabBody], mapIndex) => {
                         const tabIndex = mapIndex + 1;
-                        return <TabPane key={tabTitle} tabId={tabIndex}>
-                            {tabBody as ReactNode}
-                        </TabPane>;
+                        return <>
+                            {/* This navbar exists only when printing so each tab has its own heading */}
+                            {style === "tabs" && <TabNavbar {...props} className={classNames("d-none d-print-flex mb-3 mt-2", {"mt-n4": mapIndex === 0 && tabContentClass.includes("pt-4")})} activeTab={tabIndex} changeTab={changeTab}>{children}</TabNavbar>}
+                            <TabPane key={tabTitle} tabId={tabIndex}>
+                                {tabBody as ReactNode}
+                            </TabPane>
+                        </>;
                     })}
                 </TabContent>
             </ExpandableParentContext.Provider>

src/scss/cs/button.scss

@@ -162,7 +162,7 @@
 
 .print-icon {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   &:not(.outline) {
     @include ada-icon-button-base(48px, 48px, false);
   }

src/scss/cs/questions.scss

@@ -13,6 +13,7 @@
   border-top-left-radius: 50px;
   border-bottom-left-radius: 50px;
   z-index: 2;
+  background: $cs-cultured;
   .question-actions-link {
     margin-top: 2px; // Just to vertically center the links nicely
     color: $secondary;

src/test/pages/AssignmentProgress.test.tsx

@@ -43,8 +43,11 @@ describe("AssignmentProgress", () => {
         // Clicking on the group title should suffice to open the accordion
         await userEvent.click(groupTitle);
         // Get the two tabs, making sure that they show the correct numbers of assignments in each one
-        const assignmentsTab = await screen.findByRole("button", {name: `Assignments (${mockAssignments.length})`});
-        const testsTab = await screen.findByRole("button", {name: `Tests (${mockTestAssignments.length})`});
+        // (and check that the user-visible "no-print" version of the tab is used)
+        const assignmentsTabs = await screen.findAllByRole("button", {name: `Assignments (${mockAssignments.length})`});
+        const assignmentsTab = assignmentsTabs.filter(tab => tab.classList.contains("no-print"))[0];
+        const testsTabs = await screen.findAllByRole("button", {name: `Tests (${mockTestAssignments.length})`});
+        const testsTab = testsTabs.filter(tab => tab.classList.contains("no-print"))[0];
         await userEvent.click(assignmentsTab);
         for (const assignmentTitle of mockAssignments.map(a => a.gameboard?.title)) {
             await screen.findByText(assignmentTitle, {exact: false});