Merge branch 'redesign-2024' into redesign/page/teacher-features

Author: jacbn

.env

@@ -1 +1 @@
-REACT_APP_API_VERSION=v3.18.1
+REACT_APP_API_VERSION=v3.18.3-SNAPSHOT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isaac-react-app",
-  "version": "4.0.0-rc5-SNAPSHOT",
+  "version": "4.0.0-rc6-SNAPSHOT",
   "private": true,
   "engines": {
     "node": ">=18",
@@ -18,7 +18,7 @@
     "core-js": "^3.38.1",
     "dayjs": "^1.11.13",
     "he": "^1.2.0",
-    "highlight.js": "^11.10.0",
+    "highlight.js": "^11.11.1",
     "history": "^4.10.1",
     "html-to-text": "^9.0.5",
     "identity-obj-proxy": "3.0.0",

public/assets/phy/icons/redesign/checkbox-bg.svg

@@ -3,6 +3,7 @@ import { Col, Row } from "reactstrap";
 import { Spacer } from "./Spacer";
 import { FilterCount } from "./svg/FilterCount";
 import classNames from "classnames";
+import { isAda, isPhy } from "../../services";
 
 export interface CollapsibleListProps {
     title?: string;
@@ -37,7 +38,7 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
 
     return <Col className={props.className} data-targetHeight={(headRef.current?.offsetHeight ?? 0) + (expanded ? expandedHeight : 0)}>
         <div className="row collapsible-head" ref={headRef}>
-            <button className={classNames("w-100 d-flex align-items-center p-3 bg-white text-start", {"ps-4": props.asSubList})} onClick={toggle}>
+            <button className={classNames("w-100 d-flex align-items-center p-3 text-start", {"bg-white": isAda, "bg-transparent": isPhy, "ps-4": props.asSubList})} onClick={toggle}>
                 {title && <span>{title}</span>}
                 <Spacer/>
                 {(props.numberSelected ?? 0) > 0

public/assets/phy/icons/redesign/checkbox-fg.svg

@@ -66,13 +66,13 @@ export default function LLMFreeTextQuestionFeedbackView({validationResponse, has
                     <ul className="no-bullet px-2 mb-4">
                         <li>
                             <StyledCheckbox
-                                id="disagree"  label={<p>Disagree</p>} className='"mb-4'
+                                id="disagree"  label={<p>Disagree</p>}
                                 checked={feedback.disagree} onChange={() => setFeedback({...noFeedback, disagree: !feedback.disagree})}
                             />
                         </li>
                         <li>
                             <StyledCheckbox
-                                id="partlyAgree" label={<p>Partly agree</p>} className='"mb-4'
+                                id="partlyAgree" label={<p>Partly agree</p>}
                                 checked={feedback.partlyAgree} onChange={() => setFeedback({...noFeedback, partlyAgree: !feedback.partlyAgree})}
                             />
                         </li>

public/assets/phy/icons/redesign/checkbox-partial-alt-fg.svg

@@ -74,6 +74,7 @@ export interface TitleIconProps {
 export interface PageTitleProps {
     currentPageTitle: string;
     subTitle?: string;
+    description?: string;
     disallowLaTeX?: boolean;
     help?: ReactElement;
     className?: string;
@@ -82,7 +83,7 @@ export interface PageTitleProps {
     preview?: boolean;
     icon?: TitleIconProps;
 }
-export const PageTitle = ({currentPageTitle, subTitle, disallowLaTeX, help, className, audienceViews, modalId, preview, icon}: PageTitleProps) => {
+export const PageTitle = ({currentPageTitle, subTitle, description, disallowLaTeX, help, className, audienceViews, modalId, preview, icon}: PageTitleProps) => {
     const dispatch = useAppDispatch();
     const openModal = useAppSelector((state: AppState) => Boolean(state?.activeModals?.length));
     const headerRef = useRef<HTMLHeadingElement>(null);
@@ -119,13 +120,18 @@ export const PageTitle = ({currentPageTitle, subTitle, disallowLaTeX, help, clas
         }));
     }
 
-    return <h1 id="main-heading" tabIndex={-1} ref={headerRef} className={classNames("h-title h-secondary d-sm-flex", {"align-items-center py-4": isPhy}, className)}>
-        {icon && (
-            icon.type === "img" ? <img src={icon.icon} alt="" className="me-3"/> 
-                : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject}/> : undefined)}
-        <div className="me-auto" data-testid={"main-heading"}>
-            {formatPageTitle(currentPageTitle, disallowLaTeX)}
-            {subTitle && <span className="h-subtitle d-none d-sm-block">{subTitle}</span>}
+    return <h1 id="main-heading" tabIndex={-1} ref={headerRef} className={classNames("h-title h-secondary d-sm-flex", {"align-items-center py-4 mb-0": isPhy}, className)}>
+        <div className="me-auto">
+            <div className="d-sm-flex align-items-center">
+                {icon && (
+                    icon.type === "img" ? <img src={icon.icon} alt="" className="me-3"/> 
+                        : icon.type === "hex" ? <PhyHexIcon icon={icon.icon} subject={icon.subject}/> : undefined)}
+                <div className="me-auto" data-testid={"main-heading"}>
+                    {formatPageTitle(currentPageTitle, disallowLaTeX)}
+                    {subTitle && <span className="h-subtitle d-none d-sm-block">{subTitle}</span>}
+                </div>
+            </div>
+            {description && <div className="h-description">{description}</div>}
         </div>
         <Helmet>
             <meta property="og:title" content={currentPageTitle} />

public/assets/phy/icons/redesign/checkbox-partial-fg.svg

@@ -3,8 +3,7 @@ import { selectors, useAppSelector, useGetGroupsQuery, useGetMySetAssignmentsQue
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Card, Col, Row } from 'reactstrap';
 import { Link } from 'react-router-dom';
-import { isDefined, isLoggedIn, isTutorOrAbove, Subject, useDeviceSize } from '../../services';
-import { BookInfo, isaacBooks } from './modals/IsaacBooksModal';
+import { BookInfo, ISAAC_BOOKS, isDefined, isLoggedIn, isTutorOrAbove, Subject, useDeviceSize } from '../../services';
 import { AssignmentDTO, RegisteredUserDTO } from '../../../IsaacApiTypes';
 import { GroupSelector } from '../pages/Groups';
 import { StyledDropdown } from './inputs/DropdownInput';
@@ -141,7 +140,7 @@ const BooksPanel = () => {
             </StyledDropdown>
         </div>
         <Row className="row-cols-3 row-cols-md-4 row-cols-lg-8 row-cols-xl-2 row-cols-xxl-3 flex-nowrap book-panel">
-            {isaacBooks.filter(book => book.subject === subject || subject === "all")
+            {ISAAC_BOOKS.filter(book => book.subject === subject || subject === "all")
                 .map((book) =>
                     <Col key={book.title} className="mb-2 me-1 p-0">
                         <BookCard {...book}/>

public/assets/phy/icons/redesign/checkbox-selected-bg.svg

@@ -54,7 +54,7 @@ type TitleAndBreadcrumbProps = BreadcrumbTrailProps & PageTitleProps & {
     breadcrumbTitleOverride?: string;
     children?: ReactElement | boolean;
 };
-export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride, currentPageTitle, subTitle, disallowLaTeX, className, audienceViews, help, collectionType, intermediateCrumbs, preview, icon}: TitleAndBreadcrumbProps) => {
+export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride, currentPageTitle, subTitle, description, disallowLaTeX, className, audienceViews, help, collectionType, intermediateCrumbs, preview, icon}: TitleAndBreadcrumbProps) => {
     return <div className={classNames(className, {"title-breadcrumb-container": isPhy, "pt-4 pt-md-5": isAda})}>
         {isPhy && <div className="title-graphics"/>}
         <BreadcrumbTrail
@@ -64,7 +64,7 @@ export const TitleAndBreadcrumb = ({modalId, children, breadcrumbTitleOverride,
         />
         {children}
         <PageTitle
-            modalId={modalId} subTitle={subTitle}
+            modalId={modalId} subTitle={subTitle} description={description}
             disallowLaTeX={disallowLaTeX} audienceViews={audienceViews}
             currentPageTitle={currentPageTitle} help={help}
             preview={preview} icon={icon}

public/assets/phy/icons/redesign/checkbox-selected-fg.svg

@@ -4,17 +4,18 @@ import {Link} from "react-router-dom";
 import {AugmentedEvent} from "../../../../IsaacAppTypes";
 import {DateString} from "../DateString";
 import {formatEventCardDate, siteSpecific} from "../../../services";
-import { Card, CardImg, CardBody, CardTitle, Badge, CardText } from "reactstrap";
+import { Card, CardImg, CardBody, CardTitle, Badge, CardText, CardProps } from "reactstrap";
 import { Spacer } from "../Spacer";
+import classNames from "classnames";
 
-export const PhysicsEventCard = ({event}: {event: AugmentedEvent}) => {
+export const PhysicsEventCard = ({event, ...rest}: {event: AugmentedEvent} & CardProps) => {
     const {id, title, subtitle, eventThumbnail, location, date} = event;
 
     const isVirtualEvent = event.tags?.includes("virtual");
     const isTeacherEvent = event.tags?.includes("teacher") && !event.tags?.includes("student");
     const isStudentEvent = event.tags?.includes("student") && !event.tags?.includes("teacher");
 
-    return <Card className="pod">
+    return <Card {...rest} className={classNames("pod", rest.className)}>
         {eventThumbnail &&
             <a className={"pod-img event-pod-img"} href={`/events/${id}`}>
                 <CardImg aria-hidden={true} top src={eventThumbnail.src} alt={"" /* Decorative image, should be hidden from screenreaders */} />